diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts index 6c81308bba..13ba7808a1 100644 --- a/packages/shared-types/src/ComponentThemeVariables.ts +++ b/packages/shared-types/src/ComponentThemeVariables.ts @@ -911,6 +911,7 @@ export type OptionsItemTheme = { descriptionLineHeight: Typography['lineHeight'] descriptionPaddingStart: string | 0 descriptionColor: Colors['contrasts']['grey4570'] + fontWeightSelected: Typography['fontWeightNormal'] } export type OptionsSeparatorTheme = { diff --git a/packages/ui-options/src/Options/Item/index.tsx b/packages/ui-options/src/Options/Item/index.tsx index a24f63844c..0283276c5b 100644 --- a/packages/ui-options/src/Options/Item/index.tsx +++ b/packages/ui-options/src/Options/Item/index.tsx @@ -61,7 +61,8 @@ class Item extends Component { role: 'listitem', voiceoverRoleBugWorkaround: false, beforeLabelContentVAlign: 'center', - afterLabelContentVAlign: 'center' + afterLabelContentVAlign: 'center', + isSelected: false } as const ref: Element | null = null diff --git a/packages/ui-options/src/Options/Item/props.ts b/packages/ui-options/src/Options/Item/props.ts index 3be0039d9e..61195b7632 100644 --- a/packages/ui-options/src/Options/Item/props.ts +++ b/packages/ui-options/src/Options/Item/props.ts @@ -94,6 +94,10 @@ type OptionsItemOwnProps = OptionsItemRenderProps & { * provides a reference to the underlying html root element */ elementRef?: (element: Element | null) => void + /** + * Whether or not this option is selected + */ + isSelected?: boolean } type PropKeys = keyof OptionsItemOwnProps @@ -133,7 +137,8 @@ const propTypes: PropValidators = { href: PropTypes.string, voiceoverRoleBugWorkaround: PropTypes.bool, elementRef: PropTypes.func, - children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]) + children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), + isSelected: PropTypes.bool } const allowedProps: AllowedPropKeys = [ @@ -149,7 +154,8 @@ const allowedProps: AllowedPropKeys = [ 'voiceoverRoleBugWorkaround', 'href', 'elementRef', - 'children' + 'children', + 'isSelected' ] export type { OptionsItemProps, OptionsItemStyle, OptionsItemRenderProps } diff --git a/packages/ui-options/src/Options/Item/styles.ts b/packages/ui-options/src/Options/Item/styles.ts index 11cb0b26a3..a0bb1e23e6 100644 --- a/packages/ui-options/src/Options/Item/styles.ts +++ b/packages/ui-options/src/Options/Item/styles.ts @@ -112,7 +112,9 @@ const generateStyle = ( display: 'block', fontSize: componentTheme.fontSize, fontFamily: componentTheme.fontFamily, - fontWeight: componentTheme.fontWeight, + fontWeight: props.isSelected + ? componentTheme.fontWeightSelected + : componentTheme.fontWeight, lineHeight: componentTheme.lineHeight, outline: 'none', position: 'relative', diff --git a/packages/ui-options/src/Options/Item/theme.ts b/packages/ui-options/src/Options/Item/theme.ts index 14213534da..3dc49289e7 100644 --- a/packages/ui-options/src/Options/Item/theme.ts +++ b/packages/ui-options/src/Options/Item/theme.ts @@ -45,6 +45,7 @@ const generateComponentTheme = (theme: Theme): OptionsItemTheme => { fontFamily: typography?.fontFamily, fontWeight: typography?.fontWeightNormal, lineHeight: typography?.lineHeightCondensed, + fontWeightSelected: typography?.fontWeightNormal, color: colors?.contrasts?.grey125125, background: colors?.contrasts?.white1010, diff --git a/packages/ui-select/src/Select/index.tsx b/packages/ui-select/src/Select/index.tsx index 9429a35415..a9b9b13d83 100644 --- a/packages/ui-select/src/Select/index.tsx +++ b/packages/ui-select/src/Select/index.tsx @@ -425,6 +425,7 @@ class Select extends Component { // should option be treated as highlighted or selected if (isSelected) { optionProps.variant = 'selected' + optionProps.isSelected = true } else if (isHighlighted) { optionProps.variant = 'highlighted' }