InfoRow

InfoRow показывает одну или две пары “метка - значение” в строке. Компонент подходит для кратких сводок в карточках, сайдбарах и деталках сущностей.

Поддерживаются:

• одна колонка (column="1");
• две колонки в одной строке (column="2");
• разделители, скелетон, tooltip к метке;
• действия справа (rowActions, secondaryRowActions);
• обрезка длинных заголовков через labelTruncate.

Если нужно отрисовать несколько строк по данным, используйте useGetContent и InfoRowFieldItem (пример ниже).

Демо

<InfoRow label="Очень длинный заголовок первого поля, который должен обрезаться по настройке truncate" secondaryLabel="Очень длинный заголовок второго поля, который тоже должен обрезаться" content="Content" secondaryContent="Column 2" labelTruncate={1} secondaryLabelTruncate={1} column="1" maxWidth={false} data-test-id="info-row-demo" />

Несколько строк по данным

Список полей

import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { InfoRow, InfoRowFieldItem, useGetContent } from '@cloud-ru/ds-uikit-product-info-row';

type Row = { name: string; active: boolean };

const data: Row = { name: 'Project', active: true };

const items: InfoRowFieldItem<Row>[] = [
  {
    label: 'Name',
    accessorKey: 'name',
    rowActions: {
      first: {
        icon: <PlaceholderSVG />,
        'aria-label': 'Изменить',
        'data-test-id': 'data-list-action-first',
      },
      second: {
        icon: <PlaceholderSVG />,
        'aria-label': 'Копировать',
        'data-test-id': 'data-list-action-second',
      },
    },
  },
  { label: 'Active', accessorKey: 'active' },
];

export function DataListExample() {
  const getContent = useGetContent();

  return (
    <div>
      {items.map((item, index) => {
        const { label, accessorKey, render, ...rowProps } = item;
        const content = getContent<Row>({ data, render, accessorKey });
        return (
          <InfoRow
            key={String(accessorKey ?? label)}
            label={label}
            content={content}
            topDivider={index === 0}
            bottomDivider
            width='full'
            column='1'
            data-test-id={`data-list-row-${index}`}
            {...rowProps}
          />
        );
      })}
    </div>
  );
}

Когда использовать

• Короткая сводка полей “ключ - значение” в карточке или панели.
• Детальная страница объекта, где важна компактная подача.
• Когда таблица избыточна, а данных немного.

Когда лучше выбрать другой компонент

• InfoGroup - когда данные уже описаны схемой полей и нужно вывести список строк по объекту.

InfoRow адаптивен сам по себе — на mobile (раскладка из AdaptiveProvider) он переключается в вертикальный comfort-формат, отдельный компонент для этого не нужен.

Установка

pnpm add @cloud-ru/ds-uikit-product-info-row

import { InfoRow, useGetContent, NO_DATA_PLACEHOLDER } from '@cloud-ru/ds-uikit-product-info-row'
import '@cloud-ru/ds-uikit-product-info-row/style.css'

Базовый пример

<InfoRow
  label='Статус'
  content='Активен'
  column='1'
  width='fixed'
/>

Props

Types

InfoRowProps

RowActionsPair

Unions

InfoRowColumn

Position

Related props

QuestionTooltipProps

Адаптивность

InfoRow — адаптивный компонент с переключением поверхности (surface-swap). Раскладку он берёт из AdaptiveProvider (контекст @cloud-ru/ds-adaptive); публичный API единый для обеих платформ:

• desktop (по умолчанию) — строка «метка — значение» в одну или две колонки.
• mobile — вертикальный comfort-формат: метка и значение друг под другом, карточка со скруглением и разделителями.

Верстайте под desktop и поставьте один <AdaptiveProvider> в корне приложения — mobile-поверхность включается автоматически (desktop-first). Пропа layoutType у компонента нет: источник раскладки — только контекст.

Как форсировать платформу

Форс — только контекстом, не пропом:

• Поддерево — вложенный провайдер:

  import { AdaptiveProvider } from '@cloud-ru/ds-adaptive'
  
  <AdaptiveProvider layoutType='mobile'>
    <InfoRow label='Статус' content='Активен' />
  </AdaptiveProvider>

• Отдельный компонент — withLayoutType (module-scope, сахар над провайдером):

  import { withLayoutType } from '@cloud-ru/ds-adaptive'
  import { InfoRow } from '@cloud-ru/ds-uikit-product-info-row'
  
  const MobileInfoRow = withLayoutType(InfoRow, 'mobile')

Платформенные пропы

Таблица синхронизирована с JSDoc-пометками у InfoRowProps.

position задаёт скругление и разделители мобильной карточки. Внутри InfoGroup он проставляется автоматически по месту строки в группе.

Mobile — карточка

import { AdaptiveProvider, LAYOUT_TYPE } from '@cloud-ru/ds-adaptive';
import { InfoGroup } from '@cloud-ru/ds-uikit-product-info-row';

type Project = { name: string; status: string; region: string; active: boolean };

const data: Project = { name: 'Mercury', status: 'Running', region: 'ru-moscow-1', active: true };

export function MobileLayout() {
  return (
    <div style={{ maxWidth: 360 }}>
      <AdaptiveProvider layoutType={LAYOUT_TYPE.Mobile}>
        <InfoGroup
          data={data}
          items={[
            { label: 'Имя', accessorKey: 'name' },
            { label: 'Статус', accessorKey: 'status' },
            { label: 'Регион', accessorKey: 'region' },
            { label: 'Активен', accessorKey: 'active' },
          ]}
        />
      </AdaptiveProvider>
    </div>
  );
}

Подробнее о модели адаптивности — Адаптивность — паттерн.

Storybook

Figma

Доступность

• Разделители: role="separator".
• Для иконок в rowActions добавляйте aria-label.
• Кнопки наследуют поведение и доступность @cloud-ru/ds-button.
• QuestionTooltip: кнопка-триггер с aria-label.