fix(spinner): centering problems (#791)

* fix: centering problems * fix: unit testing failure * fix: vertical spinner problems
telekom · Jan 13, 2022 · 8f84642 · 8f84642
1 parent 09cc058
commit 8f84642
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 38 deletions.
diff --git a/...ages/components/src/components/loading-spinner/__snapshots__/loading-spinner.spec.ts.snap b/...ages/components/src/components/loading-spinner/__snapshots__/loading-spinner.spec.ts.snap
@@ -15,7 +15,7 @@ exports[`LoadingSpinner should match snapshot 1`] = `
       <div aria-live="polite" class="sr-only" id="spinner-label-1">
         Loading
       </div>
-      <div aria-hidden="true" class="spinner__text" part="text"></div>
+      <div></div>
     </div>
   </mock:shadow-root>
 </scale-loading-spinner>

diff --git a/packages/components/src/components/loading-spinner/loading-spinner.css b/packages/components/src/components/loading-spinner/loading-spinner.css
@@ -11,8 +11,6 @@
   --font-weight: var(--scl-font-weight-bold);
   --font-size: var(--scl-font-size-16);
 
-  --spacing: var(--scl-spacing-8);
-
   --color-circle-primary: var(--scl-color-primary);
   --color-circle-primary-inner: var(--scl-color-grey-20);
   --color-text-primary: var(--scl-color-grey-60);
@@ -55,35 +53,41 @@
 
 .spinner.spinner--alignment-horizontal.spinner--size-small .spinner__text {
   line-height: var(--line-height-size-small);
+  padding-left: 12px;
 }
 
 .spinner.spinner--alignment-horizontal.spinner--size-large .spinner__text {
   line-height: var(--line-height-size-large);
   margin-top: 5px;
+  padding-left: 12px;
 }
 
 .spinner.spinner--alignment-vertical .spinner__text {
   margin-top: var(--spacing);
 }
 
 .spinner.spinner--alignment-vertical.spinner--size-small .spinner__container {
-  height: 24px;
-  padding-bottom: 5px;
+  height: 28px;
+  width: 28px;
+  padding-bottom: 4px;
 }
 
 .spinner.spinner--alignment-vertical.spinner--size-large .spinner__container {
-  height: 48px;
-  padding-bottom: 5px;
+  height: 56px;
+  width: 56px;
+  padding-bottom: 4px;
 }
 
 .spinner.spinner--alignment-horizontal.spinner--size-small .spinner__container {
-  height: 24px;
-  padding-right: 30px;
+  height: 28px;
+  width: 28px;
+  text-align: left;
 }
 
 .spinner.spinner--alignment-horizontal.spinner--size-large .spinner__container {
-  height: 48px;
-  padding-right: 60px;
+  height: 56px;
+  width: 56px;
+  text-align: left;
 }
 
 .spinner .spinner__container .spinner__circle {
@@ -101,35 +105,11 @@
   height: var(--size-outer-small);
 }
 
-.spinner.spinner.spinner--alignment-vertical
-  .spinner__container
-  .spinner__circle-background {
-  margin-left: -15px;
-}
-
 .spinner.spinner--size-large .spinner__container .spinner__circle-background {
   width: var(--size-outer-large);
   height: var(--size-outer-large);
 }
 
-.spinner.spinner--alignment-vertical.spinner--size-large
-  .spinner__container
-  .spinner__circle-background {
-  margin-left: -30px;
-}
-
-.spinner.spinner.spinner--alignment-vertical
-  .spinner__container
-  .spinner__circle {
-  margin-left: -15px;
-}
-
-.spinner.spinner--alignment-vertical.spinner--size-large
-  .spinner__container
-  .spinner__circle {
-  margin-left: -30px;
-}
-
 .spinner.spinner--size-large .spinner__container .spinner__circle {
   width: var(--size-inner-large);
   height: var(--size-inner-large);

diff --git a/packages/components/src/components/loading-spinner/loading-spinner.tsx b/packages/components/src/components/loading-spinner/loading-spinner.tsx
@@ -51,9 +51,13 @@ export class LoadingSpinner {
           <div class="sr-only" aria-live="polite" id={`spinner-label-${i}`}>
             {this.text || 'Loading'}
           </div>
-          <div part="text" class="spinner__text" aria-hidden="true">
-            {this.text}
-          </div>
+          {this.text ? (
+            <div part="text" class="spinner__text" aria-hidden="true">
+              {this.text}
+            </div>
+          ) : (
+            <div></div>
+          )}
         </div>
       </Host>
     );