# Workday Canvas — дизайн-система ## Предварительный просмотр интерфейса дизайн-системы Workday Canvas Фильтруйте названия курсов, добавляйте курсы без дубликатов, удаляйте выбранные и сравнивайте актуальную суммарную длительность. ## Справочник по дизайн-системе Workday Canvas Текущие исходный код Canvas Kit и файл токенов Canvas sys.json. Приведённые ниже имена в формате JSON — это пути в исходном коде, а не придуманные имена переменных CSS. Значения, ссылающиеся на базовые токены, показаны как псевдонимы; справочник по миграции с указанием даты явно обозначен как исторический. ### Актуальная семантика интервалов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | sys.padding.xs | {base.size.100} | Назначение горизонтальных внутренних отступов поля ввода. | | sys.padding.md | {base.size.200} | Отступы компонента по умолчанию. | | sys.padding.xl | {base.size.300} | Отступы карточки. | | sys.gap.sm | {base.size.100} | Компактный интервал между соседними элементами. | | sys.gap.md | {base.size.200} | Стандартный интервал между строчными элементами. | | sys.gap.xl | {base.size.400} | Внутренний отступ карточки. | | sys.gap.xxl | {base.size.800} | Интервал между секциями. | ### Актуальная типографика и скругления | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | sys.type.body.sm | font-size body.sm + line-height body.sm + normal weight | Составная роль основного текста. | | sys.font-size.body.sm | {base.size.200} | Псевдоним базового размера основного текста. | | sys.line-height.body.sm | {base.size.300} | Псевдоним межстрочного интервала основного текста. | | sys.font-weight.normal | {base.font-weight.400} | Текущее название — normal, а не regular. | | sys.shape.sm | {base.size.50} | Небольшое скругление. | | sys.shape.md | {base.size.100} | Скругление поля ввода. | | sys.shape.full | {base.size.75} × 100 | Полное скругление. | ### Структура FormField | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | FormField.Label | Connected label element | Связь с полем ввода, создаваемая автоматически. | | FormField.Input as={TextInput} | Polymorphic input slot | Это не устаревший проп label API. | | FormField.Hint | Linked helper content | Опишите ожидаемый ввод. | | orientation | vertical / horizontalStart / horizontalEnd | Используйте актуальные значения выравнивания. | | FormField.Field | Input and hint alignment wrapper | Удобно для горизонтального макета. | ### Реализация TextInput | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | grow | 100% width when true | Адаптивное расширение поля ввода. | | width | number or string | Переопределение по желанию. | | minimum width fallback | px2rem(280) | Проверьте макет внутри узкого родительского контейнера. | | error | error / caution styling | Проверку вводимых данных реализует приложение. | | transition | 0.2s box-shadow, 0.2s border-color | Фактический переход в исходном коде. | | font size role | system.legacy.fontSize.subtext.lg | Не заменяйте внутренние типы компонента посторонним типом заголовка. | ### Реализация PrimaryButton | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Background | brand.action.base, with legacy accent fallback | Брендинг тенанта. | | Hover | brand.action.dark or colorSpace.hover | Состояние определяется цветом действия. | | Pressed | brand.action.darkest or colorSpace.pressed | Отдельное оформление в нажатом состоянии. | | variant="inverse" | Inverse surface and foreground roles | Для подходящего контрастного контекста. | | Border radius | system.legacy.shape.full | В исходном коде пока сохранена обратная совместимость с устаревшим вариантом. | ### Справочник по миграции, а не актуальные имена токенов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Former space.s → system.space.x4 | 1rem in 2023 migration table | В текущем исходном коде отдельно заданы отступы и интервалы. | | Former space.m → system.space.x6 | 1.5rem in 2023 migration table | Не считайте старые имена предпочтительными и сейчас. | | Former borderRadius.m → system.shape.x1 | 0.25rem in 2023 migration table | В текущем исходном коде используются семантические размеры скруглений. | ## Полное руководство по дизайн-системе Workday Canvas Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система Workday Canvas: изучите текущий исходный код, прежде чем копировать пример миграции ### Теперь интервалы различаются по назначению > Система Canvas развивалась от констант интервалов в формате «размер футболки» в canvas-kit-react/tokens через пронумерованные токены system.space до категорий исходного кода, таких как отступы и интервалы. В актуальном sys.json их базовые значения заданы ссылками на базовые токены. В этом справочнике приведены фактические пути, а не выдуманные имена переменных CSS, составленные простым объединением слов. Таблица миграции по-прежнему пригодится при обновлении старого приложения: в ней объясняется, почему прежнее значение space.s соответствовало одному rem. Это исторический источник, а не гарантия, что каждый старый экспорт и сейчас является предпочтительным интерфейсом. В предварительном просмотре используются интервалы приложения 16 и 24px; таблица исходного кода остаётся главным источником информации об именах токенов библиотеки. Прочитать вспомогательную спецификацию ## Дизайн-система Workday Canvas: цвет зависит от тенанта и состояния компонента ### Основная кнопка — это не просто неизменный синий образец Сначала PrimaryButton обращается к brand.action.base, а при его отсутствии использует устаревший основной акцентный цвет. При наведении и нажатии также проверяются роли действий brand, прежде чем состояния формируются с помощью вспомогательных функций colorSpace. Поэтому замена одного жёстко заданного цвета фона не позволит воспроизвести тему компонента. В исходном примере учебного плана используется сдержанная синяя палитра приложения, и он обозначен как интерпретация HTML. Это не отображение темы конкретного клиентского тенанта и не новой темы Sana Canvas. В полном нативном примере цвета компонентов задаются загруженными слоями токенов. Прочитать вспомогательную спецификацию ## Дизайн-система Workday Canvas: составные роли сохраняют межстрочный интервал и насыщенность ### Псевдоним размера — это не полный стиль Объект типографики body.sm в текущем исходном коде объединяет семейство шрифтов, обычную насыщенность, размер основного текста и межстрочный интервал. Для заголовков используются роли с жирной насыщенностью. Если взять только размер в пикселях со старого скриншота, эти взаимосвязи потеряются. В исходном коде используется ключ normal, а не regular, встречающийся в прежних материалах по миграции. Пакет компонентов Canvas Kit не включает шрифты. Загрузку шрифтов следует рассматривать как отдельное решение для интеграции; в автономном примере используются системные запасные шрифты, и он не подразумевает, что Roboto или шрифт Sana входят в комплект. Прочитать вспомогательную спецификацию ## Дизайн-система Workday Canvas: FormField — составной компонент ### Соберите метку, поле ввода и подсказку внутри поля В исходном коде доступны FormField.Label, FormField.Input и FormField.Hint. Передача TextInput в слот Input через проп as позволяет модели сформировать доступные связи между элементами. Это отличается от старых примеров, в которых метка задавалась пропом label внешнего поля, а внутрь напрямую помещалось поле ввода без обёртки. Для горизонтальных форм актуальны значения ориентации horizontalStart и horizontalEnd. FormField.Field группирует поле ввода и подсказку в рамках этого выравнивания. Наш фильтр остаётся вертикальным, поскольку пояснение должно располагаться непосредственно под меткой и полем ввода. - Поместите видимую метку в FormField.Label. - Передайте TextInput через составной слот Input. - Используйте Hint, чтобы указать область действия фильтра. - При добавлении ограничений оставьте логику проверки в приложении. Прочитать вспомогательную спецификацию ## Дизайн-система Workday Canvas: для растущего поля нужен гибкий родительский контейнер ### Учитывайте минимальную ширину У TextInput задана минимальная ширина 280px по умолчанию, выраженная в исходном коде через px2rem. Параметр grow запрашивает полную ширину, но не позволяет жёсткому макету из двух столбцов уместиться в узкой области просмотра. В автономном каталоге на мобильных устройствах боковая панель плана размещается под карточками курсов, а каждый столбец макета можно сжать. Поисковый запрос хранится в обычном состоянии React. Приложение выполняет поиск подстроки без учёта регистра по трём названиям курсов и явно показывает пустой результат. Фильтр не очищает выбранные курсы, поскольку видимость и участие в плане — разные состояния. Прочитать вспомогательную спецификацию ## Дизайн-система Workday Canvas: выбор сохраняется независимо от видимых результатов ### Используйте постоянные ID курсов и вычисляйте итоговые значения У каждого исходного курса есть ID, название и продолжительность. В списке выбранного хранятся ID, а отображаемая общая продолжительность вычисляется по записям курсов. Фильтрация каталога не удаляет выбранный элемент. После удаления элемента действие «Добавить» снова становится доступно, а общее время уменьшается. Это оригинальный локальный сценарий планирования. Он не вызывает API Workday, не записывает сотрудника на курс и не изменяет учебную запись. Ясная граница возможностей не позволяет прототипу создавать впечатление, будто он выполняет реальную деловую операцию. 1. Фильтруйте только каталог. 2. Добавляйте каждый ID курса не более одного раза. 3. Вычисляйте выбранные курсы и общее количество минут по этим ID. 4. Удаляйте выбранный курс, не сбрасывая поиск. Прочитать вспомогательную спецификацию ## Дизайн-система Workday Canvas: загрузите токены, прежде чем ожидать, что компоненты подстроятся под тему ### У провайдера и слоёв CSS разные задачи В текущем примере для начала работы стили переменных base, brand, component и system импортируются в точке входа приложения, после чего интерфейс оборачивается в CanvasProvider. Один только провайдер не заменяет эти определения CSS. Приведённый здесь код следует этой структуре и задаёт полный корневой элемент React. Sana Canvas подключается по желанию: его переменные загружаются после системных переменных, а для выбора темы используется документированный атрибут html data-theme. Для встроенных приложений, которые не могут управлять корневым элементом документа, предусмотрен отдельный параметр темы провайдера для передачи темы всплывающим окнам. При обновлении пакетов не добавляйте эту тему случайно в существующий тенант. Прочитать вспомогательную спецификацию ## Примеры компонентов дизайн-системы Workday Canvas ### Полноценный автономный интерактивный пример Сохраните весь документ как index.html и откройте его в браузере. Оригинальная автономная интерпретация HTML паттернов взаимодействия Canvas и сдержанной корпоративной иерархии. Палитра и макет выбраны для приложения и не являются отображением тенанта Sana. ``` Canvas learning plan interpretation
Learning workspacePersonal development · Local plan

Make room to grow

Choose a few focused lessons for your learning plan.

Search filters the catalog; your selected courses stay in the plan.

Independent HTML interpretation of Canvas composition patterns. Original palette, course illustrations and content; no Workday account or enrollment service is connected.

``` Справочник по коду - Добавление курса изменяет пример учебного плана. В отдельной нативной записи демонстрируется использование CanvasProvider и составного компонента FormField API; запись на курс не отправляется. ### Составное поле и выбираемые учебные элементы FormField создаёт связь с полем ввода, TextInput фильтрует исходные данные курсов, а каждая PrimaryButton добавляет элемент не более одного раза. При удалении общее время выбранных курсов пересчитывается. ``` // In a React 18+ application with a bundler: // npm install @workday/canvas-kit-react @workday/canvas-tokens-web @workday/canvas-kit-styling @emotion/react @emotion/styled import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {CanvasProvider} from '@workday/canvas-kit-react/common'; import {FormField} from '@workday/canvas-kit-react/form-field'; import {TextInput} from '@workday/canvas-kit-react/text-input'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {system} from '@workday/canvas-tokens-web'; import {cssVar} from '@workday/canvas-kit-styling'; import '@workday/canvas-tokens-web/css/base/_variables.css'; import '@workday/canvas-tokens-web/css/brand/_variables.css'; import '@workday/canvas-tokens-web/css/component/_variables.css'; import '@workday/canvas-tokens-web/css/system/_variables.css'; // Default theme example; do not silently add a Sana theme to an existing tenant. const courses=[{id:'feedback',name:'Giving useful feedback',minutes:25},{id:'planning',name:'Planning a focused week',minutes:20},{id:'meetings',name:'Running inclusive meetings',minutes:30}]; function LearningPlan(){ const [query,setQuery]=useState(''),[chosen,setChosen]=useState([]); const visible=courses.filter(c=>c.name.toLowerCase().includes(query.toLowerCase())); const selected=courses.filter(c=>chosen.includes(c.id)); return

Build a learning plan

Find a course setQuery(e.target.value)}/> Filter the three example course titles. {!visible.length&&

No matching courses.

}

Your local plan

{selected.length} courses · {selected.reduce((sum,c)=>sum+c.minutes,0)} minutes

No enrollment is submitted.

; } createRoot(document.getElementById('root')).render(); ``` Справочник по коду - PrimaryButton относится к отдельному курсу; для всего плана нет вводящего в заблуждение действия записи на курс. - Для удаления используется обычная кнопка, явно принадлежащая приложению. - Недоступное состояние «Добавлено» предотвращает повторное добавление, а счётчик подтверждает изменение. ## Настройка AI-агента для дизайн-системы Workday Canvas ### Отправная точка для реализации Полная структура React для собранного приложения. Актуальная настройка CanvasProvider и слоёв токенов CSS; исходные данные курсов и нативные элементы управления для удаления. Удалённая запись на курс не выполняется. Исходный код проверен, но в этой рабочей среде не компилировался с пакетом. ``` // In a React 18+ application with a bundler: // npm install @workday/canvas-kit-react @workday/canvas-tokens-web @workday/canvas-kit-styling @emotion/react @emotion/styled import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {CanvasProvider} from '@workday/canvas-kit-react/common'; import {FormField} from '@workday/canvas-kit-react/form-field'; import {TextInput} from '@workday/canvas-kit-react/text-input'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {system} from '@workday/canvas-tokens-web'; import {cssVar} from '@workday/canvas-kit-styling'; import '@workday/canvas-tokens-web/css/base/_variables.css'; import '@workday/canvas-tokens-web/css/brand/_variables.css'; import '@workday/canvas-tokens-web/css/component/_variables.css'; import '@workday/canvas-tokens-web/css/system/_variables.css'; // Default theme example; do not silently add a Sana theme to an existing tenant. const courses=[{id:'feedback',name:'Giving useful feedback',minutes:25},{id:'planning',name:'Planning a focused week',minutes:20},{id:'meetings',name:'Running inclusive meetings',minutes:30}]; function LearningPlan(){ const [query,setQuery]=useState(''),[chosen,setChosen]=useState([]); const visible=courses.filter(c=>c.name.toLowerCase().includes(query.toLowerCase())); const selected=courses.filter(c=>chosen.includes(c.id)); return

Build a learning plan

Find a course setQuery(e.target.value)}/> Filter the three example course titles. {!visible.length&&

No matching courses.

}

Your local plan

{selected.length} courses · {selected.reduce((sum,c)=>sum+c.minutes,0)} minutes

No enrollment is submitted.

; } createRoot(document.getElementById('root')).render(); ``` ### Запрос для вашего проекта ``` Используйте текущую композицию Canvas FormField и слои токенов CSS. Отделите фильтрацию курсов от состояния выбора, предотвращайте дубликаты и рассчитывайте общее количество минут. Сохраняйте темизацию арендатора через семантические роли; не принимайте исторические названия пространства с номерами за актуальные предпочтительные категории источников. ``` ## Источники и область применения дизайн-системы Workday Canvas Самостоятельный справочник OpenDesign. Зачисление сотрудников и Workday API не используются. Актуальные названия источников явно отделены от прежних названий для миграции. - Настройка Canvas Kit Актуальные импорты, провайдер и граница Sana. - Текущий источник токенов системы Категории отступов, типографика и псевдонимы формы. - Исходный код FormField Составной компонент API и ориентация. - Исходный код TextInput Размеры и оформление состояний. - Исходный код PrimaryButton Роли состояний с учётом фирменных цветов. - Источник кнопок Унаследованное поведение и направление значков. - Историческая миграция Прежние названия сохранены только для справки при миграции. ## Связанные материалы по дизайн-системе Workday Canvas ### Zendesk Garden Руководство по Garden для работы с запросами в службу поддержки: реальные псевдонимы тем, шкалы типографики и радиусов, полноценный редактор ответа, локальные черновики с учётом видимости и восстановление полей. ### Adeo Mozaic Создайте практичный интерфейс управления количеством с шагом Mozaic в 16px, единообразными элементами управления высотой 48px, реальными SCSS-импортами и классами BEM. Планировщик материалов позволяет проверить ограничения, типизированные ошибки и локальную сводку материалов. ### Adobe Spectrum Изучите Spectrum v3 от React на примере таблицы творческих ресурсов с возможностью выбора и панели настройки экспорта. Разберитесь в темах Provider и масштабе полей ввода, поддерживаемых стилевых свойствах, коллекциях с ключами и различиях между v3 и более новой реализацией Spectrum 2. - [Справочник по реализации](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Источник](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Источник](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Источник](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Источник](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Источник](https://github.com/Workday/canvas-tokens/discussions/77) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/Button.tsx) - [Прочитать вспомогательную спецификацию](https://github.com/Workday/canvas-kit) - [Справочник по коду](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Настройка Canvas Kit Актуальные импорты, провайдер и граница Sana.](https://github.com/Workday/canvas-kit) - [Текущий источник токенов системы Категории отступов, типографика и псевдонимы формы.](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Исходный код FormField Составной компонент API и ориентация.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Исходный код TextInput Размеры и оформление состояний.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Исходный код PrimaryButton Роли состояний с учётом фирменных цветов.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Источник кнопок Унаследованное поведение и направление значков.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/Button.tsx) - [Историческая миграция Прежние названия сохранены только для справки при миграции.](https://github.com/Workday/canvas-tokens/discussions/77)