feat(Menu): adding kind prop for the items and MenuDivider component (#682)

* -added menu separator component
-added kind prop for the items inside the menu

* -removed styles for itemSeparator in the MenuItem styles

* -updated changelog

* -fixed changelog

* -added example for using the kind prop
-reverted removed item separator from teams theme

* -renamed MenuSeparator to MenuDivider and added test
-fixed types of the kind prop
-improved styles

* -added typings for the kind prop
-added service for getting the kind prop
-removed kind prop from MenuItem and MenuDivider

* -removed unused imports

* -renamed MenuItemKindProp to MenuShorthandKinds
-renamed Usage examples to Content examples

* -changed the order of the content and variations menu examples

Author: mnajdova

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add `on` and `mouseLeaveDelay` props to `Popup` component @mnajdova ([#622](https://github.com/stardust-ui/react/pull/622))
 - Add Dropdown Single Selection variant @silviuavram ([#584](https://github.com/stardust-ui/react/pull/584))
+- Add `MenuDivider` component and `kind` prop to the `items` inside of the `Menu` for creating different components @mnajdova ([#682](https://github.com/stardust-ui/react/pull/682))
 
 ### Fixes
 - Fix unicode arrow characters to be RTL aware ([#690](https://github.com/stardust-ui/react/pull/690))

docs/src/examples/components/Menu/Content/MenuExampleDivider.shorthand.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { Menu, MenuShorthandKinds } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials' },
+  { key: 'review', content: 'Reviews' },
+  { key: 'divider', kind: 'divider' as MenuShorthandKinds },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+const MenuExampleKind = () => (
+  <Menu defaultActiveIndex={0} items={items} vertical pointing="start" />
+)
+
+export default MenuExampleKind

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

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Content = () => (
+  <ExampleSection title="Content">
+    <ComponentExample
+      title="Divider"
+      description="A menu can have divider between some items."
+      examplePath="components/Menu/Content/MenuExampleDivider"
+    />
+  </ExampleSection>
+)
+
+export default Content

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

@@ -1,10 +1,12 @@
 import * as React from 'react'
 import Types from './Types'
 import Variations from './Variations'
+import Content from './Content'
 
 const MenuExamples = () => (
   <div>
     <Types />
+    <Content />
     <Variations />
   </div>
 )

src/components/Menu/Menu.tsx

@@ -10,13 +10,17 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  getKindProp,
 } from '../../lib'
 import MenuItem from './MenuItem'
 import { menuBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 
 import { ComponentVariablesObject } from '../../themes/types'
-import { ReactProps, ShorthandValue } from '../../../types/utils'
+import { ReactProps, ShorthandCollection } from '../../../types/utils'
+import MenuDivider from './MenuDivider'
+
+export type MenuShorthandKinds = 'divider' | 'item'
 
 export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
   /**
@@ -39,7 +43,7 @@ export interface MenuProps extends UIComponentProps, ChildrenComponentProps {
   iconOnly?: boolean
 
   /** Shorthand array of props for Menu. */
-  items?: ShorthandValue[]
+  items?: ShorthandCollection<MenuShorthandKinds>
 
   /** A menu can adjust its appearance to de-emphasize its contents. */
   pills?: boolean
@@ -91,7 +95,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
     defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     fluid: PropTypes.bool,
     iconOnly: PropTypes.bool,
-    items: customPropTypes.collectionShorthand,
+    items: customPropTypes.collectionShorthandWithKindProp(['divider', 'item']),
     pills: PropTypes.bool,
     pointing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['start', 'end'])]),
     primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
@@ -109,6 +113,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
   static autoControlledProps = ['activeIndex']
 
   static Item = MenuItem
+  static Divider = MenuDivider
 
   handleItemOverrides = predefinedProps => ({
     onClick: (e, itemProps) => {
@@ -146,6 +151,19 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
     return _.map(items, (item, index) => {
       const active =
         (typeof activeIndex === 'string' ? parseInt(activeIndex, 10) : activeIndex) === index
+      const kind = getKindProp(item, 'item')
+
+      if (kind === 'divider') {
+        return MenuDivider.create(item, {
+          defaultProps: {
+            primary,
+            secondary,
+            vertical,
+            variables,
+          },
+        })
+      }
+
       return MenuItem.create(item, {
         defaultProps: {
           iconOnly,

src/components/Menu/MenuDivider.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
+
+import {
+  createShorthandFactory,
+  UIComponent,
+  UIComponentProps,
+  ColorComponentProps,
+  commonPropTypes,
+} from '../../lib'
+import { ReactProps } from '../../../types/utils'
+
+export interface MenuDividerProps extends UIComponentProps, ColorComponentProps {
+  vertical?: boolean
+  primary?: boolean
+  secondary?: boolean
+}
+
+/**
+ * A menu divider visually segments menu items inside menu.
+ */
+class MenuDivider extends UIComponent<ReactProps<MenuDividerProps>, any> {
+  static displayName = 'MenuDivider'
+
+  static create: Function
+
+  static className = 'ui-menu__divider'
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({ content: false, children: false, color: true }),
+    primary: PropTypes.bool,
+    secondary: PropTypes.bool,
+    vertical: PropTypes.bool,
+  }
+
+  renderComponent({ ElementType, classes, rest }) {
+    return <ElementType {...rest} className={classes.root} />
+  }
+}
+
+MenuDivider.create = createShorthandFactory(MenuDivider, 'color')
+
+export default MenuDivider

src/index.ts

@@ -74,8 +74,9 @@ export { default as Layout, LayoutPropsWithDefaults, LayoutProps } from './compo
 export { default as List, ListProps } from './components/List/List'
 export { default as ListItem, ListItemProps } from './components/List/ListItem'
 
-export { default as Menu, MenuProps, MenuState } from './components/Menu/Menu'
+export { default as Menu, MenuProps, MenuState, MenuShorthandKinds } from './components/Menu/Menu'
 export { default as MenuItem, MenuItemState, MenuItemProps } from './components/Menu/MenuItem'
+export { default as MenuDivider, MenuDividerProps } from './components/Menu/MenuDivider'
 
 export {
   default as Popup,

src/lib/customPropTypes.tsx

@@ -380,11 +380,28 @@ export const itemShorthand = every([
   disallow(['children']),
   PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
 ])
+export const itemShorthandWithKindProp = (kindPropValues: string[]) => {
+  return every([
+    disallow(['children']),
+    PropTypes.oneOfType([
+      PropTypes.node,
+      PropTypes.shape({
+        kind: PropTypes.oneOf(kindPropValues),
+      }),
+    ]),
+  ])
+}
 
 /**
  * Collection shorthand ensures a prop is an array of item shorthand.
  */
 export const collectionShorthand = every([disallow(['children']), PropTypes.arrayOf(itemShorthand)])
+export const collectionShorthandWithKindProp = (kindPropValues: string[]) => {
+  return every([
+    disallow(['children']),
+    PropTypes.arrayOf(itemShorthandWithKindProp(kindPropValues)),
+  ])
+}
 
 /**
  * Show a deprecated warning for component props with a help message and optional validator.

src/lib/factories.ts

@@ -188,6 +188,9 @@ function createShorthandFromValue(
     props.key = value
   }
 
+  // Remove the kind prop from the props object
+  delete props.kind
+
   // ----------------------------------------
   // Create Element
   // ----------------------------------------

src/lib/getKindProp.ts

@@ -0,0 +1,5 @@
+import { ShorthandValue } from '../../types/utils'
+
+export const getKindProp = (item: ShorthandValue, defaultValue: string) => {
+  return typeof item === 'object' && (item as any).kind ? (item as any).kind : defaultValue
+}

src/lib/index.ts

@@ -35,6 +35,7 @@ export { pxToRem } from './fontSizeUtility'
 export { customPropTypes }
 export { default as createAnimationStyles } from './createAnimationStyles'
 export { default as createComponent } from './createStardustComponent'
+export { getKindProp } from './getKindProp'
 export * from './whatInput'
 
 export * from './commonPropInterfaces'

src/themes/teams/componentStyles.ts

@@ -44,6 +44,7 @@ export { default as ListItem } from './components/List/listItemStyles'
 
 export { default as Menu } from './components/Menu/menuStyles'
 export { default as MenuItem } from './components/Menu/menuItemStyles'
+export { default as MenuDivider } from './components/Menu/menuDividerStyles'
 
 export { default as Popup } from './components/Popup/popupStyles'
 export { default as PopupContent } from './components/Popup/popupContentStyles'

src/themes/teams/components/Menu/menuDividerStyles.ts

@@ -0,0 +1,16 @@
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { MenuDividerProps } from '../../../../components/Menu/MenuDivider'
+import { MenuVariables } from './menuVariables'
+
+const menuDividerStyles: ComponentSlotStylesInput<MenuDividerProps, MenuVariables> = {
+  root: ({ props: p, variables: v }): ICSSInJSStyle => {
+    const borderColor = p.primary ? v.primaryBorderColor : v.borderColor
+    const borderType = p.vertical ? 'borderTop' : 'borderLeft'
+
+    return {
+      [borderType]: `1px solid ${borderColor}`,
+    }
+  },
+}
+
+export default menuDividerStyles

test/specs/components/Menu/MenuDivider-test.ts

@@ -0,0 +1,7 @@
+import { isConformant } from 'test/specs/commonTests'
+
+import MenuDivider from 'src/components/Menu/MenuDivider'
+
+describe('MenuDivider', () => {
+  isConformant(MenuDivider)
+})

types/utils.d.ts

@@ -25,7 +25,7 @@ export type ObjectOrFunc<TResult, TArg = {}> = ((arg: TArg) => TResult) | TResul
 // Props
 // ========================================================
 
-export type Props = ObjectOf<any>
+export type Props<T = {}> = T & ObjectOf<any>
 export type ReactChildren = React.ReactNodeArray | React.ReactNode
 
 export type ReactPropsStrict<T> = { [K in keyof T]: NullableIfUndefined<T[K]> }
@@ -60,4 +60,14 @@ export type ShorthandRenderer = (
 
 export type ShorthandRenderCallback = (render: ShorthandRenderer) => React.ReactElement<any>
 
-export type ShorthandValue = React.ReactNode | Props
+// The ReactFragment here is replaced from the original typings with ReactNodeArray because of incorrect inheriting of the type when it is defined as {}
+type ReactNode =
+  | React.ReactChild
+  | React.ReactNodeArray
+  | React.ReactPortal
+  | boolean
+  | null
+  | undefined
+
+export type ShorthandValue<P = {}> = ReactNode | Props<P>
+export type ShorthandCollection<K = []> = ShorthandValue<{ kind?: K }>[]