diff --git a/README.md b/README.md index 4eb34a18c4..add1d80e2e 100644 --- a/README.md +++ b/README.md @@ -60,9 +60,11 @@ import { import '@vkontakte/vkui/dist/vkui.css'; const Example = () => { + const platform = usePlatform(); + return ( - }> + }> diff --git a/packages/vkui/src/components/Epic/Epic.stories.tsx b/packages/vkui/src/components/Epic/Epic.stories.tsx index 9cfc834a2d..c50cfb8e81 100644 --- a/packages/vkui/src/components/Epic/Epic.stories.tsx +++ b/packages/vkui/src/components/Epic/Epic.stories.tsx @@ -52,7 +52,7 @@ export const Example: Story = { return ( } + header={hasHeader && } style={{ justifyContent: 'center' }} > {viewWidth.tabletPlus && ( diff --git a/packages/vkui/src/components/Epic/Readme.md b/packages/vkui/src/components/Epic/Readme.md index fbe0f02001..380ba3fe92 100644 --- a/packages/vkui/src/components/Epic/Readme.md +++ b/packages/vkui/src/components/Epic/Readme.md @@ -29,7 +29,7 @@ const Example = () => { return ( } + header={hasHeader && } style={{ justifyContent: 'center' }} > {viewWidth.tabletPlus && ( diff --git a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx index 2f7d4ef9ad..282a2cab2a 100644 --- a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx +++ b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx @@ -10,23 +10,24 @@ import styles from './ModalPageHeader.module.css'; export interface ModalPageHeaderProps extends React.HTMLAttributes, - Omit, + Omit, HasRef, - HasRootRef {} + HasRootRef { + noSeparator?: boolean; +} /** * @see https://vkcom.github.io/VKUI/#/ModalPageHeader */ export const ModalPageHeader = ({ children, - separator = true, + noSeparator = false, getRootRef, className, typographyProps, ...restProps }: ModalPageHeaderProps) => { const platform = usePlatform(); - const hasSeparator = separator && platform === 'vkcom'; const { isDesktop } = useAdaptivityWithJSMediaQueries(); const { labelId } = React.useContext(ModalPageContext); @@ -48,12 +49,12 @@ export const ModalPageHeader = ({ }} {...restProps} fixed={false} - separator={false} + delimiter="none" transparent > {children} - {hasSeparator && } + {!noSeparator && } ); }; diff --git a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-android-chromium-dark-1-snap.png b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-android-chromium-dark-1-snap.png index c66a854208..b07dc4caa0 100644 --- a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c0b5348933c5e5394c395e01065753cc1eaaef812c04e5c731ac260e48c86b1d -size 81226 +oid sha256:bf95e0d2bbdf0459e549a8eb656906654c2c28cfbc465bb3632006bc5a06ffd8 +size 81299 diff --git a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-android-chromium-light-1-snap.png b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-android-chromium-light-1-snap.png index 2c11a93a14..3e5272183e 100644 --- a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0e6348127e480eda51a0723f8b419fdcb507c3b7bbeb5a358167b8b0f6594a59 -size 79786 +oid sha256:e505d09463d502c2a0e64e96fe14a4ae196772f7045c57cdce3faf1e078ffff6 +size 79795 diff --git a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-ios-only-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-ios-only-ios-webkit-dark-1-snap.png index 35d4937c54..f546ef5c21 100644 --- a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-ios-only-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-ios-only-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b7c7d26c107baae1aefb349f57d4e9da5fc16b1d8b287c894f802b24508fdf27 -size 75799 +oid sha256:3e81db9e129153cff395b68e3625f5cfdc35e02213f45efe2a347556ab897a8b +size 76035 diff --git a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-ios-only-ios-webkit-light-1-snap.png b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-ios-only-ios-webkit-light-1-snap.png index 08d1e3151c..e7df186439 100644 --- a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-ios-only-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-desktop-ios-only-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:97ca92c6a3bd6787a95121e13e670ec42b6ba3cef58aff6b5a2179ebc82d248c -size 75331 +oid sha256:131b696964ff4ec92141fceea0d79740eb9f4b063ee991ebb04eff01232d2a80 +size 75558 diff --git a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-android-chromium-dark-1-snap.png b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-android-chromium-dark-1-snap.png index f0138de5e6..7d44f21c8b 100644 --- a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e58e9405a04e98cfcef3aa880e8bf77dac8631f0644aae80075f81bb29d977f3 -size 67703 +oid sha256:17c343003e6d815f5d6e0f210bd5e31633895f1818b4acbda7c81f6a6b5048fd +size 67728 diff --git a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-android-chromium-light-1-snap.png b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-android-chromium-light-1-snap.png index 496c74fa98..af3efe989e 100644 --- a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7b0f4362446cc2faddb5f5c4e85ca3f48e91cc9c8bde296c345c46803178d35c -size 66623 +oid sha256:35e939603c13ec895342bbfff273976c765f4bba3fb4b1e249e3648e26d3feee +size 66642 diff --git a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-ios-only-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-ios-only-ios-webkit-dark-1-snap.png index e8e6b164ce..944a4db95f 100644 --- a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-ios-only-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-ios-only-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4560056a190891138cbbb4d436dbcb040f27d40bd58935f41d07d8233dc7e11c -size 64508 +oid sha256:0923f9db98888657c02f888e53f45f055998812e5571c531829fce24be1d7c4b +size 64695 diff --git a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-ios-only-ios-webkit-light-1-snap.png b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-ios-only-ios-webkit-light-1-snap.png index 0c02bc7866..a43030997f 100644 --- a/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-ios-only-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-ios-only-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a8bc2cced18cb7f2e0cfed58f5b901bdea9c31816650951c0dd96c4b388d4142 -size 64742 +oid sha256:bbc2d821da6723997e1c50712ac04f605a891a6e378ba01b1d5b6ba1c530041b +size 64990 diff --git a/packages/vkui/src/components/Panel/Panel.module.css b/packages/vkui/src/components/Panel/Panel.module.css index a6b5ee91b2..ccfd4b4f56 100644 --- a/packages/vkui/src/components/Panel/Panel.module.css +++ b/packages/vkui/src/components/Panel/Panel.module.css @@ -34,12 +34,7 @@ /* stylelint-disable selector-max-universal */ /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -.Panel__centered :global(.vkuiInternalPanelHeader--vis) + * { - margin-block-start: var(--vkui_internal--panel_header_height); -} - -/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -.Panel__centered :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--vis) + * { +.Panel__centered :global(.vkuiInternalPanelHeader--static) + * { margin-block-start: var(--vkui_internal--panel_header_height); } @@ -55,42 +50,6 @@ } } -/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -.Panel--sizeX-compact - .Panel__centered - :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep) - + * { - margin-block-start: calc(var(--vkui_internal--panel_header_height) + 5px); -} - -@media (--sizeX-compact) { - /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ - .Panel--sizeX-none - .Panel__centered - :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep) - + * { - margin-block-start: calc(var(--vkui_internal--panel_header_height) + 5px); - } -} - -/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -.Panel--sizeX-compact - .Panel__centered - :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep) - + * { - margin-block-start: calc(var(--vkui_internal--panel_header_height) + 5px); -} - -@media (--sizeX-compact) { - /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ - .Panel--sizeX-none - .Panel__centered - :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep) - + * { - margin-block-start: calc(var(--vkui_internal--panel_header_height) + 5px); - } -} - /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ .Panel--sizeX-regular .Panel__centered :global(.vkuiInternalPanelHeader--sep) + * { margin-block-start: calc(var(--vkui_internal--panel_header_height) + 16px); @@ -103,53 +62,12 @@ } } -/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -.Panel--sizeX-regular - .Panel__centered - :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep) - + * { - margin-block-start: calc(var(--vkui_internal--panel_header_height) + 16px); -} - -@media (--sizeX-regular) { - /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ - .Panel--sizeX-none - .Panel__centered - :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep) - + * { - margin-block-start: calc(var(--vkui_internal--panel_header_height) + 16px); - } -} - -/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -.Panel--sizeX-regular - .Panel__centered - :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep) - + * { - margin-block-start: calc(var(--vkui_internal--panel_header_height) + 16px); -} - -@media (--sizeX-regular) { - /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ - .Panel--sizeX-none - .Panel__centered - :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep) - + * { - margin-block-start: calc(var(--vkui_internal--panel_header_height) + 16px); - } -} - /* stylelint-enable selector-max-universal */ /** * CMP: * View */ -/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ -:global(.vkuiInternalView--ios) .Panel__in { - padding-block-end: var(--vkui_internal--safe_area_inset_bottom); -} - /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */ :global(.vkuiInternalView--ios) .Panel__in { padding-block: 0 var(--vkui_internal--safe_area_inset_bottom); diff --git a/packages/vkui/src/components/Panel/Panel.stories.tsx b/packages/vkui/src/components/Panel/Panel.stories.tsx index bcb44478dd..017e137e95 100644 --- a/packages/vkui/src/components/Panel/Panel.stories.tsx +++ b/packages/vkui/src/components/Panel/Panel.stories.tsx @@ -58,7 +58,7 @@ export const Example: Story = { setActivePanel('panel1')} />} > Communities diff --git a/packages/vkui/src/components/Panel/Readme.md b/packages/vkui/src/components/Panel/Readme.md index 76b3f468a0..9bf52cab5b 100644 --- a/packages/vkui/src/components/Panel/Readme.md +++ b/packages/vkui/src/components/Panel/Readme.md @@ -34,7 +34,7 @@ const Example = () => { setActivePanel('panel1')} />} > Communities diff --git a/packages/vkui/src/components/PanelHeader/PanelHeader.e2e-playground.tsx b/packages/vkui/src/components/PanelHeader/PanelHeader.e2e-playground.tsx new file mode 100644 index 0000000000..ac59bbafab --- /dev/null +++ b/packages/vkui/src/components/PanelHeader/PanelHeader.e2e-playground.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers'; +import { Div } from '../Div/Div'; +import { PanelHeader, type PanelHeaderProps } from './PanelHeader'; + +export const PanelHeaderPlayground = (props: ComponentPlaygroundProps) => { + return ( + + {(props: PanelHeaderProps) => ( + <> +
+ +
Panel
+
+ + )} +
+ ); +}; diff --git a/packages/vkui/src/components/PanelHeader/PanelHeader.e2e.tsx b/packages/vkui/src/components/PanelHeader/PanelHeader.e2e.tsx new file mode 100644 index 0000000000..476af374c5 --- /dev/null +++ b/packages/vkui/src/components/PanelHeader/PanelHeader.e2e.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { test } from '@vkui-e2e/test'; +import { PanelHeaderPlayground } from './PanelHeader.e2e-playground'; + +test.use({ + onlyForAppearances: ['light'], +}); + +test('PanelHeader', async ({ + mount, + expectScreenshotClippedToContent, + componentPlaygroundProps, +}) => { + await mount(); + await expectScreenshotClippedToContent(); +}); diff --git a/packages/vkui/src/components/PanelHeader/PanelHeader.module.css b/packages/vkui/src/components/PanelHeader/PanelHeader.module.css index 262940ac49..11e995432e 100644 --- a/packages/vkui/src/components/PanelHeader/PanelHeader.module.css +++ b/packages/vkui/src/components/PanelHeader/PanelHeader.module.css @@ -2,12 +2,12 @@ position: relative; } -.PanelHeader--vis.PanelHeader--fixed::before { +.PanelHeader--static.PanelHeader--fixed::before { display: block; content: ''; } -.PanelHeader:not(.PanelHeader--vis):not(.PanelHeader--fixed) { +.PanelHeader:not(.PanelHeader--static):not(.PanelHeader--fixed) { block-size: 0; /* см. https://github.com/VKCOM/VKUI/issues/5571 */ z-index: var(--vkui_internal--z_index_panel_header); @@ -30,12 +30,12 @@ background: transparent; } -.PanelHeader--sizeX-regular .PanelHeader--shadow .PanelHeader__in { +.PanelHeader--sizeX-regular.PanelHeader--shadow .PanelHeader__in { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); } @media (--sizeX-regular) { - .PanelHeader--sizeX-none .PanelHeader--shadow .PanelHeader__in { + .PanelHeader--sizeX-none.PanelHeader--shadow .PanelHeader__in { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); } } diff --git a/packages/vkui/src/components/PanelHeader/PanelHeader.tsx b/packages/vkui/src/components/PanelHeader/PanelHeader.tsx index fa9eb1a396..97f35e89c5 100644 --- a/packages/vkui/src/components/PanelHeader/PanelHeader.tsx +++ b/packages/vkui/src/components/PanelHeader/PanelHeader.tsx @@ -15,8 +15,8 @@ import { Text } from '../Typography/Text/Text'; import styles from './PanelHeader.module.css'; const platformClassNames = { - ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'), - android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'), + ios: styles['PanelHeader--ios'], + android: styles['PanelHeader--android'], vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'), }; @@ -40,13 +40,23 @@ export interface PanelHeaderProps * При передаче нескольких элементов, расставляет отступы между ними. */ after?: React.ReactNode; - separator?: boolean; + /** + * Тип разделителя под шапкой. + * + * - `"none"` означает, что разделитель не нужен + * - `"separator"` включает сепаратор при условии, что это: + * - либо платформа `vkcom` + * - либо платформа `android`/`ios` при `` + * - `"spacing"` включает отступ, если это платформа `android`/`ios` при `` + * - `"auto"` автоматически подбирает либо `"separator"`, либо `"spacing"` по их условиям + */ + delimiter?: 'auto' | 'none' | 'separator' | 'spacing'; transparent?: boolean; shadow?: boolean; /** - * Если `false`, то шапка будет нулевой высоты и контент панели "залезет" под неё + * Высота шапки будет игнорироваться контентом панели */ - visor?: boolean; + float?: boolean; /** * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`. */ @@ -57,13 +67,14 @@ export interface PanelHeaderProps typographyProps?: HasComponent & React.HTMLAttributes & HasDataAttribute; } -const PanelHeaderIn = ({ - before, - after, - separator, - children, - typographyProps = {}, -}: PanelHeaderProps) => { +interface PanelHeaderInProps { + before?: PanelHeaderProps['before']; + after?: PanelHeaderProps['after']; + children?: PanelHeaderProps['children']; + typographyProps?: PanelHeaderProps['typographyProps']; +} + +const PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => { const { Component = 'span', ...restProps } = typographyProps; const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider(); const { isInsideModal } = React.useContext(ModalRootContext); @@ -89,23 +100,16 @@ const PanelHeaderIn = ({ ); return ( - - -
- {before} -
-
{typographyNode}
-
- - {separator && platform === 'vkcom' && ( - - )} - + +
+ {before} +
+
{typographyNode}
+
+ ); }; @@ -116,9 +120,9 @@ export const PanelHeader = ({ before, children, after, - separator = true, - visor = true, + float = false, transparent = false, + delimiter = 'auto', shadow, getRef, getRootRef, @@ -129,7 +133,11 @@ export const PanelHeader = ({ const platform = usePlatform(); const { sizeX = 'none', sizeY = 'none' } = useAdaptivity(); const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender(); - let isFixed = fixed !== undefined ? fixed : platform !== 'vkcom'; + const isVKCOM = platform === 'vkcom'; + const isFixed = fixed !== undefined ? fixed : !isVKCOM; + const separatorVisible = delimiter === 'auto' || delimiter === 'separator'; + const staticSeparatorVisible = !float && separatorVisible; + const staticSpacingVisible = !float && (delimiter === 'auto' || delimiter === 'spacing'); return ( - + {children} ) : ( - + {children} )} - {separator && visor && platform !== 'vkcom' && ( - - {adaptiveSizeX.compact && } - {adaptiveSizeX.regular && ( + {!isVKCOM && ( + <> + {staticSeparatorVisible && adaptiveSizeX.compact && ( + + )} + {staticSpacingVisible && adaptiveSizeX.regular && ( )} - + + )} + {separatorVisible && isVKCOM && ( + )} ); diff --git a/packages/vkui/src/components/PanelHeader/Readme.md b/packages/vkui/src/components/PanelHeader/Readme.md index 6d16e53f74..059a2464c2 100644 --- a/packages/vkui/src/components/PanelHeader/Readme.md +++ b/packages/vkui/src/components/PanelHeader/Readme.md @@ -1,5 +1,9 @@ Практически всегда содержимое панели должно начинаться с [`Separator`](#!/Separator), -поэтому он рисуется в `PanelHeader` по-умолчанию. +поэтому его поведение в `PanelHeader` по-умолчанию следующее: + +- на платформе `vkcom` отрисовывается сепаратор; +- на платформах `android`/`ios` при `` отрисовывается разделитель; +- на платформах `android`/`ios` в `` добавляется отступ после шапки. Исключения, в которых разделитель в начале панели не нужен: @@ -8,14 +12,12 @@ - После `PanelHeader` рисуется [`Banner`](#!/Banner). - В `PanelHeader` рисуются [`Tabs`](#!/Tabs). -В таких случаях передавайте в `PanelHeader` свойство `separator={false}`. +В таких случаях передавайте в `PanelHeader` свойство `delimiter="spacing"`. > **Важно** > -> Правая часть шапки скрыта по умолчанию. Если хотите ее показать, передайте в -> [`ConfigProvider`](#/ConfigProvider) свойство `hasCustomPanelHeaderAfter={false}`. -> -> ⚠️ В v6 значение по умолчанию будет изменено на `false` (см. https://github.com/VKCOM/VKUI/issues/5049). +> Правая часть шапки доступна по умолчанию. Если вы разрабатываете мини-приложение и хотите ее скрыть, передайте в +> [`ConfigProvider`](#/ConfigProvider) свойство `hasCustomPanelHeaderAfter`. ```jsx { "props": { "showCustomPanelHeaderAfterProps": true } } const Example = () => { @@ -145,6 +147,7 @@ const Example = () => { setModalPanel('modal-panel2')} /> @@ -161,7 +164,10 @@ const Example = () => { - setModalPanel('modal-panel3')} />}> + setModalPanel('modal-panel3')} />} + > Новости Интересное diff --git a/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-android-chromium-light-1-snap.png b/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-android-chromium-light-1-snap.png new file mode 100644 index 0000000000..7eb4486331 --- /dev/null +++ b/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-android-chromium-light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9941cbf11c9011e7c6726334d9a4f2c6e397826ddd8a7e945775f876c8114aec +size 60523 diff --git a/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-ios-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-ios-webkit-light-1-snap.png new file mode 100644 index 0000000000..200049ce19 --- /dev/null +++ b/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-ios-webkit-light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9f6602731b7b447999cc5d9e7044460d31af30e32f2a2f4d20853ec4c31c60ca +size 53767 diff --git a/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-vkcom-chromium-light-1-snap.png new file mode 100644 index 0000000000..66f675e536 --- /dev/null +++ b/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-vkcom-chromium-light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fdc28924a6e20a6e1bbb466a031c608793958784b969e57a3d260b58ab5fab89 +size 23614 diff --git a/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-vkcom-firefox-light-1-snap.png new file mode 100644 index 0000000000..6d71971034 --- /dev/null +++ b/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-vkcom-firefox-light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5c1f903d150136e4524c4a3b382e53294bb4e97f8d2c67b6a32833e25ee5bd53 +size 31200 diff --git a/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-vkcom-webkit-light-1-snap.png new file mode 100644 index 0000000000..496ac3115e --- /dev/null +++ b/packages/vkui/src/components/PanelHeader/__image_snapshots__/panelheader-vkcom-webkit-light-1-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:39ce9ff0f0445ea0b7952c0387141559a98eb87619db115b3d2d4c02c2e6ad51 +size 21558 diff --git a/packages/vkui/src/components/PanelHeaderContent/Readme.md b/packages/vkui/src/components/PanelHeaderContent/Readme.md index ada54556b1..1c3dc7389e 100644 --- a/packages/vkui/src/components/PanelHeaderContent/Readme.md +++ b/packages/vkui/src/components/PanelHeaderContent/Readme.md @@ -2,10 +2,8 @@ > **Важно** > -> Правая часть шапки скрыта по умолчанию. Если хотите ее показать, передайте в -> [`ConfigProvider`](#/ConfigProvider) свойство `hasCustomPanelHeaderAfter={false}`. -> -> ⚠️ В v6 значение по умолчанию будет изменено на `false` (см. https://github.com/VKCOM/VKUI/issues/5049). +> Правая часть шапки доступна по умолчанию. Если вы разрабатываете мини-приложение и хотите ее скрыть, передайте в +> [`ConfigProvider`](#/ConfigProvider) свойство `hasCustomPanelHeaderAfter`. ```jsx { "props": { "showCustomPanelHeaderAfterProps": true } } const Example = () => { diff --git a/packages/vkui/src/components/PanelHeaderContext/Readme.md b/packages/vkui/src/components/PanelHeaderContext/Readme.md index 5d0d36ee66..284e8bc1d7 100644 --- a/packages/vkui/src/components/PanelHeaderContext/Readme.md +++ b/packages/vkui/src/components/PanelHeaderContext/Readme.md @@ -18,7 +18,7 @@ const Example = () => { return ( } + header={hasHeader && } > diff --git a/packages/vkui/src/components/Search/Readme.md b/packages/vkui/src/components/Search/Readme.md index 55b54be795..290d462405 100644 --- a/packages/vkui/src/components/Search/Readme.md +++ b/packages/vkui/src/components/Search/Readme.md @@ -51,6 +51,7 @@ const SimpleSearch = ({ goHeaderSearch }) => { } + delimiter="spacing" > Выбор тематики @@ -79,7 +80,10 @@ const HeaderSearch = ({ goSearch, onFiltersClick }) => { return ( - }> + } + > { return ( } + header={!isVKCOM && } modal={ { > } - header={!isVKCOM && } + header={!isVKCOM && } > diff --git a/packages/vkui/src/components/SplitLayout/Readme.md b/packages/vkui/src/components/SplitLayout/Readme.md index c30c1b8819..69e54ac06d 100644 --- a/packages/vkui/src/components/SplitLayout/Readme.md +++ b/packages/vkui/src/components/SplitLayout/Readme.md @@ -39,7 +39,7 @@ const Example = () => { return ( } + header={!isVKCOM && } popout={popout} modal={modalRoot} > diff --git a/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx b/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx index 95e3d97cb5..ad59c39538 100644 --- a/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx +++ b/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx @@ -74,7 +74,7 @@ export const Example: Story = { return ( } + header={!isVKCOM && } popout={popout} modal={modalRoot} > diff --git a/packages/vkui/src/storybook/VKUIDecorators.tsx b/packages/vkui/src/storybook/VKUIDecorators.tsx index 5e9644b19b..4fcd6dc1c2 100644 --- a/packages/vkui/src/storybook/VKUIDecorators.tsx +++ b/packages/vkui/src/storybook/VKUIDecorators.tsx @@ -41,7 +41,7 @@ const SimpleLayout = ({ children }: { children: React.ReactNode }) => { const isVKCOM = platform === 'vkcom'; return ( - }> + }> {children} ); diff --git a/packages/vkui/src/testing/e2e/ComponentPlayground.tsx b/packages/vkui/src/testing/e2e/ComponentPlayground.tsx index 7e33efcb84..a31ab4c9e2 100644 --- a/packages/vkui/src/testing/e2e/ComponentPlayground.tsx +++ b/packages/vkui/src/testing/e2e/ComponentPlayground.tsx @@ -39,7 +39,7 @@ export const ComponentPlayground = < }: InternalComponentPlaygroundProps) => { const isVKCOM = platform === 'vkcom'; const adaptivityProviderProps: AdaptivityProps = Object.assign( - isVKCOM ? { sizeX: 'compact', sizeY: 'compact' } : {}, + isVKCOM ? { sizeX: 'regular', sizeY: 'compact' } : {}, adaptivityProviderPropsProp, ); diff --git a/styleguide/Components/Preview.js b/styleguide/Components/Preview.js index b558724394..8c6bf195d3 100644 --- a/styleguide/Components/Preview.js +++ b/styleguide/Components/Preview.js @@ -28,7 +28,7 @@ const Layout = ({ children }) => { return ( } + header={platform !== 'vkcom' && } > {children} diff --git a/styleguide/pages/adaptivity.md b/styleguide/pages/adaptivity.md index 2dd7a57e38..c9997d8e59 100644 --- a/styleguide/pages/adaptivity.md +++ b/styleguide/pages/adaptivity.md @@ -82,7 +82,7 @@ function App() { // ... - }> + }> {viewWidth.tabletPlus && ( Navigation diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md index e0365085e0..103c2c9b98 100644 --- a/styleguide/pages/migration_v6.md +++ b/styleguide/pages/migration_v6.md @@ -39,6 +39,7 @@ - `ModalCard` и `ModaCardBase` - `ModalPageHeader` - `Pagination` + - `PanelHeader` - 🗑️ ~~`PanelHeader.Content`~~ - `Placeholder` - 🗑️ ~~`PromoBanner`~~ @@ -803,6 +804,28 @@ npx @vkontakte/vkui-codemods --help
+## [`PanelHeader`](#/PanelHeader) + +- Свойство `visor` удалено, используйте свойство `float`. + +```diff +- ++ +- ++ +``` + +- Свойство `separator` удалено, используйте свойство `delimiter`. + +```diff +- ++ +- ++ +``` + +
+ ### 🗑️ ~~`PanelHeader.Content`~~ - Подкомпонент удален, используйте вместо него `typographyProps` у [`PanelHeader`](#/PanelHeader). diff --git a/styleguide/pages/quick_start.md b/styleguide/pages/quick_start.md index 057ff7cfa0..dba3fd02b0 100644 --- a/styleguide/pages/quick_start.md +++ b/styleguide/pages/quick_start.md @@ -56,9 +56,11 @@ import { import '@vkontakte/vkui/dist/vkui.css'; const App = () => { + const platform = usePlatform(); + return ( - }> + }>