Design-System RT

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

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

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

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

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

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

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

Привет друзья! Хакатон Цифрового прорыва закончился. Это было круто. Наш кейс — графический редактор на основе Дизайн-системы оказался реально сложным. 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

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

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

🎙В третьем выпуске «Кофе с лидером» знакомимся с новым героем из Перми — главным архитектором Георгием Бастраковым.

Георгий рассказал, как распознать пермского айтишника, поделился ярким впечатлением за время работы в РТК ИТ, прогнозами о будущем квантовых компьютеров и разработки как профессии. Поговорили про квантовые сети и многое другое.

🔗 Смотри видео по ссылке, ставь палец вверх 😊

У нашего техлида Егора взяли интервью, посмотрите, очень интересно!

Релиз 4.2.5 с хотфиксами имени Миши Синякова

— CheckboxGroup, DropdownMenu. Добавлен сброс дефолтных браузерных стилей;
— InputText, InputAmount, InputDate, InputPhone, InputDate, Select, Multiselect, Textarea. Исправлена анимация label, width: 280px -> min-width: 280px;
— Sticker, TagItem. Для корректного отображения добавлен box-sizing: border-box;
— Select, Multiselect. Добавлен необязательный параметр defaultOpen, по умолчанию false;

Storybook:
— Box. Добавлены примеры с использованием cornersRounding и shadow
Introduction. Добавлено описание про импорт шрифтов;
— ThemeProvider. Добавлено описание формата строки с цветом$
— PickerDate, PickerTime. Для примера реализовано закрытие при клике вне области календаря;
— Select, Multiselect, PickerDate, PickerTime. Исравлено отображение во вкладке Docs;
— Box, Typography. Добавлено описание для отступов. Добавлена страница Spacing с подробным описанием отступов

Менеджеры, аналитики, бизнес-владельцы и начинающие дизайнеры скажут спасибо командам, которые выбрали кейс от Ростелекома на хакатон Креативные индустрии, Коммуникации и контент. Почему? Подробности рассказал Денис Пушкарь, Product Owner дизайн-системы в Ростелекоме ➡️

Близится хакатон, и мы активно готовимся, лечим баги, дописываем инструкции)
На участие по нашему кейсу уже отозвались 22 команды!