Реализация состояний (hover, active, disabled) и размеров

Теперь, когда базовая кнопка готова, сделаем её по-настоящему живой и гибкой. Добавим состояния hover, active, disabled и научимся управлять размерами. Всё это — с помощью вариантов Figma.

Добавляем состояния кнопки: hover, active, disabled

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

1. Дублируем базовый вариант. Выберите компонент кнопки. На панели "Design" (Дизайн) в разделе "Variants" (Варианты) нажмите "Add new property" (Добавить новое свойство) и выберите "Boolean" (Булево). Назовите свойство isHovered. По умолчанию оно будет false.
2. Создаём состояние hover.
   • Выберите базовый вариант кнопки.
   • На панели "Design" (Дизайн) в разделе "Variants" (Варианты) нажмите "Add new variant" (Добавить новый вариант).
   • У нового варианта измените значение свойства isHovered на true.
   • Измените стили: затемните фон, поменяйте цвет текста или добавьте лёгкую тень. Используйте семантические цветовые токены, например, color/primary/hover.
3. Создаём состояние active.
   • Повторите шаг 2, но назовите новое свойство isActive и установите его в true.
   • Измените стили для активного состояния: ещё сильнее затемните фон, добавьте внутреннюю тень, чтобы имитировать нажатие.
4. Создаём состояние disabled.
   • Создайте ещё одно булево свойство isDisabled.
   • Для варианта с isDisabled: true измените стили так, чтобы кнопка выглядела неактивной: сделайте фон и текст бледнее, уберите интерактивные эффекты.

Важно: Кнопка не может быть одновременно hovered или active, если она disabled. Убедитесь, что для disabled кнопки свойства isHovered и isActive установлены в false.

Управляем размерами кнопки

Кнопкам часто нужны разные размеры: маленькие, средние, большие. Добавим для этого ещё одно свойство варианта.

1. Добавляем свойство Size.
   • Выберите компонент кнопки.
   • На панели "Design" (Дизайн) в разделе "Variants" (Варианты) нажмите "Add new property" (Добавить новое свойство) и выберите "Variant" (Вариант).
   • Назовите свойство Size. По умолчанию оно может быть Medium.
2. Создаём варианты размеров.
   • Для каждого размера (например, Small, Large) создайте новый вариант.
   • Для Size: Small уменьшите внутренние отступы (padding), используя переменные отступов, например, spacing/sm. Можете также уменьшить размер шрифта, используя соответствующие типографические переменные.
   • Для Size: Large увеличьте отступы (например, spacing/lg) и размер шрифта.
   • Проверьте, что автолейаут кнопки корректно адаптируется к изменениям.

Ваша панель вариантов теперь выглядит примерно так:

Property	Values
isHovered	false, true
isActive	false, true
isDisabled	false, true
Size	Small, Medium, Large

Теперь у вас есть мощный и гибкий компонент кнопки! Вы можете легко настраивать его, выбирая нужные свойства на панели "Design" (Дизайн) при использовании компонента. Это значительно ускоряет работу и обеспечивает консистентность.

Мы научились создавать интерактивные состояния и управлять размерами. В следующем разделе применим эти знания для создания более сложного элемента — поля ввода.