Изменения в версии 6.3.0 (Выходила ранее, в канале не публиковали, исправляемся)

— DropdownMenu. Добавлены параметры: isOpen по аналогии с Dropdown; isMultiselect и колбэк-функция onMultiselect, которые отвечают за возможность множественного выбора; icon для добавления одинаковой иконки для всех опций; isSelectedTextColored, который отвечает за выделение текст элемента при выборе

— Select, Multiselect. Добавлен параметры: virtualScroll — включает виртуальный скролл; autocomplete — внутри передается колбэк onChange, который принимает поисковую строку из инпута. Добавлена возможность асинхронной загрузки данных

— TagGroup. Добавлен параметр showOnlyInput — отвечает за отображение в конце группы тегов инпута для ввода текста. Добавлена колбек-функция onChangeInput, вызываемая при введении данных в инпут

Привет! Сегодня немного обновили библиотеку Atomaro Web

Изменения:

— Popover готов в коде и вышел из статуса «В разработке», можно смело использовать в проектах

— Компоненты InputEmail и InputPhone удалены из дизайн-библиотеки — они, по сути, дублируют компонент Input и редко используются дизайнерами.

— В Tooltip название параметра header переименовано в title, а text в subtitle для единобразия названий параметров в похожих компонентах (например в Notification)

Релиз 7.1.0

И выпустили пачку горячих обновлений для разработчиков

Изменения:

— Checkbox. Добавили новый параметр labelColor, который позволяет задавать цвет лейбла

— InputDate. Добавили возможность задавать начало периода в одном году, а конец в другом (оказалось, что раньше так не срабатывало, все починили). Исправили отображение дат с заданными minDate/maxDate и прочие неприятные баги отображения

— PickerDate. Добавили callback-функции onChangeMonth, onChangeYear, которые возвращают соответствующие значения при выборе месяца или года

Новый компонент:

— InputTime. Похож на InputDate, только для ввода времени

А вы используете наш аватар мэйкер?
https://design.rt.ru/tools_public/avatarmaker/

Салют! Парочка нанорелизов с быстрыми фиксами

Релиз 7.1.2, 21 0ктября

— InputTime. Добавлен раздел Basic в сторибук, убраны лишние пропсы

— InputDate. Исправлена работа компонента с включенным пропсом isRange при выборе одинаковых дат

— Select. Добавлен ререндер при изменении options

Релиз 7.1.1, 19 0ктября

— Checkbox. Исправлен импорт внутри компонента, из-за него возникала ошибка всего кита

Друзья, в Arti режим совместного редактирования работает сейчас некорректно. Это связано с новыми сертификатами от правительства, которые внедрили в ПЦП. Сертификаты лучше в плане инфо-беза и защищенности данных. Но проблема в том, что все современные браузеры эти сертификаты не знают. Чтобы сайт работал корректно, сертификат нужно устанавить себе на компьютер. Единственный браузер в котором этот сертификат стоит по-умолчанию — Яндекс браузер, то бишь отечественный, в нём всё работает норм. Мы понимаем что это неудобно.
В ближайшее время мы обновим Арти, чтобы он работал стабильно на всех браузерах, без лишних телодвижений.

Апдейт ARTi

Починили совместное использование, доски снова открываются быстро.
Попробовать бесплатно без регистрации и смс https://design.rt.ru/tools_public/arti

Привет! Это канал бесплатного проекта онлайн-доски Арти https://design.rt.ru/tools_public/arti
Здесь мы будем делиться новостями и планами развития проекта.
Арти — это сайд-проект команды Дизайн-системы Ростелекома, который мы запустили для себя и сотрудников ртк ит, как простую замену миро.
В Арти можно проводить мастер-классы, ретроспективы, стратегии, вести документирование встреч. А также: рисовать роадмапы и схемы, прототипы интерфейсов, CJM, и слайды для презентаций.

Текущий функционал:
1. бесконечный холст;
2. сквозное шифрование;
3. совместное редактирование;
4. инструменты рисования: фигуры, текст, карандаш, стрелки;
5. все операции на горячих клавишах;
6. уникальные url зашифрованных досок;
7. «вечные» доски.

В чат @arti_board_chat можно писать вопросы или предлагать улучшения.

К нашей команде присоединились тестировщицы!

Таня Ильющенко и Юля Дельнова теперь занимаются QA в проекте дизайн-системы: поиском багов и несоответствий и тестированием всех изменений. Мы задали девочкам несколько вопросов, чтобы познакомиться.

– Таня, Юля, как видите свою миссию на проекте?
🔹Юля: Сломать всё, что можно сломать!
🔸Таня: И сделать так, чтобы дизайн-система не попала в канал UI фэйл 😛

– Что стало вашей первой задачкой?
🔸Таня: Мы начали с налаживания процесса QA вместе с ребятами и нашим лидом Никитой Орловым, чтобы все issues в GitLab проходили этап тестирования перед включением в релиз.
🔹Юля: Ещё мы сопоставили компоненты в Storybook и Figma – заметили, что некоторых компонентов в Figma не хватает, и решили с этим разобраться. А сейчас занимаемся тестированием компонента Input Card.

– Какие впечатления сложились о дизайн-системе?
🔸Таня: Дизайн-система — интересный проект со своими особенностями тестирования. Например, нужно правильно выстроить последовательность проверки разных источников, так как компоненты есть и в Storybook, и в Figma, и в коде.
🔹Юля: Ещё нам очень понравилась сама команда – никакой бюрократии, дружеская атмосфера, живые обсуждения. И все включают камеры на встречах!
🔸Таня: Да, все ребята активные, интересные, всегда готовы помочь. Очень рады стать частью команды!

Мы уверены, что благодаря Тане и Юле качество дизайн-системы будет расти от релиза к релизу. Если же какой-то баг всё-таки проскочит мимо девочек, его можно зарепортить в наш GitLab или описать в чате — мы обязательно посмотрим и ответим!

Новости Дизайн-системы Атомаро

1. Тестировщицы навалили багов на новый компонент InpudCard. Все рады, особенно Дима Уткин, который его делал.
2. Работы по темизации Дизайн-системы для Спектра идут вовсю. Токенизировали Checkbox и уже заканчиваем RadioButton. На следующей неделе приступаем к Input.
3. Проконсультировали проект Датапорт по разработке собственного ui-kit на Vue.js + рассказали про наши планы на следующий год по написанию универсального кита на WebComponents.
4. Выпустили патч для 5-ой версии ДС — помощь команде Ключ, которая пока не готова технически переезжать на 7-ю актуальную версию ДС.
5. Проводим внутри команды регулярный дайджест технологий, на котором начали разбирать компоненты на предмет качества кода, архитектуры, структуры, и дальнейшей масштабируемости. Это позволит заранее определить возможности улучшения Дизайн-системы.
6. Планируем в декабре провести крекер на Ростелеком про цикл жизни дизайн-систем.

Дайджест новостей недели

🔹Протестировали новый компонент InputCard, зарепортили баги и перешли к тестированию SegmentedControl
🔹Закончили токенизирование в коде компонента RadioButton и приступили к компоненту Switch
🔹Переосмысливаем компонент Input как в дизайне, так и в коде, чтобы его можно было легко кастомизировать с минимальным количеством токенов
🔹Лечим баги в компоненте Tree
🔹Долго собираем релиз 7.1.4, где должны решить проблемы с DropdownMenu и Multiselect. В релизе 6.3.0 мы перенесли логику множественного выбора из Multiselect в DropdownMenu, вылезло много багов. Решили откатить доработку, но так как она затрагивает много других компонентов, а после 6.3.0 было много изменений, это заняло некоторое время. Но основные проблемы решили и сейчас находимся на финальной стадии тестирования релиза

Как мы ищем дизайнера в команду

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

1. Понимание специфики дизайн-систем

Нам хочется найти человека, который быстро освоится с процессами и приступит к задачам. Для этого нужен опыт работы с дизайн-системами: не только с созданием компонентов в Figma, но и подготовкой их спецификаций, передачей разработчикам и проведением дизайн-ревью. Первые собеседования показали, что многие называют дизайн-системами простые UI-киты. Почему это не так, можно узнать в статье нашего продакт-оунера Дениса Пушкаря. А мы теперь отдельно уточняем опыт кандидата до собеседования.

2. Хороший UI и системное мышление

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

3. Софт-скиллы

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

Кандидат уже принял оффер. Но наша дизайн-студия всегда ищет таланты и кроме уже стандартного для IT соцпакета (премии, ДМС и разные компенсации) даёт возможность стать частью большого коммьюнити талантливых дизайнеров — узнавать новое, делиться своим опытом, а заодно и прокачивать навыки самопрезентации на лекциях и воркшопах. Чтобы стать частью нашей команды, присылайте ваши резюме и портфолио на Design.job@rt.ru

Дайджест новостей недели

🔹Завершили токенизацию компонентов Switch и Input
🔹Токенизируем компонент DropdownMenu и дорабатываем его функционально: пункты меню можно будет группировать и отделять линией, у каждой группы появится заголовок. Также предусмотрели контейнеры, в которые можно будет поместить другие элементы (например, поле поиска или кнопку) и расширить возможности DropdownMenu под разные продукты
🔹Продолжаем тестировать компонент SegmentedControl, доделываем пул тест-кейсов по компоненту InputCard в Figma
🔹Наш продакт-оунер Денис Пушкарь выступил на онлайн-митапе SuperJob и рассказал про цикл жизни дизайн-систем
🔹Пообщались с командой дизайн-системы МТС — обсудили общие боли, планы и технические решения. Вышло очень плодотворно и интересно!
🔹Тимлид разработки Дима Шевченко и аналитик Юля Берникова из нашей команды выпустились из Школы тимлида РТК ИТ. А Дима ещё и стал лучшим учеником своего класса — поздравляем! 🥳

У нас вышла статья на хабре про то, как Дизайн-система повлияла на цифровую трансформацию Ростелекома

https://habr.com/ru/company/rostelecom/blog/706288/

Релиз 7.2.0

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

Новые компоненты
— InputCard: поле ввода номера банковской карты
— SegmentedControl: группа кнопок-сегментов для переключения состояний или смены контента

Изменения
— InputDate. Исправлена критическая ошибка, приводившая к падению приложения, при параметре isRange=true и изменении первой даты периода
— Multiselect. Исправлена работа колбэк-функции при удалении тега. Добавлены параметры dropdownClassName, dropdownStyle — они отвечают за стилизацию DropdownMenu в компоненте
— Select. Исправлено поведение параметра dropdownStyle, при котором стили применялись к Input

Изменения в Storybook
— Переименованы примеры с Basic на Examples
— Добавлен пример импорта компонента
— Блок ShowCode раскрыт по умолчанию
— Для ShowCode включено динамическое отображение. В некоторых компонентах показывается весь код
— Options в ArgTypes вынесены из Control
— Убран код, потерявший актуальность (промоакция с футболкой)
— В Textarea убрана неиспользуемая переменная hideLabel внутри компонента

Релиз 7.2.1

Не останавливаемся, сразу чиним то, что сломали в предыдущем релизе =) Константин Поленков, спасибо за моментальный фидбек! 💚

Изменения
— Dependencies. Добавлена библиотека card-validator в зависимости

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


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

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

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

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

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

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

Релиз 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)

Релиз 7.3.1

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

Изменения

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

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

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

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

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

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

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

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

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

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