Релиз 7.3.3

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

Изменения

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

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

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

Переработка 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 для точечной стилизации дат, времени, лет или месяцев

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет. Вопрос тем, кто пользуется нашими 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 и т.д.

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

Релиз 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, сотрудники которого уже пользуются продуктом.