Fixing selectors

WordPress · Nov 26, 2021 · 0c9c9ad · 0c9c9ad
1 parent b9a142f
commit 0c9c9ad
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -86,7 +86,7 @@ export {
 } from './item-group';
 export { default as __experimentalInputControl } from './input-control';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
-export { default as MenuGroup } from './menu-group';
+export { MenuGroup } from './menu-group';
 export { default as MenuItem } from './menu-item';
 export { default as MenuItemsChoice } from './menu-items-choice';
 export { default as Modal } from './modal';

diff --git a/packages/components/src/menu-group/hook.ts b/packages/components/src/menu-group/hook.ts
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -31,15 +26,15 @@ export function useMenuGroup(
 		...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
 		);
 	}, [ className, hideSeparator ] );
+
 	const menuGroupLabelClassName = useMemo( () => {
 		return cx( styles.MenuGroupLabel, 'components-menu-group__label' );
 	}, [] );

diff --git a/packages/components/src/menu-group/styles.ts b/packages/components/src/menu-group/styles.ts
@@ -10,15 +10,19 @@ 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 ] };
+	& + .components-menu-group {
+		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;
+	& + .components-menu-group {
+		border-top: none;
+		margin-top: 0;
+		padding-top: 0;
+	}
 `;
 
 export const MenuGroupLabel = css`