Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ConfigProvider): add tokensClassNames prop #6313

Conversation

inomdzhon
Copy link
Contributor

@inomdzhon inomdzhon commented Dec 19, 2023


  • Unit-тесты
  • Документация фичи
  • Гайд миграции

Описание

Теперь у ConfigProvider есть параметр tokensClassNames, который позволяет перебивать базовые токены.

В lib/platform убрал из PlatformType тип string, т.к. теперь для передачи своих токенов есть tokensClassNames. Также оставил TODO [>=7] на переименование vkcom в web.

Документация

  • Переписал страницы:
  • Для песочницы, в документация Styleguide, добавил параметр themeName, куда перенёс, результат запроса https://unpkg.com/@vkontakte/vkui-tokens@4/themes/?meta.
    • По клику на название текущей темы открывается модалка.
      1-modal

    • По наведению на themeName показываем пример кода как подключать ту или иную тему
      Снимок экрана 2023-12-19 в 23 22 55 Снимок экрана 2023-12-19 в 23 23 38

  • в components/Setting добавил иконку Icon12InfoCircle при использовании hint, чтобы было нагляднее, что есть тултип
    image

Изменения

  • Создал директорию lib/tokens:
    • появился хук useTokenClassName(), который резолвит tokensClassNames из контекста;
    • перенёс TokensClassProvider в lib/tokens:
      • теперь использует хук useTokenClassName();
      • больше не использует аргументы platform/appearance, т.к. берём из контекста.
  • hooks/useAppearance – поправил под TokensClassProvider.
  • hooks/usePlatform – поправил под TokensClassProvider.
  • Удалил generateVKUITokensClassName.

Copy link
Contributor

github-actions bot commented Dec 19, 2023

size-limit report 📦

Path Size
JS 347.64 KB (+0.05% 🔺)
JS (gzip) 106.25 KB (+0.08% 🔺)
JS (brotli) 87.71 KB (+0.01% 🔺)
JS import Div (tree shaking) 1.43 KB (0%)
CSS 258.02 KB (0%)
CSS (gzip) 33.66 KB (0%)
CSS (brotli) 27.34 KB (0%)

Copy link

codesandbox-ci bot commented Dec 19, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d21027c:

Sandbox Source
VKUI TypeScript Configuration

Copy link
Contributor

github-actions bot commented Dec 19, 2023

e2e tests

Playwright Report

Copy link
Contributor

github-actions bot commented Dec 19, 2023

👀 Docs deployed

Commit d21027c

Copy link

codecov bot commented Dec 19, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (4a35b1a) 81.56% compared to head (d21027c) 81.23%.
Report is 13 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #6313      +/-   ##
==========================================
- Coverage   81.56%   81.23%   -0.34%     
==========================================
  Files         324      326       +2     
  Lines       10087    10096       +9     
  Branches     3379     3388       +9     
==========================================
- Hits         8227     8201      -26     
- Misses       1860     1895      +35     
Flag Coverage Δ
unittests 81.23% <100.00%> (-0.34%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@inomdzhon inomdzhon force-pushed the imirdzhamolov/issue5121/feat/ConfigProvder-separate-plaform-and-theme branch 2 times, most recently from 1e774d9 to 70c8721 Compare December 19, 2023 17:09
- Создал директорию `lib/tokens`:
  - появился хук `useTokenClassName()`, который резолвит `tokensClassNames` из контекста;
  - перенёс `TokensClassProvider` в `lib/tokens`:
    - теперь использует хук `useTokenClassName()`;
    - больше не использует аргументы `platform`/`appearance`, т.к. берём из контекста.
- `hooks/useAppearance` – поправил под `TokensClassProvider`
- `hooks/usePlatform` – поправил под `TokensClassProvider`
- `lib/platform` – убрал из `PlatformType` тип `string`, т.к. теперь для передачи своих токенов есть `tokensClassNames`.
- Удалил `generateVKUITokensClassName`.
- Для песочницы, в документация Styleguide, добавил параметр `themeName`, куда перенёс, результат запроса https://unpkg.com/@vkontakte/vkui-tokens@4/themes/?meta;
  > **tl;dr** в рамках этого изменения, были переименованы и отрефакторены папки и файлы

  - в `components/Setting` добавил иконку `Icon12InfoCircle` при использовании `hint`, чтобы было нагляднее, что есть тултип;
  - у некоторых `themeName` есть только светлая или тёмная тема – для этих кейсов сделал так, что `appearance` в песочнице переключается и блокируется на поддерживаемому тему;
  - в модалке с темами добавил дополнительную документацию;
  - в `components/Settings/ThemeName` в св-во `hint` компонента `<Setting />`, генерируем пример использования `tokensClassNames` в `ConfigProvider`.
@inomdzhon inomdzhon force-pushed the imirdzhamolov/issue5121/feat/ConfigProvder-separate-plaform-and-theme branch from 70c8721 to 5f5edf5 Compare December 19, 2023 20:40
@inomdzhon inomdzhon marked this pull request as ready for review December 19, 2023 20:40
@inomdzhon inomdzhon requested a review from a team as a code owner December 19, 2023 20:40
mendrew
mendrew previously approved these changes Dec 20, 2023
Copy link
Contributor

@mendrew mendrew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Здорово придумал, нравится API! 👏 👏 👏

Прекрасно доку преобразил, спасибо! 🔥 🔥 🔥

Copy link
Contributor

@eugpoloz eugpoloz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Очень крутые доки стали по содержанию, бесконечно восторгаюсь твоей способностью так подробно и понятно их расписывать. ❤️

packages/vkui/src/lib/platform.ts Show resolved Hide resolved
styleguide/Components/Modals/Themes.js Outdated Show resolved Hide resolved
styleguide/Components/Settings/ThemeName.js Outdated Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Outdated Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Outdated Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Outdated Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Outdated Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Outdated Show resolved Hide resolved
Copy link
Contributor Author

@inomdzhon inomdzhon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Огромное спасибо за правки и предложения 🙏 🙏 🙏 💖 💖 💖

packages/vkui/src/lib/platform.ts Show resolved Hide resolved
styleguide/Components/Modals/Themes.js Outdated Show resolved Hide resolved
styleguide/Components/Settings/ThemeName.js Outdated Show resolved Hide resolved
styleguide/pages/customize.md Outdated Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Outdated Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Outdated Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Outdated Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Outdated Show resolved Hide resolved
styleguide/pages/platforms_and_themes.md Outdated Show resolved Hide resolved
mendrew
mendrew previously approved these changes Dec 22, 2023
mendrew
mendrew previously approved these changes Dec 25, 2023
Copy link
Contributor

@mendrew mendrew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💅

Copy link
Contributor

@BlackySoul BlackySoul left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@inomdzhon inomdzhon merged commit 611a55b into master Dec 26, 2023
24 of 25 checks passed
@inomdzhon inomdzhon deleted the imirdzhamolov/issue5121/feat/ConfigProvder-separate-plaform-and-theme branch December 26, 2023 07:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants