feat(Progress): add height (#5455)

Добавляем свойство `height` для возможности задать свою высоту

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

@@ -11,6 +11,10 @@ export const ProgressPlayground = (props: ComponentPlaygroundProps) => {
           appearance: [undefined, 'negative', 'positive'],
           value: [30],
         },
+        {
+          height: [10],
+          value: [30],
+        },
       ]}
     >
       {Progress}

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

@@ -1,6 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { baselineComponent } from '../../testing/utils';
 import { Progress } from './Progress';
 
 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');
+  });
 });

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

@@ -4,6 +4,22 @@ import { clamp } from '../../helpers/math';
 import { HasRootRef } from '../../types';
 import styles from './Progress.module.css';
 
+function progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {
+  return height
+    ? {
+        height,
+        borderRadius: height / 2,
+      }
+    : undefined;
+}
+
+function progressStyle(height: number | undefined, styleProps: React.CSSProperties | undefined) {
+  const styleHeight = progressCustomHeightStyle(height);
+  const style = styleHeight ? { ...styleProps, ...styleHeight } : styleProps;
+
+  return style;
+}
+
 export interface ProgressProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {
@@ -12,6 +28,10 @@ export interface ProgressProps
    */
   appearance?: 'accent' | 'positive' | 'negative';
   value?: number;
+  /**
+   * Высота элемента.
+   */
+  height?: number;
 }
 
 const PROGRESS_MIN_VALUE = 0;
@@ -25,15 +45,20 @@ export const Progress = ({
   getRootRef,
   className,
   appearance = 'accent',
+  height,
+  style: styleProps,
   ...restProps
 }: ProgressProps) => {
   const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
   const title = `${progress} / ${PROGRESS_MAX_VALUE}`;
 
+  const style = progressStyle(height, styleProps);
+
   return (
     <div
       aria-valuenow={value}
       title={title}
+      style={style}
       {...restProps}
       role="progressbar"
       aria-valuemin={PROGRESS_MIN_VALUE}