feat(Counter): tokenized by SevereCloud · Pull Request #2658 · VKCOM/VKUI

SevereCloud · 2022-06-03T07:55:31Z

Чеклист перевода компонента на vkui-tokens

В стилях компонента не осталось платформенных селекторов
Если в стилях встречаются токены из Appearance, то их нужно не удалять, а дополнять фоллбэком на соответствующий токен из vkui-tokens
В tsx компонента не осталось логики, которая зависит от платформы
Компонент добавлен в src/tokenized/index.ts (в src/index.ts он так же должен быть)
Имя компонента добавлено в массив из styleguide/tokenized.js

добавлен новый тип счетчика contrast
e2e тесты
[Epic][Enhancement] Именованные экспорты #2191
closed [Feature] Токенизировать Counter #2642

codesandbox-ci · 2022-06-03T07:57:33Z

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 726a11c:

Sandbox	Source
VKUI - default example	Configuration

github-actions · 2022-06-03T07:58:27Z

size-limit report 📦

Path	Size
JS	257.25 KB (-0.06% 🔽)
JS (gzip)	76.58 KB (-0.05% 🔽)
JS (brotli)	64.51 KB (-0.02% 🔽)
JS, unstable	29.56 KB (0%)
CSS	270.48 KB (+0.06% 🔺)
CSS (gzip)	38 KB (+0.02% 🔺)
CSS (brotli)	30.85 KB (+0.02% 🔺)
CSS, unstable	942 B (0%)

github-actions · 2022-06-03T08:02:23Z

👀 Styleguide deployed

See the styleguide for this PR at https://vkcom.github.io/VKUI/pull/2658/

github-actions · 2022-06-03T08:04:41Z

	Fails
🚫	● Counter › android › light New snapshot was not written. The update flag must be explicitly passed to write a new snapshot. + This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default. 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9) at runMicrotasks (<anonymous>) ● Counter › ios › light New snapshot was not written. The update flag must be explicitly passed to write a new snapshot. + This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default. 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9) ● Counter › vkcom › light New snapshot was not written. The update flag must be explicitly passed to write a new snapshot. + This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default. 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
🚫	● WriteBarIcon › vkcom › light Expected image to match or be a close match to snapshot but was 0.023310023310023312% different from snapshot (17 differing pixels). See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/writebaricon-vkcom-light-1-diff.png 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
🚫	● Tabs › android › light Expected image to match or be a close match to snapshot but was 0.07922535211267606% different from snapshot (108 differing pixels). See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/tabs-android-light-1-diff.png 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9) ● Tabs › ios › light Expected image to match or be a close match to snapshot but was 0.07775119617224881% different from snapshot (104 differing pixels). See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/tabs-ios-light-1-diff.png 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9) ● Tabs › vkcom › light Expected image to match or be a close match to snapshot but was 0.08699434536755112% different from snapshot (108 differing pixels). See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/tabs-vkcom-light-1-diff.png 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
🚫	● Header › vkcom › light Expected image to match or be a close match to snapshot but was 0.004959087527894868% different from snapshot (34 differing pixels). See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/header-vkcom-light-1-diff.png 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9) at runMicrotasks (<anonymous>)
🚫	● Button › android › light Expected image to match or be a close match to snapshot but was 0.023719411032766487% different from snapshot (366 differing pixels). See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/button-android-light-1-diff.png 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9) ● Button › ios › light Expected image to match or be a close match to snapshot but was 0.0229417254251348% different from snapshot (354 differing pixels). See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/button-ios-light-1-diff.png 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9) ● Button › vkcom › light Expected image to match or be a close match to snapshot but was 0.11867291058907825% different from snapshot (1855 differing pixels). See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/button-vkcom-light-1-diff.png 205 \| </ConfigProvider> 206 \| ) > 207 \| ).toMatchImageSnapshot(matchScreenshot); \| ^ 208 \| }); 209 \| }); 210 \| }); at _callee$ (../src/testing/e2e/utils.tsx:207:13) at tryCatch (../node_modules/regenerator-runtime/runtime.js:45:40) at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:274:22) at Generator.prototype.<computed> [as next] (../node_modules/regenerator-runtime/runtime.js:97:21) at asyncGeneratorStep (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24) at _next (../node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)

	Warnings
⚠️	8 changed screenshots found — review & update them via "Update Screenshots" action before merging.

Changed screenshots

button-android-light-1

button-ios-light-1

button-vkcom-light-1

header-vkcom-light-1

tabs-android-light-1

tabs-ios-light-1

tabs-vkcom-light-1

writebaricon-vkcom-light-1

Code coverage

lines	3784 / 4823	78.45%
statements	3853 / 4915	78.39%
functions	840 / 1051	79.92%
branches	3156 / 4455	70.84%
branchesTrue	0 / 0	100.00%

Generated by 🚫 dangerJS against 6f27863

src/components/Counter/Counter.tsx

eugpoloz · 2022-06-03T08:28:59Z

src/components/Counter/Counter.tsx

+        vkuiClass={classNames(
+          "Counter",
+          `Counter--${mode}`,
+          `Counter--s-${size}`


Я бы еще этот класс до Counter--${size} упростила, но на твое усмотрение. 😉

Я бы еще этот класс до Counter--${size} упростила, но на твое усмотрение. 😉

@eugpoloz @SevereCloud вспомнил что вот тут #2255 (comment) предложение по неймингу (включая модификаторы) вкидывал, оказывается забыл засабмитить)) Но писал дополнительно в чат и там тогда только Артур заметил предложение и плюсанул, потом сообщение затерялось, не могу сейчас найти его

мб сделать такое в v5, чтобы меньше редактировать названия классов

Тоже хороший вариант, меньше страдать при мерджах в v5 будем. Надо тоже как задачу зафиксировать тогда.

src/components/Counter/Counter.tsx

eugpoloz · 2022-06-03T11:06:53Z

Довольно много скриншотов поменялось, было ли дизайн-ревью?

SevereCloud · 2022-06-03T11:07:22Z

Только что отправил)

eugpoloz · 2022-06-03T11:08:26Z

Тогда ждем-с. ✌️

SevereCloud · 2022-06-06T10:31:28Z

Дизайн ревью ✅ (by @Fliqle)

SevereCloud requested a review from a team as a code owner June 3, 2022 07:55

SevereCloud force-pushed the SevereCloud/issue2642 branch from 602268b to 7e2a9d0 Compare June 3, 2022 08:22

eugpoloz reviewed Jun 3, 2022

View reviewed changes

SevereCloud force-pushed the SevereCloud/issue2642 branch from 6bda16f to 9b0fa36 Compare June 3, 2022 10:49

SevereCloud mentioned this pull request Jun 3, 2022

[Epic][Enhancement] Именованные экспорты #2191

Closed

89 tasks

inomdzhon previously approved these changes Jun 6, 2022

View reviewed changes

feat(Counter): tokenized

6f27863

SevereCloud dismissed inomdzhon’s stale review via 6f27863 June 6, 2022 14:18

SevereCloud force-pushed the SevereCloud/issue2642 branch from 9b0fa36 to 6f27863 Compare June 6, 2022 14:18

CHORE: Update screenshots

726a11c

inomdzhon approved these changes Jun 6, 2022

View reviewed changes

SevereCloud merged commit 7b7dc62 into master Jun 6, 2022

SevereCloud deleted the SevereCloud/issue2642 branch June 6, 2022 14:34

Conversation

SevereCloud commented Jun 3, 2022

Чеклист перевода компонента на vkui-tokens

Uh oh!

codesandbox-ci bot commented Jun 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

github-actions bot commented Jun 3, 2022

👀 Styleguide deployed

Uh oh!

github-actions bot commented Jun 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changed screenshots

Code coverage

Uh oh!

Uh oh!

eugpoloz Jun 3, 2022

Choose a reason for hiding this comment

Uh oh!

inomdzhon Jun 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SevereCloud Jun 3, 2022

Choose a reason for hiding this comment

Uh oh!

eugpoloz Jun 3, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

eugpoloz commented Jun 3, 2022

Uh oh!

SevereCloud commented Jun 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eugpoloz commented Jun 3, 2022

Uh oh!

SevereCloud commented Jun 6, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codesandbox-ci bot commented Jun 3, 2022 •

edited

Loading

github-actions bot commented Jun 3, 2022 •

edited

Loading

github-actions bot commented Jun 3, 2022 •

edited

Loading

inomdzhon Jun 3, 2022 •

edited

Loading

SevereCloud commented Jun 3, 2022 •

edited

Loading