[BUG] @prizm-ui/components - Focused `PrizmSwitcherItem` has border radius

AleksandrSibiakov commented 2 months ago

Библиотека

Выберите нужное отметив галочку [x]

[ ] @prizm-ui/core
[ ] @prizm-ui/components
[ ] @prizm-ui/install
[ ] @prizm-ui/icons
[ ] @prizm-ui/flag-icons
[ ] @prizm-ui/theme
[ ] @prizm-ui/charts
[ ] @prizm-ui/ast
[ ] @prizm-ui/nx-plugin

Компонент

Switcher

Скрин / Видео проблемы

Воспроизведение проблемы

https://prizm.site/components/switcher

ickisIckis commented 1 month ago

@PrizmDS, такое поведение добавлялось специально, нужно уточнить, как должны вести себя кнопки с фокусом.

AleksandrSibiakov commented 1 month ago

@ickisIckis возможно, что проблема тогда в том что border-radius есть, но нет тени (который в роли аутлайна именно при фокусе)

вероятно надо разделять :active & :focused-visible состояния (делать радиус только если есть обводка)

Но даже в этом случае остаются проблемы 1) с небольшими незакрашенными уголками - на скриншоте в описании видно (вложенные радиусы надо уменьшать на ширину границы), 2) с отсутствием правой границы у кнопки (радиус заканчивается без вертикальной линии)

Я бы рекомендовал пересмотреть стили - тут можно неплохой baseline - Bootstrap button-group с использованием margin-left: -1px для решения проблемы двойных границ и z-index:1 для "поднятия" элемента при фокусировке для корректного отображения границ поверх соседей)

ickisIckis commented 1 month ago

@ickisIckis возможно, что проблема тогда в том что border-radius есть, но нет тени (который в роли аутлайна именно при фокусе)

вероятно надо разделять :active & :focused-visible состояния (делать радиус только если есть обводка)

Но даже в этом случае остаются проблемы 1) с небольшими незакрашенными уголками - на скриншоте в описании видно (вложенные радиусы надо уменьшать на ширину границы), 2) с отсутствием правой границы у кнопки (радиус заканчивается без вертикальной линии)

Я бы рекомендовал пересмотреть стили - тут можно неплохой baseline - Bootstrap button-group с использованием margin-left: -1px для решения проблемы двойных границ и z-index:1 для "поднятия" элемента при фокусировке для корректного отображения границ поверх соседей)

незакрашенные уголки точно будем решать, спасибо за идеи с решением. Сейчас необходимо еще раз уточнить поведение и возьмем в работу.

PrizmDS commented 1 month ago

@ickisIckis Скругление должно быть только у внешнего контейнера. Все внутренние объекты без скруглений

ickisIckis commented 3 weeks ago

PrizmDS commented 3 weeks ago

Принято

zyfra / Prizm