ADS Artemy Design System
VIT / controls / inputs

Контролы и формы

Элементы для подтверждения действий, переключения режимов, сервисной диагностики и настроек. В рабочем сценарии кнопки должны быть крупными и однозначными.

Как делать

  • Один primary на сценарий, остальные действия тише.
  • Текст кнопки должен быть итогом действия: готово, проверить, пропустить.

Смотреть

  • Для кухни кнопки нужны крупные, с достаточным расстоянием между ними.
  • Фокус и hover должны быть видны без изменения размеров.

Не делать

  • Не использовать две одинаково яркие кнопки рядом.
  • Не писать абстрактные "ОК" там, где важно действие.
HTML snippet 
<div class="lt-actions">
  <button class="lt-button lt-button--primary">Готово</button>
  <button class="lt-button lt-button--secondary">Проверить</button>
  <button class="lt-button lt-button--ghost">Пропустить</button>
</div>
CSS classes / tokens 
.lt-button
.lt-button--primary
.lt-button--secondary
.lt-button--ghost

--ds-graphite-strong
--ds-radius-12
--ds-shadow-sm
--ds-focus-ring

Как делать

  • Держи 3-5 режимов, каждый про отдельный рабочий сценарий.
  • Используй короткие слова: сейчас, скоро, проблема, история.

Смотреть

  • Активный режим должен быть понятен без цвета.
  • На узких экранах сегмент должен переноситься или скроллиться предсказуемо.

Не делать

  • Не превращать режимы в длинное верхнее меню.
  • Не смешивать рабочие режимы и админские настройки.
HTML snippet 
<div class="ae-segment" role="group" aria-label="Режимы">
  <button class="ae-segment__item" aria-pressed="true">сейчас</button>
  <button class="ae-segment__item" aria-pressed="false">скоро</button>
  <button class="ae-segment__item" aria-pressed="false">проблема</button>
  <button class="ae-segment__item" aria-pressed="false">история</button>
</div>
CSS classes / tokens 
.ad-segment
.ae-segment__item
.ae-segment__item[aria-pressed="true"]

--ds-radius-pill
--ds-white
--ds-shadow-sm
--ds-steel

Как делать

  • Собирай форму из коротких полей: модуль, причина, действие.
  • Подсказка под полем должна помогать сформулировать next step.

Смотреть

  • Форма должна быть удобна на планшете и с перчатками.
  • Ошибки валидации показывай рядом с конкретным полем.

Не делать

  • Не просить сервис вводить данные, которые система уже знает.
  • Не делать длинные textarea первым экраном формы.
HTML snippet 
<form class="ae-grid">
  <label class="ae-form-row">
    <span class="lt-label">модуль</span>
    <select class="lt-select">
      <option>камера шкафа 02</option>
    </select>
  </label>
  <label class="ae-form-row">
    <span class="lt-label">что проверить</span>
    <input class="lt-input" value="очисти окно камеры" />
  </label>
  <button class="lt-button lt-button--primary" type="button">Зафиксировать</button>
</form>
CSS classes / tokens 
.lt-label
.lt-input
.lt-select
.lt-button
.lt-button--primary
.ae-form-row
.ae-help

--ds-terminal-cyan
--ds-focus-ring
--ds-radius-10
--ds-silver
01

Проверь лоток

Убедись, что стрипсы лежат на второй полке слева.

сейчас
02

Добавь 6 штук

Если лоток почти пустой, положи новую партию.

потом
03

Подтверди на экране

Подтверждение уйдет в историю смены и BI.

итог

Как делать

  • Каждый шаг начинается с глагола.
  • Статус шага короткий: сейчас, потом, итог.

Смотреть

  • На мобильном статус переносится под текст.
  • Длинные инструкции не должны сжимать номер шага.

Не делать

  • Не использовать stepper для простого “готово”.
  • Не делать шаги техническими логами.
HTML snippet
<div class="ae-step">
  <span class="ae-step__num">01</span>
  <div>
    <h3 class="ae-step__title">Проверь лоток</h3>
    <p class="ae-step__text">Убедись, что лоток виден.</p>
  </div>
  <span class="ae-step__status">сейчас</span>
</div>
CSS classes / tokens
.ae-stepper
.ae-step
.ae-step__num
.ae-step__title
.ae-step__text
.ae-step__status

Как делать

  • Textarea не должен быть первым экраном, если есть быстрые варианты.
  • Подсказка под полем объясняет формат ответа.

Смотреть

  • Высота поля стабильная, текст скроллится внутри.
  • Ошибка показывается под полем, не в toast.

Не делать

  • Не заставлять писать текст там, где можно выбрать причину.
  • Не оставлять placeholder вместо label.
HTML snippet
<label class="ae-form-row">
  <span class="lt-label">комментарий сервиса</span>
  <textarea class="lt-input" rows="4"></textarea>
  <p class="ae-help">Пиши коротко: что сделал и когда проверить снова.</p>
</label>
CSS classes / tokens
.ae-form-row
.lt-label
.lt-input
.ae-help