fix(progress-bar): inner bar for percentage 0 (#1563)

packages/components/src/components/progress-bar/__snapshots__/progress-bar.spec.ts.snap

@@ -27,7 +27,7 @@ exports[`ProgressBar check props 1`] = `
       </div>
       <div class="progress-bar__wrapper" part="wrapper">
         <div aria-label="testLabel" aria-valuemax="100" aria-valuemin="0" aria-valuenow="18" aria-valuetext="18%" class="progress-bar__outer" id="progress-bar-1" part="outer" role="progressbar">
-          <div class="progress-bar__inner" part="inner" style="width: 18%; border: 1px solid transparent; background: var(--background); animation: showProgress 3s ease-in-out;"></div>
+          <div class="progress-bar__inner" part="inner" style="--progress: 18%;"></div>
         </div>
         <slot name="icon"></slot>
       </div>
@@ -63,9 +63,7 @@ exports[`ProgressBar should match snapshot 1`] = `
         </div>
       </div>
       <div class="progress-bar__wrapper" part="wrapper">
-        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" aria-valuetext="0%" class="progress-bar__outer" id="progress-bar-0" part="outer" role="progressbar">
-          <div class="progress-bar__inner" part="inner" style="width: 0%; border: 1px solid transparent; background: var(--background); animation: showProgress 3s ease-in-out;"></div>
-        </div>
+        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" aria-valuetext="0%" class="progress-bar__outer" id="progress-bar-0" part="outer" role="progressbar"></div>
         <slot name="icon"></slot>
       </div>
     </div>

packages/components/src/components/progress-bar/progress-bar.css

@@ -68,22 +68,29 @@
   margin-left: 0;
   overflow: hidden;
   position: relative;
-  border-radius: 100px;
+  border-radius: var(--telekom-radius-pill);
   background-color: var(--background-color);
 }
 
 .progress-bar__inner {
+  position: absolute;
   top: 0;
   left: 0;
+  width: var(--progress, 0);
   height: var(--progress-bar-inner-size);
   display: flex;
-  position: absolute;
   align-items: center;
   white-space: nowrap;
   justify-content: flex-end;
-  animation-fill-mode: both;
-  border-radius: 100px;
+  border-radius: var(--telekom-radius-pill);
+  border: 1px solid transparent;
   background: var(--background);
+  transition: width var(--telekom-motion-duration-immediate)
+    var(--telekom-motion-easing-standard);
+}
+
+.progress-bar--disabled .progress-bar__inner {
+  background: var(--background-disabled);
 }
 
 .progress-bar__status {

packages/components/src/components/progress-bar/progress-bar.spec.ts

@@ -88,13 +88,9 @@ describe('ProgressBar', () => {
   // Does not effect coverage
   it('test function progressStyle()', () => {
     const style = {
-      width: '20%',
-      border: '1px solid transparent',
-      background: 'magenta',
-      animation: 'showProgress 3s ease-in-out',
+      '--progress': '20%',
     };
     element.percentage = 20;
-    element.customColor = 'magenta';
     expect(JSON.stringify(element.progressStyle())).toBe(JSON.stringify(style));
   });
 

packages/components/src/components/progress-bar/progress-bar.tsx

@@ -85,15 +85,12 @@ export class ProgressBar {
   `;
 
   progressStyle = () => {
+    const customColor = this.customColor
+      ? { '--background': this.customColor }
+      : {};
     return {
-      width: this.disabled ? '100%' : `${this.percentage}%`,
-      border: '1px solid transparent',
-      background: this.customColor
-        ? this.customColor
-        : this.disabled
-        ? 'var(--background-disabled)'
-        : `var(--background)`,
-      animation: this.disabled ? 'none' : 'showProgress 3s ease-in-out',
+      '--progress': this.disabled ? '100%' : `${this.percentage}%`,
+      ...customColor,
     };
   };
 
@@ -151,11 +148,13 @@ export class ProgressBar {
               aria-label={this.label}
               id={this.progressBarId}
             >
-              <div
-                part="inner"
-                class="progress-bar__inner"
-                style={this.progressStyle()}
-              ></div>
+              {this.percentage > 0 && (
+                <div
+                  part="inner"
+                  class="progress-bar__inner"
+                  style={this.progressStyle()}
+                ></div>
+              )}
             </div>
             <slot name="icon"></slot>
           </div>

packages/storybook-vue/stories/components/table/Table.stories.mdx

@@ -65,9 +65,8 @@ export const Template = (args, { argTypes }) => ({
               <div style="display: inline-flex; align-items: center;">
                 <span style="margin-right: 8px;">9.356</span>
                 <scale-progress-bar
-                  custom-color="var(--telekom-color-ui-extra-strong)"
                   variant="info"
-                  style="width: 120px;"
+                  style="width: 120px; --background: var(--telekom-color-ui-extra-strong)"
                   stroke-width="6"
                   percentage="90"
                   show-status="false"
@@ -94,9 +93,8 @@ export const Template = (args, { argTypes }) => ({
               <div style="display: inline-flex; align-items: center;">
                 <span style="margin-right: 8px;">3.356</span>
                 <scale-progress-bar
-                  custom-color="var(--telekom-color-ui-extra-strong)"
                   variant="info"
-                  style="width: 120px;"
+                  style="width: 120px; --background: var(--telekom-color-ui-extra-strong)"
                   stroke-width="6"
                   percentage="30"
                   show-status="false"
@@ -123,9 +121,8 @@ export const Template = (args, { argTypes }) => ({
               <div style="display: inline-flex; align-items: center;">
                 <span style="margin-right: 8px;">6.356</span>
                 <scale-progress-bar
-                  custom-color="var(--telekom-color-ui-extra-strong)"
                   variant="info"
-                  style="width: 120px;"
+                  style="width: 120px; --background: var(--telekom-color-ui-extra-strong)"
                   stroke-width="6"
                   percentage="60"
                   show-status="false"

packages/visual-tests/src/brand-header.visual.spec.js

@@ -26,6 +26,8 @@ describe('Brand Header', () => {
       const firstLink = await global.page.evaluateHandle(
         `document.querySelector("#root > div > scale-app-shell").shadowRoot.querySelector("scale-app-header nav.header__nav > div > div.header__nav-menu-wrapper > div.header__nav-menu-main > ul > scale-nav-main:nth-child(1) > li > a")`
       );
+      // TODO we probably want to make sure `hover` is not affecting the `focus` snapshot?
+      // https://github.com/telekom/scale/pull/1565/files#diff-900e1daba44b830c5fb035a03c58deea10a791e34e9eadb54a5ba5db7f40e48d
       await firstLink.hover();
       expect(await previewHtml.screenshot()).toMatchImageSnapshot();
       await firstLink.focus();