feat(Progress)!: add customization, remove default theme value

gravity-ui · Nov 21, 2023 · c27f6af · c27f6af
1 parent c2cc88d
commit c27f6af
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 21 deletions.
diff --git a/src/components/Progress/Progress.scss b/src/components/Progress/Progress.scss
@@ -11,26 +11,30 @@ $progress-xs-height: 4px;
     font-size: var(--g-text-body-short-font-size);
     font-weight: var(--g-text-body-font-weight);
     font-family: var(--g-text-body-font-family);
-    color: var(--g-color-text-primary);
     padding: 0 10px;
     box-sizing: border-box;
 }
 
 #{$block} {
+    --g-progress-empty-background-color: var(--g-color-base-generic);
+    --g-progress-empty-text-color: var(--g-color-text-primary);
+    --g-progress-filled-text-color: var(--g-color-text-primary);
+
     position: relative;
 
     margin: 0 auto;
     overflow: hidden;
 
     border-radius: 3px;
-    background-color: var(--g-color-base-generic);
+    background-color: var(--g-progress-empty-background-color);
 
     text-align: center;
 
     &__text {
         @include progress-text;
 
         position: relative;
+        color: var(--g-progress-empty-text-color);
     }
 
     &__text-inner {
@@ -40,6 +44,7 @@ $progress-xs-height: 4px;
 
         width: 100%;
         height: 100%;
+        color: var(--g-progress-filled-text-color);
 
         transition: transform 0.6s ease;
     }
@@ -55,28 +60,32 @@ $progress-xs-height: 4px;
 
         transition: transform 0.6s ease, width 0.6s ease, background-color 0.6s ease;
 
-        &_theme_default {
-            background-color: var(--g-color-base-neutral-medium);
-        }
+        background-color: var(--g-progress-filled-background-color);
 
-        &_theme_success {
-            background-color: var(--g-color-base-positive-medium);
-        }
+        &_theme {
+            &_default {
+                --g-progress-filled-background-color: var(--g-color-base-neutral-medium);
+            }
 
-        &_theme_warning {
-            background-color: var(--g-color-base-warning-medium);
-        }
+            &_success {
+                --g-progress-filled-background-color: var(--g-color-base-positive-medium);
+            }
 
-        &_theme_danger {
-            background-color: var(--g-color-base-danger-medium);
-        }
+            &_warning {
+                --g-progress-filled-background-color: var(--g-color-base-warning-medium);
+            }
 
-        &_theme_info {
-            background-color: var(--g-color-base-info-medium);
-        }
+            &_danger {
+                --g-progress-filled-background-color: var(--g-color-base-danger-medium);
+            }
+
+            &_info {
+                --g-progress-filled-background-color: var(--g-color-base-info-medium);
+            }
 
-        &_theme_misc {
-            background-color: var(--g-color-base-misc-medium);
+            &_misc {
+                --g-progress-filled-background-color: var(--g-color-base-misc-medium);
+            }
         }
 
         &_loading {

diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
@@ -30,13 +30,14 @@ export interface ProgressColorStops {
 interface ProgressGeneralProps {
     /** ClassName of element */
     className?: string;
+    theme: ProgressTheme;
 }
 
 interface ProgressDefaultProps {
     /** Text inside progress bar */
     text: string;
     /** Theme */
-    theme: ProgressTheme;
+    // theme: ProgressTheme;
     /** Size. Text of progress bar is displayed in `m` size only. */
     size: ProgressSize;
     /** Loading. Аdds loading animation */
@@ -65,7 +66,6 @@ export type ProgressProps = ProgressWithStack | ProgressWithValue;
 export class Progress extends React.Component<ProgressProps> {
     static defaultProps: ProgressDefaultProps = {
         text: '',
-        theme: 'default',
         size: 'm',
         loading: false,
     };

diff --git a/src/components/Progress/__stories__/Progress.stories.tsx b/src/components/Progress/__stories__/Progress.stories.tsx
@@ -34,6 +34,22 @@ const ThemeTemplate: StoryFn<typeof Progress> = (args) => {
 
 export const Theme = ThemeTemplate.bind({});
 
+export const Custom: StoryFn<typeof Progress> = (args) => {
+    return (
+        <React.Fragment>
+            <style>
+                {`.g-root .yc-progress {
+                    --g-progress-empty-text-color: var(--g-color-text-primary);
+                    --g-progress-filled-text-color: #000000d9;
+                    --g-progress-empty-background-color: var(--g-color-base-generic);
+                    --g-progress-filled-background-color: #00fff0;
+                }`}
+            </style>
+            <Progress {...args} value={50} text="custom" />
+        </React.Fragment>
+    );
+};
+
 const StackTemplate: StoryFn<typeof Progress> = (args) => {
     return (
         <React.Fragment>