feat(Progress): add custom color prop and trackDisable prop.

packages/vkui/src/components/Progress/Progress.e2e-playground.tsx

@@ -14,6 +14,16 @@ export const ProgressPlayground = (props: ComponentPlaygroundProps): React.React
           height: [10],
           value: [30],
         },
+        {
+          appearance: ['custom', 'accent'],
+          value: [30],
+          color: ['#c805f5'],
+        },
+        {
+          appearance: ['accent'],
+          value: [30],
+          trackDisable: [true],
+        },
       ]}
     >
       {Progress}

packages/vkui/src/components/Progress/Progress.module.css

@@ -2,22 +2,33 @@
   border-radius: 1px;
   background: var(--vkui--color_track_background);
   block-size: 2px;
+
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_accent);
+  --vkui_internal_Progress_progress: 0;
+}
+
+.trackDisable {
+  background: transparent;
 }
 
-.in {
+.host:after {
+  content: '';
+  display: block;
   block-size: 100%;
   border-radius: inherit;
   transition: width 0.2s ease;
+  inline-size: calc(var(--vkui_internal_Progress_progress) * 1%);
+  background: var(--vkui_internal_Progress_background_color);
 }
 
-.appearanceAccent .in {
-  background: var(--vkui--color_stroke_accent);
+.appearanceAccent {
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_accent);
 }
 
-.appearancePositive .in {
-  background: var(--vkui--color_stroke_positive);
+.appearancePositive {
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_positive);
 }
 
-.appearanceNegative .in {
-  background: var(--vkui--color_stroke_negative);
+.appearanceNegative {
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_negative);
 }

packages/vkui/src/components/Progress/Progress.test.tsx

@@ -1,14 +1,41 @@
 import { render, screen } from '@testing-library/react';
 import { baselineComponent } from '../../testing/utils';
 import { Progress } from './Progress';
+import styles from './Progress.module.css';
 
 describe('Progress', () => {
   baselineComponent(Progress);
 
   it('Custom height', () => {
     render(<Progress data-testid="progress" height={10} />);
 
-    expect(screen.getByTestId('progress').style.height).toBe('10px');
-    expect(screen.getByTestId('progress').style.borderRadius).toBe('5px');
+    expect(screen.getByTestId('progress')).toHaveStyle('height: 10px');
+    expect(screen.getByTestId('progress')).toHaveStyle('border-radius: 5px');
+  });
+
+  it('Custom color', () => {
+    const { rerender } = render(
+      <Progress data-testid="progress" appearance="custom" color="#f3f405" />,
+    );
+
+    expect(screen.getByTestId('progress')).toHaveStyle(
+      '--vkui_internal_Progress_background_color: #f3f405',
+    );
+
+    rerender(<Progress data-testid="progress" appearance="accent" color="#f3f405" />);
+
+    expect(screen.getByTestId('progress')).not.toHaveStyle(
+      '--vkui_internal_Progress_background_color: #f3f405',
+    );
+  });
+
+  it('Progress css variable', () => {
+    render(<Progress data-testid="progress" value={20} />);
+    expect(screen.getByTestId('progress')).toHaveStyle('--vkui_internal_Progress_progress: 20');
+  });
+
+  it('Progress trackDisable', () => {
+    render(<Progress data-testid="progress" trackDisable />);
+    expect(screen.getByTestId('progress')).toHaveClass(styles.trackDisable);
   });
 });

packages/vkui/src/components/Progress/Progress.tsx

@@ -9,6 +9,7 @@ const stylesAppearance = {
   accent: styles.appearanceAccent,
   positive: styles.appearancePositive,
   negative: styles.appearanceNegative,
+  custom: undefined,
 };
 
 function progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {
@@ -24,12 +25,20 @@ export interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement>
   /**
    * Стиль отображения прогрессбара
    */
-  appearance?: 'accent' | 'positive' | 'negative';
+  appearance?: 'accent' | 'positive' | 'negative' | 'custom';
+  /**
+   * Кастомный цвет прогрессбара. Используется только с `appearance="custom"`
+   */
+  color?: string;
   value?: number;
   /**
    * Высота элемента.
    */
   height?: number;
+  /**
+   * Сделать прогрессбар прозрачным
+   */
+  trackDisable?: boolean;
 }
 
 const PROGRESS_MIN_VALUE = 0;
@@ -42,12 +51,23 @@ export const Progress = ({
   value = 0,
   appearance = 'accent',
   height,
+  color,
+  trackDisable = false,
   ...restProps
 }: ProgressProps): React.ReactNode => {
   const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
   const title = `${progress} / ${PROGRESS_MAX_VALUE}`;
   const styleHeight = progressCustomHeightStyle(height);
 
+  const backgroundColorStyle =
+    appearance === 'custom' ? { '--vkui_internal_Progress_background_color': color } : undefined;
+
+  const style = {
+    ...styleHeight,
+    ...backgroundColorStyle,
+    '--vkui_internal_Progress_progress': progress,
+  };
+
   return (
     <RootComponent
       aria-valuenow={value}
@@ -56,10 +76,12 @@ export const Progress = ({
       role="progressbar"
       aria-valuemin={PROGRESS_MIN_VALUE}
       aria-valuemax={PROGRESS_MAX_VALUE}
-      baseClassName={classNames(styles.host, stylesAppearance[appearance])}
-      baseStyle={styleHeight}
-    >
-      <div className={styles.in} style={{ width: `${progress}%` }} />
-    </RootComponent>
+      baseClassName={classNames(
+        styles.host,
+        trackDisable && styles.trackDisable,
+        stylesAppearance[appearance],
+      )}
+      baseStyle={style}
+    />
   );
 };