feat(HorizontalCell): add textAlign + noPadding + fixes

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
-import {} from '../../testing/mock';
-import { Avatar } from '../Avatar/Avatar';
 import { Image } from '../Image/Image';
 import { HorizontalCell, type HorizontalCellProps } from './HorizontalCell';
 
@@ -14,52 +12,45 @@ const containerStyle: React.CSSProperties = {
   padding: 8,
 };
 
+const mapSizes = {
+  s: 56,
+  m: 88,
+  l: 128,
+  xl: 220,
+  auto: 250,
+};
+
 export const HorizontalCellPlayground = (props: ComponentPlaygroundProps) => {
   return (
     <ComponentPlayground
       {...props}
       propSets={[
         {
+          size: ['s', 'm', 'l', 'xl', 'auto'],
           title: ['Title'],
           subtitle: ['Just subtitle'],
           extraSubtitle: ['Some extra subtitle'],
         },
         {
+          size: ['s', 'm'],
           title: ['Very long title example'],
         },
+        {
+          size: [80],
+          textAlign: ['start', 'center', 'end'],
+          title: ['Title'],
+          subtitle: ['Just subtitle'],
+        },
+        {
+          size: ['s'],
+          noPadding: [true],
+        },
       ]}
     >
-      {({ title, subtitle, extraSubtitle, ...restProps }: HorizontalCellProps) => (
+      {({ size, ...restProps }: HorizontalCellProps) => (
         <div style={containerStyle}>
-          <HorizontalCell {...restProps} title={title} size="s">
-            <Avatar size={56} />
-          </HorizontalCell>
-          <HorizontalCell
-            {...restProps}
-            title={title}
-            subtitle={subtitle}
-            extraSubtitle={extraSubtitle}
-            size="m"
-          >
-            <Image size={88} borderRadius="l" />
-          </HorizontalCell>
-          <HorizontalCell
-            {...restProps}
-            title={title}
-            subtitle={subtitle}
-            extraSubtitle={extraSubtitle}
-            size="l"
-          >
-            <Image size={128} borderRadius="l" />
-          </HorizontalCell>
-          <HorizontalCell
-            {...restProps}
-            title={title}
-            subtitle={subtitle}
-            extraSubtitle={extraSubtitle}
-            size="xl"
-          >
-            <Image size={220} borderRadius="l" />
+          <HorizontalCell size={size} {...restProps}>
+            <Image size={typeof size === 'string' ? mapSizes[size] : 56} borderRadius="l" />
           </HorizontalCell>
         </div>
       )}

packages/vkui/src/components/HorizontalCell/HorizontalCell.module.css

@@ -34,20 +34,24 @@
 }
 
 .sized {
-  --vkui_internal--side_cell_width: calc(
-    var(--vkui_internal--cell_width) + var(--vkui_internal--side_cell_gap)
-  );
-
   max-inline-size: var(--vkui_internal--cell_width);
 }
 
+.customSize .body {
+  inline-size: var(--vkui_internal--cell_width);
+}
+
 .sizeS {
   --vkui_internal--side_cell_gap: calc(
     var(--vkui--size_base_padding_horizontal--regular) - var(--vkui--spacing_size_m)
   );
   --vkui_internal--cell_width: 72px;
 }
 
+.noPadding {
+  --vkui_internal--side_cell_gap: 0px;
+}
+
 .image {
   padding-block: 4px;
   padding-inline: var(--vkui--spacing_size_s);
@@ -59,6 +63,14 @@
   text-align: start;
 }
 
+.textAlignCenter {
+  text-align: center;
+}
+
+.textAlignEnd {
+  text-align: end;
+}
+
 .sizeS .image {
   padding-block: 4px;
   padding-inline: var(--vkui--spacing_size_m);
@@ -67,7 +79,6 @@
 .sizeS .content {
   padding-block: 2px 8px;
   padding-inline: 4px;
-  text-align: center;
 }
 
 .sizeM {
@@ -94,7 +105,13 @@
 
 .sized:first-child,
 .sized:last-child {
-  max-inline-size: var(--vkui_internal--side_cell_width);
+  max-inline-size: calc(var(--vkui_internal--cell_width) + var(--vkui_internal--side_cell_gap));
+}
+
+.sized:first-child:last-child {
+  max-inline-size: calc(
+    var(--vkui_internal--cell_width) + (2 * (var(--vkui_internal--side_cell_gap)))
+  );
 }
 
 .sized:first-child .body,

packages/vkui/src/components/HorizontalCell/HorizontalCell.tsx

@@ -25,6 +25,11 @@ const stylesSize = {
   auto: styles.sizeAuto,
 };
 
+const textAlignClassNames = {
+  center: styles.textAlignCenter,
+  end: styles.textAlignEnd,
+};
+
 type HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';
 
 interface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
@@ -63,6 +68,16 @@ export interface HorizontalCellProps
    * Дополнительная строка текста под `children` и `subtitle`.
    */
   extraSubtitle?: React.ReactNode;
+  /**
+   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`
+   */
+  textAlign?: 'start' | 'center' | 'end';
+  /**
+   * Отключает формирование отступов у крайних элементов
+   *
+   * Актуально для использования в многострочных списках
+   */
+  noPadding?: boolean;
 }
 
 /**
@@ -78,6 +93,8 @@ export const HorizontalCell = ({
   getRootRef,
   getRef,
   extraSubtitle,
+  textAlign = size === 's' ? 'center' : 'start',
+  noPadding = false,
   ...restProps
 }: HorizontalCellProps): React.ReactNode => {
   const hasTypography =
@@ -94,13 +111,20 @@ export const HorizontalCell = ({
         styles.host,
         typeof size === 'string' && stylesSize[size],
         size !== 'auto' && styles.sized,
+        typeof size === 'number' && styles.customSize,
+        noPadding && styles.noPadding,
         className,
       )}
     >
       <Tappable className={styles.body} getRootRef={getRef} {...restProps}>
         {hasReactNode(children) && <div className={styles.image}>{children}</div>}
         {hasTypography && (
-          <div className={styles.content}>
+          <div
+            className={classNames(
+              styles.content,
+              textAlign !== 'start' && textAlignClassNames[textAlign],
+            )}
+          >
             {hasReactNode(title) && <CellTypography size={size}>{title}</CellTypography>}
             {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}
             {hasReactNode(extraSubtitle) && (