refactor(ProgressIndicator): Remove visible prop (#126)

BREAKING CHANGE: removed `visible` prop [ci skip]
SAP · Sep 18, 2019 · 100e6ff · 100e6ff
1 parent 174447a
commit 100e6ff
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 139 deletions.
diff --git a/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts b/packages/main/src/components/ProgressIndicator/ProgressIndicator.jss.ts
@@ -1,6 +1,6 @@
 import { fonts } from '@ui5/webcomponents-react-base';
-import { JSSTheme } from '../../interfaces/JSSTheme';
 import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 
 const styles = ({ parameters }: JSSTheme) => {
   return {
@@ -17,9 +17,6 @@ const styles = ({ parameters }: JSSTheme) => {
     progressBarTextLeft: {
       marginRight: '0.375rem'
     },
-    invisible: {
-      display: 'none !important'
-    },
     wrapper: {
       display: 'flex',
       flexDirection: 'row',
@@ -28,7 +25,7 @@ const styles = ({ parameters }: JSSTheme) => {
       outline: 'none',
       background: parameters.sapUiFieldBackground,
       width: '100%',
-      height: '1rem',
+      height: '1.5rem',
       minWidth: '4rem',
       minHeight: '1rem',
       padding: '0',
@@ -37,6 +34,9 @@ const styles = ({ parameters }: JSSTheme) => {
       borderRadius: '0.5rem',
       overflow: 'hidden'
     },
+    compact: {
+      height: '1.125rem'
+    },
     progressbar: {
       transition: 'flex-basis 1s',
       justifyContent: 'flex-end',

diff --git a/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx b/packages/main/src/components/ProgressIndicator/ProgressIndicator.test.tsx
@@ -1,8 +1,8 @@
 import { mountThemedComponent } from '@shared/tests/utils';
-import React from 'react';
 import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 import { ProgressIndicator } from '@ui5/webcomponents-react/lib/ProgressIndicator';
 import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
+import React from 'react';
 
 const testFactory = () => {
   Object.values(ValueState).forEach((state) => {

diff --git a/packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap b/packages/main/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap
@@ -2,18 +2,18 @@
 
 exports[`ProgressIndicator Custom 1`] = `
 <div
-  class="ProgressIndicator-wrapper-"
+  class="ProgressIndicator--wrapper-"
   style="width: 50%; height: 50%;"
 >
   <div
-    class="ProgressIndicator-progressbar- ProgressIndicator-stateNone-"
+    class="ProgressIndicator--progressbar- ProgressIndicator--stateNone-"
     style="flex-basis: 40%;"
   />
   <div
-    class="ProgressIndicator-progressBarRemaining-"
+    class="ProgressIndicator--progressBarRemaining-"
   >
     <span
-      class="ProgressIndicator-progressBarText- ProgressIndicator-progressBarTextColorLow- ProgressIndicator-progressBarTextRight-"
+      class="ProgressIndicator--progressBarText- ProgressIndicator--progressBarTextColorLow- ProgressIndicator--progressBarTextRight-"
     >
        sdf 
     </span>
@@ -23,18 +23,18 @@ exports[`ProgressIndicator Custom 1`] = `
 
 exports[`ProgressIndicator ProgressIndicator with state Error 1`] = `
 <div
-  class="ProgressIndicator-wrapper-"
-  style="width: auto; height: 1.5rem;"
+  class="ProgressIndicator--wrapper-"
+  style="width: auto;"
 >
   <div
-    class="ProgressIndicator-progressbar- ProgressIndicator-stateError-"
+    class="ProgressIndicator--progressbar- ProgressIndicator--stateError-"
     style="flex-basis: 0%;"
   />
   <div
-    class="ProgressIndicator-progressBarRemaining-"
+    class="ProgressIndicator--progressBarRemaining-"
   >
     <span
-      class="ProgressIndicator-progressBarText- ProgressIndicator-progressBarTextColorLow- ProgressIndicator-progressBarTextRight-"
+      class="ProgressIndicator--progressBarText- ProgressIndicator--progressBarTextColorLow- ProgressIndicator--progressBarTextRight-"
     >
         
     </span>
@@ -44,18 +44,18 @@ exports[`ProgressIndicator ProgressIndicator with state Error 1`] = `
 
 exports[`ProgressIndicator ProgressIndicator with state Information 1`] = `
 <div
-  class="ProgressIndicator-wrapper-"
-  style="width: auto; height: 1.5rem;"
+  class="ProgressIndicator--wrapper-"
+  style="width: auto;"
 >
   <div
-    class="ProgressIndicator-progressbar- ProgressIndicator-stateInformation-"
+    class="ProgressIndicator--progressbar- ProgressIndicator--stateInformation-"
     style="flex-basis: 0%;"
   />
   <div
-    class="ProgressIndicator-progressBarRemaining-"
+    class="ProgressIndicator--progressBarRemaining-"
   >
     <span
-      class="ProgressIndicator-progressBarText- ProgressIndicator-progressBarTextColorLow- ProgressIndicator-progressBarTextRight-"
+      class="ProgressIndicator--progressBarText- ProgressIndicator--progressBarTextColorLow- ProgressIndicator--progressBarTextRight-"
     >
         
     </span>
@@ -65,18 +65,18 @@ exports[`ProgressIndicator ProgressIndicator with state Information 1`] = `
 
 exports[`ProgressIndicator ProgressIndicator with state None 1`] = `
 <div
-  class="ProgressIndicator-wrapper-"
-  style="width: auto; height: 1.5rem;"
+  class="ProgressIndicator--wrapper-"
+  style="width: auto;"
 >
   <div
-    class="ProgressIndicator-progressbar- ProgressIndicator-stateNone-"
+    class="ProgressIndicator--progressbar- ProgressIndicator--stateNone-"
     style="flex-basis: 0%;"
   />
   <div
-    class="ProgressIndicator-progressBarRemaining-"
+    class="ProgressIndicator--progressBarRemaining-"
   >
     <span
-      class="ProgressIndicator-progressBarText- ProgressIndicator-progressBarTextColorLow- ProgressIndicator-progressBarTextRight-"
+      class="ProgressIndicator--progressBarText- ProgressIndicator--progressBarTextColorLow- ProgressIndicator--progressBarTextRight-"
     >
         
     </span>
@@ -86,18 +86,18 @@ exports[`ProgressIndicator ProgressIndicator with state None 1`] = `
 
 exports[`ProgressIndicator ProgressIndicator with state Success 1`] = `
 <div
-  class="ProgressIndicator-wrapper-"
-  style="width: auto; height: 1.5rem;"
+  class="ProgressIndicator--wrapper-"
+  style="width: auto;"
 >
   <div
-    class="ProgressIndicator-progressbar- ProgressIndicator-stateSuccess-"
+    class="ProgressIndicator--progressbar- ProgressIndicator--stateSuccess-"
     style="flex-basis: 0%;"
   />
   <div
-    class="ProgressIndicator-progressBarRemaining-"
+    class="ProgressIndicator--progressBarRemaining-"
   >
     <span
-      class="ProgressIndicator-progressBarText- ProgressIndicator-progressBarTextColorLow- ProgressIndicator-progressBarTextRight-"
+      class="ProgressIndicator--progressBarText- ProgressIndicator--progressBarTextColorLow- ProgressIndicator--progressBarTextRight-"
     >
         
     </span>
@@ -107,18 +107,18 @@ exports[`ProgressIndicator ProgressIndicator with state Success 1`] = `
 
 exports[`ProgressIndicator ProgressIndicator with state Warning 1`] = `
 <div
-  class="ProgressIndicator-wrapper-"
-  style="width: auto; height: 1.5rem;"
+  class="ProgressIndicator--wrapper-"
+  style="width: auto;"
 >
   <div
-    class="ProgressIndicator-progressbar- ProgressIndicator-stateWarning-"
+    class="ProgressIndicator--progressbar- ProgressIndicator--stateWarning-"
     style="flex-basis: 0%;"
   />
   <div
-    class="ProgressIndicator-progressBarRemaining-"
+    class="ProgressIndicator--progressBarRemaining-"
   >
     <span
-      class="ProgressIndicator-progressBarText- ProgressIndicator-progressBarTextColorLow- ProgressIndicator-progressBarTextRight-"
+      class="ProgressIndicator--progressBarText- ProgressIndicator--progressBarTextColorLow- ProgressIndicator--progressBarTextRight-"
     >
         
     </span>
@@ -128,21 +128,21 @@ exports[`ProgressIndicator ProgressIndicator with state Warning 1`] = `
 
 exports[`ProgressIndicator State 1`] = `
 <div
-  class="ProgressIndicator-wrapper-"
-  style="width: auto; height: 1.5rem;"
+  class="ProgressIndicator--wrapper-"
+  style="width: auto;"
 >
   <div
-    class="ProgressIndicator-progressbar- ProgressIndicator-stateError-"
+    class="ProgressIndicator--progressbar- ProgressIndicator--stateError-"
     style="flex-basis: 85%;"
   >
     <span
-      class="ProgressIndicator-progressBarText- ProgressIndicator-progressBarTextColorHigh- ProgressIndicator-progressBarTextLeft-"
+      class="ProgressIndicator--progressBarText- ProgressIndicator--progressBarTextColorHigh- ProgressIndicator--progressBarTextLeft-"
     >
         
     </span>
   </div>
   <div
-    class="ProgressIndicator-progressBarRemaining-"
+    class="ProgressIndicator--progressBarRemaining-"
   />
 </div>
 `;
diff --git a/packages/main/src/components/ProgressIndicator/demo.stories.tsx b/packages/main/src/components/ProgressIndicator/demo.stories.tsx
@@ -1,11 +1,18 @@
 import React from 'react';
-import { ValueState } from '../..';
+import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
 import { ProgressIndicator } from '@ui5/webcomponents-react/lib/ProgressIndicator';
+import { number, text, select } from '@storybook/addon-knobs';
 
 export const renderStory = () => {
   return (
     <div>
-      <ProgressIndicator visible={false} percentValue={5} width="50%" displayValue="5%" />
+      <ProgressIndicator
+        percentValue={number('percentValue', 5)}
+        width={text('width', '50%')}
+        displayValue={text('displayValue', '5%')}
+        // @ts-ignore
+        state={select('state', ValueState, ValueState.None)}
+      />
       <ProgressIndicator percentValue={95} width="50%" displayValue="95%" />
       <ProgressIndicator percentValue={25} state={ValueState.Success} displayValue="25 GB" />
       <ProgressIndicator percentValue={50} state={ValueState.Warning} displayValue="50/100" />