llms.txt

ReleaseNotes

ReleaseNotes — адаптивный preset для показа новостей платформы. На desktop это модальное окно, на mobile — bottom sheet; поверхность выбирается автоматически по раскладке. Публичная визуальная ось contentState принимает data, noData, error.

Примеры использования

Данные

Данные
tsx
import { Button } from '@cloud-ru/ds-button';
import { ReleaseNotes } from '@cloud-ru/ds-uikit-product-modal-predefined';
import { useState } from 'react';

import { releaseNotesItems } from './releaseNotesItems';

export function ReleaseNotesData() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button label='Open release notes' view='filled' appearance='primary' onClick={() => setOpen(true)} />
      <ReleaseNotes open={open} onClose={() => setOpen(false)} items={releaseNotesItems} />
    </>
  );
}

Нет данных

Нет данных
tsx
import { Button } from '@cloud-ru/ds-button';
import { ReleaseNotes } from '@cloud-ru/ds-uikit-product-modal-predefined';
import { useState } from 'react';

import { releaseNotesItems } from './releaseNotesItems';

export function ReleaseNotesNoData() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button label='Open no-data release notes' view='filled' appearance='primary' onClick={() => setOpen(true)} />
      <ReleaseNotes open={open} onClose={() => setOpen(false)} contentState='noData' items={releaseNotesItems} />
    </>
  );
}

Ошибка загрузки

Ошибка загрузки
tsx
import { Button } from '@cloud-ru/ds-button';
import { ReleaseNotes } from '@cloud-ru/ds-uikit-product-modal-predefined';
import { useState } from 'react';

import { releaseNotesItems } from './releaseNotesItems';

export function ReleaseNotesError() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button label='Open error release notes' view='filled' appearance='primary' onClick={() => setOpen(true)} />
      <ReleaseNotes
        open={open}
        onClose={() => setOpen(false)}
        contentState='error'
        items={releaseNotesItems}
        onDataErrorRetryClick={() => undefined}
      />
    </>
  );
}

Видео в новости

Видео в новости
tsx
import { Button } from '@cloud-ru/ds-button';
import { ReleaseNotes } from '@cloud-ru/ds-uikit-product-modal-predefined';
import { useState } from 'react';

import { releaseNotesItems } from './releaseNotesItems';

export function ReleaseNotesVideo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button label='Open video release notes' view='filled' appearance='primary' onClick={() => setOpen(true)} />
      <ReleaseNotes
        open={open}
        onClose={() => setOpen(false)}
        items={[
          {
            ...releaseNotesItems[0],
            video: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
          },
        ]}
      />
    </>
  );
}

Props

Types

PropsReleaseNotesProps
PropTypeDefaultRequiredDescription
closeOnPopstateboolean—noЗакрытие при навигации по истории
contentState"data" | "error" | "noData"—noВизуальное состояние контента по Figma
data-test-idstring—no
itemsNoteItemProps[]—yesМассив новостей
loadingboolean—noСостояние загрузки контента
onClose() => void—yesКолбэк закрытия
onDataErrorRetryClick(() => void)—noДействие перезагрузки на экране ошибки
onReadLaterClick(() => void)—noДействие "Ознакомиться позже"
onSlideChange((slide: number) => void)—noДействие при смене слайда
openboolean—yesУправление состоянием показан/не показан
readLaterButtonPropsPartial<ButtonProps>—noТолько mobile: дополнительные пропсы action-кнопки "Ознакомиться позже" (на desktop игнорируется).

NoteItemPropsinterface

PropTypeDefaultRequiredDescription
descriptionstring—yesОписание новости в markdown
image{ src: string; alt: string; }—yesИллюстрация
titlestring—yesЗаголовок новости
videostring | undefined—noВидео вместо статичной иллюстрации

Unions

ReleaseNotesContentStateunion

"data" | "error" | "noData"

Related props

ButtonPropsinterface

PropTypeDefaultRequiredDescription
appearance"critical" | "neutral" | "primary"—noВариант оформления
asT | undefined—noЭлемент или компонент для рендера: 'button' | 'a' | ComponentType (например Link из react-router-dom)
classNamestring | undefined—noДополнительный класс
counterOmit<CounterProps, "size"> | undefined—noПропсы для counter. `appearance` можно задать явно (по умолчанию наследуется от appearance кнопки).
data-test-idstring | undefined—no
disabledboolean | undefined—noОтключена
fullWidthboolean | undefined—noНа всю ширину
iconstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noИконка
iconPosition"after" | "before"—noПозиция иконки относительно текста
innerRefPolymorphicRef<T> | undefined—noRef на реальный DOM-элемент/инстанс, который рендерится через `as`. Используем явный проп, чтобы не зависеть от `forwardRef` и не тащить type-assertions на экспорт.
labelstring | undefined—noТекст кнопки
loadingboolean | undefined—noСостояние загрузки
minWidthboolean | undefined—noМинимальная ширина контейнера (`min-width` из токена размера). По умолчанию `true`. `false` — кнопка сжимается по контенту вместо фиксированного минимума.
size"l" | "m" | "s"—noРазмер
view"elevated" | "filled" | "function" | "outline" | "simple" | "tonal"—noВариант кнопки (Figma: filled, outline, function, simple, elevated)

Types

ReleaseNotesProps

Unions

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

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

  • desktop (по умолчанию) — модальное окно (ModalCustom из @cloud-ru/ds-modal) с каруселью новостей и постраничной навигацией.
  • mobile — контент рендерится в BottomSheet из @cloud-ru/ds-bottom-sheet (панель снизу со свайпом для закрытия).

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

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

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

  • Поддерево — вложенный провайдер: 
    import { AdaptiveProvider } from '@cloud-ru/ds-adaptive'

<AdaptiveProvider layoutType='mobile'>
  <ReleaseNotes open={open} onClose={close} items={items} />
</AdaptiveProvider>
  • Отдельный компонент — withLayoutType (module-scope, сахар над провайдером): 
    import { withLayoutType } from '@cloud-ru/ds-adaptive'
import { ReleaseNotes } from '@cloud-ru/ds-uikit-product-modal-predefined'

const MobileReleaseNotes = withLayoutType(ReleaseNotes, 'mobile')

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

Таблица синхронизирована с type-level JSDoc у ReleaseNotesProps.

Пропыdesktopmobile
readLaterButtonPropsигнорируетсяиспользуется
open, onClose, container, closeOnPopstate, contentState, items, loading, onReadLaterClick, onDataErrorRetryClick, onSlideChangeиспользуетсяиспользуется

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

Открыть в Storybook →

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →