From 7d01b4a6a9287e11e159eacdb17cb66537dd8153 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 5 Oct 2021 10:51:38 -0700 Subject: [PATCH 1/8] =?UTF-8?q?Refine=20Post=20Editor=E2=80=99s=20preferen?= =?UTF-8?q?ces=20modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/preferences-modal/index.js | 52 ++++++++++++------- .../components/preferences-modal/style.scss | 37 +------------ 2 files changed, 35 insertions(+), 54 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 110b90669b4ec3..7f671e22c985d9 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -13,12 +13,15 @@ import { __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, + __experimentalSpacer as Spacer, + __experimentalText as Text, __experimentalTruncate as Truncate, FlexItem, Modal, TabPanel, Button, Card, + CardHeader, CardBody, } from '@wordpress/components'; import { isRTL, __ } from '@wordpress/i18n'; @@ -325,10 +328,10 @@ export default function PreferencesModal() { ); } else { modalContent = ( - - - - + + + + { tabs.map( ( tab ) => { return ( @@ -358,12 +361,21 @@ export default function PreferencesModal() { ); } ) } - - { sections.map( ( section ) => { - return ( - + + + { sections.map( ( section ) => { + return ( + + + { __( 'Back' ) } -

{ section.tabLabel }

- { section.content } - - ); - } ) } - - - + + + { section.tabLabel } + + + + { section.content } + + + ); + } ) } + ); } return ( diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss index 2fbae2cbfa263c..332a6f7957e852 100644 --- a/packages/edit-post/src/components/preferences-modal/style.scss +++ b/packages/edit-post/src/components/preferences-modal/style.scss @@ -25,44 +25,9 @@ $vertical-tabs-width: 160px; } } - .components-navigation { - padding: 0; + .components-navigator-provider { max-height: 100%; overflow-y: auto; - color: $black; - - > * { - // Matches spacing cleared from the modal content element. - padding: $grid-unit-30 $grid-unit-40; - } - - .components-navigation__menu { - margin: 0; - - .components-navigation__item { - & > button { - padding: 3px $grid-unit-20; - height: $grid-unit-60; - // Aligns button text instead of button box. - margin: 0 #{-$grid-unit-20}; - width: calc(#{$grid-unit-40} + 100%); - &:focus { - font-weight: 500; - } - } - } - .components-navigation__menu-title-heading { - border-bottom: 1px solid $gray-300; - padding-left: 0; - padding-right: 0; - } - .components-navigation__back-button { - padding-left: 0; - } - .edit-post-preferences-modal__custom-fields-confirmation-button { - width: auto; - } - } } .edit-post-preferences__tabs { From bbbeb5db0b0c6d4d6da708ed7e00d811b5343b35 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 5 Oct 2021 22:21:59 -0700 Subject: [PATCH 2/8] Comment and remove one more extraneous style rule --- .../edit-post/src/components/preferences-modal/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss index 332a6f7957e852..7e5413b42dd6e7 100644 --- a/packages/edit-post/src/components/preferences-modal/style.scss +++ b/packages/edit-post/src/components/preferences-modal/style.scss @@ -14,7 +14,7 @@ $vertical-tabs-width: 160px; height: 70%; } - // Clears spacing to flush fit the navigation component to the modal edges. + // Clears spacing to flush fit the navigator component to the modal edges. @media (max-width: #{ ($break-medium - 1) }) { .components-modal__content { padding: 0; @@ -26,8 +26,9 @@ $vertical-tabs-width: 160px; } .components-navigator-provider { + // Ensurance that sticky position coordinates are relative to the + // rectangle of the modal content. max-height: 100%; - overflow-y: auto; } .edit-post-preferences__tabs { From dddeb69d048f16e92b6f7901fe2d86e3d4408b9b Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Sat, 9 Oct 2021 20:13:41 -0700 Subject: [PATCH 3/8] Update for incoming Navigator overflow styling --- .../src/components/preferences-modal/style.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss index 7e5413b42dd6e7..32927ad901761b 100644 --- a/packages/edit-post/src/components/preferences-modal/style.scss +++ b/packages/edit-post/src/components/preferences-modal/style.scss @@ -23,13 +23,17 @@ $vertical-tabs-width: 160px; content: none; } } + // Keep the navigator component from overflowing the modal content area + // to ensure that sticky position elements stick where intended. + .components-navigator-provider { + height: 100%; + // This may become obselete if the component itself adopts the rule. + > .components-navigator-screen { + max-height: 100%; + } + } } - .components-navigator-provider { - // Ensurance that sticky position coordinates are relative to the - // rectangle of the modal content. - max-height: 100%; - } .edit-post-preferences__tabs { .components-tab-panel__tabs { From 5c2af105675ce4d4280190b0859a3f7c82fce509 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Sun, 10 Oct 2021 18:26:29 -0700 Subject: [PATCH 4/8] Update snapshot --- .../test/__snapshots__/index.js.snap | 130 +++++++++++++----- 1 file changed, 97 insertions(+), 33 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index 9d853c8dac30bb..bcb7cd709cbb8c 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -40,16 +40,17 @@ exports[`PreferencesModal should match snapshot when the modal is active small v onRequestClose={[Function]} title="Preferences" > - - - + - + - - + + + + + Back -

- General -

+ + + General + + + +
- - + + + + + Back -

- Blocks -

+ + + Blocks + + + +
- - + + + + + Back -

- Panels -

+ + + Panels + + + +
- - - - + + + + `; From bcd6f88028a3e964da25269504b46933cd6e9f37 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 14 Oct 2021 08:46:54 -0700 Subject: [PATCH 5/8] Remove obselete style --- .../edit-post/src/components/preferences-modal/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss index 32927ad901761b..ce93eb5cbe18a5 100644 --- a/packages/edit-post/src/components/preferences-modal/style.scss +++ b/packages/edit-post/src/components/preferences-modal/style.scss @@ -27,14 +27,9 @@ $vertical-tabs-width: 160px; // to ensure that sticky position elements stick where intended. .components-navigator-provider { height: 100%; - // This may become obselete if the component itself adopts the rule. - > .components-navigator-screen { - max-height: 100%; - } } } - .edit-post-preferences__tabs { .components-tab-panel__tabs { position: absolute; From cf7452b965ad3d0ab292a777dc5e956a66295429 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 14 Oct 2021 09:00:58 -0700 Subject: [PATCH 6/8] Try icon-only back button horizontally next to screen heading --- .../src/components/preferences-modal/index.js | 15 +++++---------- .../src/components/preferences-modal/style.scss | 1 + 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 7f671e22c985d9..454d3047773230 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -13,7 +13,6 @@ import { __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, - __experimentalSpacer as Spacer, __experimentalText as Text, __experimentalTruncate as Truncate, FlexItem, @@ -373,8 +372,8 @@ export default function PreferencesModal() { - { __( 'Back' ) } - - - - { section.tabLabel } - - + /> + + { section.tabLabel } + { section.content } diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss index ce93eb5cbe18a5..f72eea64aca6cf 100644 --- a/packages/edit-post/src/components/preferences-modal/style.scss +++ b/packages/edit-post/src/components/preferences-modal/style.scss @@ -67,6 +67,7 @@ $vertical-tabs-width: 160px; &__section-title { font-size: 0.9rem; font-weight: 600; + margin-top: 0; } &__option { From 291d3089a7ae38dbf3b0e27fc0af7ccbd17a810d Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 15 Oct 2021 08:51:39 -0700 Subject: [PATCH 7/8] Remove text color --- packages/edit-post/src/components/preferences-modal/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 454d3047773230..ccd323f3380386 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -386,9 +386,7 @@ export default function PreferencesModal() { 'Navigate to the previous view' ) } /> - - { section.tabLabel } - + { section.tabLabel } { section.content } From 032dfcf7476c49a5ee2ab8e35f88b431eb9f9e2d Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Fri, 15 Oct 2021 09:11:42 -0700 Subject: [PATCH 8/8] Update snapshot --- .../test/__snapshots__/index.js.snap | 57 ++++++------------- 1 file changed, 18 insertions(+), 39 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index bcb7cd709cbb8c..733a2b82a410b9 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -182,9 +182,9 @@ exports[`PreferencesModal should match snapshot when the modal is active small v size="large" > + - Back - - - - General - - + General +
+ - Back - - - - Blocks - - + Blocks +
+ - Back - - - - Panels - - + Panels +