feat(PanelHeaderButton): refactor pressets #7874
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 fc45f37 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #7874 +/- ##
==========================================
+ Coverage 95.16% 95.30% +0.14%
==========================================
Files 376 376
Lines 11008 10979 -29
Branches 3653 3669 +16
==========================================
- Hits 10476 10464 -12
+ Misses 532 515 -17
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
| const platform = usePlatform(); | ||
| const { sizeX = 'none' } = useAdaptivity(); | ||
| // также label нужно скрывать при platform === 'ios' && sizeX === regular | ||
| // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104 | ||
| const showLabel = platform === 'vkcom' || platform === 'ios'; | ||
| const showLabel = platform === 'ios'; |
There was a problem hiding this comment.
В #1208 добавляли platform === "vkcom" считая отсутствие лейбла на VKCOM багом
Тут либо нужно проверку возвращать, либо расширять API, чтобы пользователь сам мог реглировать видимость лейбл
There was a problem hiding this comment.
Хм, уточню у дизайна про этот компонент. Судя по всему ему нужна своя кастомная логика, так как судя по скришотам измененным выглядит не очень
| return ( | ||
| (<React.Fragment> | ||
| <PanelHeaderBack onClick={noop} label={"Закрыть"}></PanelHeaderBack> | ||
| <PanelHeaderBack onClick={noop} label={<><span>Закрыть</span></>}></PanelHeaderBack> |
There was a problem hiding this comment.
А появление тут фрагмента так и задумано?
There was a problem hiding this comment.
в целом да, там просто проблема с переносом из children в label. По-другому сделать довольно проблематично. И возможно это линтер исправить сможет
…and hideLabelOnIOS
Описание
В настоящее время пресеты компонента PanelHeaderButton демонстрируют несогласованное поведение при использовании пропсов label и children на разных платформах.
Изменения
Унифицировано поведение пресетов для обеспечения предсказуемого отображения на всех платформах.
Основные изменения
Поведение label:
Удаление children:
Особый случай: PanelHeaderBack
Документация
Дополнительные изменения
UPD
Пришлось оставить исключение PanelHeaderButton, так как у него есть особенная логика - label иногда должен отображаться не только на IOS, но и на VKCOM. Также было бы неплохо, чтобы можно было управлять тем, нужно ли скрывать label на разных платформах, поэтому добавил свойства hideLabelOnVKCom и hideLabelOnIOS для более точно найстройки в зависимости от кейса.
Release notes
BREAKING CHANGE
PanelHeaderCloseудалено свойствоchildren. Теперь для прокидывания текста дляa11yнужно прокидывать его в свойствоlabelPanelHeaderSubmitудалено свойствоchildren. Теперь для прокидывания текста дляa11yнужно прокидывать его в свойствоlabelPanelHeaderEditудалены свойстваchildrenиlabel. Вместоlabelможно использовать свойстваdoneLabelиeditLabel. Свойствоchildrenне использовалось.PanelHeaderBackудалено свойствоchildren. Теперь для прокидывания текста дляa11yнужно прокидывать его в свойствоlabel. Логика отображения label осталась как была, в отличае от других пресетов. Также для более точно настройки label были добавлены свойства hideLabelOnVKCom и hideLabelOnIOS, чтобы можно было скрывать label на соответствующей платформе.