fix: addressing review comments

carbon-design-system · Jan 9, 2025 · f486c73 · f486c73
1 parent ac6bc74
commit f486c73
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/packages/react/src/components/Button/_button.scss b/packages/react/src/components/Button/_button.scss
@@ -69,7 +69,7 @@
   .#{$iot-prefix}--btn:not(.#{$prefix}--btn--icon-only) {
     text-align: right;
     /* stylelint-disable-next-line declaration-property-unit-disallowed-list, copied from carbon and inverted */
-    padding: 0.875rem 15px 0.875rem 63px;
+    // padding: 0.875rem 15px 0.875rem 63px; // Commented out since carbon handles this on their own
   }
 
   .#{$prefix}--btn .#{$prefix}--btn__icon {

diff --git a/packages/react/src/components/Header/Header.story.jsx b/packages/react/src/components/Header/Header.story.jsx
@@ -277,7 +277,7 @@ export const HeaderComponentSubtitle = () => (
       subtitle={
         <div>
           Monitor
-          <span style={{ marginLeft: '1rem' }}>
+          <span style={{ marginInlineStart: '1rem' }}>
             <Tag>Admin Mode</Tag>
           </span>
         </div>

diff --git a/packages/react/src/components/SuiteHeader/SuiteHeader.jsx b/packages/react/src/components/SuiteHeader/SuiteHeader.jsx
@@ -463,7 +463,7 @@ const SuiteHeader = ({
                 appName={suiteName}
                 subtitle={
                   appNameComponent || currentWorkspaceComponent || extraContentComponent ? (
-                    <div>
+                    <div dir="auto">
                       {currentWorkspaceComponent}
                       {appNameComponent}
                       {extraContentComponent}

diff --git a/packages/react/src/components/SuiteHeader/_suite-header.scss b/packages/react/src/components/SuiteHeader/_suite-header.scss
@@ -137,7 +137,8 @@ html[dir='rtl'] {
       @include type-style('heading-compact-01');
       display: flex;
       align-items: center;
-      padding: $spacing-05 $spacing-05 0;
+      padding-inline: $spacing-05;
+      padding-block: $spacing-05 0;
       text-decoration: none;
       color: $text-primary;
     }
@@ -170,7 +171,8 @@ html[dir='rtl'] {
       padding: 0;
       height: 0;
       border-bottom: 1px solid $layer-accent-01;
-      margin: 0 $spacing-05 0 $spacing-05;
+      margin-block: 0;
+      margin-inline: $spacing-05;
     }
   }
 
@@ -184,7 +186,8 @@ html[dir='rtl'] {
   }
 
   &--no-app {
-    padding: $spacing-10 $spacing-07 $spacing-05; // $layout-05
+    padding-block: $spacing-10 $spacing-05;
+    padding-inline: $spacing-07;
     .bee-icon-container {
       display: block;
       svg {
@@ -207,7 +210,8 @@ html[dir='rtl'] {
       @include type-style('body-compact-01');
       text-decoration: none;
       padding: 0;
-      margin: $spacing-05 0;
+      margin-block: $spacing-05;
+      margin-inline: 0;
     }
   }
 }
@@ -221,14 +225,16 @@ html[dir='rtl'] {
     @include type-style('body-compact-01');
     display: flex;
     align-items: center;
-    padding: $spacing-05 $spacing-05 $spacing-03;
+    padding-block: $spacing-05 $spacing-03;
+    padding-inline: $spacing-05;
 
     text-decoration: none;
     color: $text-inverse; //$inverse-01;
   }
 
   &--divider {
-    margin: $spacing-03 0 0 0;
+    margin-block: $spacing-03 0;
+    margin-inline: 0;
     background-color: $button-secondary;
   }
 
@@ -278,7 +284,8 @@ html[dir='rtl'] {
   }
 
   &--no-app {
-    padding: $layout-05 $spacing-07 $spacing-05;
+    padding-block: $layout-05 $spacing-05;
+    padding-inline: $spacing-07;
     .bee-icon-container {
       display: block;
       svg {
@@ -302,7 +309,8 @@ html[dir='rtl'] {
       @include type-style('body-compact-01');
       text-decoration: none;
       padding: 0;
-      margin: $spacing-05 0;
+      margin-block: $spacing-05;
+      margin-inline: 0;
       color: $link-inverse; //$inverse-link;
     }
   }
@@ -416,7 +424,8 @@ html[dir='rtl'] {
     padding: 0;
     height: 0;
     border-bottom: 1px solid $button-secondary-hover;
-    margin: 0 $spacing-05 0 $spacing-05;
+    margin-block: 0;
+    margin-inline: $spacing-05;
   }
 
   &--logout {