From 26fa1dca1b2a8df342869a93a69563a1c8277daf Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 30 Jul 2018 17:12:34 +0200 Subject: [PATCH 1/2] feat(menu): Vertical Pills menu --- ...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 +- 6 files changed, 123 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/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" /> + + { - 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' && { From b16dbfad753fe956798f64f3c8901406f198a90a Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Wed, 1 Aug 2018 10:59:13 +0200 Subject: [PATCH 2/2] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8c29c96011..86ed599974 100644 --- a/CHANGELOG.md +++ b/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))