Design-System RT

Благодарим наших контрибьюторов — Никиту Жулева и Артёма Волкова из команды Омничата — за проработку компонентов Modal и Drawer. Ребята, спасибо! 💚💜

Во второй части представим еще ряд исправлений и улучшений:

— InputTime, InputDate, PickerTime, PickerDate: исправлено появление лишнего пробела в inputTime. Исправлена работа пропса color. Поправлена работа maxTime и minTime в inputTime. Поправлены пропсы dayOfWeek, renderDate в inputDate и inputTime. Исправлена работа интервала времени для PickerTime и InputTime

— Во всех компонентах, работающих с объектом Data добавился пропс enabledDates. Это список доступных дат с самым высоким приоритетом

— SegmentedControl: Поправили onChange. Callback больше не срабатывает при клике на активном элементе. Добавили переключатель темы в сторибук

— Notification: Добавили подробное описание по подключению и работе компонента в Сторибук

— Checkbox: Добавлено свойство box-sizing: border-box для рамки с иконкой. Размер рамки не соответствовал дизайну при отсутствии этого свойства

Релиз 7.4.2

Алоха! Большой hot-fix и новый компонент библиотеки Atomaro!

В первой части расскажем:

— Modal: в библиотеке появился новый компонент — модальное окно. Контейнер, в котором можно показать любое содержимое поверх основного экрана.

— usePortal: Теперь компоненты Dropdown, DropdownMenu, Select, Multiselect и Breadcrumb могут рендериться через хук usePortal. Для этого появился пропс useInPortal. В рамках этого дополнения в Multiselect добавился пропс foldDirection. Работает также, как в Select. В Dropdown и DropdownMenu появился пропс offset, который задаёт смещение по вертикали

— emptyText: Select и Multiselect, при включенном autocomplit, умеют предупреждать пользователя, когда его запрос в поиске не дал результата. Для этого добавлено дефолтное поведение свойства emptyText

— Multiselect: Исправлена бага в пропсе defaultValue. Добавленные элементы запоминаются при первом рендеринге. При попытке добавления обновляемого стейта в пропсе будет виден результат первого рендеринга

Релиз 7.4.1 с хотфиксами 🔥

Изменения по Multiselect:

— Устранена утечка памяти при использовании onChange

— Исправлен баг, при котором в размере medium после выбора опции из списка, менялся отступ от dropdown до input

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

Релиз 7.4.0

Аллоха! Добавили новый компонент. Выкатили множество багфиксов и доработок.

Изменения

— Добавлен новый компонент — Drawer. Универсальный контейнер боковой выезжающей панели.

— Multiselect. Полностью переписали компонент, а также добавили новые размеры — small и xsmall

— DropdownMenu. Добавлен параметр disabledItems, который принимает ключи списка options

— PickerDate. При выборе calendarMode, открывался mode:date. Исправлена логика первого рендера

— Input. Исправлено поведение каретки

— Input. Исправлена ошибка, при которой не применялись css-стили при срабатывании браузерного автокомплита

— Icons. Иконки сжимались в размере, если находились в контейнере со свойством display: flex. Компоненту Icon добавлено свойство flex-shrink: 0

— Textarea. Изменён default color компонента на primary2

— Breadcrumbs. Добавлены два новых параметра — maxCrumbs и maxVisibleCrumbs

— Storybook: Исправлены опечатки. Некоторым компонентам добавлены недостающие параметры style и className

Обновление библиотеки для дизайнеров

Всем приветик! Маленькие, но хорошие новости для дизайнеров: дополнили компоненты дизайн-системы новыми размерами, а также пофиксили небольшие баги.

— Multiselect: компонент расширился: теперь есть размеры small и xsmall.

— Tags: В тегах тоже пополнение: добавился малыш xsmall.

— PickerTime: в пикере с параметром isRange повторялись значения времени в трех последних строчках. Поправили!

Релиз 7.3.4

Алоха! Выпускаем пачку минорных фиксов.

Нестабильный Multiselect был переработан и сейчас в тестировании. Скоро в релиз!

Изменения

— DropdownMenu. Исправлена ошибка, при которой выпадающий список не отображался в положении auto

— InputNumberStepper. Теперь при вводе с клавиатуры значения больше, чем max или меньше min, число становится max или, соответственно, min. Раньше в таком случае ничего не происходило, callback onChange не срабатывал, значение в компоненте не менялось

— PickerDate. Добавлены градиенты на пустые ячейки дней, если они попадают в выбранный диапазон

— InputDate. Исправлен баг пропса minYear при котором нельзя было выбрать значение раньше 1980 года. В сторибук добавлен пример получения одной даты из компонента с включенным пропсом isRange

— InputEmail. Добавлен символ "_" в разрешенные в качестве доменного имени

— PickerDate/InputDate. Также исправлено несколько небольших деффектов, которые появились после перехода на новый PickerDate

Привет. Вопрос тем, кто пользуется нашими pickerDate/inputDate

Нам интересно как вы обрабатываете сценарий, при котором нужно получить диапазон из двух дат, либо при включенном isRange получить одни целые сутки
Например, пользователь выбрал дату 09.05.2023 - 09.05.2023 и в onChange пришло два объекта типа Date со временем 00:00
Вывод в консоли:
Tue May 09 2023 00:00:00 GMT+0300 (Москва, стандартное время) Tue May 09 2023 00:00:00 GMT+0300 (Москва, стандартное время)

Такой кейс обычно используется для фильтрации данных и получается, что без обработки и форматировании не получится сразу получить необходимый диапазон. Для этого нам надо отбросить часть со временем (HH:mm), сетнуть во второй дате время на 23:59 и т.д.

Суть вопроса в том, как вы разрешаете данный случай

Замечены дефекты в работе компонента Multiselect

В некоторых сценариях компонент отрабатывает с ошибками.

Компонент составной и использует в себе другие компоненты: Input, Tag, DropdownMenu. В идеале каждый компонент должен быть обособлен и ничего не знать о других. Сейчас не так. У нас есть 3 места с состояниями выбранных параметров и каждый со своей логикой.

Мы попробовали решить эту проблему быстро, но безуспешно. Проще и быстрее удалить внутренности компонента и заново его собрать. В рамках работ планируем решить следующие ключевые проблемы из-за которых возникают большинство самых критичных багов:

1. Без компонента Tag, оставить только его стилизацию.

2. Исправить работу автокомплита. Единственный источник состояний позволит нам это сделать.

3. Вынести стейты из DropdownMenu.

4. onSelect и onMultiselect — уницифировать работу колбеков.

5. Пересмотреть работу хука useMultiselect и возможно убрать его совсем.

Планируемый срок работ — 2 недели

Переработка DatePicker, часть 2

— Default scroll to. Доработана функциональность скроллинга по умолчанию. Теперь при первом рендеринге каждого из календарей происходит скроллинг до:

а) если в отображаемом календаре присутствует activeDate, календарь скроллится до нее;

б) если activeDate нет, но есть secondDate — скроллится до нее;

в) если activeDate и secondDate нет, но есть today — скроллится до сегодняшней даты

— isRange. Доработана функциональность диапазона дат. Теперь диапазон дат доступен в рамках месяцев, лет, дней и времени

— Исправлен баг с большим временным диапазоном дат. Было: при isRange={true} и выбранной дате в далеком прошлом (например, 01.01.1980), выбор следующей даты (например, 01.01.2030) происходил с жуткими тормозами. Стало: выбор любой даты происходит быстро, без тормозов

Переработка DatePicker, часть 1

Компонент полностью переработан. При этом все пропсы остались неизменными. Компонент собран на модульной архитектуре

— calendarMode. Добавлен пропс calendarMode, который принимает одно из значений: YEARS_ONLY, YEARS_WITH_MONTH, YEARS_WITH_MONTH_DAYS, YEARS_WITH_MONTH_DAYS_TIMES, MONTHS_ONLY, MONTHS_WITH_DAYS, MONTHS_WITH_DAYS_TIMES, DAYS_ONLY, DAYS_WITH_TIMES, TIMES_ONLY. Примеры работы каждого из режимов смотрите в сторибуке

— today. Доработана функциональность отображения сегодняшней даты. Теперь сегодняшняя дата отображается для дней, месяцев, лет и времени

— renderDate. Callback renderDate теперь помимо даты возвращает аргумент view. View — это контекст календаря: 'time' | 'day' | 'month' | 'year'. Используйте view для точечной стилизации дат, времени, лет или месяцев

Релиз 7.3.3

Патч с фиксами, повышаем стабильность компонентов

Изменения

— RadioButton. Псевдокласс :hover теперь находится на уровне label. Ситуации, при которых стили hover не применялись, исключены

—Tooltip, Popover: В параметре placement исправлены выпадающие элементы, которые отображались не в соответствии своим названиям: topRight/topLeft, bottomRight/bottomLeft, leftTop/leftBottom, rightTop/rightBottom

— Tooltip, Popover: Поправлено позиционирование. Тултип больше не «прыгает» в сторону при появлении. Добавлены параметры tooltipClassName и popoverClassName, непосредственно относящиеся к самому элементу, а не обертке

Релиз 7.3.2

Патч с фиксами, повышаем стабильность компонентов

Изменения

— Select. Исправлен баг с не работающим onFocus при нажатии на иконку стрелку

— InputNumberStepper. Исправлена ошибка: при выборе только одного параметра из max или min, оставалась возможность ввести вручную число больше максимального/меньше минимального

— Улучшения сторибука. В компонентах Input добавлен выбор иконок для параметров iconLeft и iconInputField

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

Что интересного

Мы часто общаемся с разработчиками, которые используют дизайн-систему и узнаем их боли при работе с макетами дизайнеров. Это и стало материалом нашего исследования, в котором вы узнаете:

— Почему не стоит детачить компоненты

— Как навести порядок в файлах и сценариях

— Какие технические моменты должен учесть дизайнер

— Как стать любимчиком фронтендера

И многое другое!

Приятного чтения 💚

С днем новых компонентов для дизайнеров! В дизайн-системе пополнение: слайдер и 150 (вау) иконок. Давайте посмотрим, что же там интересного.

Обновление Atomaro Web

— Slider: теперь можно легко выбирать желаемое значение или диапазон значений, перемещая ползунок по треку слайдера. Компонента пока нет в коде, добавим в следующих релизах

Обновление Atomaro Icons

— Добавили новые иконки 16×16 и 24×24
— Обновили названия нескольких имеющихся иконок
— Добавили новую категорию Logotypes для общеупотребимых логотипов, не связанных с Ростелекомом.

Обновление Atomaro Icons RTK

— Добавили 24 новые иконки

Полный список новых иконок смотрите на сайте

Спасибо всем ребятам, которые участвовали в создании иконок 💚

Бальцер Артур, Макушева Ирина, Мухаметшин Ильназ, Нигматулина Гузель, Плешаков Денис, Советов Петр, Середа Анна, Слизков Константин

ПЦП сегодня объявило о том, что с 09.03.2023 будут отключены зеркалирующие репозитории для всех языков. Это означает, что пакеты с нашим ui-kit перестанут быть доступны по адресу — https://nexus.digital.rt.ru/

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

registry=https://registry.npmjs.org/
@design-system-rt:registry=https://repo.digital.rt.ru/repository/npm-group/

Также, мы готовим свой репозиторий и вы можете принять участие в его тестировании. На данный момент на нем доступны версии 7.3.0 и 7.3.1. Располагается он по адресу — https://atomaro-registry.apps.okd.stage.digital.rt.ru/
Файл .npmrc в таком случае должен выглядеть так:

registry=https://registry.npmjs.org/
@design-system-rt:registry=https://atomaro-registry.apps.okd.stage.digital.rt.ru

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

Если возникают сложности, вопросы, проблемы, предложения, пишите в чат, мы поможем

Дизайн-система получила корпоративную премию «Бизнес-прорыв»

На Атомаро за три года реализовано 100+ проектов. Недавно состоялась первая коммерческая продажа лицензии ведущему производителю виртуального и инфраструктурного ПО. Финансовый успех — один из критериев для участия в премии.

https://portal.it.rt.ru/article/747

Релиз 7.3.1

C первыми весенними деньками! Сегодня у нас работа над ошибками и новый хук

Изменения

— Select. Исправлена ошибка, при которой с включенным autocomplete выпадающее меню не сворачивалось при нажатии на стрелку

— Multiselect. Исправлена ошибка, при которой при добавлении значений в value, они не отображались в поле ввода, но при этом выпадающий список выглядел корректно

— SegmentedControl. Добавлено затемнение фона при наведении на сегмент

— Tooltip, Popover. Исправлено позиционирование в закрытом состоянии. Теперь всплывающие элементы не изменяют высоту страницы

— Tooltip. Исправлен баг некорректной работы тултипа, внутри которого находится кнопка, обернутая кастомным компонентом

— Исправлена ошибка, при которой невозможно было использовать некоторые компоненты без ThemeProvider

— UsePopper. Добавлен новый хук, основанный на библиотеке popper.js.org. Служит для корректного и легко настраиваемого позиционирования всплывающих элементов. В сторибуке есть пример использования

Релиз 7.3.0

Поправили несколько багов, переписали позиционирование для Tooltip и Popover

Изменения

— EditableText. Исправили периодические сбои в поведении компонента

— Multiselect. Исправлена проблема с отображением тегов выбранных элементов по дефолту внутри инпута

— Checkbox. Убрано лишнее всплытие события при клике на чекбокс

Изменения Tooltip, Popover

— Добавлена библиотека Popper.js для позиционирования

— Переписана логика позиционирования Tooltip и Popover, исправлены ситуации, при которых тултип перекрывался другими элементами и пропадал из зоны видимости

— Теперь тултип автопозиционируется не только при placement = auto, но и в остальных случаях. Добавлены новые позиции autoLeft и autoRight

— Новый пропс useInPortal переключает использование Tooltip, Popover на порталы (React createPortal), по умолчанию true

— Отличия: Pointer позиционируется по-другому, теперь стрелка указывает на центр элемента (кроме позиций top, left, bottom, right)

Мы часто пытаемся объяснить простым языком что такое дизайн-система в коде. Подбираем ассоциации, метафоры, убираем сложную терминологию. Понятно, что объяснить все технические аспекты всем не получиться, но передать общий смысл и концепцию мы обязаны. Ниже предлагаем прочитать один из вариантов такого объяснения.


«Для реализации дизайн-системы в коде используются различные технологии. Наиболее распространенными являются HTML, CSS, JavaScript и фреймворки для них.

HTML — является сущностью, на которой основывается дизайн-система. Он используется для создания структуры страницы, и это может быть реализовано, используя различные HTML-теги, такие как div, span, h1, h2, p и т.д.

CSS — является «костюмом», которым одевают HTML-элементы. CSS-код позволяет украсить HTML-код, указывая цвет, размер, отступы, рамку и многое другое.

JavaScript — это «мудрость». JavaScript-код позволяет реализовывать различные функции, такие как: анимация, AJAX-вызовы, обработку форм, вывод уведомлений и т.д.

Фреймворк — это «костюм», «мудрость» и «сущность». Фреймворк — это комбинация HTML, CSS, JavaScript-кода, который помогает ускорить разработку web-дизайн-системы.»

Насколько понятно такое объяснение для человека не сильно погруженного в разработку? Можете поделиться мыслями текстом или реакцией. Как бы вы объяснили что такое дизайн-система в коде?