feat: remove scroll lock on stories

solid-design-system · Jan 24, 2024 · 562ebae · 562ebae
1 parent 074c8ef
commit 562ebae
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/packages/components/.storybook/preview-head.html b/packages/components/.storybook/preview-head.html
@@ -112,7 +112,8 @@
   .mouseless,
   .mouseless:hover {
     cursor: none !important;
-    padding: 0.5rem; /* makes focus ring completely visible in Chromatic screenshots */
+    padding: 0.5rem;
+    /* makes focus ring completely visible in Chromatic screenshots */
   }
 
   .mouseless * {
@@ -122,4 +123,9 @@
   .sbdocs .sbdocs-content ol {
     list-style-type: decimal !important;
   }
-</style>
+
+  body.sd-scroll-lock {
+    padding-right: unset !important;
+    overflow: unset !important;
+  }
+</style>
diff --git a/packages/components/src/components/dialog/dialog.stories.ts b/packages/components/src/components/dialog/dialog.stories.ts
@@ -8,10 +8,6 @@ const { overrideArgs } = storybookHelpers('sd-dialog');
 const { argTypes, parameters } = storybookDefaults('sd-dialog');
 const { generateTemplate } = storybookTemplate('sd-dialog');
 
-/**
- * **Disclaimer** : Controls for `sd-dialog` are unavailable on this Docs page due to a [Storybook bug](https://github.com/storybookjs/storybook/issues/11908). Please use the individual feature stories to access these controls.
- */
-
 export default {
   title: 'Components/sd-dialog',
   component: 'sd-dialog',
@@ -38,7 +34,7 @@ export default {
     }
   ]),
   argTypes,
-  parameters: { ...parameters, docs: { story: { inline: false, height: '500px' } } },
+  parameters: { ...parameters, docs: { story: { height: '500px' } } },
   decorators: [withActions] as any
 };
 
@@ -126,14 +122,14 @@ export const NoCloseButton = {
 
 export const Scrolling = {
   render: (args: any) => {
-    return html` <div style="height: 40vh;">
+    return html` <div style="height: 100vh;">
       ${generateTemplate({
         args,
         constants: [
           {
             type: 'slot',
             name: 'default',
-            value: `<div class="slot slot--border slot--text" style="height:150vh; width: 100%; padding: 0 1rem; justify-content:start;">Scroll down and give it a try!</div>`
+            value: `<div class="slot slot--border slot--background slot--text" style="height:150vh; width: 100%; padding: 0 1rem; justify-content:start;">Scroll down and give it a try!</div>`
           }
         ]
       })}