Релиз 7.3.4

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

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

Изменения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Релиз 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. Добавленные элементы запоминаются при первом рендеринге. При попытке добавления обновляемого стейта в пропсе будет виден результат первого рендеринга

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

— 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 для рамки с иконкой. Размер рамки не соответствовал дизайну при отсутствии этого свойства

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

Релиз 7.5.0

Алоха! Добавляем новые параметры нашим компонентам.

— DropdownMenu: Добавлены новые значения для параметра foldDirection: top, bottom, topLeft, topRight, bottomLeft, bottomRight, auto. Обновлены примеры компонента в сторибуке

— Multiselect: Добавлены два новых параметра — clearable и onClear, принцип работы как и в компоненте Input

— InputDate/InputTime: Добавлены параметры useInPortal и foldDirection. Типы и константы foldDirection теперь можно импортировать из библиотеки

— Tooltip/Popover: Добавлен пропс, отвечающий за позиционирование pointer'a. Параметр arrowIsCentered отвечает за то, чтобы стрелка указывала на центр родительского компонента

— Tooltip/Popover: Откатили правку по несоответствию параметров topRight/topLeft, bottomRight/bottomLeft, leftTop/leftBottom, rightTop/rightBottom с версии 7.3.3. Убрали autoLeft и autoRight

— Storybook: Поправлены примеры компонента Multiselect

🔥 Хот-микро-фикс-релиз 7.5.1

Мы стараемся учесть все ваши замечания и проводим работу над ошибками!

— Dropdown. Вернули дефолтное значение foldDirection, используемое до 7.5.0

🔥 Breaking change

После внедрения UsePopper в компонент Dropdown в релизе 7.3.4, кастомизация контейнера через селекторы (top/bottom/right/left) будет отрабатывать некорректно. UsePopper затирает эти значения.
В следующем релизе добавим параметр, задающий отступы

Релиз 7.6.0 💥

Алоха! Выпускаем новый компонент, улучшения мультиселекта

— Slider: Новый компонент в нашей библиотеке. Представляет собой элемент управления, помогает легко выбрать значение, либо диапазон значений, перетаскивая ползунок по треку

— DropdownMenu/Multiselect: Добавлен параметр hideSelectedOptions, отвечающий за сокрытие выбранных элементов в dropdownMenu

— Tag/TagGroup: Добавлено состояние error для компонента Tag. Новый параметр invalidTags для TagGroup

— Tooltip/Popover: Параметр arrowIsCentered переименован в pointerIsCentered

— Dropdown: Добавлен параметр offsetCounterAxis, задающий отступ по поперечной оси

— Button: Расширили набор типов в пропсах стандартными свойствами ButtonHTMLAttributes

Multiselect:

— Исправлено подергивание выпадающего меню при выборе опции

— Исправлена ошибка, которая возникала при отсутствии options

— Теперь, при включённом автокомплите, можно заполнять поле ввода значением для поиска двумя способами - нажатием клавиши Enter, либо вводом запятой

Обновления библиотек в Figma

Приём, дизайнеры! Чуть-чуть обновили библиотеки, держим вас в курсе.

Обновление библиотеки с иконками

— Добавились иконки в размере 24×24 и изменилась буква i в иконках info. Полный список новых иконок смотрите на сайте.

Спасибо всем ребятам, которые участвовали в создании иконок: София Бернацкая, Петр Советов, Ирина Макушева.

Обновление в библиотеке компонентов

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

— TagItem: добавилось состояние ошибки.

— Slider: больше не помечается как компонент в разработке. Можно использовать без опасений.

— Scroll: больше не помечается как компонент в разработке. Дизайн-система стилизует нативный скрол.

— Code: отмечен как устаревший. Реализации в коде нет, в дизайне больше не поддерживается.

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

Всем привет. На связи Денис Пушкарь, оунер Дизайн-системы. Мы начинаем в регулярном формате публиковать новости, планы, и даже факапы Дизайн-системы, (а также учимся рассказывать об этом интересно=).
Для чего нужен Дайджест? Всю дорогу мы много работаем, но мало что рассказываем, а это создаёт барьеры и непонимание между продуктом и всеми, кто им пользуется, или как-то связан. Долой барьеры!

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

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

Что делаем сейчас

Глобально — мы делаем два продукта.
Один вам хорошо известен, это Дизайн-система Ростелекома. Второй, это коммерческий продукт Дизайн-система Атомаро.
У каждого из них своя стратегия развития.

Главный клиент продукта — сам Ростелеком, РТК ИТ, и вендоры. Пользователи: дизайнеры, разработчиков и команды проектов. На данный момент мы добились консистентности использования в корпорации, дс применяется на 150+ проектах. Поэтому продукт с начала года развиваем в глубь, в качество кода, а также поддержку и обучение пользователей.
Еженедельная аудитория проекта: 1000-1200 человек. Это большая цифра и нагрузка, при том что у нас вся команда 8 человек, а выделенной техподдержки нет. Поэтому мы ввели дежурство в чате поддержки. Каждый день по расписанию выделяется один разработчик из нашей команды, который мониторит чат, и реагирует на все запросы в течение дня. С начала года обработали 142 заявки, в среднем два запроса в день. Это и вопросы, и найденные баги, и помощь с первым использованием. Все найденные баги дежурный заводит в задачу, после решения которой мы отписываемся стейк-холдеру о том, что проблема решена.
Второе важное направление работы, и она же наша проблема: многострадальные таблицы, которые мы разрабатываем уже полтора года. Первая версия вышла кривой и с кучей багов. С начала года мы начали рефакторить, и практически полностью их переписали.

С коммерческим продуктом Атомаро куда интереснее. Наши клиенты — компании с собственной инхаус разработкой, которым очень хочется сделать дизайн и фронтенд быстрее, эффективнее. Дизайн-система это про перфоманс всей команды. Пользователи здесь тоже дизайнеры и разработчики.
Но это новый продукт, который мы разрабатываем с нуля с начала года. Почему? Потому что дизайн-система Ростелекома имеет своё брендирование и задаёт определённые стандарты для использования в корпорации. Тогда как для рыночного продукта очень важна гибкость и универсальность. Просто задачи другие.
Мы запустили mvp своего медиа про дизайн-системы @pro_designsystem с обучающими материалами, так мы проверяем гипотезу маркетингового инструмента — привлечение в продукт через обучение.
А ещё прямо сейчас на согласовании проект о разработке дизайн-системы для одного очень крупного клиента.

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

Наш коммерческий продукт сейчас на этапе поиска Product Market Fit. Мы ищем сегменты пользователей и клиентов, проверяем гипотезы оффера (т.е. решение работы, на которую нанимается наш продукт). Это исследовательская работа со множеством неопределённостей.
Главные проблемы сейчас: найти бюджеты на системы мотивации (мерч) и бюджет на маркетинговый траффик. Почему это проблемы?
Потому что без мерча нам нечем благодарить респондентов за интервью, и первых последователей за фидбек после использования продукта. А без маркетингового бюджета трудно проверять гипотезы и искать Product Market Fit. Но даже когда эти проблемы будут решены, нас ждёт следующий вызов: посчитать юнит-экономику. Т.е. понять, что продукт может приносить прибыль, и мы не уйдём в минус, когда начнём масштабироваться.

Планы
Для Дизайн-системы Ростелекома — релиз таблиц в этом году, и дальнейшее улучшение качества.
Для Атомаро — мы создаём новые точки касания, это конечно новый сайт, cjm, и онбординг. Планируем релиз нового продукта в начале ноября, следите за новостями=)

Команда
Нас стабильно 8 человек, вот эти парни и девчата:
Денис Пушкарь — оунер;
Денис Плешаков — продакт и архитектор;
Ира Макушева — дизайнерка;
Юля Дельнова — тестировщица;
Дима Шевченко — тимлид разработки;
Сережа Фидлер — разработчик;
Дима Уткин — разработчик;
Данил Старко — разработчик.

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

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

Сегодня в выпуске:
— два продукта;
— гипотезы бизнес-модели Атомаро;
— сегментация пользователей;
— текущие задачи;
— роадмап и ближайшие планы (следующий дайджест);

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

Гипотезы бизнес-модели Атомаро
Атомаро сейчас на стадии стартапа и поиска своей ниши, или поиска Product Market Fit.
PMF — это гипотеза о бизнес модели, мы верим, что если мы находим соответствие продукта рынку, значит мы можем масштабировать продукт, и он будет приносить прибыль.
PMF состоит их трёх важных частей:
Жизнеспособность — клиенты готовы платить, есть способ привлечения, и юнит-экономика выше нуля;
Востребованность — у людей действительно есть задачи, которые наш продукт решает лучше конкурентов, либо дешевле;
Реализуемость — у нас есть команда, которая за разумный бюджет и сроки сделает продукт

Основная гипотеза в проверку которой мы сейчас идём называется Product Led Growth, а именно рост за счёт продукта.
Стратегия в том, что наш продукт должен решать боли очень массового сегмента, максимально дёшево, либо вообще бесплатно.
Чем больше «работ» (в терминологии JTBD) покрывает продукт, либо чем качественнее он делает определёные, тем проще распространять продукт, и тем виральнее становится привлечение. Самые яркие примеры — Figma, Miro. Простые инструменты, которые на старте практически не вкладывались в маркетинг, но быстро росли, потому что успешно решали работы большого сегмента.
Но за счёт чего продукт будет окупаться? За счёт платных фич и сегмента b2b, сотрудники которого уже пользуются продуктом.

Пользователи
Наша главная аудитория — это 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 мин) об опыте использования дс, ваш отзыв поможет улучшить продукт и сделать его ещё более полезным и удобным. Спасибо за ценную обратную связь!