fix(styles): select's, step-input's button border styles in hc [ci vi…

…sual] (#4198) * fix(styles): select's, step-input's button border [ci visual] * fix(styles): self containing rules issues, naming issues [ci visual]
SAP · Jan 24, 2023 · 52a719c · 52a719c
1 parent 8eb6c66
commit 52a719c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 29 deletions.
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
@@ -233,6 +233,32 @@ $fd-input-field-height--compact: 1.625rem;
   }
 }
 
+@mixin fd-input-group-button($selector, $first: true) {
+  #{$selector} {
+    @if $first {
+      @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder));
+
+      @include fd-hover() {
+        @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder_Active));
+      }
+
+      @include fd-active() {
+        @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder_Active));
+      }
+    } @else {
+      @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder));
+
+      @include fd-hover() {
+        @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active));
+      }
+
+      @include fd-active() {
+        @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active));
+      }
+    }
+  }
+}
+
 @mixin fd-input-group-button-overwrite() {
   $fd-input-group-button-states: (
     'success': (
@@ -257,35 +283,12 @@ $fd-input-field-height--compact: 1.625rem;
     )
   );
 
-  .#{$block}__addon {
-    &:first-child {
-      .#{$block}__button {
-        @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder));
+  @include fd-input-group-button(".#{$block}__button:first-child");
+  @include fd-input-group-button(".#{$block}__button:not(:first-child)", false);
 
-        @include fd-hover() {
-          @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder_Active));
-        }
-
-        @include fd-active() {
-          @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder_Active));
-        }
-      }
-    }
-
-    &:not(:first-child) {
-      .#{$block}__button {
-        @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder));
-
-        @include fd-hover() {
-          @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active));
-        }
-
-        @include fd-active() {
-          @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active));
-        }
-      }
-    }
-  }
+  // To support `fd-input-group__addon` and avoid breaking changes
+  @include fd-input-group-button(".#{$block}__addon:first-child .#{$block}__button");
+  @include fd-input-group-button(".#{$block}__addon:not(:first-child) .#{$block}__button", false);
 
   .#{$block}__button {
     @include fd-ellipsis();

diff --git a/packages/styles/src/select.scss b/packages/styles/src/select.scss
@@ -18,6 +18,13 @@ $fd-select-padding-x-compact: 0.5rem;
     box-shadow: var(--fdInput_Group_Button_Box_Shadow);
     @content;
   }
+
+  @include fd-rtl() {
+    .#{$block}__button {
+      border-left-color: transparent;
+      border-right-color: $borderLeft;
+    }
+  }
 }
 
 @mixin fd-select-states-overwrite() {
@@ -62,6 +69,13 @@ $fd-select-padding-x-compact: 0.5rem;
           box-shadow: map_get($set-props, "hoverBoxShadow");
         }
 
+        @include fd-rtl() {
+          .#{$block}__button {
+            border-left-color: transparent;
+            border-right-color: var(--fdSelect_Expanded_Button_Border_Left_Color);
+          }
+        }
+
         @include fd-focus() {
           box-shadow: none;
         }
@@ -97,7 +111,6 @@ $fd-select-padding-x-compact: 0.5rem;
 
     .#{$block}__button {
       @include fd-set-margin-left(0.25rem);
-      @include fd-input-group-button-overwrite();
     }
 
     @include fd-readonly() {