From d4910807b1844942380120b734e22245eee85eb8 Mon Sep 17 00:00:00 2001 From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com> Date: Tue, 27 Aug 2024 12:37:09 +0300 Subject: [PATCH] feat(Header): add props before, beforeTitle, afterTitle, beforeSubtitle, afterSubtitle (#7202) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Добавил пропс `before` для отображения иконки слева от контента - Добавил пропс `beforeTitle` для отображения иконки слева от заголовка - Добавил пропс `afterTitle` для отображения иконки справа от заголовка - Добавил пропс `beforeSubtitle` для отображения иконки слева от подзаголовка - Добавил пропс `afterSubtitle` для отображения иконки справа от подзаголовка - Добавил новые состояния в скриншотные тесты - Добавил примеры использования в документацию - Добавил `story` в `storybook` с новыми фичами --- .../Header/Header.e2e-playground.tsx | 47 ++++++++++++++ .../src/components/Header/Header.module.css | 51 +++++++++++++-- .../src/components/Header/Header.stories.tsx | 34 ++++++++++ .../vkui/src/components/Header/Header.tsx | 62 ++++++++++++++++--- packages/vkui/src/components/Header/Readme.md | 49 +++++++++++++++ .../header-android-chromium-dark-1-snap.png | 4 +- .../header-android-chromium-light-1-snap.png | 4 +- .../header-ios-webkit-dark-1-snap.png | 4 +- .../header-ios-webkit-light-1-snap.png | 4 +- .../header-vkcom-chromium-dark-1-snap.png | 4 +- .../header-vkcom-chromium-light-1-snap.png | 4 +- .../header-vkcom-firefox-dark-1-snap.png | 4 +- .../header-vkcom-firefox-light-1-snap.png | 4 +- .../header-vkcom-webkit-dark-1-snap.png | 4 +- .../header-vkcom-webkit-light-1-snap.png | 4 +- 15 files changed, 249 insertions(+), 34 deletions(-) diff --git a/packages/vkui/src/components/Header/Header.e2e-playground.tsx b/packages/vkui/src/components/Header/Header.e2e-playground.tsx index 7902f25a15..e1666c5902 100644 --- a/packages/vkui/src/components/Header/Header.e2e-playground.tsx +++ b/packages/vkui/src/components/Header/Header.e2e-playground.tsx @@ -1,3 +1,10 @@ +import { + Icon12Fire, + Icon12Tag, + Icon16LockOutline, + Icon16UnlockOutline, + Icon28UserCircleFillBlue, +} from '@vkontakte/icons'; import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers'; import { Counter } from '../Counter/Counter'; import { Link } from '../Link/Link'; @@ -49,6 +56,46 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => { mode: ['primary'], size: ['regular', 'large'], }, + { + mode: ['primary'], + children: ['Кто может оставлять записи на моей странице'], + before: [], + }, + { + mode: ['primary'], + children: ['Кто может оставлять записи на моей странице'], + beforeTitle: [], + }, + { + mode: ['primary'], + children: ['Кто может оставлять записи на моей странице'], + afterTitle: [], + multiline: [undefined, true], + }, + { + mode: ['primary'], + children: ['Кто может оставлять записи на моей странице'], + subtitle: ['SOHN — Conrad'], + beforeSubtitle: [], + }, + { + mode: ['primary'], + children: ['Кто может оставлять записи на моей странице'], + subtitle: ['SOHN — Conrad'], + afterSubtitle: [], + multiline: [undefined, true], + }, + { + mode: ['primary', 'secondary', 'tertiary'], + children: ['Кто может оставлять записи на моей странице'], + before: [], + beforeTitle: [], + afterTitle: [], + beforeSubtitle: [], + afterSubtitle: [], + subtitle: ['SOHN — Conrad'], + multiline: [undefined, true], + }, ]} > {({ children, ...restProps }: HeaderProps) => ( diff --git a/packages/vkui/src/components/Header/Header.module.css b/packages/vkui/src/components/Header/Header.module.css index 162cb008d1..5762f9472a 100644 --- a/packages/vkui/src/components/Header/Header.module.css +++ b/packages/vkui/src/components/Header/Header.module.css @@ -6,6 +6,46 @@ font-family: var(--vkui--font_family_base); } +.Header__before, +.Header__subtitleBefore, +.Header__subtitleAfter, +.Header__content__before, +.Header__content__after { + display: flex; + flex-shrink: 0; +} + +.Header__before { + align-self: center; + margin-inline-end: var(--vkui--spacing_size_m); + margin-block-start: var(--vkui--spacing_size_3xs); +} + +.Header__before--withSubtitle { + margin-block-start: var(--vkui--spacing_size_s); +} + +.Header__subtitleWrapper { + display: flex; + align-items: center; +} + +.Header__subtitleBefore { + margin-inline-end: var(--vkui--spacing_size_xs); +} + +.Header__subtitleAfter { + margin-inline-start: var(--vkui--spacing_size_xs); +} + +.Header__content__before { + margin-inline-end: var(--vkui--spacing_size_xs); +} + +.Header__content__after { + margin-inline-start: var(--vkui--spacing_size_xs); +} + .Header__main { flex: 1 0 0; min-inline-size: 0; @@ -27,6 +67,7 @@ .Header__content--multiline { white-space: initial; word-break: break-word; + flex-grow: 1; } .Header__subtitle { @@ -41,7 +82,7 @@ .Header__indicator { color: var(--vkui--color_text_secondary); - margin-inline-start: 6px; + margin-inline-start: var(--vkui--spacing_size_xs); flex-shrink: 0; } @@ -104,12 +145,12 @@ margin-block-end: 9px; } -.Header__subtitle { +.Header__subtitleWrapper { margin-block-end: 7px; } /* Компенсируем 1 пиксель из-за паддинга в .Header--mode-primary */ -.Header--mode-primary .Header__subtitle { +.Header--mode-primary .Header__subtitleWrapper { margin-block-end: 6px; } @@ -147,7 +188,7 @@ :global(.vkuiInternalGroup--mode-card) > :global(.vkuiInternalTappable):first-child > .Header:not(.Header--mode-tertiary) { - margin-block-start: -4px; + margin-block-start: calc(-1 * var(--vkui--spacing_size_xs)); } @media (--sizeX-regular) { @@ -157,7 +198,7 @@ :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none) > :global(.vkuiInternalTappable):first-child > .Header:not(.Header--mode-tertiary) { - margin-block-start: -4px; + margin-block-start: calc(-1 * var(--vkui--spacing_size_xs)); } } diff --git a/packages/vkui/src/components/Header/Header.stories.tsx b/packages/vkui/src/components/Header/Header.stories.tsx index 6bbfc99a61..b78e607e4c 100644 --- a/packages/vkui/src/components/Header/Header.stories.tsx +++ b/packages/vkui/src/components/Header/Header.stories.tsx @@ -12,6 +12,26 @@ const story: Meta = { component: Header, parameters: { ...CanvasFullLayout, ...DisableCartesianParam }, argTypes: { + before: createFieldWithPresets({ + iconSizes: ['28'], + requiredIcons: ['Icon28UserCircleFillBlue'], + }), + beforeTitle: createFieldWithPresets({ + iconSizes: ['16'], + requiredIcons: ['Icon16LockOutline'], + }), + afterTitle: createFieldWithPresets({ + iconSizes: ['16'], + requiredIcons: ['Icon16UnlockOutline'], + }), + beforeSubtitle: createFieldWithPresets({ + iconSizes: ['12'], + requiredIcons: ['Icon12Tag'], + }), + afterSubtitle: createFieldWithPresets({ + iconSizes: ['12'], + requiredIcons: ['Icon12Fire'], + }), aside: createFieldWithPresets({ iconSizes: [], additionalPresets: { @@ -83,3 +103,17 @@ export const WithCounter: Story = { withVKUILayout, ], }; + +export const WithAllFeatures: Story = { + ...Playground, + args: { + ...Playground.args, + before: 'Icon28UserCircleFillBlue', + beforeTitle: 'Icon16LockOutline', + afterTitle: 'Icon16UnlockOutline', + beforeSubtitle: 'Icon12Tag', + afterSubtitle: 'Icon12Fire', + subtitle: 'SOHN — Conrad', + aside: Показать все, + }, +}; diff --git a/packages/vkui/src/components/Header/Header.tsx b/packages/vkui/src/components/Header/Header.tsx index 77fcab5483..62e67d29bd 100644 --- a/packages/vkui/src/components/Header/Header.tsx +++ b/packages/vkui/src/components/Header/Header.tsx @@ -25,6 +25,26 @@ export interface HeaderProps extends HTMLAttributesWithRootRef, Has */ indicator?: React.ReactNode; multiline?: boolean; + /** + * Иконка слева (рекомендуется использовать размер 28px) + */ + before?: React.ReactNode; + /** + * Иконка слева от title (рекомендуется использовать размер 16px) + */ + beforeTitle?: React.ReactNode; + /** + * Иконка справа от title (рекомендуется использовать размер 16px) + */ + afterTitle?: React.ReactNode; + /** + * Иконка слева от subtitle (рекомендуется использовать размер 12px) + */ + beforeSubtitle?: React.ReactNode; + /** + * Иконка справа от subtitle (рекомендуется использовать размер 12px) + */ + afterSubtitle?: React.ReactNode; } type HeaderContentProps = Pick & @@ -83,6 +103,11 @@ export const Header = ({ indicator, aside, multiline, + before, + beforeTitle, + afterTitle, + beforeSubtitle, + afterSubtitle, ...restProps }: HeaderProps): React.ReactNode => { return ( @@ -96,6 +121,16 @@ export const Header = ({ hasReactNode(subtitle) && styles['Header--with-subtitle'], )} > + {before && ( +
+ {before} +
+ )}
+ {beforeTitle &&
{beforeTitle}
} {children} + {afterTitle &&
{afterTitle}
} {hasReactNode(indicator) && ( {indicator} )} - {hasReactNode(subtitle) && ( - + {beforeSubtitle && ( +
{beforeSubtitle}
)} - Component={subtitleComponent} - > - {subtitle} - + + {subtitle} + + {afterSubtitle && ( +
{afterSubtitle}
+ )} +
)} diff --git a/packages/vkui/src/components/Header/Readme.md b/packages/vkui/src/components/Header/Readme.md index 4ae382a42b..461b2c481f 100644 --- a/packages/vkui/src/components/Header/Readme.md +++ b/packages/vkui/src/components/Header/Readme.md @@ -120,6 +120,55 @@ const Example = () => { Большой заголовок + +
} + beforeTitle={} + afterTitle={} + beforeSubtitle={} + afterSubtitle={} + subtitle="SOHN — Conrad" + subtitleComponent="h3" + indicator={ + + 3 + + } + aside={ + + Показать все + {platform === 'vkcom' && } + + } + > + Плейлисты +
+
} + beforeTitle={} + afterTitle={} + beforeSubtitle={} + afterSubtitle={} + subtitle="SOHN — Conrad" + subtitleComponent="h3" + multiline + indicator={ + + 3 + + } + aside={ + + Показать все + {platform === 'vkcom' && } + + } + > + Плейлисты +
+ ); diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png index 130de46b2d..24ef7fe143 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4f3f902a010bb1e5dbe02cf67634b01cf2473713f5683907e9e6409a8b2fc349 -size 123736 +oid sha256:5ed13454c3c18a9696491f2c6eea6dee98c96a5cf711a22de893a483ffac8cc3 +size 285209 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png index c0cb53c33a..840965858d 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fb3bd26a34d3f60a4aa6875ded9a32742a92c1f4a1210ac9163616f1c243652e -size 122405 +oid sha256:de9c004968bcd2cf729d92a81c9814d65cfe68c6fa0e9e5d4e1a6b6e7eb0132d +size 284939 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png index 466317afab..22e7ac8095 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b71408bbb64afea99781868b29e33d21876cd66a610d9cee802297687c43f771 -size 111911 +oid sha256:9b63fbc7cbd2657ce80a56da3182c981db5424e53fe9877bed81d30706d21b41 +size 293843 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png index 934cf38c47..83d7e83383 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e2f00db696d0faccfc87b4d8fd33a22ec6400c60fe8a807c41f645dc40a3f294 -size 111353 +oid sha256:9b3b7ae8d6b08472339c8cc510969b9daa1166143c8438efbcd3393e0670297f +size 289920 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png index 72eb3e5e2a..674a72a0a4 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6880245c2f704723aa92f877394da3de35ac5b7f4901638c2eb5a0d92226b998 -size 119300 +oid sha256:3da9943ff517598640ec34882f5f88ca90e521b8314a179265f304e9e965ce08 +size 284550 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png index 292cdd2fe9..24abcfd1a9 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c9730c30cff7fb1f089bb229ee18ed3dda46176c6081c19ded4902c02a18fb33 -size 119129 +oid sha256:a7e8ead99c05e71c053480e03bad6812dcf95b2befe19fbec9b657e77599aad5 +size 285675 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png index 2d2edbc287..ecfc80a74c 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d703ce4742e55f3eccec16a7b3c45b802a941b93a20a6d1b802026a97ac952e0 -size 150649 +oid sha256:146ca50c72f64d2da6d020a443e9ba3850b294797279fb431b47dec6d78e7c14 +size 431421 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png index 0f2e2e727a..dec16d86cf 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5f8f36e0288b3bd2df6d70104f8dc5b48bee1bb7b9febfad26f4311256475857 -size 150708 +oid sha256:1a577f17624d011a5b09ccd11c0feae064a3081a805973abdef87c7671a1fef7 +size 422466 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png index 1e340a3ca5..ad32b831c0 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e7f40b40311bb7be641e9c13806693efe27e30b4f24e827723818e18863f41c7 -size 108300 +oid sha256:d104624643cd9bc9605bc0013b7eeb62db81b8e3e294a036f461eac030439c6b +size 288922 diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png index d37f5611c2..118e09c40e 100644 --- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:052160c349b9a3806fbbed11bc0174c8c848d18ceb851ab96f249b73864024ae -size 109381 +oid sha256:b469574ee04a7f4f76cd9719ed9d608b59c49b2f87719700e011de1925f72b5e +size 290826