feat(menu): add menu item focus styles

CHANGELOG.md

@@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add embed mode for `FocusZone` and use it in newly added Chat behaviors @tomasiser ([#233](https://github.com/stardust-ui/react/pull/233))
 - Add default accessibility behavior to `Popup` @sophieH29 ([#218](https://github.com/stardust-ui/react/pull/218))
+- Add focus styles for `Menu.Item` component @Bugaa92 ([#286](https://github.com/stardust-ui/react/pull/286))
 
 ### Documentation
 - Improve `Contributing` documentation @alinais, @levithomason ([#189](https://github.com/stardust-ui/react/pull/189))

docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimary.shorthand.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Menu } from '@stardust-ui/react'
+
+const items = [
+  { key: 'home', icon: 'home' },
+  { key: 'users', icon: 'users' },
+  { key: 'search', icon: 'search' },
+]
+
+const MenuExampleIconOnlyPrimary = () => (
+  <Menu iconOnly defaultActiveIndex={0} items={items} type="primary" />
+)
+
+export default MenuExampleIconOnlyPrimary

docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyPrimaryInverted.shorthand.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Menu } from '@stardust-ui/react'
+
+const items = [
+  { key: 'home', icon: 'home' },
+  { key: 'users', icon: 'users' },
+  { key: 'search', icon: 'search' },
+]
+
+const MenuExampleIconOnlyPrimaryInverted = () => (
+  <Menu
+    iconOnly
+    defaultActiveIndex={0}
+    items={items}
+    type="primary"
+    variables={siteVars => ({
+      defaultColor: siteVars.gray06,
+      defaultBackgroundColor: siteVars.brand,
+      typePrimaryActiveBorderColor: siteVars.white,
+    })}
+  />
+)
+
+export default MenuExampleIconOnlyPrimaryInverted

docs/src/examples/components/Menu/Variations/MenuExampleIconOnlyVerticalPrimary.shorthand.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Menu } from '@stardust-ui/react'
+
+const items = [
+  { key: 'home', icon: 'home' },
+  { key: 'users', icon: 'users' },
+  { key: 'search', icon: 'search' },
+]
+
+const MenuExampleIconOnlyVertical = () => (
+  <Menu vertical iconOnly defaultActiveIndex={0} items={items} type="primary" />
+)
+
+export default MenuExampleIconOnlyVertical

docs/src/examples/components/Menu/Variations/MenuExampleToolbar.shorthand.tsx

@@ -7,7 +7,6 @@ const items = [
     icon: {
       name: 'cloud',
       circular: true,
-      xSpacing: 'both',
       size: 'small',
     },
     accessibility: ToolbarButtonBehavior,
@@ -18,7 +17,6 @@ const items = [
     icon: {
       name: 'clock',
       circular: true,
-      xSpacing: 'both',
       size: 'small',
     },
     accessibility: ToolbarButtonBehavior,
@@ -29,7 +27,6 @@ const items = [
     icon: {
       name: 'book',
       circular: true,
-      xSpacing: 'both',
       size: 'small',
     },
     accessibility: ToolbarButtonBehavior,

docs/src/examples/components/Menu/Variations/index.tsx

@@ -60,7 +60,7 @@ const Variations = () => (
       examplePath="components/Menu/Variations/MenuExampleUnderlined"
     />
     <ComponentExample
-      title="Underlined primary"
+      title="Underlined Primary"
       description="A menu can underline the active element."
       examplePath="components/Menu/Variations/MenuExampleUnderlinedPrimary"
     />
@@ -84,11 +84,26 @@ const Variations = () => (
       description="Menu can contain only icons."
       examplePath="components/Menu/Variations/MenuExampleIconOnly"
     />
+    <ComponentExample
+      title="Icon Only Primary"
+      description="Menu can contain only icons."
+      examplePath="components/Menu/Variations/MenuExampleIconOnlyPrimary"
+    />
+    <ComponentExample
+      title="Icon Only Primary Inverted"
+      description="Menu can contain only icons."
+      examplePath="components/Menu/Variations/MenuExampleIconOnlyPrimaryInverted"
+    />
     <ComponentExample
       title="Vertical Icon Only"
       description="Vertical menu can contain only icons."
       examplePath="components/Menu/Variations/MenuExampleIconOnlyVertical"
     />
+    <ComponentExample
+      title="Vertical Icon Only Primary"
+      description="Vertical menu can contain only icons."
+      examplePath="components/Menu/Variations/MenuExampleIconOnlyVerticalPrimary"
+    />
     <ComponentExample
       title="Menu as a Tab List"
       description="A menu with TabList accessibility behavior."

src/components/Button/Button.tsx

@@ -36,14 +36,18 @@ export interface IButtonProps {
   variables?: ComponentVariablesInput
 }
 
+export interface IButtonState {
+  [isFromKeyboard.propertyName]: boolean
+}
+
 /**
  * A button.
  * @accessibility
  * Other considerations:
  *  - for disabled buttons, add 'disabled' attribute so that the state is properly recognized by the screen reader
  *  - if button includes icon only, textual representation needs to be provided by using 'title', 'aria-label', or 'aria-labelledby' attributes
  */
-class Button extends UIComponent<Extendable<IButtonProps>, any> {
+class Button extends UIComponent<Extendable<IButtonProps>, IButtonState> {
   static create: Function
 
   public static displayName = 'Button'

src/components/Menu/MenuItem.tsx

@@ -7,6 +7,7 @@ import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } f
 import Icon from '../Icon'
 import { MenuItemBehavior } from '../../lib/accessibility'
 import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibility/interfaces'
+import IsFromKeyboard from '../../lib/isFromKeyboard'
 
 import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/theme'
 import {
@@ -37,7 +38,11 @@ export interface IMenuItemProps {
   variables?: ComponentVariablesInput
 }
 
-class MenuItem extends UIComponent<Extendable<IMenuItemProps>, any> {
+export interface IMenuItemState {
+  [IsFromKeyboard.propertyName]: boolean
+}
+
+class MenuItem extends UIComponent<Extendable<IMenuItemProps>, IMenuItemState> {
   static displayName = 'MenuItem'
 
   static className = 'ui-menu__item'
@@ -114,13 +119,7 @@ class MenuItem extends UIComponent<Extendable<IMenuItemProps>, any> {
     accessibility: MenuItemBehavior as Accessibility,
   }
 
-  protected actionHandlers: AccessibilityActionHandlers = {
-    performClick: event => this.handleClick(event),
-  }
-
-  handleClick = e => {
-    _.invoke(this.props, 'onClick', e, this.props)
-  }
+  state = IsFromKeyboard.initial
 
   renderComponent({ ElementType, classes, accessibility, rest }) {
     const { children, content, icon } = this.props
@@ -138,6 +137,8 @@ class MenuItem extends UIComponent<Extendable<IMenuItemProps>, any> {
           <a
             className={cx('ui-menu__item__anchor', classes.anchor)}
             onClick={this.handleClick}
+            onBlur={this.handleBlur}
+            onFocus={this.handleFocus}
             {...accessibility.attributes.anchor}
             {...accessibility.keyHandlers.anchor}
           >
@@ -151,6 +152,26 @@ class MenuItem extends UIComponent<Extendable<IMenuItemProps>, any> {
       </ElementType>
     )
   }
+
+  protected actionHandlers: AccessibilityActionHandlers = {
+    performClick: event => this.handleClick(event),
+  }
+
+  private handleClick = e => {
+    _.invoke(this.props, 'onClick', e, this.props)
+  }
+
+  private handleBlur = (e: React.SyntheticEvent) => {
+    this.setState(IsFromKeyboard.initial)
+
+    _.invoke(this.props, 'onBlur', e, this.props)
+  }
+
+  private handleFocus = (e: React.SyntheticEvent) => {
+    this.setState(IsFromKeyboard.state())
+
+    _.invoke(this.props, 'onFocus', e, this.props)
+  }
 }
 
 MenuItem.create = createShorthandFactory(MenuItem, content => ({ content }))

src/components/RadioGroup/RadioGroupItem.tsx

@@ -32,15 +32,23 @@ export interface IRadioGroupItemProps {
   styles?: ComponentPartStyle
   value?: string | number
   variables?: ComponentVariablesInput
-  isFromKeyboard?: boolean
+  [isFromKeyboard.propertyName]?: boolean
   vertical?: boolean
 }
 
+export interface IRadioGroupItemState {
+  checked: boolean
+  [isFromKeyboard.propertyName]: boolean
+}
+
 /**
  * @accessibility
  * Radio items need to be grouped in RadioGroup component to correctly handle accessibility.
  */
-class RadioGroupItem extends AutoControlledComponent<Extendable<IRadioGroupItemProps>, any> {
+class RadioGroupItem extends AutoControlledComponent<
+  Extendable<IRadioGroupItemProps>,
+  IRadioGroupItemState
+> {
   static create: Function
 
   static displayName = 'RadioGroupItem'
@@ -131,7 +139,7 @@ class RadioGroupItem extends AutoControlledComponent<Extendable<IRadioGroupItemP
 
   static autoControlledProps = ['checked', isFromKeyboard.propertyName]
 
-  elementRef: HTMLElement
+  private elementRef: HTMLElement
 
   componentDidMount() {
     this.elementRef = ReactDOM.findDOMNode(this) as HTMLElement
@@ -155,7 +163,7 @@ class RadioGroupItem extends AutoControlledComponent<Extendable<IRadioGroupItemP
     _.invoke(this.props, 'onBlur', e, this.props)
   }
 
-  handleClick = e => {
+  private handleClick = e => {
     _.invoke(this.props, 'onClick', e, this.props)
   }
 

src/lib/index.ts

@@ -33,6 +33,7 @@ export {
 } from './htmlPropsUtils'
 
 export { default as isBrowser } from './isBrowser'
+export { default as typescriptUtils } from './typescriptUtils'
 export { default as doesNodeContainClick } from './doesNodeContainClick'
 export { default as leven } from './leven'
 

src/lib/isFromKeyboard.ts

@@ -1,12 +1,17 @@
 import whatInput from 'what-input'
+import tsUtils from './typescriptUtils'
+export interface IState {
+  isFromKeyboard: boolean
+}
 
 export default class IsFromKeyboard {
-  static state = () => {
-    const isFromKeyboard = whatInput.ask() === 'keyboard'
-    return { isFromKeyboard }
-  }
+  static readonly propertyName = tsUtils.nameof<IState>('isFromKeyboard')
 
-  static initial = { isFromKeyboard: false }
+  static initial: IState = IsFromKeyboard.getObjectWithPropValue(false)
 
-  static propertyName = 'isFromKeyboard'
+  static state = (): IState => IsFromKeyboard.getObjectWithPropValue(whatInput.ask() === 'keyboard')
+
+  private static getObjectWithPropValue(value: boolean): IState {
+    return { [IsFromKeyboard.propertyName]: value }
+  }
 }

src/lib/typescriptUtils.ts

@@ -0,0 +1,5 @@
+const nameof = <T>(name: keyof T) => name
+
+export default {
+  nameof,
+}

src/themes/teams/components/Button/buttonStyles.ts

@@ -1,9 +1,9 @@
 import { pxToRem } from '../../../../lib'
 import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { IButtonProps } from '../../../../components/Button/Button'
+import { IButtonProps, IButtonState } from '../../../../components/Button/Button'
 import { truncateStyle } from '../../../../styles/customCSS'
 
-const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
+const buttonStyles: IComponentPartStylesInput<IButtonProps & IButtonState, any> = {
   root: ({ props, variables }): ICSSInJSStyle => {
     const { circular, disabled, fluid, type, text, iconOnly, isFromKeyboard } = props
     const primary = type === 'primary'