From 16d3c0ab606fcd31ece1a72d9908a102c7caabc8 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Tue, 31 Aug 2021 17:07:48 +1000 Subject: [PATCH] Merge header and label props for ToolsPanel --- .../src/components/block-inspector/index.js | 3 +-- .../src/components/inspector-controls/slot.js | 9 ++------- .../components/src/tools-panel/stories/index.js | 6 +----- packages/components/src/tools-panel/test/index.js | 7 +++---- .../src/tools-panel/tools-panel-header/README.md | 11 +++-------- .../tools-panel/tools-panel-header/component.js | 9 ++++----- .../src/tools-panel/tools-panel/README.md | 15 +++------------ .../src/tools-panel/tools-panel/component.js | 4 +--- .../src/components/sidebar/dimensions-panel.js | 6 +----- 9 files changed, 19 insertions(+), 51 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 14444c28928747..0b15ae17665ee9 100644 --- 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 = ( {
diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js index af34f792417f4f..d9dfba0af06b91 100644 --- 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 ( - + ); diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js index 3f40051135857a..b6b7b80f538f08 100644 --- 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 ( - + !! height } diff --git a/packages/components/src/tools-panel/test/index.js b/packages/components/src/tools-panel/test/index.js index d18a95dc26cbad..1a80837e1c926f 100644 --- 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 index da6840b8a2a1fa..3e64f104be0f7e 100644 --- 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 index b7e2e41634086b..09331069378493 100644 --- 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 (

- { header } + { labelText } { hasMenuItems && ( - + { ( { onClose } ) => ( <> diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md index 1269fa250d27be..a1ee6934a7fe67 100644 --- 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 ( - + { ! isPaddingDisabled && ( 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 index 99ac9baebec1fa..8f38889fbc8e3c 100644 --- 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 ) => { diff --git a/packages/edit-site/src/components/sidebar/dimensions-panel.js b/packages/edit-site/src/components/sidebar/dimensions-panel.js index 05b4aadd2d5bf0..62243b80c77806 100644 --- 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 ( - + { showPaddingControl && (