Initial commit

packages/components/src/dropdown/stories/index.js

@@ -14,7 +14,7 @@ import {
  */
 import Dropdown from '../';
 import Button from '../../button';
-import MenuGroup from '../../menu-group';
+import { MenuGroup } from '../../menu-group';
 import MenuItem from '../../menu-item';
 import DropdownMenu from '../../dropdown-menu';
 

packages/components/src/menu-group/component.tsx

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { Children } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect, WordPressComponentProps } from '../ui/context';
+import { useMenuGroup } from './hook';
+import type { MenuGroupProps } from './types';
+import { View } from '../view';
+
+function useUniqueId() {
+	return `components-menu-group-label-${ useInstanceId( MenuGroup ) }`;
+}
+
+function MenuGroup(
+	props: WordPressComponentProps< MenuGroupProps, 'div' >,
+	forwardedRef: Ref< any >
+) {
+	const {
+		children,
+		label,
+		menuGroupClassName,
+		menuGroupLabelClassName,
+	} = useMenuGroup( props );
+
+	const labelId = useUniqueId();
+
+	if ( ! Children.count( children ) ) {
+		return null;
+	}
+
+	return (
+		<View className={ menuGroupClassName } ref={ forwardedRef }>
+			{ label && (
+				<View
+					className={ menuGroupLabelClassName }
+					id={ labelId }
+					aria-hidden="true"
+				>
+					{ label }
+				</View>
+			) }
+			<View role="group" aria-labelledby={ label ? labelId : undefined }>
+				{ children }
+			</View>
+		</View>
+	);
+}
+
+/**
+ * `MenuGroup` wraps a series of related `MenuItem` components into a common section.
+ *
+ * @example
+ * ```jsx
+ * import { MenuGroup } from `@wordpress/components`
+ *
+ * function Example() {
+ *   return (
+ *      <MenuGroup label="Settings">
+ *          <MenuItem>Setting 1</MenuItem>
+ *          <MenuItem>Setting 2</MenuItem>
+ *      </MenuGroup>
+ *   );
+ * }
+ * ```
+ */
+const ConnectedMenuGroup = contextConnect( MenuGroup, 'MenuGroup' );
+
+export default ConnectedMenuGroup;

packages/components/src/menu-group/hook.ts

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useCx } from '../utils/hooks/use-cx';
+
+/**
+ * Internal dependencies
+ */
+import { useContextSystem, WordPressComponentProps } from '../ui/context';
+import * as styles from './styles';
+import type { MenuGroupProps } from './types';
+
+export function useMenuGroup(
+	props: WordPressComponentProps< MenuGroupProps, 'div' >
+) {
+	const {
+		className = '',
+		children,
+		hideSeparator = false,
+		label = '',
+		...otherProps
+	} = useContextSystem( props, 'MenuGroup' );
+
+	const classNames = classnames( className, 'components-menu-group' );
+	const cx = useCx();
+	const menuGroupClassName = useMemo( () => {
+		return cx(
+			styles.MenuGroup,
+			hideSeparator && styles.MenuGroupWithHiddenSeparator,
+			classNames
+		);
+	}, [ className, hideSeparator ] );
+	const menuGroupLabelClassName = useMemo( () => {
+		return cx( styles.MenuGroupLabel, 'components-menu-group__label' );
+	}, [] );
+
+	return {
+		...otherProps,
+		menuGroupClassName,
+		menuGroupLabelClassName,
+		label,
+		children,
+	};
+}

packages/components/src/menu-group/index.ts

@@ -0,0 +1 @@
+export { default as MenuGroup } from './component';

packages/components/src/menu-group/stories/index.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { boolean, text } from '@storybook/addon-knobs';
+
+/**
+ * Internal dependencies
+ */
+import { MenuGroup } from '../';
+
+export default {
+	title: 'Components/MenuGroup',
+	component: MenuGroup,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
+
+export const _default = () => {
+	const label = text( 'Label', 'MenuGroup label text' );
+	const hideSeparator = boolean( 'Hide top border separator', false );
+	const className = text( 'ClassName', 'menu-group-story' );
+
+	return (
+		<MenuGroup
+			hideSeparator={ hideSeparator }
+			label={ label }
+			className={ className }
+		>
+			<p>MenuGroup item</p>
+		</MenuGroup>
+	);
+};

packages/components/src/menu-group/styles.ts

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+import { space } from '../ui/utils/space';
+
+export const MenuGroup = css`
+	margin-top: ${ space( 2 ) };
+	padding-top: ${ space( 2 ) };
+	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 900 ] };
+`;
+
+export const MenuGroupWithHiddenSeparator = css`
+	border-top: none;
+	margin-top: 0;
+	padding-top: 0;
+`;
+
+export const MenuGroupLabel = css`
+	padding: 0 ${ space( 2 ) };
+	margin-top: ${ space( 1 ) };
+	margin-bottom: ${ space( 3 ) };
+	color: ${ COLORS.gray[ 700 ] };
+	text-transform: uppercase;
+	font-size: ${ CONFIG.fontSizeSmall };
+	font-weight: ${ CONFIG.fontWeightHeading };
+	white-space: nowrap;
+`;

packages/components/src/menu-group/types.ts

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { ReactNode } from 'react';
+
+export type MenuGroupProps = {
+	/**
+	 * Whether to hide top border on the MenuGroup container.
+	 *
+	 * @default false
+	 */
+	hideSeparator?: boolean;
+	/**
+	 * Text to be displayed as the menu group header.
+	 */
+	label?: string;
+	/**
+	 * An optional class name for the MenuGroup container.
+	 *
+	 * @default ''
+	 */
+	className?: string;
+	/**
+	 * Child elements.
+	 */
+	children: ReactNode;
+};

packages/components/src/style.scss

@@ -22,7 +22,6 @@
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";
 @import "./higher-order/navigate-regions/style.scss";
-@import "./menu-group/style.scss";
 @import "./menu-item/style.scss";
 @import "./menu-items-choice/style.scss";
 @import "./modal/style.scss";

packages/components/src/tools-panel/tools-panel-header/component.tsx

@@ -14,7 +14,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import DropdownMenu from '../../dropdown-menu';
-import MenuGroup from '../../menu-group';
+import { MenuGroup } from '../../menu-group';
 import MenuItem from '../../menu-item';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';