microsoft · bcalvery · Jun 28, 2019 · May 20, 2019 · May 20, 2019 · May 28, 2019
@@ -472,8 +472,10 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
                     : Icon.create(toggleIndicator, {
                         defaultProps: {
                           className: Dropdown.slotClassNames.toggleIndicator,
-                          name: open ? 'stardust-arrow-up' : 'stardust-arrow-down',
+                          name: 'chevron-down',
                           styles: styles.toggleIndicator,
+                          outline: true,
+                          size: 'small',
                         },
                         overrideProps: (predefinedProps: IconProps) => ({
                           onClick: (e, indicatorProps: IconProps) => {

@@ -10,6 +10,8 @@ export default (siteVars): Partial<DropdownVariables> => ({
   listBackgroundColor: siteVars.colors.grey[650],
   listItemBackgroundColor: siteVars.colors.grey[650],
   listItemColorHover: siteVars.colors.white,
+  listItemContentColor: siteVars.colors.grey[300],
+  listItemHeaderColor: siteVars.colors.white,
   listItemBackgroundColorHover: siteVars.colors.grey[550],
   listItemBackgroundColorActive: siteVars.colors.grey[550],
   listItemColorActive: siteVars.colors.white,

@@ -4,25 +4,22 @@ import { pxToRem } from '../../../../lib'
 export interface DropdownVariablesHC extends DropdownVariables {
   borderColorHover: string
 }
-
-const _3px_asRem = pxToRem(3)
-
 export default (siteVars): Partial<DropdownVariablesHC> => ({
   backgroundColor: siteVars.colors.black,
   borderColor: siteVars.colors.white,
-  containerBorderRadius: _3px_asRem,
-  openAboveContainerBorderRadius: `0 0 ${_3px_asRem} ${_3px_asRem}`,
   borderWidth: `1px`,
   backgroundColorHover: siteVars.colors.black,
   borderColorHover: siteVars.accessibleYellow,
   borderColorFocus: siteVars.accessibleCyan,
   color: siteVars.colors.white,
   selectedItemColor: siteVars.colors.white,
-  belowListBorderRadius: `0 0 ${_3px_asRem} ${_3px_asRem}`,
   listBackgroundColor: siteVars.colors.black,
   listBorderColor: siteVars.colors.white,
   listBoxShadow: undefined,
   listBorderWidth: '1px',
+  listItemFocusBorderWidth: pxToRem(2),
+  listItemHeaderColor: siteVars.colors.white,
+  listItemContentColor: siteVars.colors.white,
   listItemBackgroundColor: siteVars.colors.black,
   listItemColorHover: siteVars.colors.black,
   listItemBackgroundColorHover: siteVars.accessibleYellow,

diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts
@@ -6,6 +6,7 @@ export * from './colors'
 //
 // BORDER STYLES
 //
+export const borderWidth = '2px'
 export const focusInnerBorderColor = colors.black
 export const focusOuterBorderColor = accessibleCyan
 

@@ -1,12 +1,15 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { DropdownVariables } from './dropdownVariables'
-import { DropdownItemProps } from '../../../../components/Dropdown/DropdownItem'
+import DropdownItem, { DropdownItemProps } from '../../../../components/Dropdown/DropdownItem'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
+import { pxToRem } from '../../../../lib'
 
 const dropdownItemStyles: ComponentSlotStylesInput<DropdownItemProps, DropdownVariables> = {
   root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => ({
+    minHeight: pxToRem(0),
+    padding: `${pxToRem(4)} ${pxToRem(11)}`,
     whiteSpace: 'nowrap',
-    border: `1px solid transparent`,
+    border: `${v.listItemFocusBorderWidth} solid transparent`,
     backgroundColor: v.listItemBackgroundColor,
     ...(p.selected && {
       fontWeight: v.listItemSelectedFontWeight,
@@ -17,13 +20,51 @@ const dropdownItemStyles: ComponentSlotStylesInput<DropdownItemProps, DropdownVa
       ...getBorderFocusStyles({
         siteVariables,
         isFromKeyboard: p.isFromKeyboard,
+        borderRadius: 0,
       })[':focus'],
       ...(!p.isFromKeyboard && {
         color: v.listItemColorHover,
         backgroundColor: v.listItemBackgroundColorHover,
+        ...(p.header && {
+          [`& .${DropdownItem.slotClassNames.header}`]: {
+            color: v.listItemColorHover,
+          },
+        }),
+        ...(p.content && {
+          [`& .${DropdownItem.slotClassNames.content}`]: {
+            color: v.listItemColorHover,
+          },
+        }),
       }),
     }),
   }),
+  image: ({ props: p }): ICSSInJSStyle => ({
+    margin: `${pxToRem(3)} ${pxToRem(12)} ${pxToRem(3)} ${pxToRem(4)}`,
+    // using !important because:
+    // a ' > :not(:last-child)' selector affecting the margin-right style
+    marginRight: `${pxToRem(12)} !important`,
+  }),
+  header: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    fontSize: v.listItemHeaderFontSize,
+    // if the item doesn't have content - i.e. it is header only - then it should use the content color
+    // or Should the default behavior of handling a generic list be changed, so that the "content" property
+    // is populated by default and not the header?
+    color: v.listItemContentColor,
+    ...(p.content && {
+      // if there is content it needs to be "tightened up" to the header
+      // this could just as easily rely on the image being present.
+      marginBottom: pxToRem(-1),
+      color: v.listItemHeaderColor,
+    }),
+    ...(p.selected && {
+      fontWeight: v.listItemSelectedFontWeight,
+      color: v.listItemSelectedColor,
+    }),
+  }),
+  content: ({ variables: v }): ICSSInJSStyle => ({
+    fontSize: v.listItemContentFontSize,
+    color: v.listItemContentColor,
+  }),
 }
 
 export default dropdownItemStyles
@@ -39,8 +39,8 @@ const getIndicatorStyles: ComponentSlotStyle<DropdownPropsAndState, DropdownVari
 
   margin: 0,
   position: 'absolute',
-  right: pxToRem(5),
-  height: v.toggleIndicatorSize,
+  right: pxToRem(-2),
+  height: '100%',
   width: v.toggleIndicatorSize,
 })
 
@@ -113,6 +113,7 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
       margin: '0',
       justifyContent: 'left',
       padding: v.comboboxPaddingButton,
+      height: pxToRem(32),
       ...(p.multiple && { minWidth: 0, flex: 1 }),
       ...transparentColorStyleObj,
       ':focus': {

@@ -21,6 +21,11 @@ export interface DropdownVariables {
   listPadding: string
   listBoxShadow: string
   listMaxHeight: string
+  listItemFocusBorderWidth: string
+  listItemHeaderFontSize: string
+  listItemHeaderColor: string
+  listItemContentFontSize: string
+  listItemContentColor: string
   listItemBackgroundColor: string
   listItemColorHover: string
   listItemBackgroundColorHover: string
@@ -38,42 +43,49 @@ export interface DropdownVariables {
   width: string
 }
 
-const [_2px_asRem, _3px_asRem, _12px_asRem] = [2, 3, 12].map(v => pxToRem(v))
+const [cornerRadius, _12px_asRem] = [3, 12].map(v => pxToRem(v))
 
 export default (siteVars): DropdownVariables => ({
   backgroundColor: siteVars.colors.grey[100],
   backgroundColorHover: siteVars.colors.grey[150],
   borderColor: 'transparent',
   borderColorFocus: siteVars.colors.brand[600],
   borderWidth: '0px',
-  containerBorderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`,
-  openAboveContainerBorderRadius: `0 0 ${_2px_asRem} ${_2px_asRem}`,
-  openBelowContainerBorderRadius: `${_3px_asRem} ${_3px_asRem} 0 0`,
+  containerBorderRadius: `${cornerRadius}`,
+  openAboveContainerBorderRadius: `0 0 ${cornerRadius} ${cornerRadius}`,
+  openBelowContainerBorderRadius: `${cornerRadius} ${cornerRadius} 0 0`,
   searchBorderBottomWidth: pxToRem(2),
   color: siteVars.bodyColor,
   selectedItemColor: siteVars.bodyColor,
   comboboxPaddingButton: `0 ${_12px_asRem}`,
   comboboxFlexBasis: pxToRem(50),
-  aboveListBorderRadius: `${_3px_asRem} ${_3px_asRem} 0 0`,
-  belowListBorderRadius: `0 0 ${_2px_asRem} ${_2px_asRem}`,
+  aboveListBorderRadius: `${cornerRadius} ${cornerRadius} 0 0`,
+  belowListBorderRadius: `0 0 ${cornerRadius} ${cornerRadius}`,
   listBackgroundColor: siteVars.colors.white,
   listBorderColor: 'transparent',
   listBorderWidth: '0px',
-  listPadding: `${pxToRem(8)} 0`,
+  listPadding: `${pxToRem(8)} 0 ${pxToRem(6)}`,
   listBoxShadow: siteVars.shadowLevel3,
   listMaxHeight: pxToRem(296),
+  listItemFocusBorderWidth: pxToRem(1),
   listItemBackgroundColor: siteVars.colors.white,
   listItemColorHover: siteVars.colors.grey[750],
   listItemBackgroundColorHover: siteVars.colors.grey[100],
   listItemBackgroundColorActive: siteVars.colors.grey[100],
   listItemColorActive: siteVars.colors.grey[750],
   listItemSelectedFontWeight: siteVars.fontWeightSemibold,
   listItemSelectedColor: siteVars.colors.grey[750],
-  selectedItemBackgroundColor: undefined,
+  selectedItemBackgroundColor: 'undefined',
   selectedItemColorFocus: siteVars.bodyColor,
   selectedItemBackgroundColorFocus: siteVars.colors.brand[200],
   selectedItemsMaxHeight: pxToRem(82),
   toggleIndicatorSize: pxToRem(32),
   triggerButtonColorHover: siteVars.bodyColor,
   width: pxToRem(356),
+
+  // these should only apply when there is content in the image/media slot:
+  listItemHeaderFontSize: siteVars.fontSizes.medium,
+  listItemHeaderColor: siteVars.colors.grey[1000],
+  listItemContentFontSize: siteVars.fontSizes.small,
+  listItemContentColor: siteVars.colors.grey[450],
 })
diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts
@@ -17,7 +17,7 @@ export {
 // BORDER STYLES
 //
 export const borderWidth = '1px'
-export const borderRadius = '2px'
+export const borderRadius = '3px'
 export const focusInnerBorderColor = colors.white
 export const focusOuterBorderColor = colors.black