feat(AspectRatio): extract ratio prop type (#8088)

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

@@ -7,7 +7,7 @@ export const AspectRatioPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          ratio: [1 / 1, 3 / 4, 16 / 9],
+          ratio: [1 / 1, 3 / 4, 16 / 9, '1', 'calc(16 / 9)'],
           children: [<div key="" style={{ background: 'green' }} />],
           mode: ['stretch'],
         },

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

@@ -1,6 +1,25 @@
+import { render, screen } from '@testing-library/react';
 import { baselineComponent } from '../../testing/utils';
 import { AspectRatio } from './AspectRatio';
+import styles from './AspectRatio.module.css';
 
 describe(AspectRatio, () => {
   baselineComponent(AspectRatio);
+
+  it('check mode stretch has specific className', () => {
+    render(<AspectRatio data-testid="ratio" ratio={16 / 9} mode="stretch" />);
+    expect(screen.getByTestId('ratio')).toHaveClass(styles.modeStretch);
+  });
+
+  it('check using custom ratio', () => {
+    const { rerender } = render(
+      <AspectRatio data-testid="ratio" ratio="var(--custom-aspect-ratio-var)" />,
+    );
+    expect(screen.getByTestId('ratio')).toHaveStyle(
+      '--vkui_internal--aspect_ratio: var(--custom-aspect-ratio-var);',
+    );
+
+    rerender(<AspectRatio data-testid="ratio" ratio="calc(16 / 9)" />);
+    expect(screen.getByTestId('ratio')).toHaveStyle('--vkui_internal--aspect_ratio: calc(16 / 9);');
+  });
 });

packages/vkui/src/components/AspectRatio/AspectRatio.tsx

@@ -11,9 +11,12 @@ export interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>,
    */
   mode?: 'stretch' | 'none';
   /**
-   * Например 16 / 9, 4 / 3, 1920 / 1080
+   * Например:
+   * - в виде числа: 16 / 9, 4 / 3, 1920 / 1080,
+   * - в виде css переменной: `var(--css-aspect-ratio-var)`
+   * - в виде сложного выражения: `calc(<какие-то вычисления>)`
    */
-  ratio: number;
+  ratio: number | string;
 }
 
 /**
@@ -29,7 +32,7 @@ export function AspectRatio({
   ...props
 }: AspectRatioProps): React.JSX.Element {
   const style: React.CSSProperties & CSSCustomProperties = {
-    '--vkui_internal--aspect_ratio': String(ratio),
+    '--vkui_internal--aspect_ratio': typeof ratio === 'number' ? String(ratio) : ratio,
   };
 
   return (