feat(Dropdown): update styles for dark and hc Teams themes

CHANGELOG.md

@@ -21,7 +21,11 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Restrict Typescript checks for component props @kuzhelov ([#1290](https://github.com/stardust-ui/react/pull/1290))
 
 ### Fix
-- Fixed Flex.Item children prop type @mnajdova ([#1320](https://github.com/stardust-ui/react/pull/1320))
+- Fixed `Flex.Item` children prop type @mnajdova ([#1320](https://github.com/stardust-ui/react/pull/1320))
+
+### Features
+- Add `selected`, `isFromKeyboard` props to `DropdownItem` @mnajdova ([#1299](https://github.com/stardust-ui/react/pull/1299))
+- Add styles for the dark and high contrast Teams themes for the `Dropdown` component @mnajdova ([#1299](https://github.com/stardust-ui/react/pull/1299))
 
 <!--------------------------------[ v0.30.0 ]------------------------------- -->
 ## [v0.30.0](https://github.com/stardust-ui/react/tree/v0.30.0) (2019-05-10)

docs/src/examples/components/Dropdown/Types/DropdownExample.shorthand.steps.ts

@@ -6,6 +6,7 @@ const selectors = {
 }
 
 const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
   steps: [
     builder => builder.click(selectors.triggerButton).snapshot('Shows list'),
     builder =>

docs/src/examples/components/Dropdown/Types/DropdownExampleSearchMultiple.shorthand.steps.ts

@@ -9,6 +9,7 @@ const selectors = {
 }
 
 const config: ScreenerTestsConfig = {
+  themes: ['teams', 'teamsDark', 'teamsHighContrast'],
   steps: [
     (builder, keys) =>
       builder

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -30,6 +30,7 @@ import {
   RenderResultConfig,
   commonPropTypes,
   UIComponentProps,
+  isFromKeyboard,
 } from '../../lib'
 import List from '../List/List'
 import DropdownItem, { DropdownItemProps } from './DropdownItem'
@@ -208,6 +209,8 @@ export interface DropdownState {
   searchQuery: string
   highlightedIndex: number
   value: ShorthandValue | ShorthandCollection
+  itemIsFromKeyboard: boolean
+  isFromKeyboard: boolean
 }
 
 class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, DropdownState> {
@@ -308,6 +311,8 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
       highlightedIndex: this.props.highlightFirstItemOnOpen ? 0 : null,
       searchQuery: search ? '' : undefined,
       value: multiple ? [] : null,
+      itemIsFromKeyboard: false,
+      isFromKeyboard: false,
     }
   }
 
@@ -425,6 +430,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
                     getMenuProps,
                     getItemProps,
                     getInputProps,
+                    value,
                   )}
                 </div>
               </Ref>
@@ -453,6 +459,17 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     const { triggerButton } = this.props
     const content = this.getSelectedItemAsString(this.state.value)
 
+    const triggerButtonProps = getToggleButtonProps({
+      onFocus: this.handleTriggerButtonOrListFocus,
+      onBlur: this.handleTriggerButtonBlur,
+      onKeyDown: e => {
+        this.handleTriggerButtonKeyDown(e, rtl)
+      },
+      'aria-label': content,
+    })
+
+    const { onClick, onFocus, onBlur, onKeyDown, ...restTriggerButtonProps } = triggerButtonProps
+
     return (
       <Ref innerRef={this.buttonRef}>
         {Button.create(triggerButton, {
@@ -461,15 +478,26 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
             content,
             fluid: true,
             styles: styles.triggerButton,
-            ...getToggleButtonProps({
-              onFocus: this.handleTriggerButtonOrListFocus,
-              onBlur: this.handleTriggerButtonBlur,
-              onKeyDown: e => {
-                this.handleTriggerButtonKeyDown(e, rtl)
-              },
-              'aria-label': content,
-            }),
+            ...restTriggerButtonProps,
           },
+          overrideProps: (predefinedProps: IconProps) => ({
+            onClick: e => {
+              onClick(e)
+              _.invoke(predefinedProps, 'onClick', e, predefinedProps)
+            },
+            onFocus: e => {
+              onFocus(e)
+              _.invoke(predefinedProps, 'onFocus', e, predefinedProps)
+            },
+            onBlur: e => {
+              onBlur(e)
+              _.invoke(predefinedProps, 'onBlur', e, predefinedProps)
+            },
+            onKeyDown: e => {
+              onKeyDown(e)
+              _.invoke(predefinedProps, 'onKeyDown', e, predefinedProps)
+            },
+          }),
         })}
       </Ref>
     )
@@ -522,6 +550,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     getMenuProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any,
     getItemProps: (options: GetItemPropsOptions<ShorthandValue>) => any,
     getInputProps: (options?: GetInputPropsOptions) => any,
+    value: ShorthandValue | ShorthandCollection,
   ) {
     const { search } = this.props
     const { open } = this.state
@@ -562,7 +591,9 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
           aria-hidden={!open}
           onFocus={this.handleTriggerButtonOrListFocus}
           onBlur={this.handleListBlur}
-          items={open ? this.renderItems(styles, variables, getItemProps, highlightedIndex) : []}
+          items={
+            open ? this.renderItems(styles, variables, getItemProps, highlightedIndex, value) : []
+          }
         />
       </Ref>
     )
@@ -573,6 +604,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     variables: ComponentVariablesInput,
     getItemProps: (options: GetItemPropsOptions<ShorthandValue>) => any,
     highlightedIndex: number,
+    value: ShorthandValue | ShorthandCollection,
   ) {
     const { loading, loadingMessage, noResultsMessage, renderItem } = this.props
     const filteredItems = this.getItemsFilteredBySearchQuery()
@@ -582,6 +614,8 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
         defaultProps: {
           className: Dropdown.slotClassNames.item,
           active: highlightedIndex === index,
+          selected: !this.props.multiple && value === item,
+          isFromKeyboard: this.state.itemIsFromKeyboard,
           variables,
           ...(typeof item === 'object' &&
             !item.hasOwnProperty('key') && {
@@ -680,7 +714,9 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     }
 
     if (this.state.open && _.isNumber(changes.highlightedIndex)) {
+      const itemIsFromKeyboard = changes.type !== Downshift.stateChangeTypes.itemMouseEnter
       this.trySetState({ highlightedIndex: changes.highlightedIndex })
+      this.setState({ itemIsFromKeyboard })
     }
   }
 
@@ -759,7 +795,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
       e: React.SyntheticEvent,
       searchInputProps: DropdownSearchInputProps,
     ) => {
-      this.setState({ focused: false })
+      this.setState({ focused: false, isFromKeyboard: isFromKeyboard() })
       e.nativeEvent['preventDownshiftDefault'] = true
       _.invoke(predefinedProps, 'onInputBlur', e, searchInputProps)
     }
@@ -812,7 +848,7 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
       // same story as above for getRootProps.
       accessibilityComboboxProps,
       onFocus: (e: React.SyntheticEvent, searchInputProps: DropdownSearchInputProps) => {
-        this.setState({ focused: true })
+        this.setState({ focused: true, isFromKeyboard: isFromKeyboard() })
 
         _.invoke(predefinedProps, 'onFocus', e, searchInputProps)
       },
@@ -1014,18 +1050,18 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
   }
 
   private handleTriggerButtonOrListFocus = () => {
-    this.setState({ focused: true })
+    this.setState({ focused: true, isFromKeyboard: isFromKeyboard() })
   }
 
   private handleTriggerButtonBlur = e => {
     if (this.listRef.current !== e.relatedTarget) {
-      this.setState({ focused: false })
+      this.setState({ focused: false, isFromKeyboard: isFromKeyboard() })
     }
   }
 
   private handleListBlur = e => {
     if (this.buttonRef.current !== e.relatedTarget) {
-      this.setState({ focused: false })
+      this.setState({ focused: false, isFromKeyboard: isFromKeyboard() })
     }
   }
 

packages/react/src/components/Dropdown/DropdownItem.tsx

@@ -32,16 +32,22 @@ export interface DropdownItemProps extends UIComponentProps<DropdownItemProps> {
   /** Item's image. */
   image?: ShorthandValue
 
+  /** Indicated whether the item has been set active by keyboard. */
+  isFromKeyboard?: boolean
+
   /**
    * Called on dropdown item click.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed value.
    */
   onClick?: ComponentEventHandler<DropdownItemProps>
+
+  /** A dropdown item can be selected if single selection Dropdown is used. */
+  selected?: boolean
 }
 
-class DropdownItem extends UIComponent<WithAsProp<DropdownItemProps>, any> {
+class DropdownItem extends UIComponent<WithAsProp<DropdownItemProps>> {
   static displayName = 'DropdownItem'
 
   static create: Function
@@ -62,6 +68,8 @@ class DropdownItem extends UIComponent<WithAsProp<DropdownItemProps>, any> {
     header: customPropTypes.itemShorthand,
     image: customPropTypes.itemShorthand,
     onClick: PropTypes.func,
+    isFromKeyboard: PropTypes.bool,
+    selected: PropTypes.bool,
   }
 
   private handleClick = e => {
@@ -76,14 +84,15 @@ class DropdownItem extends UIComponent<WithAsProp<DropdownItemProps>, any> {
     const { content, header, image, accessibilityItemProps } = this.props
     return (
       <ListItem
-        className={classes.root}
+        className={DropdownItem.className}
+        styles={styles.root}
+        onClick={this.handleClick}
         header={Box.create(header, {
           defaultProps: {
             className: DropdownItem.slotClassNames.header,
             styles: styles.header,
           },
         })}
-        onClick={this.handleClick}
         media={Image.create(image, {
           defaultProps: {
             avatar: true,

packages/react/src/themes/teams-dark/componentVariables.ts

@@ -15,5 +15,6 @@ export { default as Icon } from './components/Icon/iconVariables'
 export { default as Reaction } from './components/Reaction/reactionVariables'
 export { default as Alert } from './components/Alert/alertVariables'
 export { default as ProviderBox } from './components/Provider/providerBoxVariables'
+export { default as Dropdown } from './components/Dropdown/dropdownVariables'
 
 export { default as PopupContent } from './components/Popup/popupContentVariables'

packages/react/src/themes/teams-dark/components/Dropdown/dropdownVariables.ts

@@ -0,0 +1,21 @@
+import { DropdownVariables } from '../../../teams/components/Dropdown/dropdownVariables'
+
+export default (siteVars): Partial<DropdownVariables> => ({
+  backgroundColor: siteVars.colors.grey[650],
+  backgroundColorHover: siteVars.colors.grey[550],
+  borderColor: 'transparent',
+  borderColorFocus: siteVars.colors.brand[400],
+  color: siteVars.colors.grey[250],
+  selectedItemColor: siteVars.colors.grey[250],
+  listBackgroundColor: siteVars.colors.grey[650],
+  listItemBackgroundColor: siteVars.colors.grey[650],
+  listItemColorHover: siteVars.colors.white,
+  listItemBackgroundColorHover: siteVars.colors.grey[550],
+  listItemBackgroundColorActive: siteVars.colors.grey[550],
+  listItemColorActive: siteVars.colors.white,
+  selectedItemBackgroundColor: siteVars.colors.grey[650],
+  selectedItemColorFocus: siteVars.colors.grey[700], // check this value
+  listItemSelectedColor: siteVars.colors.white,
+  selectedItemBackgroundColorFocus: siteVars.colors.brand[200],
+  triggerButtonColorHover: siteVars.colors.grey[250],
+})

packages/react/src/themes/teams-dark/siteVariables.ts

@@ -11,6 +11,7 @@ export const focusOuterBorderColor = colors.white
 // SHADOW LEVELS
 //
 export const shadowLevel1 = '0 .2rem .4rem -.075rem rgba(0, 0, 0, .25)'
+export const shadowLevel3 = '0 .8rem 1rem -0.2rem rgba(0, 0, 0, .25)'
 
 //
 // SEMANTIC ASSIGNMENTS

packages/react/src/themes/teams-high-contrast/componentStyles.ts

@@ -1,3 +1,4 @@
 export { default as Attachment } from './components/Attachment/attachmentStyles'
 export { default as MenuItem } from './components/Menu/menuItemStyles'
 export { default as Alert } from './components/Alert/alertStyles'
+export { default as Dropdown } from './components/Dropdown/dropdownStyles'

packages/react/src/themes/teams-high-contrast/componentVariables.ts

@@ -15,3 +15,4 @@ export { default as Status } from './components/Status/statusVariables'
 export { default as Reaction } from './components/Reaction/reactionVariables'
 export { default as Alert } from './components/Alert/alertVariables'
 export { default as ProviderBox } from './components/Provider/providerBoxVariables'
+export { default as Dropdown } from './components/Dropdown/dropdownVariables'

packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownStyles.ts

@@ -0,0 +1,44 @@
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import {
+  default as Dropdown,
+  DropdownProps,
+  DropdownState,
+} from '../../../../components/Dropdown/Dropdown'
+import { DropdownVariablesHC } from './dropdownVariables'
+
+type DropdownPropsAndState = DropdownProps & DropdownState
+
+const transparentColorStyle: ICSSInJSStyle = {
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+  borderBottomColor: 'transparent',
+}
+
+const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVariablesHC> = {
+  container: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    ...(!p.open && {
+      ':hover': {
+        backgroundColor: v.backgroundColorHover,
+        borderColor: v.borderColorHover,
+        [`& .${Dropdown.slotClassNames.triggerButton}`]: {
+          color: v.triggerButtonColorHover,
+        },
+      },
+    }),
+  }),
+
+  triggerButton: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    ':hover': {
+      ...transparentColorStyle,
+      color: v.triggerButtonColorHover,
+    },
+    ':focus': {
+      color: v.color,
+      ':active': {
+        color: v.color,
+      },
+    },
+  }),
+}
+
+export default dropdownStyles

packages/react/src/themes/teams-high-contrast/components/Dropdown/dropdownVariables.ts

@@ -0,0 +1,32 @@
+import { DropdownVariables } from '../../../teams/components/Dropdown/dropdownVariables'
+import { pxToRem } from '../../../../lib'
+
+export interface DropdownVariablesHC extends DropdownVariables {
+  borderColorHover: string
+}
+
+export default (siteVars): Partial<DropdownVariablesHC> => ({
+  backgroundColor: siteVars.colors.black,
+  borderColor: siteVars.colors.white,
+  borderRadius: pxToRem(3),
+  borderWidth: `1px`,
+  backgroundColorHover: siteVars.colors.black,
+  borderColorHover: siteVars.accessibleYellow,
+  borderColorFocus: siteVars.accessibleCyan,
+  color: siteVars.colors.white,
+  selectedItemColor: siteVars.colors.white,
+  listBackgroundColor: siteVars.colors.black,
+  listBorderColor: siteVars.colors.white,
+  listBoxShadow: undefined,
+  listBorderWidth: '1px',
+  listItemBackgroundColor: siteVars.colors.black,
+  listItemColorHover: siteVars.colors.black,
+  listItemBackgroundColorHover: siteVars.accessibleYellow,
+  listItemBackgroundColorActive: siteVars.accessibleYellow,
+  listItemColorActive: siteVars.colors.black,
+  listItemSelectedColor: siteVars.accessibleCyan,
+  selectedItemBackgroundColor: siteVars.colors.black,
+  selectedItemColorFocus: siteVars.colors.black,
+  selectedItemBackgroundColorFocus: siteVars.accessibleYellow,
+  triggerButtonColorHover: siteVars.colors.white,
+})

packages/react/src/themes/teams-high-contrast/components/Input/inputVariables.ts

@@ -7,5 +7,6 @@ export default (siteVars: any): Partial<InputVariables> => {
     fontColor: siteVars.bodyColor,
     iconColor: siteVars.bodyColor,
     inputFocusBorderColor: `transparent transparent ${siteVars.accessibleYellow} transparent`,
+    placeholderColor: siteVars.colors.white,
   }
 }