feat(shared-types,ui-options,ui-select): allow to change font weight of selected option item in Select

Closes: INSTUI-4394

Author: ToMESSKa

packages/shared-types/src/ComponentThemeVariables.ts

@@ -912,6 +912,7 @@ export type OptionsItemTheme = {
   descriptionLineHeight: Typography['lineHeight']
   descriptionPaddingStart: string | 0
   descriptionColor: Colors['contrasts']['grey4570']
+  fontWeightSelected: Typography['fontWeightNormal']
 }
 
 export type OptionsSeparatorTheme = {

packages/ui-options/src/Options/Item/index.tsx

@@ -61,7 +61,8 @@ class Item extends Component<OptionsItemProps> {
     role: 'listitem',
     voiceoverRoleBugWorkaround: false,
     beforeLabelContentVAlign: 'center',
-    afterLabelContentVAlign: 'center'
+    afterLabelContentVAlign: 'center',
+    isSelected: false
   } as const
 
   ref: Element | null = null

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<PropKeys> = {
   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 }

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',

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,

packages/ui-select/src/Select/index.tsx

@@ -425,6 +425,7 @@ class Select extends Component<SelectProps> {
     // should option be treated as highlighted or selected
     if (isSelected) {
       optionProps.variant = 'selected'
+      optionProps.isSelected = true
     } else if (isHighlighted) {
       optionProps.variant = 'highlighted'
     }