feat(MenuItem|AccordionTitle): add ability for removing and customizing the (active|submenu) indicator

CHANGELOG.md

@@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Rename `Slot` component to `Box` and export it @Bugaa92 ([#713](https://github.com/stardust-ui/react/pull/713))
+- Add `Indicator` component and used it in `MenuItem` and `AccordionTitle` @mnajdova ([#721](https://github.com/stardust-ui/react/pull/721))
 
 <!--------------------------------[ v0.17.0 ]------------------------------- -->
 ## [v0.17.0](https://github.com/stardust-ui/react/tree/v0.17.0) (2019-01-17)

docs/src/examples/components/Indicator/Types/IndicatorExample.shorthand.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Indicator } from '@stardust-ui/react'
+
+const IndicatorExample = () => <Indicator />
+
+export default IndicatorExample

docs/src/examples/components/Indicator/Types/IndicatorExampleDirection.shorthand.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { Indicator } from '@stardust-ui/react'
+
+const IndicatorExampleDirection = () => (
+  <>
+    <Indicator direction="end" /> <Indicator direction="bottom" /> <Indicator direction="start" />{' '}
+    <Indicator direction="top" />{' '}
+  </>
+)
+
+export default IndicatorExampleDirection

docs/src/examples/components/Indicator/Types/IndicatorExampleIcon.shorthand.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { Indicator } from '@stardust-ui/react'
+
+const IndicatorExampleIcon = () => (
+  <>
+    <Indicator icon="chevron down" direction="end" />{' '}
+    <Indicator icon="chevron down" direction="bottom" />{' '}
+    <Indicator icon="chevron down" direction="start" />{' '}
+    <Indicator icon="chevron down" direction="top" />{' '}
+  </>
+)
+export default IndicatorExampleIcon

docs/src/examples/components/Indicator/Types/index.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default Indicator ."
+      examplePath="components/Indicator/Types/IndicatorExample"
+    />
+    <ComponentExample
+      title="Direction"
+      description="An Indicator may show towards different direction."
+      examplePath="components/Indicator/Types/IndicatorExampleDirection"
+    />
+    <ComponentExample
+      title="Icon"
+      description="An Indicator may show icon instead of character."
+      examplePath="components/Indicator/Types/IndicatorExampleIcon"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Indicator/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import Types from './Types'
+
+const IndicatorExamples = () => (
+  <>
+    <Types />
+  </>
+)
+
+export default IndicatorExamples

src/components/Accordion/AccordionTitle.tsx

@@ -10,9 +10,10 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  customPropTypes,
 } from '../../lib'
-import { ReactProps, ComponentEventHandler } from '../../../types/utils'
-
+import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../../types/utils'
+import Indicator from '../Indicator/Indicator'
 export interface AccordionTitleProps
   extends UIComponentProps,
     ContentComponentProps,
@@ -30,6 +31,9 @@ export interface AccordionTitleProps
    * @param {object} data - All props.
    */
   onClick?: ComponentEventHandler<AccordionTitleProps>
+
+  /** Shorthand for the active indicator. */
+  indicator?: ShorthandValue
 }
 
 /**
@@ -47,26 +51,32 @@ class AccordionTitle extends UIComponent<ReactProps<AccordionTitleProps>, any> {
     active: PropTypes.bool,
     index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     onClick: PropTypes.func,
+    indicator: customPropTypes.itemShorthand,
   }
 
   handleClick = e => {
     _.invoke(this.props, 'onClick', e, this.props)
   }
 
-  renderComponent({ ElementType, classes, unhandledProps }) {
-    const { children, content } = this.props
+  renderComponent({ ElementType, classes, unhandledProps, styles }) {
+    const { children, content, indicator, active } = this.props
+    const indicatorWithDefaults = indicator === undefined ? {} : indicator
 
-    if (childrenExist(children)) {
-      return (
-        <ElementType {...unhandledProps} className={classes.root} onClick={this.handleClick}>
-          {children}
-        </ElementType>
-      )
-    }
+    const contentElement = (
+      <>
+        {Indicator.create(indicatorWithDefaults, {
+          defaultProps: {
+            direction: active ? 'bottom' : 'end',
+            styles: styles.indicator,
+          },
+        })}
+        {content}
+      </>
+    )
 
     return (
       <ElementType {...unhandledProps} className={classes.root} onClick={this.handleClick}>
-        {content}
+        {childrenExist(children) ? children : contentElement}
       </ElementType>
     )
   }

src/components/Icon/Icon.tsx

@@ -37,6 +37,9 @@ export interface IconProps extends UIComponentProps, ColorComponentProps {
   /** Name of the icon. */
   name?: string
 
+  /** An icon can be rotated by the degree specified as number. */
+  rotate?: number
+
   /** Size of the icon. */
   size?: IconSize
 
@@ -65,6 +68,7 @@ class Icon extends UIComponent<ReactProps<IconProps>, any> {
     circular: PropTypes.bool,
     disabled: PropTypes.bool,
     name: PropTypes.string,
+    rotate: PropTypes.number,
     size: PropTypes.oneOf(['smallest', 'smaller', 'small', 'medium', 'large', 'larger', 'largest']),
     xSpacing: PropTypes.oneOf(['none', 'before', 'after', 'both']),
   }
@@ -73,6 +77,7 @@ class Icon extends UIComponent<ReactProps<IconProps>, any> {
     as: 'span',
     size: 'medium',
     accessibility: iconBehavior,
+    rotate: 0,
   }
 
   private renderFontIcon(ElementType, classes, unhandledProps, accessibility): React.ReactNode {

src/components/Indicator/Indicator.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
+
+import {
+  createShorthandFactory,
+  UIComponent,
+  UIComponentProps,
+  commonPropTypes,
+  customPropTypes,
+} from '../../lib'
+import { ReactProps, ShorthandValue } from '../../../types/utils'
+import Icon from '../Icon/Icon'
+
+export interface IndicatorProps extends UIComponentProps {
+  /** The indicator can point towards different directions. */
+  direction?: 'start' | 'end' | 'top' | 'bottom'
+
+  /** The indicator can show specific icon if provided. */
+  icon?: ShorthandValue
+}
+
+/**
+ * An indicator is suggesting additional content next to the element it is used in.
+ */
+class Indicator extends UIComponent<ReactProps<IndicatorProps>, any> {
+  static displayName = 'Indicator'
+
+  static create: Function
+
+  static className = 'ui-indicator'
+
+  static directionMap = {
+    end: { unicode: '\u25B8', rotation: -90 },
+    start: { unicode: '\u25C2', rotation: 90 },
+    top: { unicode: '\u25B4', rotation: 180 },
+    bottom: { unicode: '\u25BE', rotation: 0 },
+  }
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({ children: false, content: false }),
+    direction: PropTypes.oneOf(['start', 'end', 'top', 'bottom']),
+    icon: customPropTypes.itemShorthand,
+  }
+
+  static defaultProps = {
+    as: 'span',
+    direction: 'bottom',
+  }
+
+  renderComponent({ ElementType, classes, unhandledProps, rtl }) {
+    const { direction, icon, color } = this.props
+    const hexUnicode =
+      direction && Indicator.directionMap[this.getDirectionBasedOnRtl(rtl, direction)].unicode
+
+    return (
+      <ElementType {...unhandledProps} className={classes.root}>
+        {icon
+          ? Icon.create(icon, {
+              defaultProps: { color },
+              overrideProps: ({ rotate }) => ({
+                rotate: (Indicator.directionMap[direction].rotation || 0) + (rotate || 0),
+              }),
+            })
+          : hexUnicode}
+      </ElementType>
+    )
+  }
+
+  private getDirectionBasedOnRtl = (rtl: boolean, direction) => {
+    if (!rtl) return direction
+    if (direction === 'start') return 'end'
+    if (direction === 'end') return 'start'
+    return direction
+  }
+}
+
+Indicator.create = createShorthandFactory(Indicator, 'hex')
+
+export default Indicator

src/components/Menu/Menu.tsx

@@ -17,7 +17,7 @@ import { menuBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 
 import { ComponentVariablesObject } from '../../themes/types'
-import { ReactProps, ShorthandCollection } from '../../../types/utils'
+import { ReactProps, ShorthandCollection, ShorthandValue } from '../../../types/utils'
 import MenuDivider from './MenuDivider'
 
 export type MenuShorthandKinds = 'divider' | 'item'
@@ -68,6 +68,9 @@ export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
 
   /** Indicates whether the menu is submenu. */
   submenu?: boolean
+
+  /** Shorthand for the submenu indicator. */
+  indicator?: ShorthandValue
 }
 
 export interface MenuState {
@@ -103,6 +106,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
     underlined: PropTypes.bool,
     vertical: PropTypes.bool,
     submenu: PropTypes.bool,
+    indicator: customPropTypes.itemShorthand,
   }
 
   static defaultProps = {
@@ -145,6 +149,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
       underlined,
       vertical,
       submenu,
+      indicator,
     } = this.props
     const { activeIndex } = this.state
 
@@ -177,6 +182,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
           index,
           active,
           inSubmenu: submenu,
+          indicator,
         },
         overrideProps: this.handleItemOverrides,
       })

src/components/Menu/MenuItem.tsx

@@ -24,6 +24,7 @@ import { Accessibility, AccessibilityActionHandlers } from '../../lib/accessibil
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
 import { focusAsync } from '../../lib/accessibility/FocusZone'
 import Ref from '../Ref/Ref'
+import Indicator from '../Indicator/Indicator'
 
 export interface MenuItemProps
   extends UIComponentProps,
@@ -105,6 +106,9 @@ export interface MenuItemProps
 
   /** Indicates whether the menu item is part of submenu. */
   inSubmenu?: boolean
+
+  /** Shorthand for the submenu indicator. */
+  indicator?: ShorthandValue
 }
 
 export interface MenuItemState {
@@ -144,6 +148,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
     defaultMenuOpen: PropTypes.bool,
     onActiveChanged: PropTypes.func,
     inSubmenu: PropTypes.bool,
+    indicator: customPropTypes.itemShorthand,
   }
 
   static defaultProps = {
@@ -181,8 +186,11 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
       primary,
       secondary,
       active,
+      vertical,
+      indicator,
       disabled,
     } = this.props
+    const indicatorWithDefaults = indicator === undefined ? {} : indicator
 
     const { menuOpen } = this.state
 
@@ -205,6 +213,13 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
               defaultProps: { xSpacing: !!content ? 'after' : 'none' },
             })}
           {content}
+          {menu &&
+            Indicator.create(indicatorWithDefaults, {
+              defaultProps: {
+                direction: vertical ? 'end' : 'bottom',
+                styles: styles.indicator,
+              },
+            })}
         </ElementType>
       </Ref>
     )
@@ -219,6 +234,7 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
               secondary,
               styles: styles.menu,
               submenu: true,
+              indicator,
             },
           })}
         </Ref>

src/index.ts

@@ -127,6 +127,8 @@ export { default as Animation, AnimationProps } from './components/Animation/Ani
 
 export { default as Tree } from './components/Tree'
 
+export { default as Indicator, IndicatorProps } from './components/Indicator/Indicator'
+
 //
 // Accessibility
 //

src/themes/teams/components/Accordion/accordionTitleStyles.ts

@@ -1,22 +1,13 @@
-import { ICSSInJSStyle } from '../../../types'
-import { getSideArrow } from '../../utils'
-
 const accordionTitleStyles = {
-  root: ({ props, theme }): ICSSInJSStyle => {
-    const { active } = props
-    const { arrowDown } = theme.siteVariables
-    const sideArrow = getSideArrow(theme)
-    return {
-      display: 'inline-block',
-      verticalAlign: 'middle',
-      padding: '.5rem 0',
-      cursor: 'pointer',
-      '::before': {
-        userSelect: 'none',
-        content: active ? `"${arrowDown}"` : `"${sideArrow}"`,
-      },
-    }
-  },
+  root: () => ({
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    padding: '.5rem 0',
+    cursor: 'pointer',
+  }),
+  indicator: () => ({
+    userSelect: 'none',
+  }),
 }
 
 export default accordionTitleStyles