fix(styles): self containing rules issues, naming issues [ci visual]

SAP · Jan 23, 2023 · d6be5de · d6be5de
1 parent 56df400
commit d6be5de
Showing 1 changed file with 23 additions and 25 deletions.
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
@@ -233,30 +233,28 @@ $fd-input-field-height--compact: 1.625rem;
   }
 }
 
-@mixin _fd-input-group-button-first-child($selector) {
+@mixin fd-input-group-button($selector, $first: true) {
   #{$selector} {
-    @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder));
+    @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));
-    }
-  }
-}
+      @include fd-hover() {
+        @include fd-set-border-right(var(--fdInputGroup_ControlButton_SideBorder_Active));
+      }
 
-@mixin _fd-input-group-button-last-child($selector) {
-  #{$selector} {
-    @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder));
+      @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-hover() {
+        @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active));
+      }
 
-    @include fd-active() {
-      @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active));
+      @include fd-active() {
+        @include fd-set-border-left(var(--fdInputGroup_ControlButton_SideBorder_Active));
+      }
     }
   }
 }
@@ -285,14 +283,14 @@ $fd-input-field-height--compact: 1.625rem;
     )
   );
 
-  @include _fd-input-group-button-first-child(".#{$fd-namespace}-button:first-child:not(.#{$fd-namespace}-input-group__button)");
-  @include _fd-input-group-button-last-child(".#{$fd-namespace}-button:not(:first-child, .#{$fd-namespace}-input-group__button)");
+  @include fd-input-group-button(".#{$block}__button:first-child");
+  @include fd-input-group-button(".#{$block}__button:not(:first-child)", false);
 
   // To support `fd-input-group__addon` and avoid breaking changes
-  @include _fd-input-group-button-first-child(".#{$block}__addon:first-child .#{$fd-namespace}-button");
-  @include _fd-input-group-button-last-child(".#{$block}__addon:not(:first-child) .#{$fd-namespace}-button");
+  @include fd-input-group-button(".#{$block}__addon:first-child .#{$block}__button");
+  @include fd-input-group-button(".#{$block}__addon:not(:first-child) .#{$block}__button", false);
 
-  .#{$fd-namespace}-button {
+  .#{$block}__button {
     @include fd-ellipsis();
 
     border: none;
@@ -322,7 +320,7 @@ $fd-input-field-height--compact: 1.625rem;
   @each $set-name, $set-props in $fd-input-group-button-states {
     &.is-#{$set-name} {
 
-      .#{$fd-namespace}-button {
+      .#{$block}__button {
         @include fd-hover() {
           box-shadow: map_get($set-props, "boxShadow");
         }