feat(UsersStack): tokenized by SevereCloud · Pull Request #2661 · VKCOM/VKUI

SevereCloud · 2022-06-03T13:40:57Z

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

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

Изменения

Переделал фотографии с использованием svg
- возможно пофиксится [Bug][UsersStack] Перекрытие элементов #2000 (необходим пример для воспроизведения)
- переписал маску с использованием дуг(вместо кривых Безье)
- добавлена обводка(через css не смог реализовать)

Для среднего размера появился счетчик

Скриншотный тест

e2e тесты
[Epic][Enhancement] Именованные экспорты #2191
closed [Feature] Токенизировать UsersStack #2588

codesandbox-ci · 2022-06-03T13:42:59Z

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 1c7372e:

Sandbox	Source
VKUI - default example	Configuration

github-actions · 2022-06-03T13:43:52Z

size-limit report 📦

Path	Size
JS	257.25 KB (-0.04% 🔽)
JS (gzip)	76.22 KB (-0.5% 🔽)
JS (brotli)	64.21 KB (-0.52% 🔽)
JS, unstable	29.56 KB (0%)
CSS	270.08 KB (-0.25% 🔽)
CSS (gzip)	37.95 KB (-0.21% 🔽)
CSS (brotli)	30.78 KB (-0.21% 🔽)
CSS, unstable	942 B (0%)

github-actions · 2022-06-03T13:47:18Z

👀 Styleguide deployed

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

github-actions · 2022-06-03T13:50:39Z

Fails

🚫

● UsersStack › 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)

● UsersStack › 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)

● UsersStack › 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)

🚫

● RichCell › android › light

Expected image to match or be a close match to snapshot but was 0.14872854750941816% different from snapshot (1137 differing pixels).
See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/richcell-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)
      at runMicrotasks (<anonymous>)

● RichCell › ios › light

Expected image to match or be a close match to snapshot but was 0.14872854750941816% different from snapshot (1137 differing pixels).
See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/richcell-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)

● RichCell › vkcom › light

Expected image to match or be a close match to snapshot but was 0.046465014577259475% different from snapshot (561 differing pixels).
See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/richcell-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)

🚫

● ModalCard mobile › ios › light w_2

Expected image to match or be a close match to snapshot but was 1.1021548072850487% different from snapshot (8327 differing pixels).
See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/modalcard-mobile-ios-light-w_2-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)

● ModalCard mobile › android › light w_2

Expected image to match or be a close match to snapshot but was 1.1112875900042354% different from snapshot (8396 differing pixels).
See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/modalcard-mobile-android-light-w_2-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)

● ModalCard tablet › ios › light w_3

Expected image to match or be a close match to snapshot but was 0.004102454337899544% different from snapshot (69 differing pixels).
See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/modalcard-tablet-ios-light-w_3-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)

● ModalCard tablet › android › light w_3

Expected image to match or be a close match to snapshot but was 0.004102454337899544% different from snapshot (69 differing pixels).
See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/modalcard-tablet-android-light-w_3-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)

● ModalCard › vkcom › light

Expected image to match or be a close match to snapshot but was 0.004053901615920435% different from snapshot (69 differing pixels).
See diff for details: /home/runner/work/VKUI/VKUI/__diff_output__/modalcard-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

modalcard-mobile-android-light-w_2-1

modalcard-mobile-ios-light-w_2-1

modalcard-tablet-android-light-w_3-1

modalcard-tablet-ios-light-w_3-1

modalcard-vkcom-light-1

richcell-android-light-1

richcell-ios-light-1

richcell-vkcom-light-1

Code coverage

lines	3788 / 4827	78.47%
statements	3857 / 4919	78.41%
functions	840 / 1051	79.92%
branches	3175 / 4475	70.94%
branchesTrue	0 / 0	100.00%

Generated by 🚫 dangerJS against d558d15

src/components/UsersStack/UsersStack.tsx

eugpoloz · 2022-06-07T11:34:49Z

src/components/UsersStack/UsersStack.tsx

-    ...restProps
-  } = props;
+export const UsersStack = ({
+  photos = [],


Не совсем про токенизацию, но: может, поменяем этот проп на src а photos задепрекейтим? Для консистентности будет хорошо (на src работает GridAvatar, например).

Хм, а это нормально что мы там используем src и пихаем внутрь массив?

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

src/components/UsersStack/UsersStack.css

src/components/UsersStack/masks.tsx

SevereCloud · 2022-06-07T19:00:47Z

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

SevereCloud requested a review from a team as a code owner June 3, 2022 13:40

SevereCloud mentioned this pull request Jun 3, 2022

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

Closed

89 tasks

SevereCloud marked this pull request as draft June 3, 2022 19:47

SevereCloud force-pushed the SevereCloud/issue2588 branch from bf0b3a8 to 170bce8 Compare June 7, 2022 10:15

SevereCloud marked this pull request as ready for review June 7, 2022 11:06

eugpoloz reviewed Jun 7, 2022

View reviewed changes

SevereCloud force-pushed the SevereCloud/issue2588 branch from 9404f81 to a814104 Compare June 7, 2022 13:35

inomdzhon reviewed Jun 7, 2022

View reviewed changes

src/components/UsersStack/UsersStack.css Show resolved Hide resolved

inomdzhon reviewed Jun 7, 2022

View reviewed changes

src/components/UsersStack/masks.tsx Show resolved Hide resolved

feat(UsersStack): tokenized

d558d15

SevereCloud force-pushed the SevereCloud/issue2588 branch from a814104 to d558d15 Compare June 7, 2022 18:54

CHORE: Update screenshots

1c7372e

inomdzhon approved these changes Jun 8, 2022

View reviewed changes

SevereCloud merged commit 37fbc79 into master Jun 8, 2022

SevereCloud deleted the SevereCloud/issue2588 branch June 8, 2022 07:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(UsersStack): tokenized#2661

feat(UsersStack): tokenized#2661
SevereCloud merged 2 commits intomasterfrom
SevereCloud/issue2588

SevereCloud commented Jun 3, 2022 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Jun 3, 2022 •

edited

Loading

Uh oh!

github-actions bot commented Jun 3, 2022 •

edited

Loading

Uh oh!

github-actions bot commented Jun 3, 2022

Uh oh!

github-actions bot commented Jun 3, 2022 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

eugpoloz Jun 7, 2022

Uh oh!

SevereCloud Jun 7, 2022

Uh oh!

eugpoloz Jun 7, 2022

Uh oh!

Uh oh!

Uh oh!

SevereCloud commented Jun 7, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Чеклист перевода компонента на 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!

Uh oh!

eugpoloz Jun 7, 2022

Choose a reason for hiding this comment

Uh oh!

SevereCloud Jun 7, 2022

Choose a reason for hiding this comment

Uh oh!

eugpoloz Jun 7, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

SevereCloud commented Jun 7, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SevereCloud commented Jun 3, 2022 •

edited

Loading

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