Apply min-width via CSS class

WordPress · Sep 10, 2021 · b4cbea8 · b4cbea8
1 parent 674e6f2
commit b4cbea8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/packages/components/src/tools-panel/styles.js b/packages/components/src/tools-panel/styles.js
@@ -62,3 +62,7 @@ export const ToolsPanelItem = css`
 		max-width: 100%;
 	}
 `;
+
+export const DropdownMenu = css`
+	min-width: 200px;
+`;
diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -29,6 +29,7 @@ const getAriaLabel = ( label, isSelected ) => {
 
 const ToolsPanelHeader = ( props, forwardedRef ) => {
 	const {
+		dropdownMenuClassName,
 		hasMenuItems,
 		label: labelText,
 		menuItems,
@@ -51,7 +52,7 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
 				<DropdownMenu
 					icon={ moreVertical }
 					label={ labelText }
-					menuProps={ { style: { minWidth: '200px' } } }
+					menuProps={ { className: dropdownMenuClassName } }
 				>
 					{ ( { onClose } ) => (
 						<>

diff --git a/packages/components/src/tools-panel/tools-panel-header/hook.js b/packages/components/src/tools-panel/tools-panel-header/hook.js
@@ -22,10 +22,15 @@ export function useToolsPanelHeader( props ) {
 		return cx( styles.ToolsPanelHeader, className );
 	}, [ className ] );
 
+	const dropdownMenuClassName = useMemo( () => {
+		return cx( styles.DropdownMenu );
+	}, [] );
+
 	const { menuItems, hasMenuItems } = useToolsPanelContext();
 
 	return {
 		...otherProps,
+		dropdownMenuClassName,
 		hasMenuItems,
 		menuItems,
 		className: classes,