breaking(Menu): replace type with primary/secondary

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### BREAKING
 - Replace the `type` prop with `secondary` and `primary` for `Button` @layershifter ([#419](https://github.com/stardust-ui/react/pull/419))
+- Replace the `type` prop with `secondary` and `primary` for `Menu` @layershifter ([#429](https://github.com/stardust-ui/react/pull/429))
 
 ### Fixes
 - Fix endMedia to not be removed from DOM on mouseleave for `ListItem` @musingh1 ([#278](https://github.com/stardust-ui/react/pull/278))

docs/src/examples/components/Menu/Types/MenuExamplePrimary.shorthand.tsx

@@ -7,6 +7,6 @@ const items = [
   { key: 'events', content: 'Upcoming Events' },
 ]
 
-const MenuExamplePrimary = () => <Menu defaultActiveIndex={0} items={items} type="primary" />
+const MenuExamplePrimary = () => <Menu defaultActiveIndex={0} items={items} primary />
 
 export default MenuExamplePrimary

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

@@ -8,7 +8,7 @@ const items = [
 ]
 
 const MenuExampleIconOnlyPrimary = () => (
-  <Menu iconOnly defaultActiveIndex={0} items={items} type="primary" />
+  <Menu iconOnly defaultActiveIndex={0} items={items} primary />
 )
 
 export default MenuExampleIconOnlyPrimary

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

@@ -12,7 +12,7 @@ const MenuExampleIconOnlyPrimaryInverted = () => (
     iconOnly
     defaultActiveIndex={0}
     items={items}
-    type="primary"
+    primary
     variables={siteVars => ({
       defaultColor: siteVars.gray06,
       defaultBackgroundColor: siteVars.brand,

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

@@ -8,7 +8,7 @@ const items = [
 ]
 
 const MenuExampleIconOnlyVertical = () => (
-  <Menu vertical iconOnly defaultActiveIndex={0} items={items} type="primary" />
+  <Menu vertical iconOnly defaultActiveIndex={0} items={items} primary />
 )
 
 export default MenuExampleIconOnlyVertical

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

@@ -7,8 +7,6 @@ const items = [
   { key: 'events', content: 'Upcoming Events' },
 ]
 
-const MenuExamplePillsPrimary = () => (
-  <Menu defaultActiveIndex={0} items={items} pills type="primary" />
-)
+const MenuExamplePillsPrimary = () => <Menu defaultActiveIndex={0} items={items} pills primary />
 
 export default MenuExamplePillsPrimary

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

@@ -8,7 +8,7 @@ const items = [
 ]
 
 const MenuExamplePillsPrimaryVertical = () => (
-  <Menu defaultActiveIndex={0} items={items} pills type="primary" vertical />
+  <Menu defaultActiveIndex={0} items={items} pills primary vertical />
 )
 
 export default MenuExamplePillsPrimaryVertical

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

@@ -8,7 +8,7 @@ const items = [
 ]
 
 const MenuExamplePointingPrimary = () => (
-  <Menu defaultActiveIndex={0} items={items} pointing type="primary" />
+  <Menu defaultActiveIndex={0} items={items} pointing primary />
 )
 
 export default MenuExamplePointingPrimary

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

@@ -8,7 +8,7 @@ const items = [
 ]
 
 const MenuExamplePointingStartPrimary = () => (
-  <Menu defaultActiveIndex={0} items={items} pointing="start" type="primary" />
+  <Menu defaultActiveIndex={0} items={items} pointing="start" primary />
 )
 
 export default MenuExamplePointingStartPrimary

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

@@ -14,7 +14,7 @@ class MenuExampleTabShorthand extends React.Component {
         defaultActiveIndex={0}
         items={items}
         underlined
-        type="primary"
+        primary
         accessibility={tabListBehavior}
         aria-label="Today's events"
       />

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

@@ -8,7 +8,7 @@ const items = [
 ]
 
 const MenuExampleUnderlinedPrimary = () => (
-  <Menu defaultActiveIndex={0} items={items} underlined type="primary" />
+  <Menu defaultActiveIndex={0} items={items} underlined primary />
 )
 
 export default MenuExampleUnderlinedPrimary

docs/src/views/Accessibility.tsx

@@ -397,7 +397,7 @@ export default () => (
           "  { key: 'events', content: 'Upcoming Events' },",
           ']',
           '',
-          'const MenuExamplePrimary = () => <Menu defaultActiveIndex={0} items={items} type="primary" />',
+          'const MenuExamplePrimary = () => <Menu defaultActiveIndex={0} items={items} primary />',
           '',
           'export default MenuExamplePrimary',
         ].join('\n')}

src/components/Menu/Menu.tsx

@@ -31,8 +31,9 @@ export interface MenuProps {
   items?: ShorthandValue[]
   pills?: boolean
   pointing?: boolean | 'start' | 'end'
+  primary?: boolean
   renderItem?: ShorthandRenderFunction
-  type?: 'primary' | 'secondary'
+  secondary?: boolean
   underlined?: boolean
   vertical?: boolean
   styles?: ComponentSlotStyle
@@ -86,6 +87,9 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
      */
     pointing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['start', 'end'])]),
 
+    /** The menu can have primary type. */
+    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
+
     /**
      * A custom render iterator for rendering each of the Menu items.
      * The default component, props, and children are available for each item.
@@ -96,8 +100,8 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
      */
     renderItem: PropTypes.func,
 
-    /** The menu can have primary or secondary type */
-    type: PropTypes.oneOf(['primary', 'secondary']),
+    /** The menu can have secondary type. */
+    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
 
     /** Menu items can by highlighted using underline. */
     underlined: PropTypes.bool,
@@ -135,7 +139,17 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
   })
 
   renderItems = (variables: ComponentVariablesObject) => {
-    const { iconOnly, items, pills, pointing, renderItem, type, underlined, vertical } = this.props
+    const {
+      iconOnly,
+      items,
+      pills,
+      pointing,
+      primary,
+      renderItem,
+      secondary,
+      underlined,
+      vertical,
+    } = this.props
     const { activeIndex } = this.state
 
     return _.map(items, (item, index) =>
@@ -144,7 +158,8 @@ class Menu extends AutoControlledComponent<Extendable<MenuProps>, any> {
           iconOnly,
           pills,
           pointing,
-          type,
+          primary,
+          secondary,
           underlined,
           variables,
           vertical,

src/components/Menu/MenuItem.tsx

@@ -32,8 +32,9 @@ export interface MenuItemProps {
   onClick?: ComponentEventHandler<MenuItemProps>
   pills?: boolean
   pointing?: boolean | 'start' | 'end'
+  primary?: boolean
   renderIcon?: ShorthandRenderFunction
-  type?: 'primary' | 'secondary'
+  secondary?: boolean
   underlined?: boolean
   vertical?: boolean
   styles?: ComponentSlotStyle
@@ -103,8 +104,11 @@ class MenuItem extends UIComponent<Extendable<MenuItemProps>, MenuItemState> {
      */
     pointing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['start', 'end'])]),
 
-    /** The menu can have primary or secondary type */
-    type: PropTypes.oneOf(['primary', 'secondary']),
+    /** The menu item can have primary type. */
+    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
+
+    /** The menu item can have secondary type. */
+    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
 
     /** Menu items can by highlighted using underline. */
     underlined: PropTypes.bool,

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

@@ -12,7 +12,7 @@ const underlinedItem = (color: string): ICSSInJSStyle => ({
 })
 
 const getActionStyles = ({
-  props: { type, underlined, iconOnly, isFromKeyboard },
+  props: { primary, underlined, iconOnly, isFromKeyboard },
   variables: v,
   color,
 }: {
@@ -25,10 +25,10 @@ const getActionStyles = ({
         color,
         background: v.defaultBackgroundColor,
       }
-    : type === 'primary'
+    : primary
       ? {
-          color: v.typePrimaryActiveColor,
-          background: v.typePrimaryActiveBackgroundColor,
+          color: v.primaryActiveColor,
+          background: v.primaryActiveBackgroundColor,
         }
       : {
           color,
@@ -39,7 +39,7 @@ const itemSeparator: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVaria
   props,
   variables: v,
 }): ICSSInJSStyle => {
-  const { iconOnly, pointing, pills, type, underlined, vertical } = props
+  const { iconOnly, pointing, pills, primary, underlined, vertical } = props
 
   return (
     !pills &&
@@ -52,9 +52,7 @@ const itemSeparator: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVaria
         top: 0,
         right: 0,
         ...(vertical ? { width: '100%', height: '1px' } : { width: '1px', height: '100%' }),
-        ...(type === 'primary'
-          ? { background: v.typePrimaryBorderColor }
-          : { background: v.defaultBorderColor }),
+        ...(primary ? { background: v.primaryBorderColor } : { background: v.defaultBorderColor }),
       },
 
       ...(vertical && {
@@ -72,16 +70,16 @@ const pointingBeak: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVariab
   props,
   variables: v,
 }): ICSSInJSStyle => {
-  const { pointing, type } = props
+  const { pointing, primary } = props
 
   let backgroundColor: string
   let borderColor: string
   let top: string
   let borders: ICSSInJSStyle
 
-  if (type === 'primary') {
-    backgroundColor = v.typePrimaryActiveBackgroundColor
-    borderColor = v.typePrimaryBorderColor
+  if (primary) {
+    backgroundColor = v.primaryActiveBackgroundColor
+    borderColor = v.primaryBorderColor
   } else {
     backgroundColor = v.defaultActiveBackgroundColor
     borderColor = v.defaultBorderColor
@@ -123,7 +121,7 @@ const pointingBeak: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVariab
 
 const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariables> = {
   root: ({ props, variables: v, theme }): ICSSInJSStyle => {
-    const { active, isFromKeyboard, pills, pointing, underlined, vertical } = props
+    const { active, isFromKeyboard, pills, pointing, secondary, underlined, vertical } = props
 
     return {
       color: v.defaultColor,
@@ -133,6 +131,10 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
       verticalAlign: 'middle',
       display: 'block',
 
+      ...(secondary && {
+        background: 'salmon',
+      }),
+
       ...(pills && {
         ...(vertical ? { margin: `0 0 ${pxToRem(5)} 0` } : { margin: `0 ${pxToRem(8)} 0 0` }),
         borderRadius: pxToRem(5),
@@ -171,8 +173,8 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
         ...(pointing &&
           (vertical
             ? pointing === 'end'
-              ? { borderRight: `${pxToRem(3)} solid ${v.typePrimaryActiveBorderColor}` }
-              : { borderLeft: `${pxToRem(3)} solid ${v.typePrimaryActiveBorderColor}` }
+              ? { borderRight: `${pxToRem(3)} solid ${v.primaryActiveBorderColor}` }
+              : { borderLeft: `${pxToRem(3)} solid ${v.primaryActiveBorderColor}` }
             : pointingBeak({ props, variables: v, theme }))),
       }),
 
@@ -185,7 +187,7 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
   },
 
   anchor: ({ props, variables: v }): ICSSInJSStyle => {
-    const { active, iconOnly, isFromKeyboard, pointing, type, underlined, vertical } = props
+    const { active, iconOnly, isFromKeyboard, pointing, primary, underlined, vertical } = props
 
     return {
       color: 'inherit',
@@ -209,13 +211,13 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
 
       // active styles
       ...(active &&
-        (type === 'primary'
+        (primary
           ? {
-              ...(iconOnly && { color: v.typePrimaryActiveBorderColor }),
+              ...(iconOnly && { color: v.primaryActiveBorderColor }),
 
               ...(underlined && {
-                color: v.typePrimaryActiveBorderColor,
-                ...underlinedItem(v.typePrimaryActiveBorderColor),
+                color: v.primaryActiveBorderColor,
+                ...underlinedItem(v.primaryActiveBorderColor),
               }),
             }
           : underlined && {
@@ -225,17 +227,17 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
 
       // focus styles
       ...(isFromKeyboard && {
-        ...(type === 'primary'
+        ...(primary
           ? {
               ...(iconOnly && {
-                color: v.typePrimaryActiveBorderColor,
-                border: `1px solid ${v.typePrimaryActiveBorderColor}`,
+                color: v.primaryActiveBorderColor,
+                border: `1px solid ${v.primaryActiveBorderColor}`,
                 borderRadius: v.circularRadius,
               }),
 
-              ...(underlined && { color: v.typePrimaryActiveColor }),
+              ...(underlined && { color: v.primaryActiveColor }),
 
-              ...(underlined && active && underlinedItem(v.typePrimaryActiveColor)),
+              ...(underlined && active && underlinedItem(v.primaryActiveColor)),
             }
           : {
               ...(iconOnly && {
@@ -257,10 +259,10 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
       ':hover': {
         color: 'inherit',
 
-        ...(type === 'primary'
+        ...(primary
           ? {
-              ...(iconOnly && { color: v.typePrimaryActiveBorderColor }),
-              ...(!active && underlined && underlinedItem(v.typePrimaryHoverBorderColor as string)),
+              ...(iconOnly && { color: v.primaryActiveBorderColor }),
+              ...(!active && underlined && underlinedItem(v.primaryHoverBorderColor as string)),
             }
           : !active && underlined && underlinedItem(v.defaultActiveBackgroundColor)),
       },

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

@@ -8,7 +8,7 @@ const solidBorder = (color: string) => ({
 
 export default {
   root: ({ props, variables }): ICSSInJSStyle => {
-    const { iconOnly, fluid, pointing, pills, type, underlined, vertical } = props
+    const { iconOnly, fluid, pointing, pills, primary, underlined, vertical } = props
     return {
       display: 'flex',
       ...(vertical && {
@@ -24,14 +24,14 @@ export default {
         !(pointing && vertical) &&
         !underlined && {
           ...solidBorder(variables.defaultBorderColor),
-          ...(type === 'primary' && {
-            ...solidBorder(variables.typePrimaryBorderColor),
+          ...(primary && {
+            ...solidBorder(variables.primaryBorderColor),
           }),
           borderRadius: pxToRem(4),
           overflow: 'hidden',
         }),
       ...(underlined && {
-        borderBottom: `2px solid ${variables.typePrimaryUnderlinedBorderColor}`,
+        borderBottom: `2px solid ${variables.primaryUnderlinedBorderColor}`,
       }),
       minHeight: pxToRem(24),
       margin: 0,