fix: header border issue introduced with ai slug (carbon-design-syste…

…m#4385)
paul-balchin-ibm · Feb 22, 2024 · 5985320 · 5985320
1 parent 2ef676c
commit 5985320
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 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
@@ -2840,10 +2840,12 @@ p.c4p--about-modal__copyright-text:first-child {
   padding: 1.5rem 2rem 0;
 }
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header {
-  padding-right: 5rem;
+  padding-inline-end: 5rem;
 }
 .c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
-  margin-right: 3rem;
+  /* spacing 11 plus additional space for slug/close */
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  padding-inline-end: calc(8rem);
 }
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
   max-width: 80%;

diff --git a/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss b/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss
@@ -238,12 +238,14 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}--wide
     .#{$block-class}__header.#{$block-class}__header--with-close-icon,
   &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header {
-    padding-right: $spacing-11;
+    padding-inline-end: $spacing-11;
   }
 
   &.#{$block-class}--wide.#{$block-class}--has-slug
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
-    margin-right: $spacing-09;
+    /* spacing 11 plus additional space for slug/close */
+    /* stylelint-disable-next-line carbon/layout-token-use */
+    padding-inline-end: calc(#{$spacing-11 + $spacing-09});
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {