diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts index ed4b6e3236dfe..d1cacb07effee 100644 --- a/packages/components/src/unit-control/styles/unit-control-styles.ts +++ b/packages/components/src/unit-control/styles/unit-control-styles.ts @@ -61,42 +61,33 @@ export const ValueInput = styled( NumberControl )` `; const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => { - const base = css` - appearance: none; - background: transparent; - border-radius: 2px; - border: none; - box-sizing: border-box; - display: block; - outline: none; - text-align-last: center; - - ${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() } - `; - const defaultLabelSize = css` - padding: 2px 1px; - width: 20px; - color: ${ COLORS.darkGray[ 500 ] }; - font-size: 8px; - letter-spacing: -0.5px; - text-transform: uppercase; - `; - const largeLabelSize = css` - padding-left: ${ space( 1 ) }; - padding-right: ${ space( 4 ) }; - color: ${ COLORS.ui.theme }; - font-size: 13px; - `; - const labelSize = { - default: defaultLabelSize, - small: defaultLabelSize, - '__unstable-large': largeLabelSize, + const sizes = { + default: css` + box-sizing: border-box; + padding: 2px 1px; + width: 20px; + color: ${ COLORS.darkGray[ 500 ] }; + font-size: 8px; + letter-spacing: -0.5px; + text-transform: uppercase; + text-align-last: center; + `, + large: css` + box-sizing: border-box; + width: 36px; + height: 36px; + margin-inline-end: 2px; + padding: ${ space( 1 ) }; + display: flex; + justify-content: center; + align-items: center; + color: ${ COLORS.ui.theme }; + font-size: 13px; + text-align-last: center; + `, }; - return css` - ${ base }; - ${ labelSize[ selectSize ] }; - `; + return selectSize === '__unstable-large' ? sizes.large : sizes.default; }; export const UnitLabel = styled.div< SelectProps >` @@ -109,36 +100,62 @@ export const UnitLabel = styled.div< SelectProps >` } `; -export const UnitSelect = styled.select< SelectProps >` - &&& { - ${ baseUnitLabelStyles }; - cursor: pointer; - border: 1px solid transparent; - height: 100%; - /* Removing margin ensures focus styles neatly overlay the wrapper. */ - margin: 0; - transition: box-shadow 0.1s linear, border 0.1s linear; - font-family: inherit; - - &:hover { - background-color: ${ COLORS.lightGray[ 300 ] }; - } +const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => { + const sizes = { + default: css` + height: 100%; + /* Removing margin ensures focus styles neatly overlay the wrapper. */ + margin: 0; + border: 1px solid transparent; + transition: box-shadow 0.1s linear, border 0.1s linear; - &:focus { - border: 1px solid ${ COLORS.ui.borderFocus }; - box-shadow: inset 0 0 0 - ${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus }; - outline-offset: 0; - outline: 2px solid transparent; - z-index: 1; - } + ${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() } - &:disabled { - cursor: initial; + &:not(:disabled):hover { + background-color: ${ COLORS.lightGray[ 300 ] }; + } + &:focus { + border: 1px solid ${ COLORS.ui.borderFocus }; + box-shadow: inset 0 0 0 + ${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus }; + outline-offset: 0; + outline: 2px solid transparent; + z-index: 1; + } + `, + large: css` &:hover { - background-color: transparent; + color: ${ COLORS.ui.borderFocus }; + box-shadow: inset 0 0 0 + ${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus }; + outline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode } - } + + &:focus { + box-shadow: 0 0 0 + ${ CONFIG.borderWidthFocus + ' ' + COLORS.ui.borderFocus }; + outline: ${ CONFIG.borderWidthFocus } solid transparent; // For High Contrast Mode + } + `, + }; + + return selectSize === '__unstable-large' ? sizes.large : sizes.default; +}; + +export const UnitSelect = styled.select< SelectProps >` + appearance: none; + background: transparent; + border-radius: 2px; + border: none; + display: block; + outline: none; + font-family: inherit; + + &:not( :disabled ) { + cursor: pointer; } + + ${ baseUnitLabelStyles }; + ${ unitSelectSizes }; `;