fix: side panel slug and close position (#4426)

carbon-design-system · Feb 26, 2024 · 90d07ed · 90d07ed
1 parent 67c4123
commit 90d07ed
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
@@ -2563,11 +2563,17 @@ p.c4p--about-modal__copyright-text:first-child {
   height: 2.5rem;
 }
 .c4p--side-panel .c4p--side-panel__slug-and-close {
-  position: absolute;
+  position: fixed;
   z-index: 10; /* must be higher than title container border bottom */
   top: 0;
   right: 0;
   display: flex;
+  /* stylelint-disable-next-line max-nesting-depth */
+}
+@media (prefers-reduced-motion) {
+  .c4p--side-panel .c4p--side-panel__slug-and-close {
+    position: absolute;
+  }
 }
 .c4p--side-panel .c4p--side-panel__actions-container {
   position: sticky;

diff --git a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss
@@ -356,11 +356,16 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__slug-and-close {
-    position: absolute;
+    position: fixed;
     z-index: 10; /* must be higher than title container border bottom */
     top: 0;
     right: 0;
     display: flex;
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    @media (prefers-reduced-motion) {
+      position: absolute;
+    }
   }
 
   .#{$block-class}__actions-container {