From e013ff12c8e71417cd5193311c1a6f85d088605a Mon Sep 17 00:00:00 2001 From: Victoria Zhizhonkova Date: Fri, 6 Sep 2024 17:09:07 +0700 Subject: [PATCH] feat(PanelHeaderButton): add Badge support in label prop --- packages/vkui/src/components/Badge/Badge.tsx | 2 +- .../src/components/Counter/Counter.module.css | 12 ----- .../PanelHeaderButton.e2e-playground.tsx | 13 ++++- .../PanelHeaderButton.module.css | 47 +++++++++++++++++-- .../PanelHeaderButton/PanelHeaderButton.tsx | 2 +- ...derbutton-android-chromium-dark-1-snap.png | 4 +- ...erbutton-android-chromium-light-1-snap.png | 4 +- ...nelheaderbutton-ios-webkit-dark-1-snap.png | 4 +- ...elheaderbutton-ios-webkit-light-1-snap.png | 4 +- ...eaderbutton-vkcom-chromium-dark-1-snap.png | 4 +- ...aderbutton-vkcom-chromium-light-1-snap.png | 4 +- ...headerbutton-vkcom-firefox-dark-1-snap.png | 4 +- ...eaderbutton-vkcom-firefox-light-1-snap.png | 4 +- ...lheaderbutton-vkcom-webkit-dark-1-snap.png | 4 +- ...headerbutton-vkcom-webkit-light-1-snap.png | 4 +- 15 files changed, 78 insertions(+), 38 deletions(-) diff --git a/packages/vkui/src/components/Badge/Badge.tsx b/packages/vkui/src/components/Badge/Badge.tsx index 82088cc762..d58e309463 100644 --- a/packages/vkui/src/components/Badge/Badge.tsx +++ b/packages/vkui/src/components/Badge/Badge.tsx @@ -20,7 +20,7 @@ export interface BadgeProps extends RootComponentProps { export const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps): React.ReactNode => ( {children && {children}} diff --git a/packages/vkui/src/components/Counter/Counter.module.css b/packages/vkui/src/components/Counter/Counter.module.css index e3145185e1..6d7de2be30 100644 --- a/packages/vkui/src/components/Counter/Counter.module.css +++ b/packages/vkui/src/components/Counter/Counter.module.css @@ -47,18 +47,6 @@ color: var(--vkui_internal--counter_inherit_color, var(--vkui--color_text_contrast_themed)); } -/** - * CMP: - * PanelHeaderButton - */ -/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -:global(.vkuiInternalPanelHeaderButton) .Counter { - position: absolute; - padding: 0; - inset-block-start: 8px; - inset-inline-end: 2px; -} - /** * CMP: * TabbarItem diff --git a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.e2e-playground.tsx b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.e2e-playground.tsx index b8bfb8edb1..d2a3393c03 100644 --- a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.e2e-playground.tsx +++ b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.e2e-playground.tsx @@ -1,5 +1,7 @@ -import { Icon28AddOutline } from '@vkontakte/icons'; +import { Icon24AddOutline, Icon28AddOutline } from '@vkontakte/icons'; import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers'; +import { Badge } from '../Badge/Badge'; +import { Counter } from '../Counter/Counter'; import { PanelHeaderBack } from '../PanelHeaderBack/PanelHeaderBack'; import { PanelHeaderClose } from '../PanelHeaderClose/PanelHeaderClose'; import { PanelHeaderEdit, type PanelHeaderEditProps } from '../PanelHeaderEdit/PanelHeaderEdit'; @@ -16,6 +18,15 @@ export const PanelHeaderButtonPlayground = (props: ComponentPlaygroundProps) => primary: [true, false], label: [undefined, 'label', label], }, + { + children: [, ], + label: [ + + 33 + , + , + ], + }, ]} > {(props: PanelHeaderButtonProps) => } diff --git a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.module.css b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.module.css index 75435819f0..a84f1cb851 100644 --- a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.module.css +++ b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.module.css @@ -79,14 +79,16 @@ } /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -.PanelHeaderButton--vkcom > :not(:global(.vkuiInternalCounter)) { +.PanelHeaderButton--vkcom > :not(:global(.vkuiInternalBadge)):not(:global(.vkuiInternalCounter)) { transition: opacity 0.3s; opacity: 0.7; } /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -.PanelHeaderButton--vkcom.PanelHeaderButton--hover > :not(:global(.vkuiInternalCounter)), -.PanelHeaderButton--vkcom.PanelHeaderButton--active > :not(:global(.vkuiInternalCounter)) { +.PanelHeaderButton--vkcom.PanelHeaderButton--hover + > :not(:global(.vkuiInternalCounter)):not(:global(.vkuiInternalBadge)), +.PanelHeaderButton--vkcom.PanelHeaderButton--active + > :not(:global(.vkuiInternalCounter)):not(:global(.vkuiInternalBadge)) { opacity: 1; } @@ -119,3 +121,42 @@ display: none; } } + +/* + * CMP: + * Counter + */ + +/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ +.PanelHeaderButton :global(.vkuiInternalCounter) { + position: absolute; + padding: 0; + inset-block-start: 4px; + inset-inline-end: 4px; +} + +/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ +.PanelHeaderButton :global(.vkuiIcon--24) ~ :global(.vkuiInternalCounter), +.PanelHeaderButton--ios :global(.vkuiInternalCounter) { + inset-block-start: 2px; + inset-inline-end: 2px; +} + +/* + * CMP: + * Badge + */ + +/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ +.PanelHeaderButton :global(.vkuiInternalBadge) { + position: absolute; + inset-block-start: 8px; + inset-inline-end: 8px; +} + +/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ +.PanelHeaderButton :global(.vkuiIcon--24) ~ :global(.vkuiInternalBadge), +.PanelHeaderButton--ios :global(.vkuiInternalBadge) { + inset-block-start: 6px; + inset-inline-end: 6px; +} diff --git a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.tsx b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.tsx index 8bf2a31a3b..b8486a1571 100644 --- a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.tsx +++ b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.tsx @@ -16,6 +16,7 @@ const platformClassNames = { export interface PanelHeaderButtonProps extends Omit { primary?: boolean; + // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы label?: React.ReactNode; } @@ -90,7 +91,6 @@ export const PanelHeaderButton = ({ activeEffectDelay={200} activeMode={activeMode} className={classNames( - 'vkuiInternalPanelHeaderButton', styles['PanelHeaderButton'], platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-android-chromium-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-android-chromium-dark-1-snap.png index 14b2fd3f2d..3717f57d8c 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:aa66902c15086df4237fa3d487ad2618a1a45248f6f48c17aee6c658c028dab8 -size 21471 +oid sha256:cc72cf11e6391e17b8acae4a63ede92035793dd9a86ea0e961ed1cba37e6ddda +size 32006 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-android-chromium-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-android-chromium-light-1-snap.png index 448760f1f5..35958d367e 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:165feab0938ab40859bc7f5af10ccab40329022b58d4cc32832b7696f72b242e -size 21549 +oid sha256:4cf2ee22a32292c313850e88d0724e9d2a1911cb5784f2e46582932e58326cee +size 32097 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-ios-webkit-dark-1-snap.png index 778243db02..f0f0eaf3d6 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ffd4a109e153aa1f2c0531b06c850b87ffd1eff20f9fb1c138682a409f0e594f -size 21747 +oid sha256:81cb0dd2ed3f38f31f21a75a820d80603d6c8a11243aa978efb8af2d7a7bc9c2 +size 32259 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-ios-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-ios-webkit-light-1-snap.png index 33d3a7a77c..0242ed63d2 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1484bb65b7cab54932f303901f3b36ac929e0ee00edaad7b765894e6fc7e5c30 -size 21684 +oid sha256:029db5c11f3c11fe288f84bae65e9c22ee3b2e5c0b0a71241f4bb661cd09b16f +size 32151 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-chromium-dark-1-snap.png index a6126180aa..2babaf2ebd 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c7462f637b83d446ca908b0fe723523d75aef96dbdbead2ca4311628368ac531 -size 20233 +oid sha256:579cb246af5be56dbaea33c6abb6d878ec4c46796fc3614c2581d2b06f34575e +size 30735 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-chromium-light-1-snap.png index 932cda7f12..5b1e11cc9f 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c26828c9addd1d47c4c5cdca513eeb6c38a4e8446e1157efefe20c949bd5e3b3 -size 20865 +oid sha256:22863ec51dde03d545e1068d111efcfca121dcbbde31d8a1c0fff78a41c0fbfd +size 31467 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-firefox-dark-1-snap.png index db500eab25..d4787610ec 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f8731627ec87eb7c94be356e1f1db5efe426d263b8780ce68ecf937b6bebb6f2 -size 27928 +oid sha256:de3a8b166b7c1fd077dd6fc574f9612efddd1e3e03be4e925eab3e2e0a1cd8f8 +size 43741 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-firefox-light-1-snap.png index a9f543ec0a..01c9e0ef5b 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a7a632ca16bdc917e94296f3a6c4b851081191db0f1ea321ab75098237cd2252 -size 28300 +oid sha256:cb15700a44756a564b5496aed2f162bf11c44df1caeacac4826527955109db2a +size 44046 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-webkit-dark-1-snap.png index 5939173da8..ad3d4dc745 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:90b6f07f968f1846134f561b52c65975dfededc98d5b05418a737030495c9aec -size 20927 +oid sha256:8d098b0ab493fe6d2e72eb4b140d4889ec3ed2a1b9a829ecd5e1b9a73598e920 +size 31504 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-webkit-light-1-snap.png index 59716ff06a..34530d4ccc 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderbutton-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4a5e975f9b542182787c2652a745c3fad2236557fe11a355abde9bf7c155df62 -size 21356 +oid sha256:23b1d52cb963012d724b41c024ad86aade1d1e0cf81b6ddf77807f70d66c71e7 +size 31900