Привет друзья! Хакатон Цифрового прорыва закончился. Это было круто. Наш кейс — графический редактор на основе Дизайн-системы оказался реально сложным. 22 команды представили решения, 10 команд в шорт-листе, 3 призовых места.
На первом месте команда RealityGuys — представили самый работоспособный прототип, демка http://194.58.92.14:3000

Хочу горячо поздравить талантливых ребят, вы молодцы:

Кирилл Баикин @baikinkirill
Суринов Роман @TheHarald
Парамошкин Егор @Redbird127

Всё это стало реальным, благодаря поддержке наших любимых экспертов, они помогали командам и проверяли код:

Денис Плешаков @denpleshakov
Дима Макаров @dm_tr
Ваня Манжулов @john_smthn
Кирилл Савинов @kisavino
Алексей Мелекесов @Amelekesov
Аня Волкова @Volk_Anna
Юра Бизнигаев @Biznigaev
Семён Емельянов @semseriou
Валентин Телегин @balus13
Лиза Сахонь @lizasakhon
И Оксана Клименко @boevoiandroid

Членам жюри тоже пришлось поработать, все решения команд беспристрастно оценивали по восьми параметрам.
Жюри:
Ваш покорный слуга, как оунер и автор кейса;
Мудрейший Андрей Гундырев;
Креативнейший Игорь Готт.

Грандиозное событие! Столько профессионалов в одном месте, спасибо вам друзья за помощь и участие в жизни моей любимой Дизайн-системы:)

Планируем большой рефакторинг инпутов и все что с ними связано (InputEmail, InputPhone, Select, Multiselect и тд).
Упростим внутреннюю логику. Уберём лишние пропсы (например isFocused, defaultFocused планируем выпилить тк можно обойтись ref).
Принимаются ваши пожелания по инпутам)
А также нам очень нужна помощь сообщества в проведении ревью инпутов и тестировании. Если вы хотите поучаствовать в жизни Дизайн-системы и внести свой вклад — сейчас самое время)

Релиз 5.0.0. имени Дениса Дорошенко

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

- InputText переименован в Input, наследует пропс от стандартного input (описание таких пропов как required, name, className удалено из docs). Параметр label теперь не обязательный. Удалены параметры isFocused (можно использовать ref.current.focus()), titleError (можно использовать event.currentTarget.setCustomValidity('Custom message!') при событии onInvalid), onInputClick (можно создать внешнюю обертку)

- Checkbox, RadioButton. Параметр children больше не используется, вместо него текст лейбла нужно передавать в параметр label

- InputEmail, InputPhone. Параметр defaultValidationText переименован в error, добавлены параметры required и requiredError. Удалены параметры validationRules, transformationRule

- Switch. Параметр text переименован в label

- Textarea. Параметр label теперь не обязательный

- Новый компонент Editable Text

Changelog

Уже есть сигнальные образцы новой партии мерча!
Через неделю должны получить) отправим всем экспертам, участвовавшим в Цифровом прорыве)

2 года Дизайн-системе

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

Андрей Гундырев — руководитель дизайн-студии и главный меценат Дизайн-системы;
Михаил Маркус — руководитель Экосистемы, героически и самоотверженно выбивал бюджеты!
Денис Плешаков — главный дизайнер системы;
Пётр Советов — самый яркий дизайнер системы, сделал типографику, палитры и бо́льшую часть иконок;
Доминика Норт — разработчица, первой начала разработку и преодолела все грабли;
Денис Дорошенко — первый отец разработки;
Егор Бастраков — техлид, архитектор, второй отец разработки;
Олеся Тенькова — главная разработчица, настолько верный системе человек, что два раза переходила из отдела в отдел, чтобы работать над ДС;
Костя Батаков — разработчик, сделал главную сайта;
Богдан Бутов — разработчик, сделал много компонентов и внутренних страниц сайта;
Ксюша Бражник — дизайнерка, сделала много компонентов и иконок;
Лёша Фомичёв — дизайнер мобильной системы;
Ян Арефьев — дизайнер;
Максим Романов — разработчик;
Данил Пестерников — разработчик;
Алексей Козлов — разработчик;
Денис Дубовик — тестировщик;
Настя Равкова — тестировщица;
Иван Плахтеев — разработчик;
Никита Чесноков — руководитель девопсов, вечно спасал технику ДС;
Артемий Ломов — аналитик и разработчик, сделал первую версию сайта и сервис бекапа файлов фигмы;
Костя Валеев — руководитель аналитиков, помог с реализацией первого сайта;
Игорь Готт — арт-директор, помогал с дизайном текущей версии сайта;
Виталик Баум — разработчик;
Валентин Телегин — техлид мобильной разработки;
Толя Зверев — мобильный разработчик;
Саша Тарабрин — мобильный разработчик;
Паша Густокашин — мобильный разработчик;
Оксана Клименко — руководитель мобильной разработки и ярый защитник Дизайн-системы;
и Денис Пушкарь — ваш покорный слуга;

Спасибо вам ребята!
Но работа не закончилась, впереди порабощение мира.

Релиз 5.0.5 с хотфиксами имени Виталия Баума

Изменения в версии 5.0.5
- Dropdown. Вынесен как отдельный компонент, может быть с любым содержимым.
- CheckBoxGroup. Параметр name теперь не обязательный, параметры shape и color теперь задаются для всей группы чекбоксов, изменен тип для параметра checkboxProps.
- Добавлен экспорт констант, используемых в ДС BASECOLOR, SHAPES, SYSTEMCOLORS и т.д.
- InputDate. Исправлено обновление значений при изменении параметров activeDate и secondDate.
- Checkbox, RadioButton. Параметр label изменил тип данных на ReactNode
ThemeProvider. Теперь не обязателен, по умолчанию тема будет light

Изменения Srorybook
- Constants. Добавлено описание констант из ДС и пример использования
Theme. Добавлено описание как можно работать с темой при использовании styled-components

Изменения в версии 5.0.4
- Select, Multiselect. Добавлен e.stopPropagation при закрытом дропдауне при клике на поле

Изменения в версии 5.0.3
- Icon. Параметр size <= 1 задает размер в процентах

Изменения в версии 5.0.2
- Select. Не открывает клавиатуру при фокусе на мобилке

Изменения в версии 5.0.1
- Исправлены импорты theme.
- ToastNotificationsProvider добавлены useCallback для методов addNotification, addCustomNotification, closeNotification

Релиз 5.0.6 с хотфиксами имени Петра Советова

- Для иконок MailInBox, NotificationNew, CartOn добавлен параметр secondaryColor для задания второстепенного цвета;
- CheckBoxGroup. Параметр title изменил тип на ReactNode, значение по умолчанию "Выбрать все". В параметре options ключ value изменил тип на ReactNode;
- DropdownMenu. При выборе пункта меню прекращено всплытие события, это решает проблему с лишним срабатыванием useOutsideClick;
- Select, Multiselect. Параметры label, options теперь не обязательные

Начинаем делать таблицы!

И раскрывающиеся деревья.
Планируем релиз декабрь-январь. К нам на помощь пришли ребята из проф интерфейсов, с опытом проектирования таблиц. Если есть пожелания, присылайте

Сегодня в 14:00 по мск, в рамках серии обучающих крекеров по фронтенд архитектуре Миша Синяков проведёт стрим. Расскажет про сервисный слой приложения, покажет как подружить реакт с приложением, как взаимодействовать с глобальным хранилищем. И сверстает небольшое приложение используя Дизайн-систему.

Стрим в дискорде по ссылке
https://discord.gg/QhBug8Qv

Привет! Мы продолжаем сбор обратной связи от пользователей Дизайн-системы.
Если вы юзаете наш инструмент, и вам есть что сказать — заполняйте опрос (2 мин).
Можно ругать, можно советовать, можно анонимно. Будет полезна любая информация от вас

Релиз 5.0.8 имени Синякова-Ежкова

Благодарим Михаила Синякова за доработку ThemeProvider и добавление css переменных.
Cпасибо Денису Ежкову за найденные баги в Textarea и Multiselect

- ThemeProvider. Добавлен параметр useCssVariables, который создает CSS переменные согласно заданной теме
- Textarea. Изменена ширина компонента на 100%
- Multiselect. Исправлено отображение параметра error
- Checkbox, CheckboxGroup, RadioButton. Добавлены параметры size и view

Changelog

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

Мы с вами давно не виделись и потеряли контакт: используете ли вы Дизайн-систему в новых проектах? Ждете варианты в библиотеке или и так норм? Как обновить библиотеку, чтобы в ваших проектах ничего не поломалось? Давайте соберемся на полчасика в пятницу, после общего созвона, и пообщаемся. Мы по вам соскучились! ❤️

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

У основных компонентов, применяемых в формах, появились компактные версии. Используйте их в плотных и насыщенных интерфейсах.

Новые размеры компонентов:

— Checkbox Small и Radio Button Small — 16×16
— Switch Small — 28×16
— Input Small и Select Small — 32 по высоте поля ввода
— Input XSmall и Select XSmall — 24 по высоте поля ввода

Предыдущий вариант Select Small перемещен в устаревшие. В новых проетах используйте обновленную версию. Старая версия не сломается, она так же доступна, но переименована в Deprecated Select и вынесена из папки контролов.

Добавили второй вид для чекбоксов и радиокнопок — акцентный, залитый акцентным цветом в состоянии selected.

Исправили баг иконки в списках мультиселекта.

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

Релиз 5.0.9 имени Егора Бастракова.

Поздравляем нашего архитектора, техлида и просто хорошего человека Егора с Днем рождения!

Изменения
— Input, InputPhone, InputEmail, InputAmount, Select. Добавлен параметр size
— Switch. Добавлен параметр size, удален z-index
— Input. Добавлен параметр onClear
— Select, Multiselect. Добавлен forwardRef
— Typography. Теперь принимает все стандратные атрибуты, такие как title

Storybook
— Input. Добавлен пример реализации InputPassword

Changelog