From f30d6ae601294239c5918b46f4c42caf54fe87e3 Mon Sep 17 00:00:00 2001 From: Joshua Flowers Date: Tue, 11 Aug 2020 17:24:50 -0400 Subject: [PATCH 1/4] 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 ( -
+ { children( { level, levelItems, parentLevel, setActiveLevel, } ) } -
+ ); }; 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 ( -
  • + -
    • + ); }; 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 ; + return { children }; }; 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 Date: Tue, 11 Aug 2020 17:31:20 -0400 Subject: [PATCH 2/4] 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 6fd60954b0ba0b0beb7ec487c707f5bb6394cc0e Mon Sep 17 00:00:00 2001 From: Joshua Flowers Date: Mon, 17 Aug 2020 16:03:27 -0400 Subject: [PATCH 3/4] Remove opinionated styling --- .../src/navigation/styles/navigation-styles.js | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js index 3e9d801a99ce8..a3bfe53e6e7dd 100644 --- a/packages/components/src/navigation/styles/navigation-styles.js +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -3,15 +3,8 @@ */ import styled from '@emotion/styled'; -const horizontalPadding = '30px'; - export const Root = styled.div` - width: 272px; - padding: 35px 0px; - > *:not( .components-navigation__menu ) { - margin-left: ${ horizontalPadding }; - margin-right: ${ horizontalPadding }; - } + width: 100%; `; export const Menu = styled.ul` @@ -22,14 +15,8 @@ export const Menu = styled.ul` `; export const MenuItem = styled.li` - display: flex; - justify-content: space-between; button { width: 100%; - padding-top: 8px; - padding-bottom: 8px; - padding-left: ${ horizontalPadding }; - padding-right: ${ horizontalPadding }; } &.is-active span { border-bottom: 2px solid var( --wp-admin-theme-color ); From 3cf1de0079d076c408aaa551fd4caf39bb3dc2e2 Mon Sep 17 00:00:00 2001 From: Joshua Flowers Date: Mon, 17 Aug 2020 16:05:13 -0400 Subject: [PATCH 4/4] Rename styling components --- packages/components/src/navigation/menu-item.js | 6 +++--- packages/components/src/navigation/menu.js | 6 ++++-- .../components/src/navigation/styles/navigation-styles.js | 4 ++-- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/components/src/navigation/menu-item.js b/packages/components/src/navigation/menu-item.js index c40990f2dff22..737156fb3eb70 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 { MenuItem } from './styles/navigation-styles'; +import { MenuItemUI } from './styles/navigation-styles'; import Text from '../text'; const NavigationMenuItem = ( props ) => { @@ -38,14 +38,14 @@ const NavigationMenuItem = ( props ) => { }; return ( - + - + ); }; diff --git a/packages/components/src/navigation/menu.js b/packages/components/src/navigation/menu.js index de6385442c409..a3779511aeff1 100644 --- a/packages/components/src/navigation/menu.js +++ b/packages/components/src/navigation/menu.js @@ -1,10 +1,12 @@ /** * Internal dependencies */ -import { Menu } from './styles/navigation-styles'; +import { MenuUI } from './styles/navigation-styles'; const NavigationMenu = ( { children } ) => { - return { children }; + return ( + { children } + ); }; export default NavigationMenu; diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js index a3bfe53e6e7dd..b20663d920ad0 100644 --- a/packages/components/src/navigation/styles/navigation-styles.js +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -7,14 +7,14 @@ export const Root = styled.div` width: 100%; `; -export const Menu = styled.ul` +export const MenuUI = styled.ul` padding: 0; margin: 0 0 32px 0; display: flex; flex-direction: column; `; -export const MenuItem = styled.li` +export const MenuItemUI = styled.li` button { width: 100%; }