diff --git a/packages/vkui/src/components/HorizontalCell/HorizontalCell.tsx b/packages/vkui/src/components/HorizontalCell/HorizontalCell.tsx index 9d158d6ec3..cc8a757eee 100644 --- a/packages/vkui/src/components/HorizontalCell/HorizontalCell.tsx +++ b/packages/vkui/src/components/HorizontalCell/HorizontalCell.tsx @@ -1,13 +1,7 @@ import * as React from 'react'; import { classNames, hasReactNode } from '@vkontakte/vkjs'; import { mergeStyle } from '../../helpers/mergeStyle'; -import type { - CSSCustomProperties, - HasRef, - HasRootRef, - HTMLAttributesWithRootRef, - LiteralUnion, -} from '../../types'; +import type { CSSCustomProperties, HasRef, HasRootRef, LiteralUnion } from '../../types'; import { Avatar } from '../Avatar/Avatar'; import { Tappable, type TappableProps } from '../Tappable/Tappable'; import { Caption } from '../Typography/Caption/Caption'; @@ -32,18 +26,6 @@ const textAlignClassNames = { type HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto'; -interface CellTypographyProps extends HTMLAttributesWithRootRef { - size: HorizontalCellProps['size']; -} - -const CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => { - return size === 's' ? ( - {children} - ) : ( - {children} - ); -}; - export interface HorizontalCellProps extends Omit, HasRootRef, @@ -78,6 +60,11 @@ export interface HorizontalCellProps * Актуально для использования в многострочных списках */ noPadding?: boolean; + /** + * Позволяет передать типографический компонент, используемый для `title`. + * По умолчанию `Caption` для `size=s`, иначе `Subhead`. + */ + TitleComponent?: React.ElementType; } /** @@ -95,6 +82,7 @@ export const HorizontalCell = ({ extraSubtitle, textAlign = size === 's' ? 'center' : 'start', noPadding = false, + TitleComponent = size === 's' ? Caption : Subhead, ...restProps }: HorizontalCellProps): React.ReactNode => { const hasTypography = @@ -125,7 +113,7 @@ export const HorizontalCell = ({ textAlign !== 'start' && textAlignClassNames[textAlign], )} > - {hasReactNode(title) && {title}} + {hasReactNode(title) && {title}} {hasReactNode(subtitle) && {subtitle}} {hasReactNode(extraSubtitle) && ( {extraSubtitle}