Вышла седьмая версия UIKit — ключевой библиотеки дизайн‑системы Gravity UI

Добавили больше возможностей, которые упрощают создание доступных интерфейсов.

• Все всплывающие элементы реализованы на основе Floating UI вместо устаревшего popper.js. Эта библиотека позволяет делать такие элементы более доступными и предоставляет более богатый инструментарий для настройки их поведения.

• Компоненты Button и Link расширяют интерфейс базовой кнопки или ссылки. Теперь их легче использовать как нативные элементы.

• Обновили дизайн у компонента RadioButton, заодно сменили его имя. Новое название SegmentedRadioGroup точнее отражает суть.

• Переработали Popover, удалили из него всё лишнее, упростили API — теперь компонент стал проще, понятнее и ближе к лучшим практикам разработки. Старую версию отметили как устаревшую.

• Компонент NumberInput перенесли из тестирования в основные компоненты.

• Новый компонент Breadcrumbs с улучшенной логикой схлопывания элементов и доступностью также перенесли в основные компоненты, старый отметили как устаревший.

• Переработали Tabs, теперь это набор компонент TabList, Tab и TabPanel с улучшенной доступностью. Компонент Tabs отметили как устаревший.

• Добавили новые размеры в компоненты Avatar, User и UserLabel.

• Убрали стилизацию скроллбаров страницы по умолчанию.

Полный список изменений можно посмотреть здесь. Если вы уже используете Gravity UI, будем рады обратной связи: обязательно заглядывайте в наш комьюнити‑чат. А также ставьте звёздочки на GitHub и следите за обновлениями!

Мы выпустили 6-ую версию UIKit — ключевой библиотеки дизайн‑системы Gravity UI.

Что нового:

1. Компонент List 2.0. В UIKit изначально был List, но в нём хотелось кое‑что доработать. При сборе запросов собрали список:

   • поддержка разных размеров и ширины;

   • иконка у элемента списка; разное количество и положение иконок;

   • поддержка стейтов;

   • разный контент в элементах списка (однострочный, многострочный или список пользователей);

   • поддержка разных видов разделителей и группировок.

   Это существенные изменения, поэтому мы создали List 2.0. Пока он выходит в prestable версии, но рекомендуем пользователям переходить на него и приносить фидбек.

2. RTL. Если ваши приложения/сайты должны отображаться на иврите, арабском и других языках с направлением письма справа налево, нужна поддержка RTL‑стандартов. При этом в RTL:

   • вставленное слово на латинице пишется слева направо;

   • цифры пишутся слева направо;

   • знаки препинания в арабском также пишутся слева направо и т. д.

   Во всех компонентах мы поддержали параметр RTL. Чтобы под рукой был полный пример, сделали промостраницу на арабском. Посмотреть, как реализовано, можно в исходном коде landing. Также за примерами можно заглянуть в storybook.

3. Доступность (a11y):

   • добавили в проект плагин eslint;

   • поддержали клавиатуру для clickable и closable состояния компонента Persona;

   • отключили onClick у 15 неинтерактивных компонент;

   • поддержали клавиатуру в компоненте SelectionTable.

Если есть запрос на доработку — приходите к нам в GitHub с issue или даже с PR. И используйте Gravity UI!