From 1b6561d4e435d62120b6a78038574caf3fbde1fe Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Wed, 13 Nov 2024 12:01:12 +0300 Subject: [PATCH] feat: return logic of PanelHeaderBack and add props hideLabelOnVKCom and hideLabelOnIOS --- .../components/Epic/Epic.e2e-playground.tsx | 6 ++- .../epic-ios-webkit-dark-1-snap.png | 4 +- .../epic-ios-webkit-light-1-snap.png | 4 +- .../PanelHeaderBack/PanelHeaderBack.tsx | 13 ++++-- .../PanelHeaderButton.e2e-playground.tsx | 9 +++- .../PanelHeaderButton.stories.tsx | 43 +++++++++++++++---- .../components/PanelHeaderButton/Readme.md | 3 +- ...eaderback-android-chromium-dark-1-snap.png | 4 +- ...aderback-android-chromium-light-1-snap.png | 4 +- ...panelheaderback-ios-webkit-dark-1-snap.png | 4 +- ...anelheaderback-ios-webkit-light-1-snap.png | 4 +- ...lheaderback-vkcom-chromium-dark-1-snap.png | 4 +- ...headerback-vkcom-chromium-light-1-snap.png | 4 +- ...elheaderback-vkcom-firefox-dark-1-snap.png | 4 +- ...lheaderback-vkcom-firefox-light-1-snap.png | 4 +- ...nelheaderback-vkcom-webkit-dark-1-snap.png | 4 +- ...elheaderback-vkcom-webkit-light-1-snap.png | 4 +- .../PanelHeaderContext.e2e-playground.tsx | 2 +- ...elheadercontext-ios-webkit-dark-1-snap.png | 4 +- ...lheadercontext-ios-webkit-light-1-snap.png | 4 +- ...headercontext-vkcom-webkit-dark-1-snap.png | 4 +- ...eadercontext-vkcom-webkit-light-1-snap.png | 4 +- 22 files changed, 91 insertions(+), 49 deletions(-) diff --git a/packages/vkui/src/components/Epic/Epic.e2e-playground.tsx b/packages/vkui/src/components/Epic/Epic.e2e-playground.tsx index 648fac7d92..9a5e686549 100644 --- a/packages/vkui/src/components/Epic/Epic.e2e-playground.tsx +++ b/packages/vkui/src/components/Epic/Epic.e2e-playground.tsx @@ -68,7 +68,11 @@ export const EpicPlayground = (props: ComponentPlaygroundProps) => ( > - }>Новости + } + > + Новости + } /> diff --git a/packages/vkui/src/components/Epic/__image_snapshots__/epic-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Epic/__image_snapshots__/epic-ios-webkit-dark-1-snap.png index ff60ca959c..b5a330c829 100644 --- a/packages/vkui/src/components/Epic/__image_snapshots__/epic-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Epic/__image_snapshots__/epic-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:080741c7c09c77a2a06ce37e34ef41ab9f49b9e83ac051032c0d5dc3cbfc6c82 -size 11065 +oid sha256:e375bfa18712b7db7dadb5a6dd66365f265e5cc89e2d9c2558fb23685b0b6bea +size 10511 diff --git a/packages/vkui/src/components/Epic/__image_snapshots__/epic-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Epic/__image_snapshots__/epic-ios-webkit-light-1-snap.png index 2a65130eb1..dab15cfeae 100644 --- a/packages/vkui/src/components/Epic/__image_snapshots__/epic-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Epic/__image_snapshots__/epic-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9646877dc31e2169d3de605eac5553870e4f765e157a8db9afafd45db9ab6803 -size 10878 +oid sha256:6cab53c7c38a07726ca2c2e2959505bed6900efad4e03ad763d4897fdeda1ca2 +size 10342 diff --git a/packages/vkui/src/components/PanelHeaderBack/PanelHeaderBack.tsx b/packages/vkui/src/components/PanelHeaderBack/PanelHeaderBack.tsx index a03b52e1d1..c191b8a16f 100644 --- a/packages/vkui/src/components/PanelHeaderBack/PanelHeaderBack.tsx +++ b/packages/vkui/src/components/PanelHeaderBack/PanelHeaderBack.tsx @@ -5,6 +5,7 @@ import { Icon20ChevronLeftOutline, Icon24ArrowLeftOutline, Icon28ArrowLeftOutline, + Icon28ChevronBack, Icon28ChevronLeftOutline, } from '@vkontakte/icons'; import { classNames } from '@vkontakte/vkjs'; @@ -24,12 +25,15 @@ const sizeXClassNames = { compact: styles.backSizeXCompact, }; -export type PanelHeaderBackProps = Omit; +export type PanelHeaderBackProps = Omit & { + hideLabelOnVKCom?: boolean; + hideLabelOnIOS?: boolean; +}; const getBackIcon = (platform: PlatformType) => { switch (platform) { case 'ios': - return null; + return ; case 'vkcom': return ( { export const PanelHeaderBack = ({ label = 'Назад', className, + hideLabelOnVKCom = false, + hideLabelOnIOS = false, ...restProps }: PanelHeaderBackProps): React.ReactNode => { const platform = usePlatform(); const { sizeX = 'none' } = useAdaptivity(); // также label нужно скрывать при platform === 'ios' && sizeX === regular // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104 - const showLabel = platform === 'ios'; + const showLabel = + (platform === 'vkcom' && !hideLabelOnVKCom) || (platform === 'ios' && !hideLabelOnIOS); return ( { primary: [true, false], label: [undefined, 'label'], }, + { + hideLabelOnIOS: [true, false], + hideLabelOnVKCom: [true, false], + label: ['label'], + }, ]} > - {(props: PanelHeaderButtonProps) => } + {(props: PanelHeaderBackProps) => } ); }; diff --git a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.stories.tsx b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.stories.tsx index 432345194b..6dea3d4846 100644 --- a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.stories.tsx +++ b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.stories.tsx @@ -2,13 +2,22 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Icon28AddOutline } from '@vkontakte/icons'; import { noop } from '@vkontakte/vkjs'; import { CanvasFullLayout, DisableCartesianParam, StringArg } from '../../storybook/constants'; -import { PanelHeaderBack as PanelHeaderBackCmp } from '../PanelHeaderBack/PanelHeaderBack'; -import { PanelHeaderClose as PanelHeaderCloseCmp } from '../PanelHeaderClose/PanelHeaderClose'; +import { + PanelHeaderBack as PanelHeaderBackCmp, + type PanelHeaderBackProps, +} from '../PanelHeaderBack/PanelHeaderBack'; +import { + PanelHeaderClose as PanelHeaderCloseCmp, + type PanelHeaderCloseProps, +} from '../PanelHeaderClose/PanelHeaderClose'; import { PanelHeaderEdit as PanelHeaderEditCmp, type PanelHeaderEditProps, } from '../PanelHeaderEdit/PanelHeaderEdit'; -import { PanelHeaderSubmit as PanelHeaderSubmitCmp } from '../PanelHeaderSubmit/PanelHeaderSubmit'; +import { + PanelHeaderSubmit as PanelHeaderSubmitCmp, + type PanelHeaderSubmitProps, +} from '../PanelHeaderSubmit/PanelHeaderSubmit'; import { PanelHeaderButton, type PanelHeaderButtonProps } from './PanelHeaderButton'; const story: Meta = { @@ -22,9 +31,9 @@ const story: Meta = { export default story; -type Story = StoryObj; +type PlaygroundStory = StoryObj; -export const Playground: Story = { +export const Playground: PlaygroundStory = { render: (args) => { return ( @@ -34,19 +43,33 @@ export const Playground: Story = { }, }; -export const PanelHeaderClose: Story = { +type PanelHeaderCloseStory = StoryObj; + +export const PanelHeaderClose: PanelHeaderCloseStory = { render: (args) => { return ; }, }; -export const PanelHeaderBack: Story = { +type PanelHeaderBackStory = StoryObj; + +export const PanelHeaderBack: PanelHeaderBackStory = { + argTypes: { + hideLabelOnVKCom: { + type: 'boolean', + }, + hideLabelOnIOS: { + type: 'boolean', + }, + }, render: (args) => { return ; }, }; -export const PanelHeaderEdit: StoryObj = { +type PanelHeaderEditStory = StoryObj; + +export const PanelHeaderEdit: PanelHeaderEditStory = { args: { isActive: true, }, @@ -59,7 +82,9 @@ export const PanelHeaderEdit: StoryObj = { }, }; -export const PanelHeaderSubmit: Story = { +type PanelHeaderSubmitStory = StoryObj; + +export const PanelHeaderSubmit: PanelHeaderSubmitStory = { render: (args) => { return ; }, diff --git a/packages/vkui/src/components/PanelHeaderButton/Readme.md b/packages/vkui/src/components/PanelHeaderButton/Readme.md index 3987f73b43..96e648b5cd 100644 --- a/packages/vkui/src/components/PanelHeaderButton/Readme.md +++ b/packages/vkui/src/components/PanelHeaderButton/Readme.md @@ -40,7 +40,8 @@ ### PanelHeaderBack Этот компонент используется для показа кнопки назад в панелях в рамках одного `View`. Внутри инкапсулирована логика показа нужной иконки для платформы. -Также можно передать свойство `label`, и тогда на iOS он будет отображен, а на других платформах будет скрыт, но виден для скринридеров. +Также можно передать свойство `label`, для отображения текст, который будет виден на платформах vkcom и iOS, но будет скрыт на Android. +С помощью свойств `hideLabelOnVKCom` и `hideLabelOnIOS` можно также визуально скрыть `label` на соответствующих платформах, он будет виден только для скринридеров. ```jsx static }> diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-dark-1-snap.png index 25e6b861c8..f06bc0bf85 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8a34f7bd4fcdb4583f71ca636823cf4f2b8ea81f7aa688d6a054e50141864e1e -size 9128 +oid sha256:34f3117f4714ebd0c969197bb0d52398fb3ad77b15854dce8bbbc551fcc8346e +size 24129 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-light-1-snap.png index 4b5402a878..27ebe6b79b 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7565d6fd369eec3db9668bd94d9e0b8d735bc31c6db797b05cd4a098b5eb29f7 -size 9254 +oid sha256:0f4f668302242f03bb4f85bfe13e1f0b35a4d52087c8c0909d8524015822c597 +size 24593 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-dark-1-snap.png index f2443a46a8..32dc542cc2 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e4bf9d8dc6ab90010222984fe892ae645dd709263f04ddbf76729e3a19ea6579 -size 11215 +oid sha256:6d5075e3bfc82cfe0f22740a2306f32d6d2b479d827602a7bc6b03404cf0252d +size 28728 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-light-1-snap.png index e950aa34c0..e50125f883 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:51d90ebbb67c8a988a5d8dbaace87d8f967207ba0dad09416b8b4dad72864ed3 -size 11179 +oid sha256:8c6bace34727ed699f011135d893f94f6da381db1855d5ef791027ac32fbcd0e +size 28677 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-dark-1-snap.png index e6e512b1e5..99f78f09b2 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:345d4010f11d59ceb6597cc3a62d3c22fb39529485146760fd60afcb11a36273 -size 8421 +oid sha256:9ef66f8cfd0cb9d1beabb9f43e2297adb1ae0d072343fb1e4155bcc208ec9235 +size 25565 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-light-1-snap.png index 1833fd5ab7..3d74775fc3 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e0a551fb3173cff105858e9b4a2ba820d83b9a256a64d39a3f2218d3fa207727 -size 8623 +oid sha256:3927679f71bdebb16a6a7144a0473d1fbbddd7ba9dea949a6cf322b2ebe4a398 +size 26117 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-dark-1-snap.png index cd9efaf6ea..32ee794079 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c3bc5d35f9cd1f8adfdda7541a31e6fa2e4783930a7faf2569d91888d8b945d2 -size 11398 +oid sha256:2dcc4d26d93cc3ff4b6527bacc253599affa60ffef120c4063545910df253add +size 38016 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-light-1-snap.png index 6a5b832453..956fba3bab 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a95d5ba6d2dc5c23c169534ccb74378cd29da24741e375fa35df29216c1678eb -size 11686 +oid sha256:e54db0620ed6c653ed3dd792a71768b231f76569b03895f9180de3ddb12b1383 +size 38480 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-dark-1-snap.png index 4215189bee..99c87047f9 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:488e308d8e18d64e513239bb7b36b9c1ba0638e2e32e3f33fe2f10107006c679 -size 8693 +oid sha256:3f84eeee4ffe749f65b8e93dca5348da0c6dedc42e27d14f869cecd2ad6966f7 +size 26204 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-light-1-snap.png index 2ef4127d8f..6614010fab 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5f8f6151aa15bdf930b7b3537ba79385ae45d1dac35ff3a257226750a07a9554 -size 8960 +oid sha256:f29cc36e16a272d4ff8256492114277452800c3e9bdd6d25a7e6e7179e750467 +size 26724 diff --git a/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.e2e-playground.tsx b/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.e2e-playground.tsx index 54d864e58f..307d385d41 100644 --- a/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.e2e-playground.tsx +++ b/packages/vkui/src/components/PanelHeaderContext/PanelHeaderContext.e2e-playground.tsx @@ -33,7 +33,7 @@ export const PanelHeaderContextPlayground = (props: ComponentPlaygroundProps) => } + before={} after={ diff --git a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-ios-webkit-dark-1-snap.png index 4be190f66e..1be0e625f6 100644 --- a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d59c30d5c52d6ec6942d9e5d3b5a0d7a97f3a119e08238d1151609c3691c8b88 -size 11815 +oid sha256:86d5c4fe6a9dc83fd5b67c2d91d68d83b224ca8885be9ed8d6d83908eb34acf4 +size 11312 diff --git a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-ios-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-ios-webkit-light-1-snap.png index 1c75231b05..4fdf3f13cd 100644 --- a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4cf31409667970f9b1d3098f20e2a05bffc21087fb6bd4085a027b3a4041ea49 -size 11568 +oid sha256:ef0c2cc5a56bcfb8033b26ccd4d0d4b5f2807af9f4526f6b970de6ac4cc3a7eb +size 11033 diff --git a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-dark-1-snap.png index 969e1e7d01..a93dc6f33d 100644 --- a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5fd1b9d2ba1bae03d7a791628c9124e99bffe3239da6ac5db39ea92b64519166 -size 9403 +oid sha256:17e7e4e5624923fc4676a9b6759ae80c09df93319e00ad08829ec001c14f5b9f +size 9386 diff --git a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png index 39154110c2..512a224762 100644 --- a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:259efde2b63ed7d60fa0ca479b8c92348ebde6e605d9a57800042b554ab1bbed -size 10025 +oid sha256:8a342f8796c13c02a6c86097330e7934eded96c5cf7195ce23068ea5c4da0d06 +size 10009