From 7347c4099354ffd3c0c24c7826d63b012e7007ca Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Tue, 5 Nov 2024 10:18:23 +0100
Subject: [PATCH] fix(core/spinner): move styling into shadow dom (#1541)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
---
 .changeset/nice-pianos-serve.md               |  5 ++++
 .../icon-button/icon-button-mixin.scss        | 21 ----------------
 .../core/src/components/spinner/spinner.scss  | 24 ++++++++++---------
 .../core/src/components/spinner/spinner.tsx   | 20 +++++++---------
 .../core/src/components/upload/upload.scss    |  2 --
 5 files changed, 27 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/nice-pianos-serve.md

diff --git a/.changeset/nice-pianos-serve.md b/.changeset/nice-pianos-serve.md
new file mode 100644
index 00000000000..e61228beba0
--- /dev/null
+++ b/.changeset/nice-pianos-serve.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/spinner): move styling into shadow dom
diff --git a/packages/core/src/components/icon-button/icon-button-mixin.scss b/packages/core/src/components/icon-button/icon-button-mixin.scss
index 5e87c89f686..12488fb1014 100644
--- a/packages/core/src/components/icon-button/icon-button-mixin.scss
+++ b/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;
-    }
-  }
 }
diff --git a/packages/core/src/components/spinner/spinner.scss b/packages/core/src/components/spinner/spinner.scss
index 7e345ab7995..d29ded37706 100644
--- a/packages/core/src/components/spinner/spinner.scss
+++ b/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);
diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx
index 17433330d10..441eae2beed 100644
--- a/packages/core/src/components/spinner/spinner.tsx
+++ b/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>
     );
   }
 }
diff --git a/packages/core/src/components/upload/upload.scss b/packages/core/src/components/upload/upload.scss
index 5297144d4f4..2af294d38d9 100644
--- a/packages/core/src/components/upload/upload.scss
+++ b/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 {