consta-design-system / uikit Goto Github PK

Нужно добавить иконку как компоненту (2 слева) для панели (xs, s, m) https://www.figma.com/file/d1LmFzRazBtPjWsnyW8h1U/KL-%5Bdraft%5D?node-id=0%3A1

При просмотре в IE не применяются стили.

Скорее всего, проблема в использовании в стилях директивы var.

Директивы var не поддерживаются в IE.

Сейчас источником истины о значениях цветов выступают css-файлы тем. Это хорошее решение, потому что а) в коде, б) понятно версионирование, в) встраивается в релизный цикл.
Есть недостатки:

1. Забирать эти значения из кода можно только в рамках фреймворка whitepaper (потому что whitepaper-специфичный css)
2. Комментарии о семантике цветов доступны только в css-файле и не транслируются никуда. Для дизайнеров интерфейсов это высокий порог вхождения -- нужен акк на гитхабе и умение им пользоваться.
3. При появлении сквозных изменений -- много ручной работы. Затраты на актуализацию.

Предлагаю:

1. Использовать json-файл для каждой темы
2. В его структуре предусмотреть а) имя; б) значение; в) от какого цвета функционально зависим; г) семантический комментарий.
3. Написать скрипт -- генератор css-файла из json'a

Профиты:

1. Можно будет транслировать за рамки фреймворка
2. Можно использовать json для интеграции с figma -- сквозные изменения!
3. Более прозрачная и понятная документация для разработчиков и дизайнеров
4. Возможность запилить Хороший сторибук с поиском по значениям, поиском вхождений, кнопками копирования и прочими няшками.

• написать доку для контрибьютеров про это, зафиксировать что используем английский
• рассказать что стоит писать в именовании коммитов
• обсудить и зафиксировать флоу работы с ветками, как будем их вливать. Сейчас очень много мерж-коммитов в мастере, можно подумать про сквоши и ребейз
• можно настроить commitizen, но дизайнеры работают через граф. интерфейс, им это не будет удобно
• линковать коммиты к конкретным ишьюсам в гитхабе (как-то это автоматизировать?)

Столкнулся с проблемой что props накидываются на корневой элемент div. Возможно ли сделать проброс на элемент input и textarea?

Кейс:
По требованиям google lighthouse на элементах формы должен быть атрибут aria-label.

• автоформирование чейнджлогов с помощью github-release-notes (gren)
• запланировать написать доки для контрибьютеров и для пользователей
• запланировать покрытие текущих компонентов документацией
• включить шаг документирования в процесс создания новых компонентов

создать компонент скрытого инпута, для визуального отображения ипользовать renderProps

1. Open text story: https://gpn-prototypes.github.io/ui-kit/?path=/story/text--текст
2. Choose font variant "serif"

Expected result: text should have serif font

Actual result: text has sans font

Looks like --font-serif property is missing from Theme_font_gpnDefault

1. Развернуть проект на Next.js
2. Следовать инструкции по импорту компонентов: https://github.com/gpn-prototypes/ui-kit

OR

Expected result: Компонент добавлен на страницу и готов к использованию

Actual result:
error - ./node_modules/@gpn-design/uikit/internal/src/components/Attach/Attach.css
Read more: https://github.com/zeit/next.js/blob/master/errors/css-npm.md

При фокусе на табе таб выделяется целиком по границам http://s.csssr.ru/UMYJTGU0M/2020-06-01-14-47-27-I9R0J.jpg

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

Было бы лучше, если бы фокус был только снизу:

• Пример активного таба и фокуса на нем http://s.csssr.ru/U02GZ926T/2020-06-01-1535-1suuxel0n4.jpg
• Пример активного таба и фокусе не на активном табе http://s.csssr.ru/U02GZ926T/2020-06-01-1536-2uv8cp9cr9.jpg

Ссылка на элемент: https://gpn-prototypes.github.io/ui-kit/?path=/story/ui-kit-tabs--playground

https://www.figma.com/file/SLc0YGhuDotve6MTCBHlGxDU/Graphics?node-id=385%3A214

Вместо ХОКа BaseIconHoc можно было использовать простую фабрику createIcon( { name, xs, s, m })

создать новый компонент Attach

https://www.npmjs.com/package/@storybook/addon-a11y
и проверить ошибки

рассмотреть идею про использование одинаковых конфигов на всех проектах ГПН, в т.ч. на ДС — конфиги eslint, stylelint, prettier, eitorconfig итд
просто актуализировать конфиги, которые прямо сейчас уже есть в репе, чтобы не приходилось затыкать линтеры комментариями

сейчас компоненты Input и Select еще пока есть в бандле
но их убрали из реэкспорта в пакете, конфигом в сборщике от этого css файл вообще не прилетел в сборку

Нужно обратно добавить Select в реэкспорт и подумать как будем уведомлять пользователей о том что компонент deprecated

Завёл по мотивам обсуждения в пр-е про добавление новых иконок:
#132 (comment)

Насколько понимаю, из-за особенностей текущего механизма сборки иконок получается, что в проекте одновременно лежат и svg-иконки, и их же представление в виде tsx-компонента. При этом tsx-компонент иконки не импортит svg, а дублирует её.

Нужно доработать сборку иконок таким образом, чтобы дублирования не было в репозитории. Один из вариантов — использовать babel-plugin-named-asset-import, который позволит импортить svg и использовать сразу как Реакт-компонент, тогда от tsx-обёрток можно будет избавиться и оставить только svg.

Исползования any - проверить и убрать
Кликабельные дивы - проверить и убрать
Отключенные стори - удалить
Используются и типы, и интерфейсы - переход к типам

@storybook/addon-docs

https://www.figma.com/file/SLc0YGhuDotve6MTCBHlGxDU/Graphics?node-id=385%3A735

Для генерации таблицы пропсов и нобов можно попробовать заюзать react-docgen-typescript-loader и addon-smart-knobs, но у них есть свои ограничения, которые могут потребовать доработок

Одна для генерации чейндлогов в монорепе, вторая с экшенами для деплоя

В начале нужно создать BaseInput(или другое название) - компоненет который только отвкечает за стиль рамки инпута, div со стилями, и на его основе сделать SimleSelect и TextField.
За основу BaseInput нужно взять обертку изи TextField взять рутовый div со стилями. Ну и в самом TextField применить BaseInput

• заменить цвет в фильтре кнопок на более семантичный.
• отказаться от селектора Snackbar-ActionButton.Button.
• причесать внешний вид стори

убрать сложный оnChange оставить нативный

Дублирует логику Checkbox, отличается только внешним видом, подумать об обьединении логики

По аналогии с RadioGroup https://consta-uikit.vercel.app/?path=/story/components-radiogroup--playground

и проверить остальные компоненты

Перенести tooltip из конструктора в дизайн-систему (подробнее обсудим на планировании)

Нужно придумать названия пресетам и какие модификаторы тем они будут содержать
также учесть возможность создание пользовательских пресетов

дополнить документацию компонента Theme

Кейс:

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

дополнить доку примером создания и подключением своей собственной темы

1. Перейти на страницу https://github.com/gpn-prototypes/ui-kit
2. Найти раздел "Применение"
3. Скопировать код импорта стилей на страницу приложения
4. Дождаться компиляции

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

Фактический результат:

Причина: ошибка в описании кода импорта стилей ('theme' с маленькой буквы)

Не лучший способ вставлять кнопку как ссылку : <Button< { href: string; target: string }> />.
Лучше было типизацию сделать внутри компонента (через JSX.IntrinsicElements), а не заставлять подмешивать снаружи

Настроить и написать тесты на примере одного компонента

Кажется что нужно указать тему

Неименованные дженерики: BaseCheckGroupField<T, T2 = {}>
multiply вместо multiple

@bem-react/classname
@bem-react/classnames
lodash
react-textarea-autosize
react-transition-group