From f486c73a5fbee50ccff9513e7a2d5c672de54d35 Mon Sep 17 00:00:00 2001
From: Hector Davis <hectord@br.ibm.com>
Date: Wed, 8 Jan 2025 14:46:27 -0300
Subject: [PATCH] fix: addressing review comments

---
 .../react/src/components/Button/_button.scss  |  2 +-
 .../src/components/Header/Header.story.jsx    |  2 +-
 .../components/SuiteHeader/SuiteHeader.jsx    |  2 +-
 .../components/SuiteHeader/_suite-header.scss | 27 ++++++++++++-------
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/Button/_button.scss b/packages/react/src/components/Button/_button.scss
index 77d20dd482..b9b253a79b 100644
--- 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
index 4a7e7db699..869a612a83 100644
--- 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
index 0ba0c8663f..d61da218e5 100644
--- 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
index 1233b7d2e5..790544cda3 100644
--- 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 {