fix: simplified icon style selector of Button component

City-of-Helsinki · Oct 22, 2024 · 414358d · 414358d
1 parent 278d977
commit 414358d
Showing 1 changed file with 20 additions and 41 deletions.
diff --git a/packages/core/src/components/button/_button-mixin.scss b/packages/core/src/components/button/_button-mixin.scss
@@ -115,29 +115,9 @@
 }
 
 @mixin icon {
- & .hds-icon {
- flex-shrink: 0;
- height: var(--computed-icon-size);
- width: var(--computed-icon-size);
- }
-
- /* start-side icon */
- & .hds-icon:first-child:not(:last-child) {
- margin-left: var(--icon-reposition);
- }
-
- /* end-side icon */
- & .hds-icon:last-child:not(:first-child) {
- margin-right: var(--icon-reposition);
- }
-}
-
-@mixin iconReact {
- & {
- flex-shrink: 0;
- height: var(--computed-icon-size);
- width: var(--computed-icon-size);
- }
+ flex-shrink: 0;
+ height: var(--computed-icon-size);
+ width: var(--computed-icon-size);
 
  /* start-side icon */
  &:first-child:not(:last-child) {
@@ -274,7 +254,6 @@
  --color: var(--color-coat-of-arms);
 }
 
-
 /* black */
 
 @mixin primaryThemeBlack {
@@ -346,12 +325,24 @@
  }
 
  @if $all or $icon {
- @include BemUtil.block($className, if($override, true, false), $react) {
- @if $react {
- @include iconReact;
- } @else {
+ @if $react {
+ @include BemUtil.unscopedElement($className, 'icon', true) {
  @include icon;
  }
+ } @else {
+ $buttonClass: $className;
+ $iconClass: 'icon';
+
+ @if not($override) {
+ $buttonClass: #{'hds-' + $buttonClass};
+ $iconClass: #{'hds-' + $iconClass};
+ }
+
+ @at-root {
+ .#{$buttonClass} .#{$iconClass} {
+ @include icon;
+ }
+ }
  }
  }
 
@@ -438,16 +429,4 @@
  @include supplementaryThemeBlack;
  }
  }
-}
-
-
-
-
-
-
-
-
-
-
-
-
+}