From 15db909da876c2c2fdcc039b32b9951ce5b5d4f4 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 7 Feb 2023 00:50:42 +0100 Subject: [PATCH] Components: polish heading level component APIs (#47788) * ToolsPanel: mark `headingLevel` as optional, assign default value, add to README * Rename `paletteLabelLevel` to `paletteLabelHeadingLevel` * Sort props alphabetically * Sync READMEs, correct types * CHANGELOG --- packages/components/CHANGELOG.md | 4 ++++ .../components/src/color-palette/README.md | 7 +++++++ .../components/src/color-palette/types.ts | 12 +++++------ .../components/src/gradient-picker/README.md | 8 ++++++++ packages/components/src/palette-edit/index.js | 4 ++-- .../tools-panel/tools-panel-header/README.md | 7 +++++++ .../tools-panel/tools-panel-header/hook.ts | 10 ++++++---- .../src/tools-panel/tools-panel/README.md | 7 +++++++ .../src/tools-panel/tools-panel/hook.ts | 2 ++ packages/components/src/tools-panel/types.ts | 20 +++++++++++-------- .../global-styles/color-palette-panel.js | 6 +++--- .../global-styles/gradients-palette-panel.js | 2 +- 12 files changed, 65 insertions(+), 24 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index be8232e034f96..e23c719d11ae5 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- `ColorPalette`, `GradientPicker`, `PaletteEdit`, `ToolsPanel`: add new props to set a custom heading level ([43848](https://github.com/WordPress/gutenberg/pull/43848) and [#47788](https://github.com/WordPress/gutenberg/pull/47788)). + ### Internal - `ComboboxControl`: Convert to TypeScript ([#47581](https://github.com/WordPress/gutenberg/pull/47581)). diff --git a/packages/components/src/color-palette/README.md b/packages/components/src/color-palette/README.md index 870a5ef2d52f1..5db11051655b6 100644 --- a/packages/components/src/color-palette/README.md +++ b/packages/components/src/color-palette/README.md @@ -66,6 +66,13 @@ colors. - Required: No - Default: `false` +### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'` + +The heading level. + +- Required: No +- Default: `2` + ### `value`: `string` Currently active value. diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts index cf7f3e640447c..a5136341aa68a 100644 --- a/packages/components/src/color-palette/types.ts +++ b/packages/components/src/color-palette/types.ts @@ -72,6 +72,12 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & { * @default false */ enableAlpha?: boolean; + /** + * The heading level. + * + * @default 2 + */ + headingLevel?: HeadingSize; /** * Currently active value. */ @@ -82,10 +88,4 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & { * @default false */ __experimentalIsRenderedInSidebar?: boolean; - /** - * The heaeding level. - * - * @default 2 - */ - headingLevel?: HeadingSize; }; diff --git a/packages/components/src/gradient-picker/README.md b/packages/components/src/gradient-picker/README.md index 8def1ef24de59..33cb159b89056 100644 --- a/packages/components/src/gradient-picker/README.md +++ b/packages/components/src/gradient-picker/README.md @@ -101,3 +101,11 @@ Start opting into the new margin-free styles that will become the default in a f - Type: `Boolean` - Required: No - Default: `false` + +### headingLevel + +The heading level. + +- Type: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'` +- Required: No +- Default: `2` diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js index d90f02d8163e7..ef2abca3cc6b4 100644 --- a/packages/components/src/palette-edit/index.js +++ b/packages/components/src/palette-edit/index.js @@ -313,7 +313,7 @@ export default function PaletteEdit( { colors = EMPTY_ARRAY, onChange, paletteLabel, - paletteLabelLevel = 2, + paletteLabelHeadingLevel = 2, emptyMessage, canOnlyChangeValues, canReset, @@ -348,7 +348,7 @@ export default function PaletteEdit( { return ( - + { paletteLabel } 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 07a7544b6b143..e6164306dbee3 100644 --- a/packages/components/src/tools-panel/tools-panel-header/README.md +++ b/packages/components/src/tools-panel/tools-panel-header/README.md @@ -18,6 +18,13 @@ This component is generated automatically by its parent ## Props +### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'` + +The heading level of the panel's header. + +- Required: No +- Default: `2` + ### `label`: `string` Text to be displayed within the panel header. It is also passed along as the diff --git a/packages/components/src/tools-panel/tools-panel-header/hook.ts b/packages/components/src/tools-panel/tools-panel-header/hook.ts index b44dc5bc9f786..6682328810e33 100644 --- a/packages/components/src/tools-panel/tools-panel-header/hook.ts +++ b/packages/components/src/tools-panel/tools-panel-header/hook.ts @@ -15,10 +15,11 @@ import type { ToolsPanelHeaderProps } from '../types'; export function useToolsPanelHeader( props: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' > ) { - const { className, ...otherProps } = useContextSystem( - props, - 'ToolsPanelHeader' - ); + const { + className, + headingLevel = 2, + ...otherProps + } = useContextSystem( props, 'ToolsPanelHeader' ); const cx = useCx(); const classes = useMemo( () => { @@ -47,6 +48,7 @@ export function useToolsPanelHeader( dropdownMenuClassName, hasMenuItems, headingClassName, + headingLevel, menuItems, className: classes, }; diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md index 9b75f32f6645e..e04b774e9201b 100644 --- a/packages/components/src/tools-panel/tools-panel/README.md +++ b/packages/components/src/tools-panel/tools-panel/README.md @@ -156,6 +156,13 @@ wrapper element allowing the panel to lay them out accordingly. - Required: No +### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'` + +The heading level of the panel's header. + +- Required: No +- Default: `2` + ### `label`: `string` Text to be displayed within the panel's header and as the `aria-label` for the diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts index 2cbce4aad169f..0a3cf2dbec7ae 100644 --- a/packages/components/src/tools-panel/tools-panel/hook.ts +++ b/packages/components/src/tools-panel/tools-panel/hook.ts @@ -57,6 +57,7 @@ export function useToolsPanel( ) { const { className, + headingLevel = 2, resetAll, panelId, hasInnerWrapper, @@ -307,6 +308,7 @@ export function useToolsPanel( return { ...otherProps, + headingLevel, panelContext, resetAllItems, toggleItem, diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts index bb73d06ce50e0..ed846c900b18e 100644 --- a/packages/components/src/tools-panel/types.ts +++ b/packages/components/src/tools-panel/types.ts @@ -21,6 +21,12 @@ export type ToolsPanelProps = { * wrapper element allowing the panel to lay them out accordingly. */ hasInnerWrapper: boolean; + /** + * The heading level of the panel's header. + * + * @default 2 + */ + headingLevel?: HeadingSize; /** * Text to be displayed within the panel's header and as the `aria-label` * for the panel's dropdown menu. @@ -52,13 +58,15 @@ export type ToolsPanelProps = { * last visible `ToolsPanelItem` within the `ToolsPanel`. */ __experimentalLastVisibleItemClass?: string; - /** - * The heading level of the panel's header. - */ - headingLevel: HeadingSize; }; export type ToolsPanelHeaderProps = { + /** + * The heading level of the panel's header. + * + * @default 2 + */ + headingLevel?: HeadingSize; /** * Text to be displayed within the panel header. It is also passed along as * the `label` for the panel header's `DropdownMenu`. @@ -76,10 +84,6 @@ export type ToolsPanelHeaderProps = { * `onSelect` or `onDeselect` callbacks as appropriate. */ toggleItem: ( label: string ) => void; - /** - * The heading level of the panel's header. - */ - headingLevel: HeadingSize; }; export type ToolsPanelItem = { diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js index 0f5984b158fc0..c556878d614a0 100644 --- a/packages/edit-site/src/components/global-styles/color-palette-panel.js +++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js @@ -55,7 +55,7 @@ export default function ColorPalettePanel( { name } ) { colors={ themeColors } onChange={ setThemeColors } paletteLabel={ __( 'Theme' ) } - paletteLabelLevel={ 3 } + paletteLabelHeadingLevel={ 3 } /> ) } { !! defaultColors && @@ -67,14 +67,14 @@ export default function ColorPalettePanel( { name } ) { colors={ defaultColors } onChange={ setDefaultColors } paletteLabel={ __( 'Default' ) } - paletteLabelLevel={ 3 } + paletteLabelHeadingLevel={ 3 } /> ) } ) } { !! defaultGradients &&