fix(core/spinner): move styling into shadow dom (#1541)

Co-authored-by: Daniel Leroux <[email protected]>

.changeset/nice-pianos-serve.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/spinner): move styling into shadow dom

packages/core/src/components/icon-button/icon-button-mixin.scss

@@ -63,25 +63,4 @@
   @include icon-button-size('12', 1rem);
   @include icon-button-size('16', 1.5rem);
   @include icon-button-size('32', 2rem);
-
-  :host(.btn-icon-12) {
-    ix-spinner {
-      height: 12px;
-      width: 12px;
-    }
-  }
-
-  :host(.btn-icon-16) {
-    ix-spinner {
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  :host(.btn-icon-32) {
-    ix-spinner {
-      height: 24px;
-      width: 24px;
-    }
-  }
 }

packages/core/src/components/spinner/spinner.scss

@@ -9,12 +9,14 @@
 
 @import 'mixins/shadow-dom/component';
 
-@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {
-  :host(.#{$host-class}) {
+@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {
+  :host {
     @include ix-component;
     display: block;
     position: relative;
+  }
 
+  .#{$size-name} {
     width: $size;
     height: $size;
     min-width: $size;
@@ -76,7 +78,7 @@
     }
   }
 
-  :host(.#{$host-class})::after {
+  .#{$size-name}::after {
     content: '';
     box-sizing: border-box;
     position: absolute;
@@ -87,7 +89,7 @@
     animation: clipMask 3s linear infinite;
   }
 
-  :host(:not(.hide-track)):host(.#{$host-class})::before {
+  .#{$size-name}:not(.hide-track)::before {
     content: '';
     box-sizing: border-box;
     position: absolute;
@@ -96,17 +98,17 @@
     border: $track-size solid var(--theme-color-ghost--hover);
   }
 
-  :host(.primary)::after {
+  .primary::after {
     border-color: var(--theme-color-dynamic);
   }
 
-  :host(.primary)::before {
+  .primary::before {
     border-color: var(--theme-color-ghost--hover);
   }
 }
 
-@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);
-@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);
-@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);
-@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);
-@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);
+@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);
+@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);
+@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);
+@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);
+@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);

packages/core/src/components/spinner/spinner.tsx

@@ -35,17 +35,15 @@ export class Spinner {
 
   render() {
     return (
-      <Host
-        class={{
-          primary: this.variant === 'primary',
-          'xx-small': this.size === 'xx-small',
-          'x-small': this.size === 'x-small',
-          small: this.size === 'small',
-          medium: this.size === 'medium',
-          large: this.size === 'large',
-          'hide-track': this.hideTrack,
-        }}
-      ></Host>
+      <Host>
+        <div
+          class={{
+            primary: this.variant === 'primary',
+            [this.size]: true,
+            'hide-track': this.hideTrack,
+          }}
+        ></div>
+      </Host>
     );
   }
 }

packages/core/src/components/upload/upload.scss

@@ -107,8 +107,6 @@
 
       > ix-spinner {
         margin-inline-end: $small-space;
-        height: $large-space;
-        width: $large-space;
       }
 
       > ix-icon {