From eb7eff2d1a2ccfd138344aac1355f0b2329a6123 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Thu, 23 Aug 2018 13:33:32 +0200 Subject: [PATCH 1/3] feat(menu): Vertical Pointing variant --- .../MenuExampleVerticalPointing.shorthand.tsx | 14 ++++ ...nuExampleVerticalPointingEnd.shorthand.tsx | 14 ++++ .../components/Menu/Variations/index.tsx | 10 +++ src/components/Menu/Menu.tsx | 7 +- src/components/Menu/MenuItem.tsx | 7 +- .../teams/components/Menu/menuItemStyles.ts | 78 ++++++++++++------- .../teams/components/Menu/menuStyles.ts | 3 +- 7 files changed, 101 insertions(+), 32 deletions(-) create mode 100644 docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand.tsx create mode 100644 docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointingEnd.shorthand.tsx diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand.tsx new file mode 100644 index 0000000000..a9bf96ca97 --- /dev/null +++ b/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointing.shorthand.tsx @@ -0,0 +1,14 @@ +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' }, +] + +const MenuExampleVerticalPointing = () => ( + +) + +export default MenuExampleVerticalPointing diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointingEnd.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointingEnd.shorthand.tsx new file mode 100644 index 0000000000..090b26e170 --- /dev/null +++ b/docs/src/examples/components/Menu/Variations/MenuExampleVerticalPointingEnd.shorthand.tsx @@ -0,0 +1,14 @@ +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' }, +] + +const MenuExampleVerticalPointingEnd = () => ( + +) + +export default MenuExampleVerticalPointingEnd diff --git a/docs/src/examples/components/Menu/Variations/index.tsx b/docs/src/examples/components/Menu/Variations/index.tsx index 9aa04b73fe..c8375ff3bf 100644 --- a/docs/src/examples/components/Menu/Variations/index.tsx +++ b/docs/src/examples/components/Menu/Variations/index.tsx @@ -34,6 +34,16 @@ const Variations = () => ( description="A menu can point to show its relationship to nearby content." examplePath="components/Menu/Variations/MenuExamplePointingPrimary" /> + + { /** 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, + /** + * A menu can point to show its relationship to nearby content. + * For vertical menu, it can point to the start of the item or to the end. + */ + pointing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['start', 'end'])]), /** The menu can have primary or secondary type */ type: PropTypes.oneOf(['primary', 'secondary']), diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index dc39e76a0f..a388662f32 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -52,8 +52,11 @@ class MenuItem extends UIComponent { /** 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, + /** + * A menu can point to show its relationship to nearby content. + * For vertical menu, it can point to the start of the item or to the end. + */ + pointing: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['start', 'end'])]), /** The menu can have primary or secondary type */ type: PropTypes.oneOf(['primary', 'secondary']), diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index 813e4081cd..0f5c0f2fff 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -8,10 +8,11 @@ const underlinedItem = (color): ICSSInJSStyle => ({ }) const itemSeparator = ({ props, variables }: { props: any; variables }): ICSSInJSStyle => { - const { active, iconOnly, pills, type, underlined, vertical } = props + const { active, iconOnly, pointing, pills, type, underlined, vertical } = props return { ...(!pills && !underlined && + !(pointing && vertical) && !iconOnly && { '::before': { position: 'absolute', @@ -35,6 +36,34 @@ const itemSeparator = ({ props, variables }: { props: any; variables }): ICSSInJ } } +const bottomBeak = ({ props, variables }: { props: any; variables }): ICSSInJSStyle => { + const { type } = props + return { + '::after': { + visibility: 'visible', + background: variables.defaultActiveBackgroundColor, + position: 'absolute', + content: '""', + top: '100%', + left: '50%', + transform: 'translateX(-50%) translateY(-50%) rotate(45deg)', + margin: '.5px 0 0', + width: pxToRem(10), + height: pxToRem(10), + border: 'none', + borderBottom: `1px solid ${variables.defaultBorderColor}`, + borderRight: `1px solid ${variables.defaultBorderColor}`, + zIndex: 2, + transition: 'background .1s ease', + ...(type === 'primary' && { + background: variables.typePrimaryActiveBackgroundColor, + borderBottom: `1px solid ${variables.typePrimaryBorderColor}`, + borderRight: `1px solid ${variables.typePrimaryBorderColor}`, + }), + }, + } +} + const menuItemStyles = { root: ({ props, variables }: { props: any; variables: IMenuVariables }): ICSSInJSStyle => { const { active, iconOnly, pills, pointing, type, underlined, vertical } = props @@ -67,6 +96,16 @@ const menuItemStyles = { color: variables.defaultColor, }), ...itemSeparator({ props, variables }), + ...(pointing && + vertical && { + border: '1px solid transparent', + borderTopLeftRadius: `${pxToRem(3)}`, + borderTopRightRadius: `${pxToRem(3)}`, + ...(pointing === 'end' + ? { borderRight: `${pxToRem(3)} solid transparent` } + : { borderLeft: `${pxToRem(3)} solid transparent` }), + marginBottom: `${pxToRem(12)}`, + }), ':hover': { color: variables.defaultActiveColor, @@ -96,36 +135,19 @@ const menuItemStyles = { }), }), }, - ...(pointing && { - '::after': { - visibility: 'visible', - background: variables.defaultActiveBackgroundColor, - position: 'absolute', - content: '""', - top: '100%', - left: '50%', - transform: 'translateX(-50%) translateY(-50%) rotate(45deg)', - margin: '.5px 0 0', - width: pxToRem(10), - height: pxToRem(10), - border: 'none', - borderBottom: `1px solid ${variables.defaultBorderColor}`, - borderRight: `1px solid ${variables.defaultBorderColor}`, - zIndex: 2, - transition: 'background .1s ease', - ...(type === 'primary' && { - background: variables.typePrimaryActiveBackgroundColor, - borderBottom: `1px solid ${variables.typePrimaryBorderColor}`, - borderRight: `1px solid ${variables.typePrimaryBorderColor}`, - }), - }, - }), + ...(pointing && !vertical && bottomBeak({ props, variables })), + ...(pointing && + vertical && { + ...(pointing === 'end' + ? { borderRight: `${pxToRem(3)} solid ${variables.typePrimaryActiveColor}` } + : { borderLeft: `${pxToRem(3)} solid ${variables.typePrimaryActiveColor}` }), + }), }), } }, anchor: ({ props, variables }): ICSSInJSStyle => { - const { active, iconOnly, type, underlined } = props + const { active, iconOnly, pointing, type, underlined, vertical } = props const { iconsMenuItemSize } = variables return { @@ -133,7 +155,9 @@ const menuItemStyles = { display: 'block', ...(underlined ? { padding: `0 0 ${pxToRem(8)} 0` } - : { padding: `${pxToRem(14)} ${pxToRem(18)}` }), + : pointing && vertical + ? { padding: `${pxToRem(8)} ${pxToRem(18)}` } + : { padding: `${pxToRem(14)} ${pxToRem(18)}` }), cursor: 'pointer', ...(iconOnly && { diff --git a/src/themes/teams/components/Menu/menuStyles.ts b/src/themes/teams/components/Menu/menuStyles.ts index 67558a2eed..e003ffc23c 100644 --- a/src/themes/teams/components/Menu/menuStyles.ts +++ b/src/themes/teams/components/Menu/menuStyles.ts @@ -7,7 +7,7 @@ const solidBorder = (color: string) => ({ export default { root: ({ props, variables }): ICSSInJSStyle => { - const { iconOnly, fluid, pills, type, underlined, vertical } = props + const { iconOnly, fluid, pointing, pills, type, underlined, vertical } = props return { display: 'flex', ...(vertical && { @@ -20,6 +20,7 @@ export default { }), ...(!pills && !iconOnly && + !(pointing && vertical) && !underlined && { ...solidBorder(variables.defaultBorderColor), ...(type === 'primary' && { From e240cf67f4618980fc7385cd07cc7ec20adeeda2 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Wed, 29 Aug 2018 12:09:09 +0200 Subject: [PATCH 2/3] feat(menu): Horizontal Pointing start variant --- .../MenuExamplePointingStart.shorthand.tsx | 14 ++++++ ...uExamplePointingStartPrimary.shorthand.tsx | 14 ++++++ .../components/Menu/Variations/index.tsx | 10 ++++ .../teams/components/Menu/menuItemStyles.ts | 46 ++++++++++++++----- 4 files changed, 72 insertions(+), 12 deletions(-) create mode 100644 docs/src/examples/components/Menu/Variations/MenuExamplePointingStart.shorthand.tsx create mode 100644 docs/src/examples/components/Menu/Variations/MenuExamplePointingStartPrimary.shorthand.tsx diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePointingStart.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePointingStart.shorthand.tsx new file mode 100644 index 0000000000..a24680cea7 --- /dev/null +++ b/docs/src/examples/components/Menu/Variations/MenuExamplePointingStart.shorthand.tsx @@ -0,0 +1,14 @@ +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' }, +] + +const MenuExamplePointingStart = () => ( + +) + +export default MenuExamplePointingStart diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePointingStartPrimary.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePointingStartPrimary.shorthand.tsx new file mode 100644 index 0000000000..c01ec542f5 --- /dev/null +++ b/docs/src/examples/components/Menu/Variations/MenuExamplePointingStartPrimary.shorthand.tsx @@ -0,0 +1,14 @@ +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' }, +] + +const MenuExamplePointingStartPrimary = () => ( + +) + +export default MenuExamplePointingStartPrimary diff --git a/docs/src/examples/components/Menu/Variations/index.tsx b/docs/src/examples/components/Menu/Variations/index.tsx index c8375ff3bf..7cb269c989 100644 --- a/docs/src/examples/components/Menu/Variations/index.tsx +++ b/docs/src/examples/components/Menu/Variations/index.tsx @@ -34,6 +34,16 @@ const Variations = () => ( description="A menu can point to show its relationship to nearby content." examplePath="components/Menu/Variations/MenuExamplePointingPrimary" /> + + { - const { type } = props +const pointingBeak = ({ props, variables }: { props: any; variables }): ICSSInJSStyle => { + const { pointing, type } = props + + let backgroundColor: string + let borderColor: string + let top: string + let borders: ICSSInJSStyle + + if (type === 'primary') { + backgroundColor = variables.typePrimaryActiveBackgroundColor + borderColor = variables.typePrimaryBorderColor + } else { + backgroundColor = variables.defaultActiveBackgroundColor + borderColor = variables.defaultBorderColor + } + + if (pointing === 'start') { + borders = { + borderTop: `1px solid ${borderColor}`, + borderLeft: `1px solid ${borderColor}`, + } + top = '-1px' // 1px for the border + } else { + borders = { + borderBottom: `1px solid ${borderColor}`, + borderRight: `1px solid ${borderColor}`, + } + top = '100%' + } + return { '::after': { visibility: 'visible', - background: variables.defaultActiveBackgroundColor, + background: backgroundColor, position: 'absolute', content: '""', - top: '100%', + top, left: '50%', transform: 'translateX(-50%) translateY(-50%) rotate(45deg)', margin: '.5px 0 0', width: pxToRem(10), height: pxToRem(10), border: 'none', - borderBottom: `1px solid ${variables.defaultBorderColor}`, - borderRight: `1px solid ${variables.defaultBorderColor}`, + ...borders, zIndex: 2, transition: 'background .1s ease', - ...(type === 'primary' && { - background: variables.typePrimaryActiveBackgroundColor, - borderBottom: `1px solid ${variables.typePrimaryBorderColor}`, - borderRight: `1px solid ${variables.typePrimaryBorderColor}`, - }), }, } } @@ -135,7 +157,7 @@ const menuItemStyles = { }), }), }, - ...(pointing && !vertical && bottomBeak({ props, variables })), + ...(pointing && !vertical && pointingBeak({ props, variables })), ...(pointing && vertical && { ...(pointing === 'end' From 41fba1afc17098ed23c3d1a53bbe425d046db2eb Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Wed, 29 Aug 2018 15:28:43 +0200 Subject: [PATCH 3/3] - changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d19a28ab38..da25f1c2d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add accessibility behavior description @kolaps33 ([#74](https://github.com/stardust-ui/react/pull/74)) - Add strict null checks for generated TS types @smykhailov ([#108](https://github.com/stardust-ui/react/pull/108)) - Export themes at `@stardust-ui/react/themes` @levithomason ([#145](https://github.com/stardust-ui/react/pull/145)) +- Add support for Menu `vertical pointing` prop @miroslavstastny ([#123](https://github.com/stardust-ui/react/pull/123)) ### Documentation - Add a Quick Start guide @levithomason ([#145](https://github.com/stardust-ui/react/pull/145))