style(ui-select,ui-options,shared-types): add new color to selected and at the same time highlighted options

INSTUI-4537

Author: HerrTopi

packages/shared-types/src/ComponentThemeVariables.ts

@@ -943,12 +943,13 @@ export type OptionsItemTheme = {
   fontFamily: Typography['fontFamily']
   fontWeight: Typography['fontWeightNormal']
   lineHeight: Typography['lineHeightCondensed']
-  color: Colors['contrasts']['grey125125']
-  background: Colors['contrasts']['white1010']
-  highlightedLabelColor: Colors['contrasts']['white1010']
-  highlightedBackground: Colors['contrasts']['blue4570']
-  selectedLabelColor: Colors['contrasts']['white1010']
-  selectedBackground: Colors['contrasts']['grey4570']
+  color: string
+  background: string
+  highlightedLabelColor: string
+  highlightedBackground: string
+  selectedLabelColor: string
+  selectedBackground: string
+  selectedHighlightedBackground: string
   padding: string | 0
   iconPadding: Spacing['small']
   nestedPadding: Spacing['medium']
@@ -958,7 +959,7 @@ export type OptionsItemTheme = {
   descriptionFontWeight: Typography['fontWeightNormal']
   descriptionLineHeight: Typography['lineHeight']
   descriptionPaddingStart: string | 0
-  descriptionColor: Colors['contrasts']['grey4570']
+  descriptionColor: string
   fontWeightSelected: Typography['fontWeightNormal']
 }
 

packages/ui-options/src/Options/Item/props.ts

@@ -49,6 +49,7 @@ type OptionsItemRenderProps = {
     | 'selected'
     | 'disabled'
     | 'highlighted-disabled'
+    | 'selected-highlighted'
   /**
    * The ARIA role of the element
    */
@@ -125,7 +126,8 @@ const propTypes: PropValidators<PropKeys> = {
     'highlighted',
     'selected',
     'disabled',
-    'highlighted-disabled'
+    'highlighted-disabled',
+    'selected-highlighted'
   ]),
   role: PropTypes.string,
   renderBeforeLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),

packages/ui-options/src/Options/Item/styles.ts

@@ -64,12 +64,16 @@ const generateStyle = (
       color: componentTheme.highlightedLabelColor
     },
     disabled: { cursor: 'not-allowed', opacity: 0.5 },
-    ['highlighted-disabled']: {
+    'highlighted-disabled': {
       background: componentTheme.highlightedBackground,
       color: componentTheme.highlightedLabelColor,
       cursor: 'not-allowed',
       opacity: 0.5
     },
+    'selected-highlighted': {
+      background: componentTheme.selectedHighlightedBackground,
+      color: componentTheme.highlightedLabelColor
+    },
     default: {
       transition: 'background 200ms'
     }

packages/ui-options/src/Options/Item/theme.ts

@@ -53,6 +53,7 @@ const generateComponentTheme = (theme: Theme): OptionsItemTheme => {
     highlightedBackground: colors?.contrasts?.blue4570,
     selectedLabelColor: colors?.contrasts?.white1010,
     selectedBackground: colors?.contrasts?.grey4570,
+    selectedHighlightedBackground: colors?.contrasts?.blue5782,
 
     padding: `${spacing?.xSmall} ${spacing?.small}`,
     iconPadding: spacing?.small,

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

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-
 import { ComponentElement, Children, Component, memo, ReactNode } from 'react'
 
 import * as utils from '@instructure/ui-utils'
@@ -429,7 +428,10 @@ class Select extends Component<SelectProps> {
       renderAfterLabel: getRenderOptionLabel(renderAfterLabel)
     }
     // should option be treated as highlighted or selected
-    if (isSelected) {
+    if (isSelected && isHighlighted) {
+      optionProps.variant = 'selected-highlighted'
+      optionProps.isSelected = true
+    } else if (isSelected) {
       optionProps.variant = 'selected'
       optionProps.isSelected = true
     } else if (isHighlighted) {