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

fix(Search): edit after transition #7487

Merged
merged 2 commits into from
Sep 6, 2024

Conversation

inomdzhon
Copy link
Contributor

@inomdzhon inomdzhon commented Aug 30, 2024


  • e2e-тесты
  • Дизайн-ревью

Описание

  1. обернул кнопку под after в отдельный <div>;

  2. удалил анимацию margin-inline путём выставления отступов через ::before и ::after у нового <div>;

  3. у ::after минусуем отступ справа, который выставляется у Search если он есть (завязываемся на .Search--withPadding);

  4. удалил Search__afterText, т.к. у Button уже есть логика обрезания текста (⚠️ правда через ellipsis, а не clip); см. fix(Search): edit after transition #7487 (comment)

  5. у кнопки выставил hoverMode и activeMode на "opacity";

  6. обновил скриншоты, т.к. привёл отступы к соответствие с дизайном.

    У кнопки слева/справа 12px, а вокруг обёртки над кнопкой по 4px (справа отступ минусуем, см. п.3)

Изменения

  • для ясности точечно применяем flex-grow и flex-basis вместо шортката flex;
  • в условие проверки на выставление styles['Search--has-after'] добавляем platform === 'ios';
  • выносом проверку platform === 'ios' && after в переменную.

Release notes

Исправления

  • Search: поправлен баг с опаздывающей анимацией кнопки "Отмена" в iOS

@inomdzhon inomdzhon requested a review from a team as a code owner August 30, 2024 12:24
@github-actions github-actions bot added the patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Aug 30, 2024
Copy link
Contributor

github-actions bot commented Aug 30, 2024

size-limit report 📦

Path Size
JS 381.16 KB (+0.03% 🔺)
JS (gzip) 115.39 KB (+0.04% 🔺)
JS (brotli) 94.73 KB (+0.06% 🔺)
JS import Div (tree shaking) 1.45 KB (0%)
CSS 309.36 KB (+0.03% 🔺)
CSS (gzip) 39.68 KB (-0.02% 🔽)
CSS (brotli) 31.86 KB (-0.07% 🔽)

Copy link

codesandbox-ci bot commented Aug 30, 2024

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.

Copy link
Contributor

github-actions bot commented Aug 30, 2024

e2e tests

Playwright Report

Copy link
Contributor

github-actions bot commented Aug 30, 2024

👀 Docs deployed

Commit b62be99

@inomdzhon inomdzhon removed the patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Aug 30, 2024
Copy link

codecov bot commented Aug 30, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.18%. Comparing base (422148d) to head (b62be99).
Report is 2 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #7487   +/-   ##
=======================================
  Coverage   95.18%   95.18%           
=======================================
  Files         384      384           
  Lines       11225    11226    +1     
  Branches     3682     3683    +1     
=======================================
+ Hits        10684    10685    +1     
  Misses        541      541           
Flag Coverage Δ
unittests 95.18% <100.00%> (+<0.01%) ⬆️

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.

Copy link
Contributor

@andrey-medvedev-vk andrey-medvedev-vk 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

@SevereCloud SevereCloud left a comment

Choose a reason for hiding this comment

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

Текст кнопки отмены уходит в троеточие

Было Стало
image image

- обернул кнопку под `after` в отдельный `<div>`;
- удалил анимацию `margin-inline` путём выставления отступов через `::before` и `::after` у нового `<div>`;
- у `::after` минусуем отступ справа, который выставляется у `Search` если он есть (завязываемся на `.Search--withPadding`);
- удаляем `Search__afterText`, т.к. у `Button` уже есть логика обрезания текста (⚠️ правда через `ellipsis`, а не `clip`);
- обновили скриншоты, т.к. привели отступы к соответствие с дизайном.

Дополнительно:

- для ясности точечно применяем `flex-grow` и `flex-basis` вместо шортката `flex`;
- в условие проверки на выставление `styles['Search--has-after']` добавляем `platform === 'ios'`;
- выносом проверку `platform === 'ios' && after` в переменную.
@inomdzhon
Copy link
Contributor Author

Текст кнопки отмены уходит в троеточие

Было Стало
image image

Вернул обёртку 🥲 ⚡ b62be99

Copy link

@Zaycevq Zaycevq 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 a1adab7 into master Sep 6, 2024
28 checks passed
@inomdzhon inomdzhon deleted the imirdzhamolov/issue7460/fix/Search-cancel-button branch September 6, 2024 16:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: дизайн ревью iOS Search after "Отмена"
4 participants