Merge header and label props for ToolsPanel

WordPress · Sep 2, 2021 · 16d3c0a · 16d3c0a
1 parent b101ce6
commit 16d3c0a
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 51 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -132,8 +132,7 @@ const BlockInspectorSingleBlock = ( {
 			<InspectorControls.Slot
 				__experimentalGroup="dimensions"
 				bubblesVirtually={ false }
-				header={ __( 'Dimensions' ) }
-				label={ __( 'Dimensions options' ) }
+				label={ __( 'Dimensions' ) }
 			/>
 			<div>
 				<AdvancedControls bubblesVirtually={ bubblesVirtually } />

diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js
@@ -14,7 +14,6 @@ export default function InspectorControlsSlot( {
 	__experimentalGroup: group = 'default',
 	bubblesVirtually = true,
 	label,
-	header,
 	...props
 } ) {
 	const Slot = groups[ group ]?.Slot;
@@ -29,13 +28,9 @@ export default function InspectorControlsSlot( {
 		return null;
 	}
 
-	if ( header ) {
+	if ( label ) {
 		return (
-			<BlockSupportToolsPanel
-				group={ group }
-				header={ header }
-				label={ label }
-			>
+			<BlockSupportToolsPanel group={ group } label={ label }>
 				<Slot { ...props } bubblesVirtually={ bubblesVirtually } />
 			</BlockSupportToolsPanel>
 		);

diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js
@@ -32,11 +32,7 @@ export const _default = () => {
 	return (
 		<PanelWrapperView>
 			<Panel>
-				<ToolsPanel
-					header="Tools Panel"
-					label="Display options"
-					resetAll={ resetAll }
-				>
+				<ToolsPanel label="Tools Panel" resetAll={ resetAll }>
 					<ToolsPanelItem
 						className="single-column"
 						hasValue={ () => !! height }

diff --git a/packages/components/src/tools-panel/test/index.js b/packages/components/src/tools-panel/test/index.js
@@ -12,8 +12,7 @@ const resetAll = jest.fn();
 
 // Default props for the tools panel.
 const defaultProps = {
-	header: 'Panel header',
-	label: 'Display options',
+	label: 'Panel header',
 	resetAll,
 };
 
@@ -231,9 +230,9 @@ describe( 'ToolsPanel', () => {
 			expect( menuItems[ 1 ] ).toHaveAttribute( 'aria-checked', 'false' );
 		} );
 
-		it( 'should render panel header', () => {
+		it( 'should render panel label as header text', () => {
 			renderPanel();
-			const header = screen.getByText( defaultProps.header );
+			const header = screen.getByText( defaultProps.label );
 
 			expect( header ).toBeInTheDocument();
 		} );

diff --git a/packages/components/src/tools-panel/tools-panel-header/README.md b/packages/components/src/tools-panel/tools-panel-header/README.md
@@ -18,18 +18,13 @@ This component is generated automatically by its parent
 
 ## Props
 
-### `header`: `string`
+### `label`: `string`
 
-Text to be displayed within the panel header.
+Text to be displayed within the panel header. It is also passed along as the
+`label` for the panel header's `DropdownMenu`.
 
 -   Required: Yes
 
-### `menuLabel`: `string`
-
-This is passed along as the `label` for the panel header's `DropdownMenu`.
-
--   Required: No
-
 ### `resetAll`: `function`
 
 The `resetAll` prop provides the callback to execute when the "Reset all" menu

diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -16,23 +16,22 @@ import { contextConnect } from '../../ui/context';
 const ToolsPanelHeader = ( props, forwardedRef ) => {
 	const {
 		hasMenuItems,
-		header,
+		label: labelText,
 		menuItems,
-		menuLabel,
 		resetAll,
 		toggleItem,
 		...headerProps
 	} = useToolsPanelHeader( props );
 
-	if ( ! header ) {
+	if ( ! labelText ) {
 		return null;
 	}
 
 	return (
 		<h2 { ...headerProps } ref={ forwardedRef }>
-			{ header }
+			{ labelText }
 			{ hasMenuItems && (
-				<DropdownMenu icon={ moreVertical } label={ menuLabel }>
+				<DropdownMenu icon={ moreVertical } label={ labelText }>
 					{ ( { onClose } ) => (
 						<>
 							<MenuGroup label={ __( 'Display options' ) }>

diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md
@@ -50,11 +50,7 @@ export function DimensionPanel( props ) {
 	};
 
 	return (
-		<ToolsPanel
-			header={ __( 'Dimensions' ) }
-			label={ __( 'Dimensions options' ) }
-			resetAll={ resetAll }
-		>
+		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
 			{ ! isPaddingDisabled && (
 				<ToolsPanelItem
 					hasValue={ () => hasPaddingValue( props ) }
@@ -71,15 +67,10 @@ export function DimensionPanel( props ) {
 
 ## Props
 
-### `header`: `string`
-
-Text to be displayed within the panel's header.
-
-- Required: Yes
-
 ### `label`: `string`
 
-The label for the panel's dropdown menu.
+Text to be displayed within the panel's header and as the aria label for the
+panel's dropdown menu.
 
 - Required: Yes
 

diff --git a/packages/components/src/tools-panel/tools-panel/component.js b/packages/components/src/tools-panel/tools-panel/component.js
@@ -10,7 +10,6 @@ import { contextConnect } from '../../ui/context';
 const ToolsPanel = ( props, forwardedRef ) => {
 	const {
 		children,
-		header,
 		label,
 		panelContext,
 		resetAllItems,
@@ -22,8 +21,7 @@ const ToolsPanel = ( props, forwardedRef ) => {
 		<View { ...toolsPanelProps } ref={ forwardedRef }>
 			<ToolsPanelContext.Provider value={ panelContext }>
 				<ToolsPanelHeader
-					header={ header }
-					menuLabel={ label }
+					label={ label }
 					resetAll={ resetAllItems }
 					toggleItem={ toggleItem }
 				/>

diff --git a/packages/edit-site/src/components/sidebar/dimensions-panel.js b/packages/edit-site/src/components/sidebar/dimensions-panel.js
@@ -122,11 +122,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 	};
 
 	return (
-		<ToolsPanel
-			label={ __( 'Dimensions options' ) }
-			header={ __( 'Dimensions' ) }
-			resetAll={ resetAll }
-		>
+		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
 			{ showPaddingControl && (
 				<ToolsPanelItem
 					hasValue={ hasPaddingValue }