fix: remove overflow tailwind classes from sandbox, fix #351

histoire-dev · Nov 11, 2022 · a326a6a · a326a6a
1 parent 875cf7d
commit a326a6a
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 7 deletions.
diff --git a/examples/nuxt3/cypress/e2e/render-story.cy.js b/examples/nuxt3/cypress/e2e/render-story.cy.js
@@ -17,6 +17,6 @@ describe('Story render', () => {
 
   it('should render NuxtLink', () => {
     cy.visit('/story/components-basebuttonlink-story-vue?variantId=_default')
-    cy.get('.__histoire-sandbox a').contains('Hello world')
+    cy.get('.histoire-generic-render-story a').contains('Hello world')
   })
 })
diff --git a/examples/vue3/cypress/integration/toolbar-background.js b/examples/vue3/cypress/integration/toolbar-background.js
@@ -50,7 +50,7 @@ describe('background color', () => {
     cy.get('[data-test-id="background-popper"]').should('be.visible').find('button').should('have.length', 6).each(($el, index) => {
       cy.wrap($el).click()
       cy.get('[data-test-id="responsive-preview-bg"]').should('have.css', 'background-color', backgroundColorShouldBe[index])
-      cy.get('.__histoire-sandbox .text').should('have.css', 'color', contrastColorShouldBe[index])
+      cy.get('.histoire-generic-render-story .text').should('have.css', 'color', contrastColorShouldBe[index])
       cy.get('[data-test-id="toolbar-background"]').click()
     })
   })

diff --git a/packages/histoire-app/src/app/components/story/GenericRenderStory.vue b/packages/histoire-app/src/app/components/story/GenericRenderStory.vue
@@ -29,7 +29,7 @@ watchEffect(async () => {
   <component
     :is="mountComponent"
     v-if="mountComponent"
-    class="histoire-generic-render-story"
+    class="histoire-generic-render-story htw-sandbox-contain"
     :story="story"
     v-bind="$attrs"
   />

diff --git a/packages/histoire-app/src/app/style/main.pcss b/packages/histoire-app/src/app/style/main.pcss
@@ -64,7 +64,7 @@ button {
     }
   }
 
-  .__histoire-sandbox {
+  .htw-sandbox-contain {
     contain: content;
   }
 

diff --git a/packages/histoire-app/src/app/style/sandbox.css b/packages/histoire-app/src/app/style/sandbox.css
@@ -17,3 +17,7 @@ html {
 .htw-sandbox-hidden {
   display: none;
 }
+
+.htw-sandbox-contain {
+  contain: content;
+}
diff --git a/packages/histoire-plugin-vue/src/client/app/RenderStory.ts b/packages/histoire-plugin-vue/src/client/app/RenderStory.ts
@@ -240,7 +240,6 @@ export default _defineComponent({
   render () {
     return _h('div', {
       ref: 'sandbox',
-      class: '__histoire-sandbox htw-overflow-auto',
     })
   },
 })
diff --git a/packages/histoire-plugin-vue2/src/client/app/RenderStory.ts b/packages/histoire-plugin-vue2/src/client/app/RenderStory.ts
@@ -251,7 +251,6 @@ export default _defineComponent({
   render () {
     return _h('div', {
       ref: 'sandbox',
-      class: '__histoire-sandbox htw-overflow-auto',
     })
   },
 })
diff --git a/packages/histoire/src/node/builtin-plugins/vanilla-support/RenderStory.ts b/packages/histoire/src/node/builtin-plugins/vanilla-support/RenderStory.ts
@@ -160,7 +160,6 @@ export default _defineComponent({
   render () {
     return _h('div', {
       ref: 'sandbox',
-      class: '__histoire-sandbox htw-overflow-auto',
     })
   },
 })