fix: loading spinner design qa alignment (#1934)

telekom · Jun 6, 2023 · 3c98c26 · 3c98c26
1 parent 40bf169
commit 3c98c26
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 44 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
@@ -6,10 +6,10 @@ exports[`LoadingSpinner should match snapshot 1`] = `
     <div class="spinner spinner--alignment-horizontal spinner--size-small spinner--variant-primary" part="spinner alignment-horizontal variant-primary size-small">
       <div class="spinner__container" part="container">
         <svg aria-hidden="true" class="spinner__circle" viewBox="0 0 50 50">
-          <circle class="path" cx="25" cy="25" fill="none" r="20" stroke-width="4"></circle>
+          <circle class="path" cx="25" cy="25" fill="none" r="22.5" stroke-width="4"></circle>
         </svg>
         <svg aria-hidden="true" class="spinner__circle-background" viewBox="0 0 50 50">
-          <circle class="path" cx="25" cy="25" fill="none" r="20" stroke-width="4"></circle>
+          <circle class="path" cx="25" cy="25" fill="none" r="22.5" stroke-width="4"></circle>
         </svg>
       </div>
       <div aria-live="polite" class="sr-only" id="spinner-label-1">

diff --git a/packages/components/src/components/loading-spinner/loading-spinner.css b/packages/components/src/components/loading-spinner/loading-spinner.css
@@ -1,22 +1,24 @@
 :host {
   display: inline-flex;
-  --size-outer-small: 28px;
-  --size-outer-large: 56px;
-  --size-inner-small: 28px;
-  --size-inner-large: 56px;
+  --size-outer-small: 24px;
+  --size-outer-large: 48px;
+  --size-inner-small: 24px;
+  --size-inner-large: 48px;
 
   --line-height-size-small: 24px;
   --line-height-size-large: 48px;
 
-  --font-weight: var(--telekom-typography-font-weight-bold);
-  --font-size: var(--telekom-typography-font-size-body);
+  --font: var(--telekom-text-style-ui-bold);
 
   --color-circle-primary: var(--telekom-color-primary-standard);
   --color-circle-primary-inner: var(--telekom-color-ui-subtle);
   --color-text-primary: var(--telekom-color-text-and-icon-additional);
   --color-circle-white: var(--telekom-color-ui-base);
   --color-circle-white-inner: var(--telekom-color-ui-regular);
   --color-text-white: var(--telekom-color-text-and-icon-white-standard);
+
+  --spacing-vertical: var(--telekom-spacing-unit-x3);
+  --spacing-horizontal: var(--telekom-spacing-unit-x4);
 }
 
 .sr-only {
@@ -35,8 +37,7 @@
 }
 
 .spinner .spinner__text {
-  font-weight: var(--font-weight);
-  font-size: var(--font-size);
+  font: var(--telekom-text-style-ui-bold);
   color: var(--color-text-primary);
 }
 
@@ -47,46 +48,40 @@
 .spinner.spinner--alignment-horizontal .spinner__text {
   display: flex;
   align-self: center;
-  margin-left: var(--spacing);
-  margin-top: 3px;
+  margin-left: var(--spacing-horizontal);
 }
 
 .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);
+  margin-top: var(--spacing-vertical);
 }
 
 .spinner.spinner--alignment-vertical.spinner--size-small .spinner__container {
-  height: 28px;
-  width: 28px;
-  padding-bottom: 4px;
+  height: var(--size-inner-small);
+  width: var(--size-inner-small);
 }
 
 .spinner.spinner--alignment-vertical.spinner--size-large .spinner__container {
-  height: 56px;
-  width: 56px;
-  padding-bottom: 4px;
+  height: var(--size-outer-large);
+  width: var(--size-outer-large);
 }
 
 .spinner.spinner--alignment-horizontal.spinner--size-small .spinner__container {
-  height: 28px;
-  width: 28px;
+  height: var(--size-inner-small);
+  width: var(--size-inner-small);
   text-align: left;
 }
 
 .spinner.spinner--alignment-horizontal.spinner--size-large .spinner__container {
-  height: 56px;
-  width: 56px;
+  height: var(--size-outer-large);
+  width: var(--size-outer-large);
   text-align: left;
 }
 

diff --git a/packages/components/src/components/loading-spinner/loading-spinner.tsx b/packages/components/src/components/loading-spinner/loading-spinner.tsx
@@ -30,7 +30,7 @@ export class LoadingSpinner {
                 class="path"
                 cx="25"
                 cy="25"
-                r="20"
+                r="22.5"
                 fill="none"
                 stroke-width="4"
               ></circle>
@@ -44,7 +44,7 @@ export class LoadingSpinner {
                 class="path"
                 cx="25"
                 cy="25"
-                r="20"
+                r="22.5"
                 fill="none"
                 stroke-width="4"
               ></circle>

diff --git a/...ges/storybook-vue/stories/components/loading-spinner/LoadingSpinner.stories.mdx b/...ges/storybook-vue/stories/components/loading-spinner/LoadingSpinner.stories.mdx
@@ -74,15 +74,15 @@ export const Template = () => ({
   <Story
     name="Small Primary (horizontal)"
     args={{
-      text: 'Loading...',
+      text: 'Loading ...',
     }}
   >
     {Template.bind({})}
   </Story>
 </Canvas>
 
 ```html
-<scale-loading-spinner text="Loading..."></scale-loading-spinner>
+<scale-loading-spinner text="Loading ..."></scale-loading-spinner>
 ```
 
 ## Small Size & Vertical Text (Primary)
@@ -91,7 +91,7 @@ export const Template = () => ({
   <Story
     name="Small Primary (vertical)"
     args={{
-      text: 'Loading...',
+      text: 'Loading ...',
       alignment: 'vertical',
     }}
   >
@@ -101,7 +101,7 @@ export const Template = () => ({
 
 ```html
 <scale-loading-spinner
-  text="Loading..."
+  text="Loading ..."
   alignment="vertical"
 ></scale-loading-spinner>
 ```
@@ -113,15 +113,15 @@ export const Template = () => ({
     name="Large Primary (horizontal)"
     args={{
       size: 'large',
-      text: 'Loading...',
+      text: 'Loading ...',
     }}
   >
     {Template.bind({})}
   </Story>
 </Canvas>
 
 ```html
-<scale-loading-spinner size="large" text="Loading..."></scale-loading-spinner>
+<scale-loading-spinner size="large" text="Loading ..."></scale-loading-spinner>
 ```
 
 ## Large Size & Vertical Text (Primary)
@@ -131,7 +131,7 @@ export const Template = () => ({
     name="Large Primary (vertical)"
     args={{
       size: 'large',
-      text: 'Loading...',
+      text: 'Loading ...',
       alignment: 'vertical',
     }}
   >
@@ -142,7 +142,7 @@ export const Template = () => ({
 ```html
 <scale-loading-spinner
   size="large"
-  text="Loading..."
+  text="Loading ..."
   alignment="vertical"
 ></scale-loading-spinner>
 ```
@@ -172,7 +172,7 @@ export const Template = () => ({
     name="Small White (horizontal)"
     args={{
       size: 'small',
-      text: 'Loading...',
+      text: 'Loading ...',
       variant: 'white',
     }}
   >
@@ -183,7 +183,7 @@ export const Template = () => ({
 ```html
 <scale-loading-spinner
   size="small"
-  text="Loading..."
+  text="Loading ..."
   variant="white"
 ></scale-loading-spinner>
 ```
@@ -195,7 +195,7 @@ export const Template = () => ({
     name="Small White (vertical)"
     args={{
       size: 'small',
-      text: 'Loading...',
+      text: 'Loading ...',
       variant: 'white',
       alignment: 'vertical',
     }}
@@ -207,7 +207,7 @@ export const Template = () => ({
 ```html
 <scale-loading-spinner
   size="small"
-  text="Loading..."
+  text="Loading ..."
   variant="white"
   alignment="vertical"
 ></scale-loading-spinner>
@@ -238,7 +238,7 @@ export const Template = () => ({
     name="Large White (horizontal)"
     args={{
       size: 'large',
-      text: 'Loading...',
+      text: 'Loading ...',
       variant: 'white',
     }}
   >
@@ -249,7 +249,7 @@ export const Template = () => ({
 ```html
 <scale-loading-spinner
   size="large"
-  text="Loading..."
+  text="Loading ..."
   variant="white"
 ></scale-loading-spinner>
 ```
@@ -263,7 +263,7 @@ export const Template = () => ({
       size: 'large',
       variant: 'white',
       alignment: 'vertical',
-      text: 'Loading...',
+      text: 'Loading ...',
     }}
   >
     {Template.bind({})}
@@ -275,6 +275,6 @@ export const Template = () => ({
   size="large"
   variant="white"
   alignment="vertical"
-  text="Loading..."
+  text="Loading ..."
 ></scale-loading-spinner>
 ```