fix: renamed theme outline -> clear; updated storybook

gravity-ui · May 30, 2023 · 1d0671b · 1d0671b
1 parent 2d9c364
commit 1d0671b
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 55 deletions.
diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -205,7 +205,7 @@ $transitionTimingFunction: ease-in-out;
             );
         }
 
-        &_outline {
+        &_clear {
             @include themeState(
                 none,
                 var(--yc-color-base-simple-hover-solid),

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
@@ -54,7 +54,7 @@ interface LabelOwnProps {
 
 interface LabelDefaultProps {
     /** Label color */
-    theme: 'normal' | 'info' | 'danger' | 'warning' | 'success' | 'unknown' | 'outline';
+    theme: 'normal' | 'info' | 'danger' | 'warning' | 'success' | 'unknown' | 'clear';
     /** Label type (plain, with copy text button or with close button) */
     type: 'default' | 'copy' | 'close';
     /** Label size */

diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx
@@ -63,65 +63,15 @@ const ThemeTemplate: Story<LabelProps> = (args) => {
             <Label {...args} theme="unknown">
                 unknown
             </Label>
+            <Label {...args} theme="clear">
+                clear
+            </Label>
         </div>
     );
 };
 
 export const Theme = ThemeTemplate.bind({});
 
-type WithKey<T> = T & {key: React.Key};
-
-const themes = ['normal', 'info', 'danger', 'warning', 'success', 'unknown', 'outline'] as const;
-const sizes = ['xs', 's', 'm'] as const;
-
-const getLabel = ({...args}: WithKey<LabelProps>) => <Label {...args}></Label>;
-
-const section = (args: LabelProps) => {
-    const cases: LabelProps[] = [
-        {children: 'Label', icon: icons['TickIcon'], type: 'default'},
-        {children: 'Label', type: 'default'},
-        {children: 'Label', icon: icons['TickIcon'], type: 'copy'},
-        {children: 'Label', type: 'copy'},
-        {children: 'Label', icon: icons['TickIcon'], type: 'close'},
-        {children: 'Label', type: 'close'},
-        {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'default'},
-        {children: 'Key', value: 'Value', type: 'default'},
-        {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'copy'},
-        {children: 'Key', value: 'Value', type: 'copy'},
-        {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'close'},
-        {children: 'Key', value: 'Value', type: 'close'},
-        {icon: icons['TickIcon']},
-    ];
-    return cases.map((label, i) => getLabel({key: i, ...args, ...label}));
-};
-
-const keyValuesTemplate: Story<LabelProps> = (args) => (
-    <div className="label-stories">
-        <div className="grid" style={{gridTemplateColumns: `repeat(${1 + themes.length}, 1fr)`}}>
-            <h1></h1>
-            {themes.map((theme) => (
-                <h1 key={`${theme}-header`}>{theme}</h1>
-            ))}
-            {sizes.map((size) => (
-                <React.Fragment key={size}>
-                    <h1>{size}</h1>
-                    {themes.map((theme) => (
-                        <div key={theme} className="section">
-                            {section({theme, size, ...args})}
-                        </div>
-                    ))}
-                </React.Fragment>
-            ))}
-        </div>
-    </div>
-);
-
-export const keyValues = keyValuesTemplate.bind({});
-
-keyValues.args = {
-    interactive: true,
-};
-
 const SizeTemplate: Story<LabelProps> = (args) => {
     return (
         <div className="label-stories">
@@ -225,3 +175,56 @@ export const Interactions: Story<LabelProps> = (args) => (
         </div>
     </div>
 );
+
+type WithKey<T> = T & {key: React.Key};
+
+const themes = ['normal', 'info', 'danger', 'warning', 'success', 'unknown', 'clear'] as const;
+const sizes = ['xs', 's', 'm'] as const;
+
+const getLabel = ({...args}: WithKey<LabelProps>) => <Label {...args}></Label>;
+
+const section = (args: LabelProps) => {
+    const cases: LabelProps[] = [
+        {children: 'Label', icon: icons['TickIcon'], type: 'default'},
+        {children: 'Label', type: 'default'},
+        {children: 'Label', icon: icons['TickIcon'], type: 'copy'},
+        {children: 'Label', type: 'copy'},
+        {children: 'Label', icon: icons['TickIcon'], type: 'close'},
+        {children: 'Label', type: 'close'},
+        {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'default'},
+        {children: 'Key', value: 'Value', type: 'default'},
+        {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'copy'},
+        {children: 'Key', value: 'Value', type: 'copy'},
+        {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'close'},
+        {children: 'Key', value: 'Value', type: 'close'},
+        {icon: icons['TickIcon']},
+    ];
+    return cases.map((label, i) => getLabel({key: i, ...args, ...label}));
+};
+
+const keyValuesTemplate: Story<LabelProps> = (args) => (
+    <div className="label-stories">
+        <div className="grid" style={{gridTemplateColumns: `repeat(${1 + themes.length}, 1fr)`}}>
+            <h1></h1>
+            {themes.map((theme) => (
+                <h1 key={`${theme}-header`}>{theme}</h1>
+            ))}
+            {sizes.map((size) => (
+                <React.Fragment key={size}>
+                    <h1>{size}</h1>
+                    {themes.map((theme) => (
+                        <div key={theme} className="section">
+                            {section({theme, size, ...args})}
+                        </div>
+                    ))}
+                </React.Fragment>
+            ))}
+        </div>
+    </div>
+);
+
+export const showcase = keyValuesTemplate.bind({});
+
+showcase.args = {
+    interactive: true,
+};