feat(menu): Vertical Pills menu

CHANGELOG.md

@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add Button `icon` prop and Text `truncated` prop @Bugaa92 ([#13](https://github.com/stardust-ui/react/pull/13))
 - Add Button `disabled` prop @Bugaa92 ([#14](https://github.com/stardust-ui/react/pull/14))
 - Add Menu `vertical` prop @miroslavstastny ([#21](https://github.com/stardust-ui/react/pull/21))
+- Add Menu support for `shape="pills" vertical` @miroslavstastny ([#36](https://github.com/stardust-ui/react/pull/36))
 
 ### Documentation
 - Improve UX for "knobs" form on component examples @levithomason ([#20](https://github.com/stardust-ui/react/pull/20))

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Menu } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials' },
+  { key: 'review', content: 'Reviews' },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+class MenuExamplePillsPrimaryVerticalShorthand extends React.Component {
+  render() {
+    return <Menu defaultActiveIndex={0} items={items} shape="pills" type="primary" vertical />
+  }
+}
+
+export default MenuExamplePillsPrimaryVerticalShorthand

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import _ from 'lodash'
+import { Menu, MenuItem } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials' },
+  { key: 'review', content: 'Reviews' },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+class MenuExamplePillsPrimaryVertical extends React.Component {
+  state = { activeIndex: 0 }
+
+  handleItemClick = activeIndex => () => {
+    this.setState({ activeIndex })
+  }
+
+  render() {
+    const { activeIndex } = this.state
+    return (
+      <Menu defaultActiveIndex={0} shape="pills" type="primary" vertical>
+        {_.times(3, i => {
+          return (
+            <MenuItem
+              key={items[i].key}
+              content={items[i].content}
+              shape="pills"
+              type="primary"
+              vertical
+              active={activeIndex === i}
+              onClick={this.handleItemClick(i)}
+            />
+          )
+        })}
+      </Menu>
+    )
+  }
+}
+
+export default MenuExamplePillsPrimaryVertical

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Menu } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials' },
+  { key: 'review', content: 'Reviews' },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+class MenuExamplePillsVerticalShorthand extends React.Component {
+  render() {
+    return <Menu defaultActiveIndex={0} items={items} shape="pills" vertical />
+  }
+}
+
+export default MenuExamplePillsVerticalShorthand

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import _ from 'lodash'
+import { Menu, MenuItem } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials' },
+  { key: 'review', content: 'Reviews' },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+class MenuExamplePillsVertical extends React.Component {
+  state = { activeIndex: 0 }
+
+  handleItemClick = activeIndex => () => {
+    this.setState({ activeIndex })
+  }
+
+  render() {
+    const { activeIndex } = this.state
+    return (
+      <Menu defaultActiveIndex={0} shape="pills" vertical>
+        {_.times(3, i => {
+          return (
+            <MenuItem
+              key={items[i].key}
+              content={items[i].content}
+              shape="pills"
+              vertical
+              active={activeIndex === i}
+              onClick={this.handleItemClick(i)}
+            />
+          )
+        })}
+      </Menu>
+    )
+  }
+}
+
+export default MenuExamplePillsVertical

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

@@ -9,11 +9,21 @@ const Variations = () => (
       description="A menu can adjust its appearance to de-emphasize its contents."
       examplePath="components/Menu/Variations/MenuExamplePills"
     />
+    <ComponentExample
+      title="Pills Vertical"
+      description="A vertical variant of Pills menu"
+      examplePath="components/Menu/Variations/MenuExamplePillsVertical"
+    />
     <ComponentExample
       title="Pills Primary"
       description="A menu can adjust its appearance to de-emphasize its contents."
       examplePath="components/Menu/Variations/MenuExamplePillsPrimary"
     />
+    <ComponentExample
+      title="Pills Primary Vertical"
+      description="A vertical variant of Pills Primary menu"
+      examplePath="components/Menu/Variations/MenuExamplePillsPrimaryVertical"
+    />
     <ComponentExample
       title="Pointing"
       description="A menu can point to show its relationship to nearby content."

src/components/Menu/menuItemRules.ts

@@ -32,7 +32,7 @@ const itemSeparator = ({ props, variables }: { props: IMenuItemProps; variables:
 
 export default {
   root: ({ props, variables }: { props: IMenuItemProps; variables: any }) => {
-    const { active, shape, type } = props
+    const { active, shape, type, vertical } = props
     return {
       color: variables.defaultColor,
       lineHeight: 1,
@@ -42,7 +42,7 @@ export default {
       cursor: 'pointer',
       display: 'block',
       ...(shape === 'pills' && {
-        margin: `0 ${pxToRem(8)} 0 0`,
+        ...(vertical ? { margin: `0 0 ${pxToRem(5)} 0` } : { margin: `0 ${pxToRem(8)} 0 0` }),
         borderRadius: pxToRem(5),
       }),
       ...(shape === 'underlined' && {