-
Notifications
You must be signed in to change notification settings - Fork 186
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
fix(Search): edit after transition #7487
Conversation
size-limit report 📦
|
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. |
e2e tests |
👀 Docs deployed
Commit b62be99 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
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
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
✨
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- обернул кнопку под `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` в переменную.
02a9824
to
b62be99
Compare
Вернул обёртку 🥲 ⚡ b62be99 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍🏽
Описание
обернул кнопку под
after
в отдельный<div>
;удалил анимацию
margin-inline
путём выставления отступов через::before
и::after
у нового<div>
;у
::after
минусуем отступ справа, который выставляется уSearch
если он есть (завязываемся на.Search--withPadding
);удалил⚠️ правда через см. fix(Search): edit after transition #7487 (comment)Search__afterText
, т.к. уButton
уже есть логика обрезания текста (ellipsis
, а неclip
);у кнопки выставил
hoverMode
иactiveMode
на"opacity"
;обновил скриншоты, т.к. привёл отступы к соответствие с дизайном.
У кнопки слева/справа 12px, а вокруг обёртки над кнопкой по 4px (справа отступ минусуем, см. п.3)
Изменения
flex-grow
иflex-basis
вместо шорткатаflex
;styles['Search--has-after']
добавляемplatform === 'ios'
;platform === 'ios' && after
в переменную.Release notes
Исправления