From 5cb14c4a9d924030ad939bf159b923829c31a23f Mon Sep 17 00:00:00 2001 From: Eldar <61377022+EldarMuhamethanov@users.noreply.github.com> Date: Mon, 16 Dec 2024 16:16:41 +0300 Subject: [PATCH] feat(AspectRatio): extract ratio prop type (#8088) --- .../AspectRatio.e2e-playground.tsx | 2 +- .../AspectRatio/AspectRatio.test.tsx | 19 +++++++++++++++++++ .../components/AspectRatio/AspectRatio.tsx | 9 ++++++--- ...pectratio-android-chromium-dark-1-snap.png | 4 ++-- ...ectratio-android-chromium-light-1-snap.png | 4 ++-- .../aspectratio-ios-webkit-dark-1-snap.png | 4 ++-- .../aspectratio-ios-webkit-light-1-snap.png | 4 ++-- ...aspectratio-vkcom-chromium-dark-1-snap.png | 4 ++-- ...spectratio-vkcom-chromium-light-1-snap.png | 4 ++-- .../aspectratio-vkcom-firefox-dark-1-snap.png | 4 ++-- ...aspectratio-vkcom-firefox-light-1-snap.png | 4 ++-- .../aspectratio-vkcom-webkit-dark-1-snap.png | 4 ++-- .../aspectratio-vkcom-webkit-light-1-snap.png | 4 ++-- 13 files changed, 46 insertions(+), 24 deletions(-) diff --git a/packages/vkui/src/components/AspectRatio/AspectRatio.e2e-playground.tsx b/packages/vkui/src/components/AspectRatio/AspectRatio.e2e-playground.tsx index 7f6edc78f3..2efb5b7aad 100644 --- a/packages/vkui/src/components/AspectRatio/AspectRatio.e2e-playground.tsx +++ b/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: [
], mode: ['stretch'], }, diff --git a/packages/vkui/src/components/AspectRatio/AspectRatio.test.tsx b/packages/vkui/src/components/AspectRatio/AspectRatio.test.tsx index f70aa228b0..5dd862f110 100644 --- a/packages/vkui/src/components/AspectRatio/AspectRatio.test.tsx +++ b/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(); + expect(screen.getByTestId('ratio')).toHaveClass(styles.modeStretch); + }); + + it('check using custom ratio', () => { + const { rerender } = render( + , + ); + expect(screen.getByTestId('ratio')).toHaveStyle( + '--vkui_internal--aspect_ratio: var(--custom-aspect-ratio-var);', + ); + + rerender(); + expect(screen.getByTestId('ratio')).toHaveStyle('--vkui_internal--aspect_ratio: calc(16 / 9);'); + }); }); diff --git a/packages/vkui/src/components/AspectRatio/AspectRatio.tsx b/packages/vkui/src/components/AspectRatio/AspectRatio.tsx index efbb13e73d..a4f239fdbc 100644 --- a/packages/vkui/src/components/AspectRatio/AspectRatio.tsx +++ b/packages/vkui/src/components/AspectRatio/AspectRatio.tsx @@ -11,9 +11,12 @@ export interface AspectRatioProps extends Omit, */ 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 ( diff --git a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-android-chromium-dark-1-snap.png b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-android-chromium-dark-1-snap.png index 136703def7..a4392902c0 100644 --- a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:10892c20efe2575ca0dd609539a5d6523dd033f29a5e47317a773addec026ecd -size 11598 +oid sha256:cbb189fbb52a09a34b856fab2b253c5ed203601a9e07001dd05c7768a12e6240 +size 19584 diff --git a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-android-chromium-light-1-snap.png b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-android-chromium-light-1-snap.png index 247c6f2a81..e6d63b77af 100644 --- a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d1aa7f9e90d0ce6bfc357df1528b8730b8d09730be845640abf46d6a5d1b984c -size 11226 +oid sha256:f8104959b42967e6bde8a353272433551cdd45c1850b7811fc259bc6d1cb009e +size 18885 diff --git a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-ios-webkit-dark-1-snap.png index 6c0ba24266..1d521d9262 100644 --- a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ecc0d0aa4591b5414e363cce45c250d15ae2f0cd2a0ada779c66e503a00b5d54 -size 18194 +oid sha256:b56bb6faccaab1fac44d2400d991b7b3720059fd660b6f58146e505debecc4cb +size 30841 diff --git a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-ios-webkit-light-1-snap.png b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-ios-webkit-light-1-snap.png index 9ba6c7528f..cc4950714e 100644 --- a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e8f82e724a720a302454eb97a3794b6e7bde4cef2cbe18639434f98280d55060 -size 17984 +oid sha256:808475428efee17192677cc3f83f4c82a9eee53773bb0ef1067b8bb040223783 +size 30496 diff --git a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-chromium-dark-1-snap.png index de7becebcd..29186968f1 100644 --- a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2bdf3e9a88a6f045fe0041c05e926b82843b5bdd6f0aae881976deb200f8dec2 -size 12888 +oid sha256:c386a7e38708b86135adad813d4a966550423fb10de2397430571571c31189af +size 21435 diff --git a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-chromium-light-1-snap.png index 0c29041289..1c8a1938a2 100644 --- a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f2f0c843aacf163db87fa9f71d5227941c0b90ea82dde8fee64c1f75d68f94b1 -size 12642 +oid sha256:706c9ebab492f11cc5b89bbc9c8c2c967b26955dc6dab4bdb98b061198984f63 +size 20979 diff --git a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-firefox-dark-1-snap.png index 872ea7f087..f89f06a125 100644 --- a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8b36928616628dd4865a652bf094c923f06d1527a961c51e4c29ec82678ba4fa -size 26773 +oid sha256:62f7132cd159bd2f2802b8e818e28604371cb8d1750582050611d71822d5415f +size 43303 diff --git a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-firefox-light-1-snap.png index 219354b0a7..319eb48de1 100644 --- a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2ef614761faf0e64c42a97d56b508e95dd56772f1d0e02cea3ffba6c79d483c7 -size 26764 +oid sha256:04ae415b56ebd8ba178b821d21be4796af73604e0641cbf0367915a823b29d93 +size 43301 diff --git a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-webkit-dark-1-snap.png index 4a02937fa9..b63bd94c41 100644 --- a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:68b016cb148b404e0703e13c72075c7e2cb8603fd07437c6e06e32cf35928cd9 -size 20471 +oid sha256:c9a24d76354fb2a9ba1f4f78618e0105335a3e4adbaa5bf0be0def14a5753ddb +size 34128 diff --git a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-webkit-light-1-snap.png index 846ce443e4..b705de7d41 100644 --- a/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/AspectRatio/__image_snapshots__/aspectratio-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:55d05db3626f6c4e7ce27f1194ac7d7bcb3f78a34b5a1030a0a343c0fd2a3497 -size 20160 +oid sha256:b0812cc1285861fee872106df073554ad64aa8117e3de6c68678b9708d240af4 +size 33524