fix(side panel in react): slideIn not working as expected (carbon-des…

…ign-system#6501)
lee-chase · Nov 26, 2024 · 9d07dab · 9d07dab
1 parent f716852
commit 9d07dab
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx b/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx
@@ -596,17 +596,17 @@ const SlideInTemplate = ({ actions, aiLabel, slug, ...args }) => {
 
   return (
     <>
-      <Grid id="ibm-products-page-content" className={`${prefix}grid`}>
-        <Column lg={16} md={8} sm={4}>
+      <div class={`${prefix}story-container`}>
+        <div class={`${prefix}story-content`} id="ibm-products-page-content">
           <Button
             ref={buttonRef}
             onClick={() => setOpen(!open)}
             className={`${prefix}toggle`}
           >
             {open ? 'Close side panel' : 'Open side panel'}
           </Button>
-        </Column>
-      </Grid>
+        </div>
+      </div>
       <SidePanel
         {...args}
         open={open}

diff --git a/packages/ibm-products/src/components/SidePanel/_storybook-styles.scss b/packages/ibm-products/src/components/SidePanel/_storybook-styles.scss
@@ -59,4 +59,22 @@ $story-prefix: side-panel-stories__;
   height: 100%;
 }
 
+.#{$story-prefix}story-container {
+  position: fixed;
+  display: grid;
+  block-size: 100vh;
+  grid-template-rows: 3rem 1fr;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.#{$story-prefix}story-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 100vh;
+}
+
 @include side-panel-decorator($story-prefix);