From 7a5548bd3eb335aa933c705beaef1ce9628f85d7 Mon Sep 17 00:00:00 2001 From: Arthurk12 Date: Mon, 27 Jul 2026 20:56:43 -0300 Subject: [PATCH] fix(BBBSelect): remove duplicated outline Selector applied its own border on top of MUI OutlinedInput's built-in notchedOutline fieldset border, causing two overlapping borders to render in space-constrained containers, most noticeably on focus. Borders are now driven solely through the notchedOutline, colored via palette tokens for default, hover and focus states. --- src/components/Select/styles.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/Select/styles.ts b/src/components/Select/styles.ts index db2e9ef..c92e508 100644 --- a/src/components/Select/styles.ts +++ b/src/components/Select/styles.ts @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { borderRadiusSmall, spacingMedium, spacingSmall } from '../../stylesheets/sizing'; import Select from '@mui/material/Select'; -import { colorBorderDefault, colorBrand1, colorDarkGray } from '../../stylesheets/palette'; +import { colorBorderDefault, colorBorderSelected, colorBrand1, colorDarkGray } from '../../stylesheets/palette'; import { fontSizeSmall } from '../../stylesheets/typography'; export const SelectContainer = styled.div` @@ -28,7 +28,18 @@ export const Selector = styled(Select)` border-radius: ${borderRadiusSmall} !important; overflow: hidden; width: 100%; - border: 1px solid ${colorBorderDefault}; + + & .MuiOutlinedInput-notchedOutline { + border-color: ${colorBorderDefault}; + } + + &:hover .MuiOutlinedInput-notchedOutline { + border-color: ${colorBorderSelected}; + } + + &.Mui-focused .MuiOutlinedInput-notchedOutline { + border-color: ${colorBorderSelected}; + } `; export const Title = styled.label`