From dfb30a8255260707d6c3fb83f2d9b4475ee8c965 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Fri, 3 Aug 2018 11:57:50 +0200 Subject: [PATCH] feat(menu): Vertical Pills menu (#36) * feat(menu): Vertical Pills menu * changelog --- CHANGELOG.md | 1 + ...uExamplePillsPrimaryVertical.shorthand.tsx | 16 ++++++++ .../MenuExamplePillsPrimaryVertical.tsx | 40 +++++++++++++++++++ .../MenuExamplePillsVertical.shorthand.tsx | 16 ++++++++ .../Variations/MenuExamplePillsVertical.tsx | 39 ++++++++++++++++++ .../components/Menu/Variations/index.tsx | 10 +++++ src/components/Menu/menuItemRules.ts | 4 +- 7 files changed, 124 insertions(+), 2 deletions(-) create mode 100644 docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimaryVertical.shorthand.tsx create mode 100644 docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimaryVertical.tsx create mode 100644 docs/src/examples/components/Menu/Variations/MenuExamplePillsVertical.shorthand.tsx create mode 100644 docs/src/examples/components/Menu/Variations/MenuExamplePillsVertical.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 844f1bff70..8491cd3687 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add Button `disabled` prop @Bugaa92 ([#14](https://github.com/stardust-ui/react/pull/14)) - Add Label `icon`, `onIconClick` and `iconPosition` props @mnajdova ([#19](https://github.com/stardust-ui/react/pull/19)) - 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)) diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimaryVertical.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimaryVertical.shorthand.tsx new file mode 100644 index 0000000000..3877ea0fe7 --- /dev/null +++ b/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 + } +} + +export default MenuExamplePillsPrimaryVerticalShorthand diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimaryVertical.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePillsPrimaryVertical.tsx new file mode 100644 index 0000000000..f9de7c5a25 --- /dev/null +++ b/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 ( + + {_.times(3, i => { + return ( + + ) + })} + + ) + } +} + +export default MenuExamplePillsPrimaryVertical diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePillsVertical.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePillsVertical.shorthand.tsx new file mode 100644 index 0000000000..e977c8d939 --- /dev/null +++ b/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 + } +} + +export default MenuExamplePillsVerticalShorthand diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePillsVertical.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePillsVertical.tsx new file mode 100644 index 0000000000..6234fc412e --- /dev/null +++ b/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 ( + + {_.times(3, i => { + return ( + + ) + })} + + ) + } +} + +export default MenuExamplePillsVertical diff --git a/docs/src/examples/components/Menu/Variations/index.tsx b/docs/src/examples/components/Menu/Variations/index.tsx index 0241617b6c..deef92481e 100644 --- a/docs/src/examples/components/Menu/Variations/index.tsx +++ b/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" /> + + { export default { root: ({ props, variables }) => { - const { active, shape, type } = props + const { active, shape, type, vertical } = props return { color: variables.defaultColor, lineHeight: 1, @@ -41,7 +41,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' && {