From 6c3fb7c7e5c2c92f2dea00cd708e8a13a9e152c3 Mon Sep 17 00:00:00 2001 From: Eldar <61377022+eldarmuhamethanov@users.noreply.github.com> Date: Tue, 28 Jan 2025 13:42:04 +0300 Subject: [PATCH] fix(RichCell): revert fix with after overflow (#8199) (cherry picked from commit 40a7218a674a5f7018dbaa69963bc7f76174d700) --- .../RichCell/RichCell.e2e-playground.tsx | 49 +++++++++++--- .../components/RichCell/RichCell.module.css | 37 +++++----- .../components/RichCell/RichCell.stories.tsx | 41 ++++++++++-- .../src/components/RichCell/RichCell.test.tsx | 43 +++++++----- .../vkui/src/components/RichCell/RichCell.tsx | 67 ++++++++++--------- .../richcell-android-chromium-dark-1-snap.png | 4 +- ...richcell-android-chromium-light-1-snap.png | 4 +- .../richcell-ios-webkit-dark-1-snap.png | 4 +- .../richcell-ios-webkit-light-1-snap.png | 4 +- .../richcell-vkcom-chromium-dark-1-snap.png | 4 +- .../richcell-vkcom-chromium-light-1-snap.png | 4 +- .../richcell-vkcom-firefox-dark-1-snap.png | 4 +- .../richcell-vkcom-firefox-light-1-snap.png | 4 +- .../richcell-vkcom-webkit-dark-1-snap.png | 4 +- .../richcell-vkcom-webkit-light-1-snap.png | 4 +- 15 files changed, 178 insertions(+), 99 deletions(-) diff --git a/packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx b/packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx index b864aa864c..4327d6f5c2 100644 --- a/packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx +++ b/packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx @@ -3,9 +3,16 @@ import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/pl import { Avatar } from '../Avatar/Avatar'; import { Button } from '../Button/Button'; import { ButtonGroup } from '../ButtonGroup/ButtonGroup'; +import { Flex } from '../Flex/Flex'; +import { Text } from '../Typography/Text/Text'; import { UsersStack } from '../UsersStack/UsersStack'; import { RichCell, type RichCellProps } from './RichCell'; +const longOverTitle = 'Subhead subhead subhead subhead'; +const longChildren = 'Children children children children'; +const longSubtitle = 'Subtitle subtitle subtitle subtitle'; +const longExtraSubtitle = 'Extra subtitle Extra subtitle'; + export const RichCellPlayground = (props: ComponentPlaygroundProps) => { return ( { propSets={[ { before: [], - overTitle: ['Subhead subhead subhead subhead'], - children: ['Children children children children'], - subtitle: ['Text text text text text text'], - extraSubtitle: ['Caption caption caption caption'], + overTitle: [longOverTitle], + children: [longChildren], + subtitle: [longSubtitle], + extraSubtitle: [longExtraSubtitle], after: ['After'], afterAlign: ['start', 'center', 'end'], afterCaption: ['After Caption'], @@ -35,10 +42,10 @@ export const RichCellPlayground = (props: ComponentPlaygroundProps) => { }, { before: [], - overTitle: ['Subhead subhead subhead subhead'], - children: ['Children children children children'], - subtitle: ['Text text text text text text'], - extraSubtitle: ['Caption caption caption caption'], + overTitle: [longOverTitle], + children: [longChildren], + subtitle: [longSubtitle], + extraSubtitle: [longExtraSubtitle], after: ['After'], afterCaption: ['After Caption'], bottom: [ @@ -54,6 +61,14 @@ export const RichCellPlayground = (props: ComponentPlaygroundProps) => { ], multiline: [true], }, + { + before: [], + children: [longChildren], + subtitle: [longSubtitle], + extraSubtitle: [longExtraSubtitle], + after: [], + afterAlign: ['start', 'center'], + }, { before: [], children: ['Михаил Лихачев'], @@ -67,10 +82,26 @@ export const RichCellPlayground = (props: ComponentPlaygroundProps) => { { before: [], children: ['Михаил'], - after: ['Very very very very very very very long after'], + after: [ +
+ Very very very very very very very long after +
, + ], beforeAlign: ['center', 'end'], contentAlign: ['center', 'end'], }, + // Проверяем, что при отсутствии after контент в основной части рястягивается на всю доступную ширину + { + children: ['Children'], + overTitle: ['Over title'], + extraSubtitle: [ + + + Проможуточный текст + + , + ], + }, ]} > {(props: RichCellProps) => } diff --git a/packages/vkui/src/components/RichCell/RichCell.module.css b/packages/vkui/src/components/RichCell/RichCell.module.css index 77669ba679..c5c41864d2 100644 --- a/packages/vkui/src/components/RichCell/RichCell.module.css +++ b/packages/vkui/src/components/RichCell/RichCell.module.css @@ -23,13 +23,6 @@ margin-inline-end: var(--vkui--spacing_size_xl); } -.inWrapper { - display: flex; - justify-content: space-between; - flex-grow: 1; - min-inline-size: 0; -} - .in { display: flex; flex-direction: column; @@ -39,27 +32,35 @@ min-inline-size: 0; } +.host.withAfter:not(.alignAfterStart).contentAlignStart .in { + justify-content: flex-start; +} + +.host.withAfter:not(.alignAfterStart).contentAlignEnd .in { + justify-content: flex-end; +} + .content { display: flex; word-break: break-word; - justify-content: space-between; } .contentBefore { display: flex; flex-direction: column; + flex-grow: 1; min-inline-size: 0; } -.contentAlignStart { +.alignAfterStart.contentAlignStart .contentBefore { justify-content: flex-start; } -.contentAlignCenter { +.alignAfterStart.contentAlignCenter .contentBefore { justify-content: center; } -.contentAlignEnd { +.alignAfterStart.contentAlignEnd .contentBefore { justify-content: flex-end; } @@ -67,23 +68,23 @@ display: flex; flex-direction: column; align-items: flex-end; + flex-shrink: 0; padding-inline-start: var(--vkui--spacing_size_xl); box-sizing: border-box; - flex-shrink: 0; - min-inline-size: 0; - flex-grow: 1; - flex-basis: 100px; } -.alignSelfStart { +.alignBeforeStart .before, +.alignAfterStart .contentAfter { align-self: flex-start; } -.alignSelfCenter { +.alignBeforeCenter .before, +.alignAfterCenter .contentAfter { align-self: center; } -.alignSelfEnd { +.alignBeforeEnd .before, +.alignAfterEnd .contentAfter { align-self: flex-end; } diff --git a/packages/vkui/src/components/RichCell/RichCell.stories.tsx b/packages/vkui/src/components/RichCell/RichCell.stories.tsx index db66f2ba2c..dd415e702a 100644 --- a/packages/vkui/src/components/RichCell/RichCell.stories.tsx +++ b/packages/vkui/src/components/RichCell/RichCell.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators'; -import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants'; +import { CanvasFullLayout, DisableCartesianParam, StringArg } from '../../storybook/constants'; import { getAvatarUrl } from '../../testing/mock'; import { createFieldWithPresets } from '../../testing/presets'; import { Avatar } from '../Avatar/Avatar'; @@ -10,11 +10,27 @@ import { Group } from '../Group/Group'; import { UsersStack } from '../UsersStack/UsersStack'; import { RichCell, type RichCellProps } from './RichCell'; -const story: Meta = { +const story: Meta = { title: 'Blocks/RichCell', component: RichCell, parameters: { ...CanvasFullLayout, ...DisableCartesianParam }, argTypes: { + overTitle: StringArg, + subtitle: StringArg, + extraSubtitle: StringArg, + children: StringArg, + maxAfterWidth: { + control: 'number', + }, + after: createFieldWithPresets({ + iconSizes: ['28'], + additionalPresets: { + Text: 'After', + LongText: 'Very long after'.repeat(5), + Button: , + }, + }), + afterCaption: StringArg, before: createFieldWithPresets({ additionalPresets: { Avatar40: , @@ -61,7 +77,7 @@ const story: Meta = { export default story; -type Story = StoryObj; +type Story = StoryObj; export const Playground: Story = { args: { @@ -69,7 +85,8 @@ export const Playground: Story = { overTitle: 'Over Title', subtitle: 'Subtitle', extraSubtitle: 'Extra Subtitle', - after: 'After', + after: 'Text', + maxAfterWidth: 100, afterCaption: 'After Caption', children: 'Example', }, @@ -82,4 +99,20 @@ export const Playground: Story = { withSinglePanel, withVKUILayout, ], + render: ({ maxAfterWidth, afterCaption: afterCaptionProp, after: afterProp, ...args }) => { + const after = + maxAfterWidth !== undefined ? ( +
{afterProp}
+ ) : ( + afterProp + ); + + const afterCaption = + maxAfterWidth !== undefined ? ( +
{afterCaptionProp}
+ ) : ( + afterCaptionProp + ); + return ; + }, }; diff --git a/packages/vkui/src/components/RichCell/RichCell.test.tsx b/packages/vkui/src/components/RichCell/RichCell.test.tsx index bca250773c..0cc2c170a6 100644 --- a/packages/vkui/src/components/RichCell/RichCell.test.tsx +++ b/packages/vkui/src/components/RichCell/RichCell.test.tsx @@ -1,4 +1,4 @@ -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { baselineComponent } from '../../testing/utils'; import { RichCell, type RichCellProps } from './RichCell'; import styles from './RichCell.module.css'; @@ -7,14 +7,15 @@ describe('RichCell', () => { baselineComponent((props) => RichCell); it.each<[Exclude, string, string]>([ - ['start', styles.content, styles.alignSelfStart], - ['center', styles.inWrapper, styles.alignSelfCenter], - ['end', styles.inWrapper, styles.alignSelfEnd], + ['start', styles.content, styles.alignAfterStart], + ['center', styles.host, styles.alignAfterCenter], + ['end', styles.host, styles.alignAfterEnd], ])( 'should have correct position of after element', (afterAlign, expectedContainerStyle, alignClassName) => { const { container } = render( { Children , ); + expect(screen.getByTestId('rich-cell')).toHaveClass(alignClassName); const expectedContainer = container.getElementsByClassName(expectedContainerStyle)[0]; const afterElement = Array.prototype.find.call( expectedContainer.children, (element: HTMLElement) => { - return element.classList.contains(alignClassName); + return element.classList.contains(styles.contentAfter); }, ); expect(afterElement).toBeTruthy(); @@ -41,28 +43,33 @@ describe('RichCell', () => { ['center', styles.contentAlignCenter], ['end', styles.contentAlignEnd], ])('should have correct content alignment', (contentAlign, expectedClassName) => { - const { container } = render( - + render( + Children , ); - - const contentElement = container.getElementsByClassName(styles.contentBefore)[0]; - expect(contentElement.classList.contains(expectedClassName)).toBeTruthy(); + expect(screen.getByTestId('rich-cell')).toHaveClass(expectedClassName); }); it.each<[Exclude, string]>([ - ['start', styles.alignSelfStart], - ['center', styles.alignSelfCenter], - ['end', styles.alignSelfEnd], + ['start', styles.alignBeforeStart], + ['center', styles.alignBeforeCenter], + ['end', styles.alignBeforeEnd], ])('should have correct before element alignment', (beforeAlign, expectedClassName) => { - const { container } = render( - }> + render( + } + > Children , ); - - const beforeElement = container.getElementsByClassName(styles.before)[0]; - expect(beforeElement.classList.contains(expectedClassName)).toBeTruthy(); + expect(screen.getByTestId('rich-cell')).toHaveClass(expectedClassName); }); }); diff --git a/packages/vkui/src/components/RichCell/RichCell.tsx b/packages/vkui/src/components/RichCell/RichCell.tsx index 239f8cdfaa..7b69e5c26e 100644 --- a/packages/vkui/src/components/RichCell/RichCell.tsx +++ b/packages/vkui/src/components/RichCell/RichCell.tsx @@ -13,10 +13,16 @@ const sizeYClassNames = { compact: styles.sizeYCompact, }; -const alignSelfClassNames = { - start: styles.alignSelfStart, - center: styles.alignSelfCenter, - end: styles.alignSelfEnd, +const alignAfterClassNames = { + start: styles.alignAfterStart, + center: styles.alignAfterCenter, + end: styles.alignAfterEnd, +}; + +const alignBeforeClassNames = { + start: styles.alignBeforeStart, + center: styles.alignBeforeCenter, + end: styles.alignBeforeEnd, }; const alignContentClassNames = { @@ -111,13 +117,14 @@ export const RichCell: React.FC & { ...restProps }: RichCellProps) => { const { sizeY = 'none' } = useAdaptivity(); + const withAfter = after || afterCaption; const afterRender = () => { - if (!after && !afterCaption) { + if (!withAfter) { return; } return ( -
+
{after &&
{after}
} {afterCaption &&
{afterCaption}
}
@@ -131,35 +138,35 @@ export const RichCell: React.FC & { styles.host, !multiline && styles.textEllipsis, sizeY !== 'regular' && sizeYClassNames[sizeY], + withAfter && styles.withAfter, + withAfter && alignAfterClassNames[afterAlign], + before && alignBeforeClassNames[beforeAlign], + alignContentClassNames[contentAlign], )} > - {before && ( -
{before}
- )} -
-
-
-
- {overTitle && ( - - {overTitle} - - )} -
{children}
- {subtitle &&
{subtitle}
} - {extraSubtitle && ( - - {extraSubtitle} - - )} -
- {afterAlign === 'start' && afterRender()} + {before &&
{before}
} +
+
+
+ {overTitle && ( + + {overTitle} + + )} +
{children}
+ {subtitle &&
{subtitle}
} + {extraSubtitle && ( + + {extraSubtitle} + + )}
- {bottom &&
{bottom}
} - {actions &&
{actions}
} + {afterAlign === 'start' && afterRender()}
- {afterAlign !== 'start' && afterRender()} + {bottom &&
{bottom}
} + {actions &&
{actions}
}
+ {afterAlign !== 'start' && afterRender()} ); }; diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-dark-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-dark-1-snap.png index 7d92ce1fb0..40981c9f4f 100644 --- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d283c42c2842cdff370484657f6f0aab2c038cf25905008393c68b13ba1a43f9 -size 212569 +oid sha256:7caf4fecae2f3083ebfe064f5565485693b9a56f41b311605c9a78bf969e7140 +size 244949 diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-light-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-light-1-snap.png index 8c53661b8c..b4bb710408 100644 --- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e015139ee51a7e5a40c994c78ca8ddbbab91520e0f613f4911c50128e9df4d6c -size 205383 +oid sha256:c956a336334edac54fd7c726975f049d2604276c533dec6746cb85e54b43c511 +size 236215 diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-dark-1-snap.png index 7ba7bafaf8..a4fa7eafa6 100644 --- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9ce6e88441e4399f70e0083f740e13dfcc4319bb7e07c465fa128f16649791ea -size 359097 +oid sha256:8a4be18a892b1cbb5cd94b1ea031a36ca18737f4a2f47393abce763eccf2dfcb +size 406934 diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-light-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-light-1-snap.png index 1b9efb074d..e18b8a7095 100644 --- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:54107103b47e878878754e9515893ecb4a6b64a8884c07d97eb14dbca8a7d385 -size 359376 +oid sha256:9a4fc93abf64d2e01f624c82fa9bce2c61468badbeba1583051cc75f7866ac2a +size 392457 diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-dark-1-snap.png index 419cc4649f..6771781381 100644 --- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:630a825647db64716456aa762fcc9be706daffbd10ca57f555b90cb0fba8ac76 -size 133140 +oid sha256:bd107b293a09b7e1bb67ba70f2e50a6aee4d46b35df3586b334ff90b93ad3f2f +size 169566 diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-light-1-snap.png index 006e9c53b3..7f8535faf5 100644 --- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2d8d60e7dbc25c1bf8b5ee452e8ecc4194b862c27739c01210e35a455e980038 -size 130945 +oid sha256:349822259f55d0ed52f39cfcdf810b86d4a99731bddfbab77dd16fc196183dae +size 165081 diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-dark-1-snap.png index 5b97c401b9..def49345a1 100644 --- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c8d5905cb665888b34b62b8f6caecce126f174e0c43e95718f9804cc9786ca51 -size 244836 +oid sha256:ba4b7f53bc0fd0ced36d8863162898876f42a545dd3a364fc64da87830cff790 +size 317424 diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-light-1-snap.png index 630fe8eb06..2d16235f74 100644 --- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7cb18a8dd06bab8eaca2ca973b828542aa8ca52fa522dbafb832366a98330129 -size 244976 +oid sha256:b46f19eeeed93754333ed11ef1c412f337595d698a952bb23c7f8976ec9c8c06 +size 316439 diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-dark-1-snap.png index 7f85f31059..ef86fcb9c1 100644 --- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e87f2108e2f963ba5450c43f46757476ae9b622f740872f5b22e7556b1d67a9a -size 239499 +oid sha256:fc8ce0f55dab97749a81bffbdf360c2edb48487d7cc5567756ced7a5b9586949 +size 312406 diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-light-1-snap.png index 46d8a92bae..25a9285163 100644 --- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7e2c84c2a21321f3ed55be736e02206178abea8a27f888deaaf6d0ab78da859e -size 238833 +oid sha256:4ffcd66bd7f52dc248804fcbcb0da36dcc08fb7d93514e12252b9297556f5f71 +size 312350