# Дизайн-система Red Hat PatternFly

## Предварительный просмотр интерфейса дизайн-системы Red Hat PatternFly

Найдите нужное в каталоге сервисов, выберите отдельные сервисы или все видимые, проверьте общее число реплик, пересмотрите выбор и подтвердите локальный план.

## Справочник по дизайн-системе Red Hat PatternFly

PatternFly React 6.6.1 и @patternfly/react-tokens 6.6.1. Ниже показаны выбранные опубликованные значения токенов для светлой темы. Нативные компоненты и pf-v6-theme-dark обеспечивают стилизацию тёмной темы; данные примеров сервисов и компоновка определяются приложением.

### Семантические роли поверхностей и текста

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --pf-t--global--background--color--primary--default | rgb(255, 255, 255, 0.6000) | Используйте семантическую роль активной темы; красный акцент бренда не является универсальным цветом основного действия. |
| --pf-t--global--background--color--secondary--default | rgb(199, 199, 199, 0.3000) | Используйте семантическую роль активной темы; красный акцент бренда не является универсальным цветом основного действия. |
| --pf-t--global--text--color--regular | #151515 | Используйте семантическую роль активной темы; красный акцент бренда не является универсальным цветом основного действия. |
| --pf-t--global--text--color--subtle | #383838 | Используйте семантическую роль активной темы; красный акцент бренда не является универсальным цветом основного действия. |
| --pf-t--global--text--color--disabled | #a3a3a3 | Используйте семантическую роль активной темы; красный акцент бренда не является универсальным цветом основного действия. |
| --pf-t--global--color--brand--default | #004d99 | Используйте семантическую роль активной темы; красный акцент бренда не является универсальным цветом основного действия. |
| --pf-t--global--color--brand--hover | #003366 | Используйте семантическую роль активной темы; красный акцент бренда не является универсальным цветом основного действия. |
| --pf-t--global--color--brand--accent--default | #ee0000 | Используйте семантическую роль активной темы; красный акцент бренда не является универсальным цветом основного действия. |
| --pf-t--global--color--brand--subtle--default | #e0f0ff | Используйте семантическую роль активной темы; красный акцент бренда не является универсальным цветом основного действия. |
### Роли статусов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --pf-t--global--color--status--success--default | #204d00 | Сопровождайте значение статуса текстовой меткой. Эти значения для светлой темы не заменяют нативные варианты Label или Alert. |
| --pf-t--global--color--status--warning--default | #73480b | Сопровождайте значение статуса текстовой меткой. Эти значения для светлой темы не заменяют нативные варианты Label или Alert. |
| --pf-t--global--color--status--danger--default | #731f00 | Сопровождайте значение статуса текстовой меткой. Эти значения для светлой темы не заменяют нативные варианты Label или Alert. |
| --pf-t--global--color--status--info--default | #3d2785 | Сопровождайте значение статуса текстовой меткой. Эти значения для светлой темы не заменяют нативные варианты Label или Alert. |
| --pf-t--global--color--status--custom--default | #004d4d | Сопровождайте значение статуса текстовой меткой. Эти значения для светлой темы не заменяют нативные варианты Label или Alert. |
| --pf-t--global--color--status--unread--default | #0066cc | Сопровождайте значение статуса текстовой меткой. Эти значения для светлой темы не заменяют нативные варианты Label или Alert. |
### Шрифты основного текста и заголовков

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --pf-t--global--font--size--body--default | 0.875rem | Осознанно выбирайте роль типографики и семантический уровень заголовка. Визуальный размер не определяет структуру документа. |
| --pf-t--global--font--size--body--lg | 1rem | Осознанно выбирайте роль типографики и семантический уровень заголовка. Визуальный размер не определяет структуру документа. |
| --pf-t--global--font--size--heading--h1 | 1.5rem | Осознанно выбирайте роль типографики и семантический уровень заголовка. Визуальный размер не определяет структуру документа. |
| --pf-t--global--font--size--heading--h2 | 1.25rem | Осознанно выбирайте роль типографики и семантический уровень заголовка. Визуальный размер не определяет структуру документа. |
| --pf-t--global--font--size--heading--h3 | 1.125rem | Осознанно выбирайте роль типографики и семантический уровень заголовка. Визуальный размер не определяет структуру документа. |
| --pf-t--global--font--size--heading--h4 | 1rem | Осознанно выбирайте роль типографики и семантический уровень заголовка. Визуальный размер не определяет структуру документа. |
| --pf-t--global--font--size--heading--h5 | 1rem | Осознанно выбирайте роль типографики и семантический уровень заголовка. Визуальный размер не определяет структуру документа. |
| --pf-t--global--font--size--heading--h6 | 1rem | Осознанно выбирайте роль типографики и семантический уровень заголовка. Визуальный размер не определяет структуру документа. |
### Шкала интервалов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --pf-t--global--spacer--xs | 0.25rem | Для групп и элементов управления используйте именованную шкалу интервалов; значения в rem зависят от размера корневого шрифта, заданного пользователем. |
| --pf-t--global--spacer--sm | 0.5rem | Для групп и элементов управления используйте именованную шкалу интервалов; значения в rem зависят от размера корневого шрифта, заданного пользователем. |
| --pf-t--global--spacer--md | 1rem | Для групп и элементов управления используйте именованную шкалу интервалов; значения в rem зависят от размера корневого шрифта, заданного пользователем. |
| --pf-t--global--spacer--lg | 1.5rem | Для групп и элементов управления используйте именованную шкалу интервалов; значения в rem зависят от размера корневого шрифта, заданного пользователем. |
| --pf-t--global--spacer--xl | 2rem | Для групп и элементов управления используйте именованную шкалу интервалов; значения в rem зависят от размера корневого шрифта, заданного пользователем. |
| --pf-t--global--spacer--2xl | 3rem | Для групп и элементов управления используйте именованную шкалу интервалов; значения в rem зависят от размера корневого шрифта, заданного пользователем. |
| --pf-t--global--spacer--3xl | 4rem | Для групп и элементов управления используйте именованную шкалу интервалов; значения в rem зависят от размера корневого шрифта, заданного пользователем. |
| --pf-t--global--spacer--4xl | 5rem | Для групп и элементов управления используйте именованную шкалу интервалов; значения в rem зависят от размера корневого шрифта, заданного пользователем. |
### Форма и фокус

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --pf-t--global--border--radius--tiny | 4px | Используйте форму, предусмотренную для соответствующего компонента, а не применяйте скругление в виде капсулы ко всем поверхностям. |
| --pf-t--global--border--radius--small | 6px | Используйте форму, предусмотренную для соответствующего компонента, а не применяйте скругление в виде капсулы ко всем поверхностям. |
| --pf-t--global--border--radius--medium | 16px | Используйте форму, предусмотренную для соответствующего компонента, а не применяйте скругление в виде капсулы ко всем поверхностям. |
| --pf-t--global--border--radius--large | 24px | Используйте форму, предусмотренную для соответствующего компонента, а не применяйте скругление в виде капсулы ко всем поверхностям. |
| --pf-t--global--border--radius--pill | 999px | Используйте форму, предусмотренную для соответствующего компонента, а не применяйте скругление в виде капсулы ко всем поверхностям. |
| --pf-t--global--border--radius--control--form-element | 6px | Используйте форму, предусмотренную для соответствующего компонента, а не применяйте скругление в виде капсулы ко всем поверхностям. |
| --pf-t--global--border--radius--action--default | 999px | Используйте форму, предусмотренную для соответствующего компонента, а не применяйте скругление в виде капсулы ко всем поверхностям. |
## Полное руководство по дизайн-системе Red Hat PatternFly

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Компоновка операционного интерфейса дизайн-системы Red Hat PatternFly

### Коллекция с постоянно видимым контекстом операций

> Каталог сервисов позволяет оператору сравнивать состояние, местоположение и загрузку, а отдельная панель объёма работ фиксирует выбранный набор. Выбранные сервисы — это не то же самое, что текущие результаты поиска. Отфильтрованный сервис остаётся выбранным, пока его не удалят явно. Это различие особенно важно для массовых операций, последствия которых затрагивают не только содержимое видимой области экрана.

### Используйте иерархию нативных компонентов

Gallery отвечает за адаптивное расположение карточек в столбцы, Card отделяет один сервис от другого, Label обозначает статус, а Progress показывает примерное процентное значение с заголовком. Страница не имитирует инфраструктурную консоль с помощью произвольных цветных прямоугольников. Модель данных, элементы управления и состояние проверки реализованы в полном примере на React.

## Семантические роли цветов и темы в дизайн-системе Red Hat PatternFly

### Основной цвет бренда и красный акцент — разные роли

PatternFly v6 предоставляет отдельные роли для бренда, акцента, текста, фона и статусов. В выбранном наборе значений для светлой темы используются синий brand-default и красный brand-accent-default. Если считать красный Red Hat цветом любого заметного действия, эти роли смешиваются. Нативные компоненты Button и Label используют системные роли, предусмотренные для соответствующего варианта.

### Применяйте тёмную тему на уровне документа

В примере на элемент документа переключается pf-v6-theme-dark. Поверхности и текст приложения используют семантические переменные --pf-t--global, поэтому тема также определяет их цвета. Не фиксируйте светлые значения в собственных карточках, рассчитывая, что класс темы на элементе документа исправит их.

## Типографика и метаданные сервисов в дизайн-системе Red Hat PatternFly

### Отделяйте визуальный размер от семантики заголовков

Заголовок с headingLevel h1 задаёт заголовок страницы, а его размер определяет визуальный акцент. В этом снимке пакета Body-default равен 0.875rem. Подписи карточек, статусы и числовые показатели использования остаются читаемыми, но не превращаются при этом в заголовки. Список определений метаданных явно указывает количество реплик и идентификаторы сервисов.

### Избегайте неоднозначных операционных подписей

Использование ресурсов обозначено как примерные данные и в компоненте, и в нижнем колонтитуле. Полосу выполнения без пояснений можно принять за задачу развёртывания или процесс загрузки. Подпись поясняет, что означает процент, а отдельная метка статуса сообщает о нормальной загрузке или необходимости проверки.

## Red Hat PatternFly: галерея дизайн-системы и массовый выбор

### Используйте три состояния флажка

Элемент Select visible имеет значение true, если выбраны все видимые сервисы, false, если не выбран ни один, и null, если выбрана только часть. Компонент PatternFly Checkbox поддерживает значение null для неопределённого состояния. Приложение вычисляет это состояние по отфильтрованной коллекции, а не использует отдельное логическое значение, которое может рассинхронизироваться с выбором строк.

1. Выберите один сервис и проверьте состояние частичного выбора.

2. Выберите все сервисы, видимые в данный момент.

3. Найдите один сервис по названию и убедитесь, что скрытые выбранные элементы сохраняются в области действия.

4. Проверьте точный набор и общее количество реплик.

5. Подтвердите локальный план и ознакомьтесь с результатом.

### Используйте набор выбранных элементов как источник истины

У каждого сервиса есть стабильный идентификатор. Отдельные флажки и Select visible изменяют один и тот же набор идентификаторов; панель области действия формирует названия сервисов и общее количество реплик на основе этого набора. Поиск влияет только на видимость. Благодаря этому сводка для проверки остаётся согласованной, даже если оператор сужает галерею после выбора нескольких сервисов.

## Red Hat PatternFly: интервалы дизайн-системы и адаптивные карточки

### Используйте семантические токены для оболочки страницы

В примере для фона, основного текста и второстепенных метаданных используются семантические свойства CSS из опубликованного пакета токенов. Встроенная шкала интервалов охватывает значения от xs до 4xl, а приложение задаёт расстояние 24px между коллекцией и панелью области действия. Это явное значение композиции не является ссылкой на токен.

### Перестраивайте галерею, прежде чем уменьшать её содержимое

Для Gallery задана минимальная ширина элемента 230px и интервал между элементами. На заданной в приложении точке адаптации 850px панель области действия перемещается под коллекцию. При ширине 500px внутренние отступы страницы уменьшаются до 16px, а поиск занимает всю ширину панели инструментов. Это решения по компоновке для данного примера, а не утверждение, что все продукты PatternFly используют такие точки адаптации.

## Red Hat PatternFly: проверка и состояния выбора в дизайн-системе

### Выбор не должен запускать операцию

Установка флажка только добавляет сервис в область действия. Действие Review selection показывает информационный Alert и кнопку подтверждения. Confirm local plan выводит общее количество выбранных сервисов и реплик, не запуская задачу обслуживания. При изменении выбора состояние проверки закрывается, чтобы устаревший набор нельзя было подтвердить незаметно.

### Не смешивайте восстановление поиска с выбором

Несовпадающий запрос отображает встроенное информационное Alert с действием Clear search. Оно очищает только запрос, сохраняя выбранные сервисы. Поэтому счётчик выбранных элементов на панели инструментов и панель области действия по-прежнему согласованы. Сброс выбранных элементов при отсутствии результатов поиска стал бы скрытым деструктивным поведением.

## Red Hat PatternFly: доступные элементы управления и статусы в дизайн-системе

### Подписывайте элементы выбора и используйте стандартные элементы управления

У каждого Checkbox есть стабильный id и видимая подпись с названием сервиса. У SearchInput есть доступное имя, Switch обозначает настройку оформления, а Review selection недоступен, пока набор пуст. Стандартный Progress передаёт своё значение и заголовок. Страница не зависит от действий, доступных только при наведении курсора и скрытых внутри карточки.

### Передавайте состояние словами

Счётчик выбранных элементов использует вежливую live region, статус сервиса отображается в Label, а итоговый Alert описывает произошедшее. Не используйте цвет как единственный индикатор области выбранных элементов или состояния сервиса. При проверке с клавиатуры следует протестировать частичный выбор, фильтрацию выбранного сервиса и возврат к полной коллекции.

- Установленный флажок означает включение в набор, а не статус успешного выполнения.

- Метка статуса описывает сервис, а не то, выбран ли он.

- Progress отображает примерный уровень использования ресурсов, а не завершение операции.

## Интеграция Red Hat PatternFly дизайн-системы React

### Подключите сброс стилей и стили компонентов один раз

В примере @patternfly/react-core/dist/styles/base.css импортируется в точке входа. Встроенные компоненты React получают стили компонентов из пакета. Область действия стилей приложения CSS ограничена pf-example и использует текущее пространство имён --pf-t--global; внутренние стили компонентов не переопределяются.

### Добавляйте реальное планирование только при наличии сервисного контракта

Локальный план — это только предварительный просмотр. Для промышленной реализации нужны авторизация, окна обслуживания, затрагиваемые зависимости, обратная связь о ходе выполнения и проверка на сервере. На протяжении запроса сохраняйте стабильность выбранных идентификаторов и сверяйте подтверждённый результат с фактическим ответом сервиса. Встроенные компоненты представления не предоставляют операционную серверную часть.

## Red Hat PatternFly: примеры компонентов дизайн-системы

### main.jsx — галерея сервисов и массовая проверка

Полная композиция встроенных Gallery/Card/Checkbox/Progress с областью действия, вычисляемой по выбранным элементам, и локальным подтверждением.

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Alert,
  Button,
  Card,
  CardBody,
  CardTitle,
  Checkbox,
  Gallery,
  GalleryItem,
  Label,
  Progress,
  SearchInput,
  Switch,
  Title,
} from "@patternfly/react-core";
import "@patternfly/react-core/dist/styles/base.css";
import "./patternfly.css";
const services = [
  {
    id: "api",
    name: "Public API",
    region: "eu-west",
    replicas: 6,
    load: 62,
    status: "Healthy",
  },
  {
    id: "jobs",
    name: "Background jobs",
    region: "eu-west",
    replicas: 3,
    load: 81,
    status: "Review capacity",
  },
  {
    id: "search",
    name: "Search index",
    region: "us-east",
    replicas: 4,
    load: 44,
    status: "Healthy",
  },
  {
    id: "events",
    name: "Event stream",
    region: "us-east",
    replicas: 8,
    load: 72,
    status: "Healthy",
  },
];
function App() {
  const [query, setQuery] = useState(""),
    [selected, setSelected] = useState([]),
    [review, setReview] = useState(false),
    [notice, setNotice] = useState(""),
    [dark, setDark] = useState(false);
  const visible = services.filter((x) =>
    x.name.toLowerCase().includes(query.toLowerCase()),
  );
  const picked = services.filter((x) => selected.includes(x.id));
  const allVisible =
    visible.length > 0 && visible.every((x) => selected.includes(x.id));
  const someVisible = visible.some((x) => selected.includes(x.id));
  function choose(id, checked) {
    setSelected((v) =>
      checked ? [...new Set([...v, id])] : v.filter((x) => x !== id),
    );
    setReview(false);
  }
  function selectVisible(checked) {
    setSelected((v) =>
      checked
        ? [...new Set([...v, ...visible.map((x) => x.id)])]
        : v.filter((id) => !visible.some((x) => x.id === id)),
    );
    setReview(false);
  }
  return (
    <main className="pf-example">
      <header>
        <div>
          <span className="overline">PATTERNFLY · SERVICE OPERATIONS</span>
          <Title headingLevel="h1" size="2xl">
            Plan a maintenance review
          </Title>
          <p>
            Select services and inspect the combined scope before creating a
            local plan.
          </p>
        </div>
        <Switch
          id="dark-theme"
          label="Dark theme"
          isChecked={dark}
          onChange={(_, checked) => {
            setDark(checked);
            document.documentElement.classList.toggle(
              "pf-v6-theme-dark",
              checked,
            );
          }}
        />
      </header>
      <div className="service-toolbar">
        <SearchInput
          aria-label="Find a service"
          placeholder="Find a service"
          value={query}
          onChange={(_, value) => setQuery(value)}
          onClear={() => setQuery("")}
        />
        <Checkbox
          id="select-visible"
          label="Select visible"
          isChecked={allVisible ? true : someVisible ? null : false}
          isDisabled={!visible.length}
          onChange={(_, checked) => selectVisible(checked)}
        />
        <span aria-live="polite">{selected.length} selected</span>
        <Button isDisabled={!selected.length} onClick={() => setReview(true)}>
          Review selection
        </Button>
      </div>
      <div className="service-layout">
        <Gallery hasGutter minWidths={{ default: "230px" }}>
          {visible.map((s) => (
            <GalleryItem key={s.id}>
              <Card>
                <CardTitle>
                  <Checkbox
                    id={"select-" + s.id}
                    label={s.name}
                    isChecked={selected.includes(s.id)}
                    onChange={(_, checked) => choose(s.id, checked)}
                  />
                </CardTitle>
                <CardBody>
                  <div className="service-meta">
                    <Label color={s.status === "Healthy" ? "green" : "orange"}>
                      {s.status}
                    </Label>
                    <span>{s.region}</span>
                  </div>
                  <Progress
                    value={s.load}
                    title="Sample utilization"
                    measureLocation="outside"
                  />
                  <dl>
                    <dt>Replicas</dt>
                    <dd>{s.replicas}</dd>
                    <dt>Service ID</dt>
                    <dd>
                      <code>{s.id}</code>
                    </dd>
                  </dl>
                </CardBody>
              </Card>
            </GalleryItem>
          ))}
        </Gallery>
        <aside>
          <Card>
            <CardTitle>Maintenance scope</CardTitle>
            <CardBody>
              <p>
                {picked.length} services ·{" "}
                {picked.reduce((n, s) => n + s.replicas, 0)} replicas
              </p>
              {picked.length ? (
                <ul>
                  {picked.map((s) => (
                    <li key={s.id}>
                      {s.name}
                      <span>{s.region}</span>
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="muted">Select a service to inspect its scope.</p>
              )}
              {review && (
                <div className="review">
                  <Alert
                    isInline
                    variant="info"
                    title="Review the selected services"
                  >
                    This is a fictional plan. No workload will be restarted.
                  </Alert>
                  <Button
                    onClick={() => {
                      setNotice(
                        `Local plan includes ${picked.length} services and ${picked.reduce((n, s) => n + s.replicas, 0)} replicas. No operation was scheduled.`,
                      );
                      setReview(false);
                    }}
                  >
                    Confirm local plan
                  </Button>
                </div>
              )}
            </CardBody>
          </Card>
        </aside>
      </div>
      {!visible.length && (
        <Alert isInline variant="info" title="No services match">
          <Button variant="link" onClick={() => setQuery("")}>
            Clear search
          </Button>
        </Alert>
      )}
      {notice && (
        <Alert isInline variant="success" title="Local plan recorded">
          {notice}
        </Alert>
      )}
      <footer>
        Native PatternFly 6.6.1 · service data and capacity figures are
        fictional, memory-only examples.
      </footer>
    </main>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Справочник по коду

- Сохраните как src/main.jsx. Checkbox onChange получает событие и значение checked; isChecked может быть равен null для смешанного набора.

### patternfly.css — адаптивная оболочка для операционных задач

Пользовательская компоновка страницы использует семантические токены версии 6 и сохраняет встроенные стили компонентов.

```
body {
  margin: 0;
}
.pf-example {
  padding: 24px;
  background: var(--pf-t--global--background--color--secondary--default);
  color: var(--pf-t--global--text--color--regular);
  font-family: var(--pf-t--global--font--family--body);
}
.pf-example header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.overline {
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--pf-t--global--text--color--subtle);
}
.pf-example header h1 {
  margin: 8px 0;
}
.service-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.service-toolbar > .pf-v6-c-search-input {
  width: 280px;
}
.service-toolbar > span {
  margin-left: auto;
}
.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}
.service-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin-bottom: 24px;
}
.service-layout dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  font-size: 12px;
}
.service-layout dd {
  margin: 0;
}
.service-layout ul {
  padding: 0;
  list-style: none;
  margin: 16px 0;
}
.service-layout li {
  padding: 12px 0;
  border-bottom: 1px solid var(--pf-t--global--border--color--default);
}
.service-layout li span {
  display: block;
  font-size: 12px;
  color: var(--pf-t--global--text--color--subtle);
}
.muted {
  color: var(--pf-t--global--text--color--subtle);
  margin-top: 16px;
}
.review > .pf-v6-c-button {
  margin-top: 16px;
}
.pf-example > .pf-v6-c-alert {
  margin-top: 24px;
}
.pf-example footer {
  font-size: 12px;
  color: var(--pf-t--global--text--color--subtle);
  margin-top: 24px;
}
@media (max-width: 850px) {
  .service-layout {
    grid-template-columns: 1fr;
  }
  .pf-example header {
    align-items: start;
  }
  .service-toolbar > span {
    margin-left: 0;
  }
}
@media (max-width: 500px) {
  .pf-example {
    padding: 16px;
  }
  .pf-example header {
    flex-direction: column;
  }
  .service-toolbar {
    gap: 16px;
  }
  .service-toolbar > .pf-v6-c-search-input {
    width: 100%;
  }
}
```

Справочник по коду

- Сохраните как src/patternfly.css. В этом примере точки адаптации приложения заданы явно.

## Red Hat PatternFly: настройка агента дизайн-системы

### Отправная точка для реализации

Композиция встроенных React 18.3.1 / PatternFly 6.6.1. Для Vite требуется поддерживаемая версия Node.js. Фактические данные сервисов и операции API остаются ответственностью приложения.

```
npm create vite@latest patternfly-services -- --template react
cd patternfly-services
npm install
npm install react@18.3.1 react-dom@18.3.1 @patternfly/react-core@6.6.1
# Replace src/main.jsx and add src/patternfly.css using the complete examples.
npm run dev
```

### Запрос для вашего проекта

```
Создайте операционную коллекцию на основе встроенных Gallery, Card, Checkbox, Progress, Label и Alert из PatternFly 6.6.1. Используйте предоставленные семантические токены и полный пример. Разделяйте видимость после фильтрации и выбранные идентификаторы, вычисляйте частичный массовый выбор и требуйте проверки точного набора затрагиваемых элементов. При добавлении реального API предусмотрите достоверные ответы о состоянии ожидания, ошибке или успехе. Сохраните адаптивную перестройку для мобильных экранов и доступность с клавиатуры.
```

## Red Hat PatternFly: источники и область действия дизайн-системы

Руководство по разработке приложения, подготовленное OpenDesign, и вымышленный пример планирования обслуживания на встроенном PatternFly React 6.6.1. Уровень использования ресурсов, регион и количество реплик — примерные данные. Подтверждение меняет только локальное состояние; никакой сервис не перезапускается и не добавляется в расписание.

- Разработка с PatternFly Интеграция встроенного пакета и таблицы стилей.

- Опубликованные модули токенов Версионированные имена токенов и рассчитанные значения для светлой темы.

- Шаблон массового выбора Область выбранных элементов и поведение коллекции.

- Репозиторий PatternFly React Реализация встроенных компонентов и лицензия.

## Red Hat PatternFly: связанные ресурсы дизайн-системы

### REI Cedar

Создайте конкретный сценарий выбора товаров для комплектации заказов в Cedar: встроенные плитки Vue, реальные значения токенов, полноценная навигация с клавиатуры и адаптивная композиция товаров.

### Sainsbury's дизайн-система

Примените общедоступные рекомендации Sainsbury’s по дизайну к полному сценарию выбора времени для получения заказа: реальные ссылки на палитру и размеры, доступные варианты с переключателями, обновляемая сводка и достоверная обратная связь о локальных действиях.

### Salesforce Lightning

Руководство по Lightning для работы с большим количеством записей: реальные отступы, типографика и семантические цвета, редактируемая рабочая область дела, проверка полей и история действий, отражающая локальные изменения.


- [Справочник по реализации](https://www.patternfly.org/patterns/bulk-selection/)
- [Источник](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/)
- [Справочник по коду](https://www.patternfly.org/components/checkbox/)
- [Справочник по коду](https://www.patternfly.org/foundations-and-styles/design-tokens/develop/)
- [Разработка с PatternFly Интеграция встроенного пакета и таблицы стилей.](https://www.patternfly.org/get-started/develop/)
- [Опубликованные модули токенов Версионированные имена токенов и рассчитанные значения для светлой темы.](https://cdn.jsdelivr.net/npm/@patternfly/react-tokens@6.6.1/dist/esm/)
- [Шаблон массового выбора Область выбранных элементов и поведение коллекции.](https://www.patternfly.org/patterns/bulk-selection/)
- [Репозиторий PatternFly React Реализация встроенных компонентов и лицензия.](https://github.com/patternfly/patternfly-react)