#анонс 14

Друзья, наша чудесная дизайн-система давно нуждается в собственном названии. Если у вас есть идеи, пишите сюда, а мы потом устроим голосование за лучший вариант 😊

#обновление 10

Друзья, у нас очередной релиз с исправлениями и новыми компонентами.

Что нового:

В библиотеке появились нотификации aka уведомления, aka toasts, aka snackbars. Вылетающие из-за края экрана и встроенные. С разными статусами и кастомизируемые.

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

По вашей просьбе добавили к селекту компонент меньшего размера. Если в ваших проектах используются и другие поля ввода меньшего размера — пишите в чатик, добавим их тоже.

Что обновили:

Изменения и доработки в полях ввода:
• пофиксили налезание текста на иконки;
• добавили правила обрезки слишком длинного текста лейбла, если он не помещается в поле ввода;
• новое состояние у мультиселекта - отображение всех выбранных опций. Несколько вариантов поведения – читайте описание.

Переименование компонентов:
• Label переименовываем в Sticker – так он будет отличаться от лейблов в полях ввода;
• Dropdown и Dropdown Multiselect переименовываем в Select и Multiselect – как оригинальный тег select в HTML;
• Menu Select и Menu Multiselect переименовываем в Dropdown Menu Select и Dropdown Menu Multiselect – семантически так будет правильнее.

Нейминг темизации:
• Тёмная / светлая тема теперь подписываются как day / night;
• Цвета библиотеки, имеющие пару для темной и светлой темы теперь называются одинаково и подписаны day / night. Это нужно для упрощения темизации в коде.

P.S. из-за обновления названий тем, обновы вам прилетят вообще на все компоненты, но не пугайтесь, это просто у них имена поменялись 🙂

Друзья, добавляем в библиотеку почти 70 новых иконок и тюним существующие! Промокод изменился, теперь это не бирка в морге, а билетик со скидкой =) В иконке эквалайзера три ползунка заменили на два, как в новой иконке очистки эквалайзера. Иконки скрепки и звена цепи согласовали друг с другом. В иконках увеличения/уменьшения экрана и изменения скорости воспроизведения немного увеличили скругление уголков. У многих иконок скорректировали названия и добавили недостающие теги, теперь у залитых иконок добавляется в имени «Fill», вместо «On» и «Off»

Новые иконки:

• Speed Playback
• Subtitles
• Subtitles Fill
• Speed 8х
• Play Previous
• Play Next
• Fast Rewind
• Fast Forward
• Fast Rewind 5s
• Fast Forward 5s
• Fast Rewind 10s
• Fast Forward 10s
• Fast Rewind 15s
• Fast Forward 15s
• Fast Rewind 30s
• Fast Forward 30s
• Equaliser Clear
• Attachment Link Break
• Statistics Curve
• Rename
• Split
• Shuffle
• Union
• Merge
• Group
• Food
• Coffee Break
• Delivery Bus
• Delivery Box
• Delivery Envelope
• Delivery Courier
• Vacation Sea
• Vacation Beach
• Present
• Incognito
• Statistics Board
• 4K screen
• Puzzle
• Ship
• Object
• Target
• Pulse
• Atom
• Heart Broken
• HandBreak
• Camera Group
• Registator
• Thermal Imager
• Microcircuit
• Chip
• Thermometer
• Face Grin
• Face Grin Fill
• Face Smilling
• Face Smilling Fill
• Face Neutral
• Face Neutral Fill
• Face Frouning
• Face Frouning Fill
• Face Rage
• Face Rage Fill
• Face Open Mouth
• Face Open Mouth Fill
• Lego
• Github
• Gitlab

Друзья, сегодня Figma обновила автолэйаут с новыми настройками и мы экстренно пофиксили компоненты в библиотеке. Если у вас всё ещё что-то ломается — пишите нам, будем чинить.

Вместе с фиксом автолэйаута улетели накопившиеся доработки:

- Размер шрифта Desktop / Description изменился с 12 пунктов на 11, межбуквенное 0.2
- Notification Toast подняли на уровень XL (изменилась тень)
- Заменили стиль текста цифры в чипсах на Desktop / Caption
- Удалили из библиотеки табы старой версии (их давно уже заменили Tabs Classic)

Добавились новые компоненты:

Tooltip, он же popover. Появляется при клике (не забываем про мобильных пользователей), предоставляет дополнительную информацию.

Input Card — поле ввода номера банковской карты. Поддерживает маску номеров, показывает иконку платёжной системы.

Привет! Figma изменила Auto Layout, из-за чего кнопки дизайн-системы могли вести себя некорректно. Вчера мы обновили структуру и настройки кнопок, чтобы библиотека оставалась актуальной и ваши кнопки не ломались.

После обновления в проектах, проверьте кнопки. Кнопки, которым меняли ширину руками, могут сжаться до ширины текста кнопки. Починить просто: выбрать кнопку и сменить Resizing ширины кнопки с Hug contents на Fixed width. Так кнопки вернутся к своей прежней ширине.

Привет! У нас большое обновление библиотеки иконок. Подготовили долгожданный пак уменьшенных иконок в размере 16x16. Всего 162 штуки, аккуратно уменьшенные версии больших иконок в нашем стиле. Плюс 51 новая иконка и небольшие изменения в размере 24x24.

Обратите внимание, в коде иконки 24x24 допустимо увеличивать, передавая параметр size. В Figma вы можете использовать инструмент Scale для массштабирования иконки. Иконки 16x16 не изменяют свой размер, используйте их без масштабирования.

EPIC!
Друзья, сегодня мы запустили релиз со стабильной библиотекой. Компоненты протестированы и готовы к использованию в проектах. Теперь библиотека доступна к просмотру в Storybook. Здесь вы можете посмотреть на компонент в действии, увидеть различные состояния и список доступных параметров компонента, скопировать его код. Подробнее про использование Storybook читайте на странице релиза.

Список компонентов в библиотеке:

- Цвета и темы
- Типографика
- Иконки
- Button
- Function Button
- Icon Button
- Checkbox
- CheckboxGroup
- Chip
- InputNumberStepper
- Input
- Input Email
- Input Amount
- Input Phone Number
- RadioButton
- RadioGroup
- Stepper
- Sticker
- Switch
- TabsClassic
- TagItem
- TagGroup
- TextArea

Всем привет! Мы переосмысливаем слайдер и хотим сделать один стиль оформления вместо трёх, ибо текущий напоминает чекбокс. У нас было около двадцати вариантов, после отбора стало три. Помогите выбрать)

Друзья, мы завели страничку на сайте с актуальным план-релизом), где держим список дат релизов компонентов в коде.
https://design.rt.ru/history/plans

Релиз 3.3.0

Очередной большой релиз с пачкой новых компонентов в коде!

На сайте, в сторибуке и фигме доступны:

- PickerDate, описание, код
- Tooltip, описание, код
- InlineNotification, описание, код
- CustomInlineNotification, код
- ToastNotification, описание, код
- CustomToastNotification, код
- FloatingActionButton, описание, код
- Overlay (затемняющий слой), описание, код
- DropdownMenu, описание, код
- Select, описание, код
- Multiselect, описание, код