Пользователи
Наша главная аудитория — это UI-UX дизайнеры и фронтенд-разработчики. Любой дизайнер, и любой фронтендер постоянно сталкиваются с дизайн-системами в своей работе. У них множество работ и болей, которые успешно может закрыть Атомаро:
сделать свою дизайн-систему, быстро запустить проект, научиться делать дс, внедрить в компании дс, заручиться поддержкой команды, получить одобрение арт-директора, реализовать проект, меньше тратить времени на вёрстку, а больше на логику, сделать красивый ui в конце концов и т.д.
Работ много! А решения разрозненные и неидеальные. Как раз эту проблему и нивелирует Атомаро.
Об этом подробнее в следующих дайджестах.

Текущие задачи
Подготовили к выпуску бета-версию таблиц и деревьев в дизайне, релиз в понедельник!
Дописываем контент для нового сайта Атомаро: описываем и показываем всю новую функциональность продукта, как он будет решать задачи дизайнеров, фронтендеров, и бизнеса.

В следующем дайджесте
Про роадмап и ближайшие планы.
Рассказать о концепции айдентики Атомаро?

Ура! Таблицы и иерархические деревья доступны в Фигме для дизайнеров.

Обновленные таблицы

— Пофиксили ошибки. Избавились от багов фигмы в виде слетавших обводок, поправили выравнивание колонок, улучшили вариантсы.

— Добавили сборку таблиц в колонках. Для большего удобства — в зависимости от ситуации таблицы удобнее собирать либо на основе строк, либо на основе колонок. В инструкциях прописано, как собирать таблицы в двух вариантах.

— Добавили примеров и шаблонов собранных таблиц на колонках.

— Использовали Nested Properties — теперь не нужно глубоко проваливаться в компонент, чтобы его настроить.

— Обновили гайды, описания и инструкции.

Иерархическое дерево

— Каждый узел настраивается отдельно.

— 2 типа деревьев: accordeon и directory.

— Несколько уровней вложенности узлов.

— Представлено в двух размерах: medium и small.

Страница анонса

Осенний релиз 7.7.0

Алоха! У нас новые стори, исправление багов, а также новые возможности Slider и PickerDate

— InputDate: Добавлен пример в storybook, демонстрирующий работу только со временем, если выставить calendarMode = TIMES_ONLY

Multiselect:

— Исправлено поведение, при котором options, подгруженные не в момент монтирования компонента некорректно отображались и не возвращались в onChange.

— Исправлена работа параметра value, теперь callback onChange отрабатывает корректно.

— Поправлены css-стили в размерах small и xsmall в соответствии с макетами.

Slider:

— Добавлена возможность перемещать ручку по клику на трек

— Добавлены примеры в storybook.

— Исправлено поведение, при котором передвижение ручки управления не сбрасывалось при выходе за границы компонента. Добавлен новый параметр colorHighlightTrack

PickerDate:

— Добавлен новый параметр isOnlyEnabled

— Исправлена стилизация псевдоэлемента на активном элементе при параметре shape = circular

#Дайджест Дизайн-системы, 15.10.23

Привет! Делаю дайджест покороче, раскрываю по одной теме, а ещё переносим простыню дайджеста из постов в статью в телеграфе. Так удобнее.

Сегодня в выпуске:

— Как создаются дизайн-системы. Текущий пайплайн;
— Как создаются дизайн-системы. Коммерческий пайплайн;
— Текущие задачи.

Пишите в комменты, какую тему раскрыть полнее

Всем привет! На связи команда Дизайн-системы Ростелекома. Пройдите пожалуйста опрос (время прохождения 1 мин) об опыте использования дс, ваш отзыв поможет улучшить продукт и сделать его ещё более полезным и удобным. Спасибо за ценную обратную связь!

#Дайджест Дизайн-системы, 20.10.23

Сегодня в выпуске:

— Какие боли и проблемы мы хотим решить;
— Современные требования к дизайн-системам;
— Почему все переходят на токены;

Пишите в комменты, какую тему раскрыть полнее

Релиз 7.7.1

Алоха! У нас небольшие, но важные исправления

— Multiselect. Исправлена ситуация, при которой в callback onChange не возвращался пустой массив при удалении последней из выбранных опции

— Multiselect. Исправлена ошибка, возникающая при использовании компонента в качестве контролируемого. Функция onChange больше не вызывается бесконечно. Добавлен пример контролируемого мультиселекта в сторибук

— Multiselect. Добавлен параметр hideLabel, позволяющий скрыть лейбл. Исправлены отступы при autoHeight и отсутствии label

— Multiselect. Добавлен event в onClear

— Select. Исправлен перенос текста в option

— InputDate. Добавлена возможность заменить основную иконку, параметр icon. Добавлены примеры в сторибук

— InputDate. Исправлена ошибка, из-за которой компонент крашился при удалении daysOfWeek, disabledDates, enabledDates

#Дайджест Дизайн-системы, 3.11.23

Сегодня в выпуске:

— Суб-дизайн-системы;
— Текущие задачи

#Дайджест Дизайн-системы, 10.11.23

Сегодня в выпуске:

— Скачок к универсальности
— Фабрика дизайн-систем. Или как новая архитектура Атомаро будет решать задачи клиентов;
— Текущие задачи.

#Дайджест Дизайн-системы, 24.11.23

Сегодня в выпуске:

— Внешнее продвижение;
— Текущие задачи.

#Дайджест Дизайн-системы, 14.12.23

Сегодня в выпуске:
— atomaro.design на проде!;
— Версия для Ростелекома;
— Планы на 1 кв 2024;
— Проблемы и текущие задачи.

❄️Релиз 7.8.0

Алоха! Разрабатывали Атомаро 0.1, вернулись с фичами

— InputDate. Добавлен callback onCalendarOpened, вызываемый при открытии календаря InputDate

— InputDate. Новые callback-функции — onChangeMonth и onChangeYear. События отрабатывают при клике по стрелкам в календаре

— InputDate. По аналогии с PickerDate теперь параметр renderDate возвращает не только дату, но и view активного календаря (day, month, year)

— Notification. В хук useNotificationsStack добавлены новые методы: closeAllNotifications и getNotificationId

Привет всем пользователям Дизайн-системы Ростелекома. Запрос в коммьюнити: есть ли у вас фидбэк и данные о влиянии дс на производительность и скорость веб-приложений на проде?

Всем привет!

У нас супер новость для дизайнеров: встречайте новую версию «Дизайн-системы Ростелекома» 🔥

Что нового:

— Новая версия библиотеки поддерживает токены и variables

— Теперь стили, variables, компоненты и иконки в одной библиотеке

— Обновили типографику и цветовые палитры

— Компоненты тоже преобразились: добавились состояния, обновился внешний вид компонентов, а количество вариантов сильно сократилось

— Расширенные возможности темизации: темная тема, orange и purple режимы

— Использованы последние возможности фигмы, библиотека стала легче, а компоненты оптимизированы

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

Стало гибко, быстро и удобно!

Про переход:

В 2024 году новая библиотека Atomaro Pro Rostelecom станет основной. Библиотеки Atomaro Web, Atomaro Style, Atomaro Icons будут поддерживаться, фикситься, но не развиваться.

#Дайджест Дизайн-системы, 24.11.23

Сегодня в выпуске:

— Результаты Дизайн-системы Атомаро за 2023;
— Планы на 2024.

⚡️ Релиз 7.8.1

Алоха! У нас пачка багфиксов.

На данный момент действуют ограничения на внесение изменений в прод. Мы обновили NPM пакет, новая версия доступна.
По обновлению сайта и сторибука сообщим отдельно, когда это произойдет.

— InputEmail. Теперь валидация срабатывает при контролируемом изменении value

— Notifications. Добавлен перенос строки в title и subtitle

— InputDate. Callback onCalendarOpened больше не вызывается при уже открытом календаре

— Textarea. Цвет label в размере medium теперь соответствует макету

— Select. Исправлено позиционирование иконки-шеврона в размере small и xsmall при включённом hideLabel

— Улучшения сторибука

🤗Всем приветик! Мы с небольшими, но приятными новостями для дизайнеров:

— В файле дизайн-системы теперь можно найти страничку «Motion», где описаны основные принципы анимации, которая используется в Атомаро

— В компоненте Badge добавилась иконка-индикатор dot

— Добавились новые иконки, а у некоторых иконок изменились названия (подробнее на странице «✎ История изменений»)

Временный нюанс:

Какое-то время в проектах будут доступны переменные от компонентов TableGrid и Tree. Извините за неудобства, скоро мы их скроем 🙏

Всем классного дня!

🔥 Релиз 7.9.0

Алоха! Исправляем баги по заявкам от пользователей

Изменения:

— DropdownMenu. Изменён тип параметра title на ReactNode. Добавлены два новых пропса: headerSlot и footerSlot

— DropdownMenu: Исправлено отображение опций с длинным текстом внутри. Теперь текст переносится корректно

— Modal: Изменено дефолтное значение для параметра unmount на true. Теперь без передачи unmount модалка не блокирует взаимодействие со страницей после закрытия

— Modal/Drawer: Невозможно было прокинуть className на элемент, исправлено

— Modal/Drawer: Теперь при открытии компонента страница не скролится в начало. На своей стороне запретили возможность скролить по странице при уже открытой модалке

— Slider: Исправлен баг с отсутствующим вызовом onChange при клике на шкалу

Подняли версию библиотеки react-number-format, которая использовалась в компоненте InputAmount, до @4.9.4, теперь поддерживается react 18

🔆 Релиз 7.10.0

Алоха! Врываемся в жаркое лето с багфиксами

Изменения:

— DropdownMenu/Select/Multiselect: При передаче пустого массива в options список не изменялся. Исправлено

— DropdownMenu: Добавлен атрибут data-key для option и className dropdown-menu__option-text для текста

— Select/Multiselect: Добавлены новые параметры itemClassName и itemStyle, позволяющие задать класс и стили для элементов списка в выпадающем меню

— DropdownMenu/Multiselect/Select: В callback-функциях onSelect, onMultiselect и onChange теперь вторым аргументом возвращается event. Раньше был только один аргумент — выбранные options

— Notifications: Теперь можно задать id для компонента. По дефолту id проставлены в порядке возрастания. Уведомления с одинаковым идентификатором существовать на странице не могут

Дизайнеры, всем приветик 🤍

В дизайн-системе много обновлений: больших и маленьких!

— Добавили в библиотеку много новых иконок, а некоторые иконки обновили свой внешний вид

— Поменяли цвета теней в темной теме, теперь они более контрастные и без свечения

— Добавили дополнительный цвет страницы (page-filled). Помимо основного белого, теперь есть фон с серой заливкой, чтобы разнообразить иерархию контента на экранах

— Overlay: поменяли цвет компонента

— Chips: изменили цвет фона выбранного secondary чипса

— InputNumberStepper: сделали фон компонента более контрастным

— FunctionButton: поменяли цвет tertiary кнопки

— FloatingActionButton: уменьшили размер иконок в MenuItem до 20px

👶 Мини-правки:

— Hint: Отступ между хинтом и счетчиком теперь 4px

— Slider: Counter поменял название на subLabel

— PickerDate: на градиенты в пикере теперь назначены переменные, и они корректно отрабатывают в темной теме

— DropdownMenu: отступ от скролла до правой границы теперь 4px

Желаем отличного дня и настроения!