Add: Support for menu group to the Dropdown (WordPress#59723)

* Add: Support for menu group to the Dropdown * Remove the duplicate scss * Remove the DropdownContentWrapper in story Co-authored-by: Marin Atanasov <[email protected]> * remove comment Co-authored-by: Marin Atanasov <[email protected]> * Remove the DropdownContentWrapper in story Co-authored-by: Marin Atanasov <[email protected]> * Update Changelog --------- Co-authored-by: Marin Atanasov <[email protected]> Co-authored-by: enejb <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: jasmussen <[email protected]>
carstingaxion · Mar 27, 2024 · 4efb3aa · 4efb3aa
1 parent 81f7add
commit 4efb3aa
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 25 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,6 +1,7 @@
 <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
 ## Unreleased
+-	`Drowdown` : Add styling support for `MenuGroup` ([#59723](https://github.com/WordPress/gutenberg/pull/59723)).
 
 ### Enhancements
 

diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
@@ -60,29 +60,4 @@
 		padding-right: $grid-unit-10;
 	}
 
-	.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;
-
-		.is-alternate & {
-			border-color: $gray-900;
-		}
-	}
 }
diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
@@ -8,6 +8,8 @@ import type { Meta, StoryFn } from '@storybook/react';
  */
 import Dropdown from '..';
 import Button from '../../button';
+import MenuGroup from '../../menu-group';
+import MenuItem from '../../menu-item';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
 const meta: Meta< typeof Dropdown > = {
@@ -83,3 +85,20 @@ WithNoPadding.args = {
 		</DropdownContentWrapper>
 	),
 };
+
+export const WithMenuItems = Template.bind( {} );
+WithMenuItems.args = {
+	...Default.args,
+	renderContent: () => (
+		<>
+			<MenuGroup label="Group 1">
+				<MenuItem>Item 1</MenuItem>
+				<MenuItem>Item 2</MenuItem>
+			</MenuGroup>
+			<MenuGroup label="Group 2">
+				<MenuItem>Item 1</MenuItem>
+				<MenuItem>Item 2</MenuItem>
+			</MenuGroup>
+		</>
+	),
+};
diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss
@@ -10,4 +10,30 @@
 	[role="menuitem"] {
 		white-space: nowrap;
 	}
+
+	.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;
+
+		.is-alternate & {
+			border-color: $gray-900;
+		}
+	}
 }