retail-ui
retail-ui copied to clipboard
feat(react-ui): add CSSThemeProvider
У себя в новом проекте не хотелось использовать css-in-js (я хейтер) и для работы с темами из react-ui сделал себе компонент CSSThemeProvider, который берёт все переменные из какой-либо темы react-ui, и объявляет эти переменные как css custom properties, после чего в css можно использовать, например:
color: var(--text-color-default);
background-color: var(--bg-default);
и так далее. Решил поделиться с react-ui :)
Стоит ли добавлять в общую библиотеку контролов или нет? Что дополнить/изменить?
Спорные моменты:
- Стоит ли внутри CSSThemeProvider оборачивать
children
вThemeContext.Provider
для удобства, или так зона ответственности компонента получается не очень (всё-таки наследование свойств CSS и наследование значений реакт-контекста работает по-разному), и пусть лучше юзер сам явно используетThemeContext.Provider
, если нужно? - Стоит ли сделать возможным передачу в
value
любого объекта с переменными, а не только результатThemeFactory.create(...)
?
Чек-лист перед запросом ревью
-
Добавлены тесты на все изменения ⬜ unit-тесты для логики ⬜ скриншоты для верстки и кросс-браузерности ⬜ нерелевантно
-
Добавлена (обновлена) документация ⬜ styleguidist для пропов и примеров использования компонентов ⬜ jsdoc для утилит и хелперов ⬜ комментарии для неочевидных мест в коде ✅ прочие инструкции (
README.md
,contributing.md
и др.) ⬜ нерелевантно -
Изменения корректно типизированы ✅ без использования
any
(см. PR2856
) ⬜ нерелевантно -
Прочее ✅ все тесты и линтеры на CI проходят ✅ в коде нет лишних изменений ✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)
Привет!
Спасибо за ПР. Но мы не спешим брать на поддержку компоненты, потребность в которых точно не известна. Идеально было бы сначала положить на парковку, прорекламировать и посмотреть на статистику использования.
Но, думаю, что идея хорошая. На счет реализации я скорее за то, чтобы ограничить ответственность компонента только лишь трансляцией переменных из ThemeContext в CSS.