[BUG] @prizm-ui/components - Focused `PrizmSwitcherItem` has border radius
AleksandrSibiakov opened this issue · comments
Библиотека
Выберите нужное отметив галочку [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
Скрин / Видео проблемы
Воспроизведение проблемы
@PrizmDS, такое поведение добавлялось специально, нужно уточнить, как должны вести себя кнопки с фокусом.
@ickisIckis возможно, что проблема тогда в том что border-radius есть, но нет тени (который в роли аутлайна именно при фокусе)
вероятно надо разделять :active & :focused-visible состояния (делать радиус только если есть обводка)
Но даже в этом случае остаются проблемы 1) с небольшими незакрашенными уголками - на скриншоте в описании видно (вложенные радиусы надо уменьшать на ширину границы), 2) с отсутствием правой границы у кнопки (радиус заканчивается без вертикальной линии)
Я бы рекомендовал пересмотреть стили - тут можно неплохой baseline - Bootstrap button-group с использованием margin-left: -1px для решения проблемы двойных границ и z-index:1 для "поднятия" элемента при фокусировке для корректного отображения границ поверх соседей)
@ickisIckis возможно, что проблема тогда в том что border-radius есть, но нет тени (который в роли аутлайна именно при фокусе)
вероятно надо разделять :active & :focused-visible состояния (делать радиус только если есть обводка)
Но даже в этом случае остаются проблемы 1) с небольшими незакрашенными уголками - на скриншоте в описании видно (вложенные радиусы надо уменьшать на ширину границы), 2) с отсутствием правой границы у кнопки (радиус заканчивается без вертикальной линии)
Я бы рекомендовал пересмотреть стили - тут можно неплохой baseline - Bootstrap button-group с использованием margin-left: -1px для решения проблемы двойных границ и z-index:1 для "поднятия" элемента при фокусировке для корректного отображения границ поверх соседей)
незакрашенные уголки точно будем решать, спасибо за идеи с решением. Сейчас необходимо еще раз уточнить поведение и возьмем в работу.
@ickisIckis Скругление должно быть только у внешнего контейнера. Все внутренние объекты бес скруглений