From 5d2227665952854444e2ed1111161a12e5d2dc5f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 23 Sep 2024 09:04:37 +0100 Subject: [PATCH 1/3] Components: Simplify MenuGroup component styles --- packages/block-editor/src/style.scss | 1 + packages/components/src/dropdown/style.scss | 17 ++++------------- packages/components/src/menu-group/style.scss | 5 ++++- 3 files changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index e6ec77b55a0ec..4d06e1805a2bc 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -17,6 +17,7 @@ @import "./components/block-popover/style.scss"; @import "./components/block-preview/style.scss"; @import "./components/block-rename/style.scss"; +@import "./components/block-settings-menu/style.scss"; @import "./components/block-styles/style.scss"; @import "./components/block-switcher/style.scss"; @import "./components/block-types-list/style.scss"; diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss index 8a5b0e0a0a6a2..280a8e444714a 100644 --- a/packages/components/src/dropdown/style.scss +++ b/packages/components/src/dropdown/style.scss @@ -5,6 +5,10 @@ .components-dropdown__content { .components-popover__content { padding: $grid-unit-10; + + &:has(.components-menu-group) { + padding: 0; + } } [role="menuitem"] { @@ -13,22 +17,9 @@ .components-menu-group { padding: $grid-unit-10; - margin-top: 0; - margin-bottom: 0; - margin-left: -$grid-unit-10; - margin-right: -$grid-unit-10; - - &:first-child { - margin-top: -$grid-unit-10; - } - - &:last-child { - margin-bottom: -$grid-unit-10; - } } .components-menu-group + .components-menu-group { - margin-top: 0; border-top: $border-width solid $gray-400; padding: $grid-unit-10; } diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss index d9412c504940b..744e3f74c5b95 100644 --- a/packages/components/src/menu-group/style.scss +++ b/packages/components/src/menu-group/style.scss @@ -1,5 +1,4 @@ .components-menu-group + .components-menu-group { - margin-top: $grid-unit-10; padding-top: $grid-unit-10; border-top: $border-width solid $gray-900; @@ -10,6 +9,10 @@ } } +.components-menu-group:has(> div:empty) { + display: none; +} + .components-menu-group__label { padding: 0 $grid-unit-10; margin-top: $grid-unit-05; From 262beb4cc44b096e47593625c812d808797f6c9f Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 23 Sep 2024 09:10:34 +0100 Subject: [PATCH 2/3] Update Changelog --- packages/block-editor/src/style.scss | 1 - packages/components/CHANGELOG.md | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 4d06e1805a2bc..e6ec77b55a0ec 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -17,7 +17,6 @@ @import "./components/block-popover/style.scss"; @import "./components/block-preview/style.scss"; @import "./components/block-rename/style.scss"; -@import "./components/block-settings-menu/style.scss"; @import "./components/block-styles/style.scss"; @import "./components/block-switcher/style.scss"; @import "./components/block-types-list/style.scss"; diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 34522f7957265..71aa08d693403 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -7,6 +7,10 @@ - `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)). - `Navigator`: fix `isInitial` logic ([#65527](https://github.com/WordPress/gutenberg/pull/65527)). +### Enhancements + +- `MenuGroup`: Simplify the MenuGroup styles within dropdown menus. ([#65561](https://github.com/WordPress/gutenberg/pull/65561)). + ## 28.8.0 (2024-09-19) ### Bug Fixes From 5859fb4cd8fd066b11355ecae15e7ff0049ca138 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 23 Sep 2024 15:53:20 +0100 Subject: [PATCH 3/3] Handle standalone items use-case --- .../components/src/dropdown-menu/stories/index.story.tsx | 3 +++ packages/components/src/dropdown/stories/index.story.tsx | 1 + packages/components/src/dropdown/style.scss | 6 ++++++ 3 files changed, 10 insertions(+) diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx index b6bc11ddec9ab..dd4907bd0b96b 100644 --- a/packages/components/src/dropdown-menu/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu/stories/index.story.tsx @@ -96,6 +96,9 @@ export const WithChildren: StoryObj< typeof DropdownMenu > = { icon: more, children: ( { onClose } ) => ( <> + + Standalone Item + Move Up diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx index c6fe5014ffdc2..0f07664787cc3 100644 --- a/packages/components/src/dropdown/stories/index.story.tsx +++ b/packages/components/src/dropdown/stories/index.story.tsx @@ -99,6 +99,7 @@ export const WithMenuItems: StoryObj< typeof Dropdown > = { ...Default.args, renderContent: () => ( <> + Standalone Item Item 1 Item 2 diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss index 280a8e444714a..d7ae7963f7ed8 100644 --- a/packages/components/src/dropdown/style.scss +++ b/packages/components/src/dropdown/style.scss @@ -8,6 +8,12 @@ &:has(.components-menu-group) { padding: 0; + + .components-dropdown-menu__menu > .components-menu-item__button, + > .components-menu-item__button { + margin: $grid-unit-10; + width: auto; + } } }