From f30d6ae601294239c5918b46f4c42caf54fe87e3 Mon Sep 17 00:00:00 2001 From: Joshua Flowers <joshuatf@gmail.com> Date: Tue, 11 Aug 2020 17:24:50 -0400 Subject: [PATCH 1/5] Migrate styles to css-in-js --- packages/components/src/navigation/index.js | 9 +++-- .../components/src/navigation/menu-item.js | 5 +-- packages/components/src/navigation/menu.js | 7 +++- packages/components/src/navigation/style.scss | 26 -------------- .../navigation/styles/navigation-styles.js | 36 +++++++++++++++++++ packages/components/src/style.scss | 1 - 6 files changed, 52 insertions(+), 32 deletions(-) delete mode 100644 packages/components/src/navigation/style.scss create mode 100644 packages/components/src/navigation/styles/navigation-styles.js diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js index c33850d51f451..62406951546e0 100644 --- a/packages/components/src/navigation/index.js +++ b/packages/components/src/navigation/index.js @@ -3,6 +3,11 @@ */ import { useEffect, useState } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { Root } from './styles/navigation-styles'; + const Navigation = ( { activeItemId, children, data, rootTitle } ) => { const [ activeLevel, setActiveLevel ] = useState( 'root' ); @@ -35,14 +40,14 @@ const Navigation = ( { activeItemId, children, data, rootTitle } ) => { }, [] ); return ( - <div className="components-navigation"> + <Root className="components-navigation"> { children( { level, levelItems, parentLevel, setActiveLevel, } ) } - </div> + </Root> ); }; diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js index d665b778d5258..c40990f2dff22 100644 --- a/packages/components/src/navigation/menu-item.js +++ b/packages/components/src/navigation/menu-item.js @@ -12,6 +12,7 @@ import { Icon, chevronRight } from '@wordpress/icons'; * Internal dependencies */ import Button from '../button'; +import { MenuItem } from './styles/navigation-styles'; import Text from '../text'; const NavigationMenuItem = ( props ) => { @@ -37,14 +38,14 @@ const NavigationMenuItem = ( props ) => { }; return ( - <li className={ classes }> + <MenuItem className={ classes }> <Button className={ classes } onClick={ handleClick }> <Text variant="body.small"> <span>{ title }</span> </Text> { hasChildren ? <Icon icon={ chevronRight } /> : null } </Button> - </li> + </MenuItem> ); }; diff --git a/packages/components/src/navigation/menu.js b/packages/components/src/navigation/menu.js index d5a62018f9a5f..de6385442c409 100644 --- a/packages/components/src/navigation/menu.js +++ b/packages/components/src/navigation/menu.js @@ -1,5 +1,10 @@ +/** + * Internal dependencies + */ +import { Menu } from './styles/navigation-styles'; + const NavigationMenu = ( { children } ) => { - return <ul className="components-navigation__menu">{ children }</ul>; + return <Menu className="components-navigation__menu">{ children }</Menu>; }; export default NavigationMenu; diff --git a/packages/components/src/navigation/style.scss b/packages/components/src/navigation/style.scss deleted file mode 100644 index df9ff20ed4f74..0000000000000 --- a/packages/components/src/navigation/style.scss +++ /dev/null @@ -1,26 +0,0 @@ -.components-navigation { - width: 272px; - padding: 35px 30px; -} - -.components-navigation__back { - margin-bottom: 64px; -} - -.components-navigation__title { - margin-bottom: 40px; -} - -.components-navigation__menu { - display: flex; - flex-direction: column; -} - -.components-navigation__menu-item { - display: flex; - justify-content: space-between; - - &.is-active span { - border-bottom: 2px solid var(--wp-admin-theme-color); - } -} diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js new file mode 100644 index 0000000000000..3258671a0c125 --- /dev/null +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -0,0 +1,36 @@ +/** + * External dependencies + */ +import { css } from '@emotion/core'; +import styled from '@emotion/styled'; + +const horizontalPadding = css` + padding-left: 30px; + padding-right: 30px; +`; + +export const Root = styled.div` + width: 272px; + padding: 35px 0px; +`; + +export const Menu = styled.ul` + padding: 0; + margin: 0 0 32px 0; + display: flex; + flex-direction: column; +`; + +export const MenuItem = styled.li` + display: flex; + justify-content: space-between; + button { + width: 100%; + padding-top: 8px; + padding-bottom: 8px; + ${ horizontalPadding } + } + &.is-active span { + border-bottom: 2px solid var( --wp-admin-theme-color ); + } +`; diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index 3066b604428cc..36c406c3c7a41 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -29,7 +29,6 @@ @import "./menu-item/style.scss"; @import "./menu-items-choice/style.scss"; @import "./modal/style.scss"; -@import "./navigation/style.scss"; @import "./notice/style.scss"; @import "./panel/style.scss"; @import "./placeholder/style.scss"; From a4e718482703c2a1bd085c967ba3cab9fc9208c8 Mon Sep 17 00:00:00 2001 From: Joshua Flowers <joshuatf@gmail.com> Date: Tue, 11 Aug 2020 17:31:20 -0400 Subject: [PATCH 2/5] Add spacing to navigation child items --- .../src/navigation/styles/navigation-styles.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js index 3258671a0c125..3e9d801a99ce8 100644 --- a/packages/components/src/navigation/styles/navigation-styles.js +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -1,17 +1,17 @@ /** * External dependencies */ -import { css } from '@emotion/core'; import styled from '@emotion/styled'; -const horizontalPadding = css` - padding-left: 30px; - padding-right: 30px; -`; +const horizontalPadding = '30px'; export const Root = styled.div` width: 272px; padding: 35px 0px; + > *:not( .components-navigation__menu ) { + margin-left: ${ horizontalPadding }; + margin-right: ${ horizontalPadding }; + } `; export const Menu = styled.ul` @@ -28,7 +28,8 @@ export const MenuItem = styled.li` width: 100%; padding-top: 8px; padding-bottom: 8px; - ${ horizontalPadding } + padding-left: ${ horizontalPadding }; + padding-right: ${ horizontalPadding }; } &.is-active span { border-bottom: 2px solid var( --wp-admin-theme-color ); From 9c1f426274d552d79e7299b0a8c5c43d82d8b46f Mon Sep 17 00:00:00 2001 From: Joshua Flowers <joshuatf@gmail.com> Date: Wed, 12 Aug 2020 18:08:13 -0400 Subject: [PATCH 3/5] Add badge property and styles to navigation items --- .../components/src/navigation/menu-item.js | 11 +++++---- .../src/navigation/stories/index.js | 2 ++ .../navigation/styles/navigation-styles.js | 23 ++++++++++++++++++- 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js index c40990f2dff22..5e718cd6dd335 100644 --- a/packages/components/src/navigation/menu-item.js +++ b/packages/components/src/navigation/menu-item.js @@ -12,11 +12,11 @@ import { Icon, chevronRight } from '@wordpress/icons'; * Internal dependencies */ import Button from '../button'; -import { MenuItem } from './styles/navigation-styles'; -import Text from '../text'; +import { Badge, MenuItem, MenuItemText } from './styles/navigation-styles'; const NavigationMenuItem = ( props ) => { const { + badge, children, hasChildren, id, @@ -40,9 +40,10 @@ const NavigationMenuItem = ( props ) => { return ( <MenuItem className={ classes }> <Button className={ classes } onClick={ handleClick }> - <Text variant="body.small"> - <span>{ title }</span> - </Text> + <MenuItemText variant="body.small" as="span"> + { title } + </MenuItemText> + { badge && <Badge>{ badge }</Badge> } { hasChildren ? <Icon icon={ chevronRight } /> : null } </Button> </MenuItem> diff --git a/packages/components/src/navigation/stories/index.js b/packages/components/src/navigation/stories/index.js index c18d0a6e7e2e7..afdd8ce43cc13 100644 --- a/packages/components/src/navigation/stories/index.js +++ b/packages/components/src/navigation/stories/index.js @@ -28,11 +28,13 @@ const data = [ { title: 'Category', id: 'item-3', + badge: '2', }, { title: 'Child 1', id: 'child-1', parent: 'item-3', + badge: '1', }, { title: 'Child 2', diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js index 3e9d801a99ce8..41b84eb31f78f 100644 --- a/packages/components/src/navigation/styles/navigation-styles.js +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -3,6 +3,12 @@ */ import styled from '@emotion/styled'; +/** + * Internal dependencies + */ +import { LIGHT_GRAY } from '../../utils/colors-values'; +import Text from '../../text'; + const horizontalPadding = '30px'; export const Root = styled.div` @@ -21,6 +27,10 @@ export const Menu = styled.ul` flex-direction: column; `; +export const MenuItemText = styled( Text )` + margin-right: auto; +`; + export const MenuItem = styled.li` display: flex; justify-content: space-between; @@ -31,7 +41,18 @@ export const MenuItem = styled.li` padding-left: ${ horizontalPadding }; padding-right: ${ horizontalPadding }; } - &.is-active span { + svg { + margin-left: 8px; + } + &.is-active ${ MenuItemText } { border-bottom: 2px solid var( --wp-admin-theme-color ); } `; + +export const Badge = styled.span` + margin-left: 8px; + display: inline-flex; + padding: 4px 12px; + border-radius: 2px; + background-color: ${ LIGHT_GRAY[ 300 ] }; +`; From e29fd51558c4bb0125d8092749ffb50ae79a2ccf Mon Sep 17 00:00:00 2001 From: Joshua Flowers <joshuatf@gmail.com> Date: Mon, 17 Aug 2020 16:12:38 -0400 Subject: [PATCH 4/5] Update UI component naming --- packages/components/src/navigation/menu-item.js | 4 ++-- .../components/src/navigation/styles/navigation-styles.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js index 5e718cd6dd335..a620741b2a3ac 100644 --- a/packages/components/src/navigation/menu-item.js +++ b/packages/components/src/navigation/menu-item.js @@ -12,7 +12,7 @@ import { Icon, chevronRight } from '@wordpress/icons'; * Internal dependencies */ import Button from '../button'; -import { Badge, MenuItem, MenuItemText } from './styles/navigation-styles'; +import { BadgeUI, MenuItem, MenuItemText } from './styles/navigation-styles'; const NavigationMenuItem = ( props ) => { const { @@ -43,7 +43,7 @@ const NavigationMenuItem = ( props ) => { <MenuItemText variant="body.small" as="span"> { title } </MenuItemText> - { badge && <Badge>{ badge }</Badge> } + { badge && <BadgeUI>{ badge }</BadgeUI> } { hasChildren ? <Icon icon={ chevronRight } /> : null } </Button> </MenuItem> diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js index 41b84eb31f78f..6ff0df0b14189 100644 --- a/packages/components/src/navigation/styles/navigation-styles.js +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -49,7 +49,7 @@ export const MenuItem = styled.li` } `; -export const Badge = styled.span` +export const BadgeUI = styled.span` margin-left: 8px; display: inline-flex; padding: 4px 12px; From fa1c1717d5bcc0cb4e89308d3fd22e94b75de746 Mon Sep 17 00:00:00 2001 From: Paul Sealock <psealock@gmail.com> Date: Tue, 18 Aug 2020 15:28:33 +1200 Subject: [PATCH 5/5] newLine --- packages/components/src/navigation/styles/navigation-styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js index e93f1f9d5b7df..12b8520cef26f 100644 --- a/packages/components/src/navigation/styles/navigation-styles.js +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -34,4 +34,4 @@ export const BadgeUI = styled.span` padding: 4px 12px; border-radius: 2px; background-color: ${ LIGHT_GRAY[ 300 ] }; -`; \ No newline at end of file +`;