patch: pr8199

packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx

@@ -3,20 +3,27 @@ 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 (
     <ComponentPlayground
       {...props}
       propSets={[
         {
           before: [<Avatar size={72} key="72" />],
-          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: [<Avatar size={72} key="72" />],
-          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: [<Avatar size={48} key="48" />],
+          children: [longChildren],
+          subtitle: [longSubtitle],
+          extraSubtitle: [longExtraSubtitle],
+          after: [<Button key="After">Подписаться</Button>],
+          afterAlign: ['start', 'center'],
+        },
         {
           before: [<Avatar size={48} key="48" />],
           children: ['Михаил Лихачев'],
@@ -67,10 +82,26 @@ export const RichCellPlayground = (props: ComponentPlaygroundProps) => {
         {
           before: [<Avatar size={24} key="24" />],
           children: ['Михаил'],
-          after: ['Very very very very very very very long after'],
+          after: [
+            <div key="after" style={{ maxWidth: 150 }}>
+              Very very very very very very very long after
+            </div>,
+          ],
           beforeAlign: ['center', 'end'],
           contentAlign: ['center', 'end'],
         },
+        // Проверяем, что при отсутствии after контент в основной части рястягивается на всю доступную ширину
+        {
+          children: ['Children'],
+          overTitle: ['Over title'],
+          extraSubtitle: [
+            <Flex key="extraSubtitle" justify="space-between" align="center">
+              <Button>Кнопка 1</Button>
+              <Text>Проможуточный текст</Text>
+              <Button>Кнопка 2</Button>
+            </Flex>,
+          ],
+        },
       ]}
     >
       {(props: RichCellProps) => <RichCell {...props} />}

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,51 +32,59 @@
   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;
 }
 
 .contentAfter {
   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;
 }
 

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<RichCellProps> = {
+const story: Meta<RichCellProps & { maxAfterWidth: number }> = {
   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: <Button>Подписаться</Button>,
+      },
+    }),
+    afterCaption: StringArg,
     before: createFieldWithPresets({
       additionalPresets: {
         Avatar40: <Avatar size={40} src={getAvatarUrl()} />,
@@ -61,15 +77,16 @@ const story: Meta<RichCellProps> = {
 
 export default story;
 
-type Story = StoryObj<RichCellProps>;
+type Story = StoryObj<RichCellProps & { maxAfterWidth: number }>;
 
 export const Playground: Story = {
   args: {
     before: 'Avatar72',
     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 ? (
+        <div style={{ maxWidth: maxAfterWidth }}>{afterProp}</div>
+      ) : (
+        afterProp
+      );
+
+    const afterCaption =
+      maxAfterWidth !== undefined ? (
+        <div style={{ maxWidth: maxAfterWidth }}>{afterCaptionProp}</div>
+      ) : (
+        afterCaptionProp
+      );
+    return <RichCell after={after} afterCaption={afterCaption} {...args} />;
+  },
 };

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 {...props}>RichCell</RichCell>);
 
   it.each<[Exclude<RichCellProps['afterAlign'], undefined>, 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(
         <RichCell
+          data-testid="rich-cell"
           overTitle="Subhead"
           subtitle="Text"
           extraSubtitle="Caption"
@@ -25,11 +26,12 @@ describe('RichCell', () => {
           Children
         </RichCell>,
       );
+      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(
-      <RichCell contentAlign={contentAlign} overTitle="Subhead" subtitle="Text">
+    render(
+      <RichCell
+        contentAlign={contentAlign}
+        data-testid="rich-cell"
+        overTitle="Subhead"
+        subtitle="Text"
+      >
         Children
       </RichCell>,
     );
-
-    const contentElement = container.getElementsByClassName(styles.contentBefore)[0];
-    expect(contentElement.classList.contains(expectedClassName)).toBeTruthy();
+    expect(screen.getByTestId('rich-cell')).toHaveClass(expectedClassName);
   });
 
   it.each<[Exclude<RichCellProps['beforeAlign'], undefined>, 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(
-      <RichCell beforeAlign={beforeAlign} before={<div data-testid="before" />}>
+    render(
+      <RichCell
+        beforeAlign={beforeAlign}
+        data-testid="rich-cell"
+        before={<div data-testid="before" />}
+      >
         Children
       </RichCell>,
     );
-
-    const beforeElement = container.getElementsByClassName(styles.before)[0];
-    expect(beforeElement.classList.contains(expectedClassName)).toBeTruthy();
+    expect(screen.getByTestId('rich-cell')).toHaveClass(expectedClassName);
   });
 });