feat(menu): Replace shape prop with pills, pointing and underlined props

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Split Menu `shape` prop to separate `pills`, `pointing` and `underlined` props @miroslavstastny ([#114](https://github.com/stardust-ui/react/pull/114))
+
 ### Features
 - Add basic `Radio` component @alinais ([#100](https://github.com/stardust-ui/react/pull/100))
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/components/Menu/Menu.tsx

@@ -40,11 +40,18 @@ class Menu extends AutoControlledComponent<any, any> {
     /** Shorthand array of props for Menu. */
     items: customPropTypes.collectionShorthand,
 
-    shape: PropTypes.oneOf(['pills', 'pointing', 'underlined']),
+    /** A menu can adjust its appearance to de-emphasize its contents. */
+    pills: PropTypes.bool,
+
+    /** A menu can point to show its relationship to nearby content. */
+    pointing: PropTypes.bool,
 
     /** The menu can have primary or secondary type */
     type: PropTypes.oneOf(['primary', 'secondary']),
 
+    /** Menu items can by highlighted using underline. */
+    underlined: PropTypes.bool,
+
     /** A vertical menu displays elements vertically. */
     vertical: PropTypes.bool,
 
@@ -73,9 +80,11 @@ class Menu extends AutoControlledComponent<any, any> {
     'fluid',
     'iconOnly',
     'items',
-    'shape',
+    'pills',
+    'pointing',
     'styles',
     'type',
+    'underlined',
     'variables',
     'vertical',
   ]
@@ -95,15 +104,17 @@ class Menu extends AutoControlledComponent<any, any> {
   })
 
   renderItems = (variables: ComponentVariablesObject) => {
-    const { iconOnly, items, type, shape, vertical } = this.props
+    const { iconOnly, items, pills, pointing, type, underlined, vertical } = this.props
     const { activeIndex } = this.state
 
     return _.map(items, (item, index) =>
       MenuItem.create(item, {
         defaultProps: {
           iconOnly,
+          pills,
+          pointing,
           type,
-          shape,
+          underlined,
           variables,
           vertical,
           index,

src/components/Menu/MenuItem.tsx

@@ -49,11 +49,18 @@ class MenuItem extends UIComponent<any, any> {
      */
     onClick: PropTypes.func,
 
-    shape: PropTypes.oneOf(['pills', 'pointing', 'underlined']),
+    /** A menu can adjust its appearance to de-emphasize its contents. */
+    pills: PropTypes.bool,
+
+    /** A menu can point to show its relationship to nearby content. */
+    pointing: PropTypes.bool,
 
     /** The menu can have primary or secondary type */
     type: PropTypes.oneOf(['primary', 'secondary']),
 
+    /** Menu items can by highlighted using underline. */
+    underlined: PropTypes.bool,
+
     /** A vertical menu displays elements vertically. */
     vertical: PropTypes.bool,
 
@@ -83,9 +90,11 @@ class MenuItem extends UIComponent<any, any> {
     'iconOnly',
     'index',
     'onClick',
-    'shape',
+    'pills',
+    'pointing',
     'styles',
     'type',
+    'underlined',
     'variables',
     'vertical',
   ]

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

@@ -8,9 +8,10 @@ const underlinedItem = (color): ICSSInJSStyle => ({
 })
 
 const itemSeparator = ({ props, variables }: { props: any; variables }): ICSSInJSStyle => {
-  const { active, iconOnly, shape, type, vertical } = props
+  const { active, iconOnly, pills, type, underlined, vertical } = props
   return {
-    ...((!shape || shape === 'pointing') &&
+    ...(!pills &&
+      !underlined &&
       !iconOnly && {
         '::before': {
           position: 'absolute',
@@ -36,7 +37,7 @@ const itemSeparator = ({ props, variables }: { props: any; variables }): ICSSInJ
 
 const menuItemStyles = {
   root: ({ props, variables }: { props: any; variables: IMenuVariables }): ICSSInJSStyle => {
-    const { active, iconOnly, shape, type, vertical } = props
+    const { active, iconOnly, pills, pointing, type, underlined, vertical } = props
     const { iconsMenuItemSpacing } = variables
     return {
       color: variables.defaultColor,
@@ -51,11 +52,11 @@ const menuItemStyles = {
             : { marginLeft: iconsMenuItemSpacing }),
         },
       }),
-      ...(shape === 'pills' && {
+      ...(pills && {
         ...(vertical ? { margin: `0 0 ${pxToRem(5)} 0` } : { margin: `0 ${pxToRem(8)} 0 0` }),
         borderRadius: pxToRem(5),
       }),
-      ...(shape === 'underlined' && {
+      ...(underlined && {
         padding: '0',
         margin: `0 ${pxToRem(10)} 0 0`,
         ':nth-child(n+2)': {
@@ -70,7 +71,7 @@ const menuItemStyles = {
       ':hover': {
         color: variables.defaultActiveColor,
         // all menus should have gray background on hover except the underlined menu
-        ...(shape !== 'underlined' && {
+        ...(!underlined && {
           background: variables.defaultActiveBackgroundColor,
           ...(type === 'primary' && {
             background: variables.typePrimaryActiveBackgroundColor,
@@ -79,23 +80,23 @@ const menuItemStyles = {
       },
 
       ...(active && {
-        ...(shape !== 'underlined' && {
+        ...(!underlined && {
           background: variables.defaultActiveBackgroundColor,
           ...(type === 'primary' && {
             background: variables.typePrimaryActiveBackgroundColor,
           }),
         }),
         color: variables.defaultColor,
         ':hover': {
-          ...(shape !== 'underlined' && {
+          ...(!underlined && {
             color: variables.defaultActiveColor,
             background: variables.defaultActiveBackgroundColor,
             ...(type === 'primary' && {
               background: variables.typePrimaryActiveBackgroundColor,
             }),
           }),
         },
-        ...(shape === 'pointing' && {
+        ...(pointing && {
           '::after': {
             visibility: 'visible',
             background: variables.defaultActiveBackgroundColor,
@@ -124,13 +125,13 @@ const menuItemStyles = {
   },
 
   anchor: ({ props, variables }): ICSSInJSStyle => {
-    const { active, iconOnly, shape, type } = props
+    const { active, iconOnly, type, underlined } = props
     const { iconsMenuItemSize } = variables
 
     return {
       color: 'inherit',
       display: 'block',
-      ...(shape === 'underlined'
+      ...(underlined
         ? { padding: `0 0 ${pxToRem(8)} 0` }
         : { padding: `${pxToRem(14)} ${pxToRem(18)}` }),
       cursor: 'pointer',
@@ -146,7 +147,7 @@ const menuItemStyles = {
 
       ':hover': {
         color: 'inherit',
-        ...(shape === 'underlined' && {
+        ...(underlined && {
           paddingBottom: `${pxToRem(4)}`,
           ...underlinedItem(variables.defaultActiveBackgroundColor),
           ...(type === 'primary' && {
@@ -156,7 +157,7 @@ const menuItemStyles = {
       },
 
       ...(active &&
-        shape === 'underlined' && {
+        underlined && {
           color: variables.defaultColor,
           paddingBottom: `${pxToRem(4)}`,
           ':hover': {},

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

@@ -7,7 +7,7 @@ const solidBorder = (color: string) => ({
 
 export default {
   root: ({ props, variables }): ICSSInJSStyle => {
-    const { iconOnly, fluid, type, shape, vertical } = props
+    const { iconOnly, fluid, pills, type, underlined, vertical } = props
     return {
       display: 'flex',
       ...(vertical && {
@@ -18,16 +18,16 @@ export default {
           width: 'auto',
         }),
       }),
-      ...(shape !== 'pills' &&
+      ...(!pills &&
         !iconOnly &&
-        shape !== 'underlined' && {
+        !underlined && {
           ...solidBorder(variables.defaultBorderColor),
           ...(type === 'primary' && {
             ...solidBorder(variables.typePrimaryBorderColor),
           }),
           borderRadius: pxToRem(4),
         }),
-      ...(shape === 'underlined' && {
+      ...(underlined && {
         borderBottom: `2px solid ${variables.typePrimaryUnderlinedBorderColor}`,
       }),
       minHeight: pxToRem(24),