feat: group button fix

goatui · Jul 4, 2024 · 04d6e8f · 04d6e8f
1 parent cfdfc73
commit 04d6e8f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/components/informational/spinner/spinner.scss b/src/components/informational/spinner/spinner.scss
@@ -8,7 +8,14 @@
 }
 
 .spinner {
-  color: var(--goat-spinner-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .5rem;
+
+  &.has-content {
+    gap: 1rem;
+  }
 }
 
 .spinner__background {
@@ -27,16 +34,14 @@
 }
 
 .spinner__stroke {
+  color: var(--goat-spinner-color);
+  stroke: currentColor;
+  stroke-dashoffset: 75;
   stroke-dasharray: 360;
   stroke-linecap: butt;
   fill: rgba(0, 0, 0, 0);
 }
 
-.spinner__stroke {
-  stroke: currentColor;
-  stroke-dashoffset: 75;
-}
-
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -55,7 +60,7 @@
   80% {color:var(--color-secondary);}
 }
 
-:host(.rainbow) .spinner {
+:host(.rainbow) .spinner__stroke {
   color: var(--color-primary);
   animation-name: rainbow;
   animation-duration: 5s;

diff --git a/src/components/informational/spinner/spinner.tsx b/src/components/informational/spinner/spinner.tsx
@@ -28,7 +28,7 @@ export class Spinner {
    * The Icon size.
    * Possible values are: `"sm"`, `"md"`, `"lg"` and size in pixel. Defaults to `"md"`.
    */
-  @Prop() size: 'sm' | 'md' | 'lg' | string = 'md';
+  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' | string = 'md';
 
   @Prop() hideBackground: boolean = false;
 
@@ -50,7 +50,7 @@ export class Spinner {
   }
 
   componentDidLoad() {
-    this.slotHasContent = !!this.elm.querySelector('[slot="start"]');
+    this.slotHasContent = !!this.elm.querySelector('[slot]');
   }
 
   render() {
@@ -67,14 +67,16 @@ export class Spinner {
     return (
       <Host>
         <div
-          class={'spinner'}
-          style={{
-            width: this.getSize() + 'rem',
-            height: this.getSize() + 'rem',
-          }}
+          class={{ 'spinner': true, 'has-content': this.slotHasContent }}
           title={this.description}
         >
-          <div class={'spinner__container'}>
+          <div
+            class={'spinner__container'}
+            style={{
+              width: this.getSize() + 'rem',
+              height: this.getSize() + 'rem',
+            }}
+          >
             <svg
               viewBox={`0 0 ${
                 2 * (radius + strokeWidth + 5 * this.getSize())

diff --git a/src/components/primitive/button/button/button.scss b/src/components/primitive/button/button/button.scss
@@ -48,7 +48,9 @@ $inner-border-width: 0.0625;
     z-index: var(--z-index-button);
     background: transparent;
     padding: 0;
-    border: var(--goat-button-border-width) var(--goat-button-border-style) transparent;
+    border-width: var(--goat-button-border-width);
+    border-style: var(--goat-button-border-style);
+    border-color: transparent;
     border-radius: var(--goat-button-border-radius);
     outline: none;