From 19b8cec15bb128461e2e92f2103d63a838b952b0 Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 1 Feb 2023 17:08:05 -0800 Subject: [PATCH 01/18] remove from exclude list --- packages/components/tsconfig.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 005ddd0b4c568e..b2ef337c4221e0 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -55,7 +55,6 @@ "src/higher-order/with-focus-return", "src/higher-order/with-notices", "src/navigation", - "src/palette-edit", - "src/panel/body.js" + "src/palette-edit" ] } From aea03b6e423ea51dadd29bfaaf99674663273221 Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 1 Feb 2023 17:10:13 -0800 Subject: [PATCH 02/18] rename file to typescript --- packages/components/src/panel/{body.js => body.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/components/src/panel/{body.js => body.tsx} (100%) diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.tsx similarity index 100% rename from packages/components/src/panel/body.js rename to packages/components/src/panel/body.tsx From 07291cbcecc0831f55dc181ad34f138822195614 Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 2 Feb 2023 08:50:16 -0800 Subject: [PATCH 03/18] Add types and resolve typescript errors for PanelBody --- packages/components/src/panel/body.tsx | 20 ++++++----- packages/components/src/panel/types.ts | 48 ++++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 9 deletions(-) diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx index f47d0be42ad00f..99f327f554eb70 100644 --- a/packages/components/src/panel/body.tsx +++ b/packages/components/src/panel/body.tsx @@ -8,18 +8,20 @@ import classnames from 'classnames'; */ import { useReducedMotion, useMergeRefs } from '@wordpress/compose'; import { forwardRef, useRef } from '@wordpress/element'; +import type { ForwardedRef } from 'react'; import { chevronUp, chevronDown } from '@wordpress/icons'; /** * Internal dependencies */ +import type { PanelBodyProps } from './types'; import Button from '../button'; import Icon from '../icon'; import { useControlledState, useUpdateEffect } from '../utils'; const noop = () => {}; -export function PanelBody( +export function UnforwardedPanelBody( { buttonProps = {}, children, @@ -30,19 +32,20 @@ export function PanelBody( opened, title, scrollAfterOpen = true, - }, - ref + }: PanelBodyProps, + ref: ForwardedRef< HTMLDivElement > ) { const [ isOpened, setIsOpened ] = useControlledState( opened, { initial: initialOpen === undefined ? true : initialOpen, + fallback: '', } ); - const nodeRef = useRef(); + const nodeRef = useRef< HTMLElement >( null ); // Defaults to 'smooth' scrolling // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView const scrollBehavior = useReducedMotion() ? 'auto' : 'smooth'; - const handleOnToggle = ( event ) => { + const handleOnToggle = ( event: MouseEvent ) => { event.preventDefault(); const next = ! isOpened; setIsOpened( next ); @@ -50,7 +53,7 @@ export function PanelBody( }; // Ref is used so that the effect does not re-run upon scrollAfterOpen changing value. - const scrollAfterOpenRef = useRef(); + const scrollAfterOpenRef = useRef< boolean | null >( null ); scrollAfterOpenRef.current = scrollAfterOpen; // Runs after initial render. useUpdateEffect( () => { @@ -128,7 +131,6 @@ const PanelBodyTitle = forwardRef( } ); -const ForwardedComponent = forwardRef( PanelBody ); -ForwardedComponent.displayName = 'PanelBody'; +export const PanelBody = forwardRef( UnforwardedPanelBody ); -export default ForwardedComponent; +export default PanelBody; diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts index fe41ad378d62bb..b8d97d80dc84db 100644 --- a/packages/components/src/panel/types.ts +++ b/packages/components/src/panel/types.ts @@ -36,3 +36,51 @@ export type PanelRowProps = { */ children: React.ReactNode; }; + +export type PanelBodyProps = { + /** + * Props that are passed to the Button component in the PanelBodyTitle within the panel body. + * + * @default {}; + */ + buttonProps?: object; + /** + * The content to display within the panel body. + * If the children is a Function, it will be called with an object with the opened property and return its value. + */ + children?: React.ReactNode | ( ( {} ) => React.ReactNode ); + /** + * The CSS class to apply to the wrapper element. + */ + className?: string; + /** + * An icon to be shown next to the PanelBody title. + */ + icon?: JSX.Element; + /** + * Whether or not the panel will start open. + */ + initialOpen?: boolean; + /** + * A function that is called when the user clicks on the PanelBody title after the open state is changed. + * + * @default true; + */ + onToggle?: ( next: boolean ) => void; + /** + * If opened is true then the Panel will remain open regardless of the initialOpen prop and the panel will be prevented from being closed. + */ + opened?: boolean; + /** + * Title of the PanelBody. This shows even when it is closed. + */ + title?: string; + /** + * Scrolls the content into view when visible. + * This improves the UX when there are multiple stacking Panel Body components. + * components in a scrollable container. + * + * @default true; + */ + scrollAfterOpen?: boolean; +}; From 50b4881b85113a1b99e5a2fd6a9f45041269a9e5 Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 2 Feb 2023 08:53:02 -0800 Subject: [PATCH 04/18] Add types and resolve some errors for PanelBodyTitle --- packages/components/src/panel/body.tsx | 14 ++++++++++++-- packages/components/src/panel/types.ts | 12 ++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx index 99f327f554eb70..d8012b3c6e1ccc 100644 --- a/packages/components/src/panel/body.tsx +++ b/packages/components/src/panel/body.tsx @@ -14,7 +14,8 @@ import { chevronUp, chevronDown } from '@wordpress/icons'; /** * Internal dependencies */ -import type { PanelBodyProps } from './types'; +import type { PanelBodyProps, PanelBodyTitleProps } from './types'; +import type { WordPressComponentProps } from '../ui/context'; import Button from '../button'; import Icon from '../icon'; import { useControlledState, useUpdateEffect } from '../utils'; @@ -96,7 +97,16 @@ export function UnforwardedPanelBody( } const PanelBodyTitle = forwardRef( - ( { isOpened, icon, title, ...props }, ref ) => { + ( + { + isOpened, + icon, + title, + ...props + }: WordPressComponentProps< PanelBodyTitleProps, 'h2' > & + PanelBodyProps, + ref: ForwardedRef< any > + ) => { if ( ! title ) return null; return ( diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts index b8d97d80dc84db..3e52e3624dd2c3 100644 --- a/packages/components/src/panel/types.ts +++ b/packages/components/src/panel/types.ts @@ -84,3 +84,15 @@ export type PanelBodyProps = { */ scrollAfterOpen?: boolean; }; + +export type PanelBodyTitleProps = { + /** + * Whether or not the panel body is currently opened or not. + */ + isOpened?: boolean | ''; + /** + * A callback invoked when 'PanelBodyTitle' is clicked. It is used to + * toggle the body opened or closed. + */ + onClick: ( event: MouseEvent ) => void; +}; From 997a6f6d5c70f30ee7d275bbfcd4232d4447549f Mon Sep 17 00:00:00 2001 From: brookewp Date: Mon, 6 Feb 2023 19:55:30 -0800 Subject: [PATCH 05/18] Resolve remaining TS errors --- packages/components/src/panel/body.tsx | 31 ++++++++++++++------------ packages/components/src/panel/types.ts | 19 ++++++++++++++-- 2 files changed, 34 insertions(+), 16 deletions(-) diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx index d8012b3c6e1ccc..2c01850c010641 100644 --- a/packages/components/src/panel/body.tsx +++ b/packages/components/src/panel/body.tsx @@ -23,7 +23,10 @@ import { useControlledState, useUpdateEffect } from '../utils'; const noop = () => {}; export function UnforwardedPanelBody( - { + props: PanelBodyProps, + ref: ForwardedRef< HTMLDivElement > +) { + const { buttonProps = {}, children, className, @@ -33,13 +36,14 @@ export function UnforwardedPanelBody( opened, title, scrollAfterOpen = true, - }: PanelBodyProps, - ref: ForwardedRef< HTMLDivElement > -) { - const [ isOpened, setIsOpened ] = useControlledState( opened, { - initial: initialOpen === undefined ? true : initialOpen, - fallback: '', - } ); + } = props; + const [ isOpened, setIsOpened ] = useControlledState< boolean | undefined >( + opened, + { + initial: initialOpen === undefined ? true : initialOpen, + fallback: false, + } + ); const nodeRef = useRef< HTMLElement >( null ); // Defaults to 'smooth' scrolling @@ -84,10 +88,10 @@ export function UnforwardedPanelBody(
{ typeof children === 'function' ? children( { opened: isOpened } ) @@ -102,9 +106,8 @@ const PanelBodyTitle = forwardRef( isOpened, icon, title, - ...props - }: WordPressComponentProps< PanelBodyTitleProps, 'h2' > & - PanelBodyProps, + buttonProps, + }: WordPressComponentProps< PanelBodyTitleProps, 'button' >, ref: ForwardedRef< any > ) => { if ( ! title ) return null; @@ -115,7 +118,7 @@ const PanelBodyTitle = forwardRef( className="components-panel__body-toggle" aria-expanded={ isOpened } ref={ ref } - { ...props } + { ...buttonProps } > { /* Firefox + NVDA don't announce aria-expanded because the browser diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts index 3e52e3624dd2c3..26620d8e5a17f3 100644 --- a/packages/components/src/panel/types.ts +++ b/packages/components/src/panel/types.ts @@ -1,3 +1,8 @@ +/** + * Internal dependencies + */ +import type { ButtonProps } from '../button/types'; + export type PanelProps = { /** * The text that will be rendered as the title of the panel. @@ -43,7 +48,7 @@ export type PanelBodyProps = { * * @default {}; */ - buttonProps?: object; + buttonProps?: ButtonProps; /** * The content to display within the panel body. * If the children is a Function, it will be called with an object with the opened property and return its value. @@ -86,10 +91,20 @@ export type PanelBodyProps = { }; export type PanelBodyTitleProps = { + /** + * Props that are passed to the Button component in the PanelBodyTitle within the panel body. + * + * @default {}; + */ + buttonProps?: ButtonProps; + /** + * An icon to be shown next to the PanelBody title. + */ + icon?: JSX.Element; /** * Whether or not the panel body is currently opened or not. */ - isOpened?: boolean | ''; + isOpened?: boolean; /** * A callback invoked when 'PanelBodyTitle' is clicked. It is used to * toggle the body opened or closed. From 238db2bf959e1836141c6deabba370b31cb14973 Mon Sep 17 00:00:00 2001 From: brookewp Date: Mon, 6 Feb 2023 22:17:55 -0800 Subject: [PATCH 06/18] migrate stories to TS --- .../src/panel/stories/{index.js => index.tsx} | 22 ++++++++++++++----- packages/components/src/panel/types.ts | 8 +++---- 2 files changed, 20 insertions(+), 10 deletions(-) rename packages/components/src/panel/stories/{index.js => index.tsx} (76%) diff --git a/packages/components/src/panel/stories/index.js b/packages/components/src/panel/stories/index.tsx similarity index 76% rename from packages/components/src/panel/stories/index.js rename to packages/components/src/panel/stories/index.tsx index 29dab9b293bed3..b3c189d11cb888 100644 --- a/packages/components/src/panel/stories/index.js +++ b/packages/components/src/panel/stories/index.tsx @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; + /** * Internal dependencies */ @@ -11,7 +16,7 @@ import InputControl from '../../input-control'; */ import { wordpress } from '@wordpress/icons'; -export default { +const meta: ComponentMeta< typeof Panel > = { title: 'Components/Panel', component: Panel, subcomponents: { PanelRow, PanelBody }, @@ -23,10 +28,13 @@ export default { docs: { source: { state: 'open' } }, }, }; +export default meta; -const Template = ( props ) => ; +const Template: ComponentStory< typeof Panel > = ( props ) => ( + +); -export const Default = Template.bind( {} ); +export const Default: ComponentStory< typeof Panel > = Template.bind( {} ); Default.args = { header: 'My panel', children: ( @@ -61,7 +69,7 @@ Default.args = { * `PanelRow` is a generic container for rows within a `PanelBody`. * It is a flex container with a top margin for spacing. */ -export const _PanelRow = Template.bind( {} ); +export const _PanelRow: ComponentStory< typeof Panel > = Template.bind( {} ); _PanelRow.args = { children: ( @@ -78,7 +86,9 @@ _PanelRow.args = { ), }; -export const DisabledSection = Template.bind( {} ); +export const DisabledSection: ComponentStory< typeof Panel > = Template.bind( + {} +); DisabledSection.args = { ...Default.args, children: ( @@ -90,7 +100,7 @@ DisabledSection.args = { ), }; -export const WithIcon = Template.bind( {} ); +export const WithIcon: ComponentStory< typeof Panel > = Template.bind( {} ); WithIcon.args = { ...Default.args, children: ( diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts index 26620d8e5a17f3..66da8e71106075 100644 --- a/packages/components/src/panel/types.ts +++ b/packages/components/src/panel/types.ts @@ -46,7 +46,7 @@ export type PanelBodyProps = { /** * Props that are passed to the Button component in the PanelBodyTitle within the panel body. * - * @default {}; + * @default {} */ buttonProps?: ButtonProps; /** @@ -69,7 +69,7 @@ export type PanelBodyProps = { /** * A function that is called when the user clicks on the PanelBody title after the open state is changed. * - * @default true; + * @default true */ onToggle?: ( next: boolean ) => void; /** @@ -85,7 +85,7 @@ export type PanelBodyProps = { * This improves the UX when there are multiple stacking Panel Body components. * components in a scrollable container. * - * @default true; + * @default true */ scrollAfterOpen?: boolean; }; @@ -94,7 +94,7 @@ export type PanelBodyTitleProps = { /** * Props that are passed to the Button component in the PanelBodyTitle within the panel body. * - * @default {}; + * @default {} */ buttonProps?: ButtonProps; /** From 696b207aa2d60977065eabf2ca76d6c7fc1f8c08 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 7 Feb 2023 00:14:18 -0800 Subject: [PATCH 07/18] Rename test to TS --- packages/components/src/panel/test/{body.js => body.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/components/src/panel/test/{body.js => body.tsx} (100%) diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.tsx similarity index 100% rename from packages/components/src/panel/test/body.js rename to packages/components/src/panel/test/body.tsx From ea53905c72c4cd8386246e85339e1fc8414f4fd0 Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 8 Feb 2023 21:13:36 -0800 Subject: [PATCH 08/18] Update snapshots --- .../src/panel/test/__snapshots__/{body.js.snap => body.tsx.snap} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/components/src/panel/test/__snapshots__/{body.js.snap => body.tsx.snap} (100%) diff --git a/packages/components/src/panel/test/__snapshots__/body.js.snap b/packages/components/src/panel/test/__snapshots__/body.tsx.snap similarity index 100% rename from packages/components/src/panel/test/__snapshots__/body.js.snap rename to packages/components/src/panel/test/__snapshots__/body.tsx.snap From ae4c166bef745a82f3ecd03bab14568816cfb021 Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 9 Feb 2023 22:30:14 -0800 Subject: [PATCH 09/18] Resolve test errors --- packages/components/src/panel/body.tsx | 4 ++- packages/components/src/panel/test/body.tsx | 34 +++++++++------------ packages/components/src/panel/types.ts | 2 +- 3 files changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx index 2c01850c010641..7f97f80b0d834a 100644 --- a/packages/components/src/panel/body.tsx +++ b/packages/components/src/panel/body.tsx @@ -50,7 +50,7 @@ export function UnforwardedPanelBody( // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView const scrollBehavior = useReducedMotion() ? 'auto' : 'smooth'; - const handleOnToggle = ( event: MouseEvent ) => { + const handleOnToggle = ( event: React.MouseEvent ) => { event.preventDefault(); const next = ! isOpened; setIsOpened( next ); @@ -107,6 +107,7 @@ const PanelBodyTitle = forwardRef( icon, title, buttonProps, + onClick, }: WordPressComponentProps< PanelBodyTitleProps, 'button' >, ref: ForwardedRef< any > ) => { @@ -118,6 +119,7 @@ const PanelBodyTitle = forwardRef( className="components-panel__body-toggle" aria-expanded={ isOpened } ref={ ref } + { ...{ onClick } } { ...buttonProps } > { /* diff --git a/packages/components/src/panel/test/body.tsx b/packages/components/src/panel/test/body.tsx index 1f282256fb2616..226c6b2b502e1b 100644 --- a/packages/components/src/panel/test/body.tsx +++ b/packages/components/src/panel/test/body.tsx @@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event'; * Internal dependencies */ import { PanelBody } from '../body'; +import type { PanelBodyProps } from '../types'; describe( 'PanelBody', () => { describe( 'basic rendering', () => { @@ -50,7 +51,7 @@ describe( 'PanelBody', () => { it( 'should call the children function, if specified', () => { const { rerender } = render( - { ( { opened } ) => ( + { ( { opened }: PanelBodyProps ) => ( @@ -66,7 +67,7 @@ describe( 'PanelBody', () => { rerender( - { ( { opened } ) => ( + { ( { opened }: PanelBodyProps ) => ( @@ -89,9 +90,7 @@ describe( 'PanelBody', () => { ); - let panelContent = screen.getByTestId( 'inner-content' ); - - expect( panelContent ).toBeVisible(); + expect( screen.getByTestId( 'inner-content' ) ).toBeVisible(); rerender( @@ -99,9 +98,9 @@ describe( 'PanelBody', () => { ); - panelContent = screen.queryByTestId( 'inner-content' ); - - expect( panelContent ).not.toBeInTheDocument(); + expect( + screen.queryByTestId( 'inner-content' ) + ).not.toBeInTheDocument(); rerender( @@ -109,9 +108,7 @@ describe( 'PanelBody', () => { ); - panelContent = screen.getByTestId( 'inner-content' ); - - expect( panelContent ).toBeVisible(); + expect( screen.getByTestId( 'inner-content' ) ).toBeVisible(); } ); it( 'should toggle when clicking header', async () => { @@ -123,22 +120,21 @@ describe( 'PanelBody', () => { ); - let panelContent = screen.queryByTestId( 'inner-content' ); const panelToggle = screen.getByRole( 'button', { name: 'Panel' } ); - expect( panelContent ).not.toBeInTheDocument(); + expect( + screen.queryByTestId( 'inner-content' ) + ).not.toBeInTheDocument(); await user.click( panelToggle ); - panelContent = screen.getByTestId( 'inner-content' ); - - expect( panelContent ).toBeVisible(); + expect( screen.getByTestId( 'inner-content' ) ).toBeVisible(); await user.click( panelToggle ); - panelContent = screen.queryByTestId( 'inner-content' ); - - expect( panelContent ).not.toBeInTheDocument(); + expect( + screen.queryByTestId( 'inner-content' ) + ).not.toBeInTheDocument(); } ); it( 'should pass button props to panel title', async () => { diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts index 66da8e71106075..20337043664cfe 100644 --- a/packages/components/src/panel/types.ts +++ b/packages/components/src/panel/types.ts @@ -109,5 +109,5 @@ export type PanelBodyTitleProps = { * A callback invoked when 'PanelBodyTitle' is clicked. It is used to * toggle the body opened or closed. */ - onClick: ( event: MouseEvent ) => void; + onClick: ( event: React.MouseEvent ) => void; }; From 54c1d5742acd76ef1c75279c97843cd5a396a52d Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 14 Feb 2023 19:08:43 -0800 Subject: [PATCH 10/18] Changes based on PR feedback --- packages/components/src/panel/body.tsx | 17 ++++------ packages/components/src/panel/test/body.tsx | 5 ++- packages/components/src/panel/types.ts | 36 +++++++++++---------- 3 files changed, 28 insertions(+), 30 deletions(-) diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx index 7f97f80b0d834a..329be31f375f84 100644 --- a/packages/components/src/panel/body.tsx +++ b/packages/components/src/panel/body.tsx @@ -8,7 +8,6 @@ import classnames from 'classnames'; */ import { useReducedMotion, useMergeRefs } from '@wordpress/compose'; import { forwardRef, useRef } from '@wordpress/element'; -import type { ForwardedRef } from 'react'; import { chevronUp, chevronDown } from '@wordpress/icons'; /** @@ -24,7 +23,7 @@ const noop = () => {}; export function UnforwardedPanelBody( props: PanelBodyProps, - ref: ForwardedRef< HTMLDivElement > + ref: React.ForwardedRef< HTMLDivElement > ) { const { buttonProps = {}, @@ -58,7 +57,7 @@ export function UnforwardedPanelBody( }; // Ref is used so that the effect does not re-run upon scrollAfterOpen changing value. - const scrollAfterOpenRef = useRef< boolean | null >( null ); + const scrollAfterOpenRef = useRef< boolean | undefined >( undefined ); scrollAfterOpenRef.current = scrollAfterOpen; // Runs after initial render. useUpdateEffect( () => { @@ -91,10 +90,10 @@ export function UnforwardedPanelBody( isOpened={ Boolean( isOpened ) } onClick={ handleOnToggle } title={ title } - buttonProps={ buttonProps } + { ...buttonProps } /> { typeof children === 'function' - ? children( { opened: isOpened } ) + ? children( { opened: Boolean( isOpened ) } ) : isOpened && children }
); @@ -106,10 +105,9 @@ const PanelBodyTitle = forwardRef( isOpened, icon, title, - buttonProps, - onClick, + ...props }: WordPressComponentProps< PanelBodyTitleProps, 'button' >, - ref: ForwardedRef< any > + ref: React.ForwardedRef< any > ) => { if ( ! title ) return null; @@ -119,8 +117,7 @@ const PanelBodyTitle = forwardRef( className="components-panel__body-toggle" aria-expanded={ isOpened } ref={ ref } - { ...{ onClick } } - { ...buttonProps } + { ...props } > { /* Firefox + NVDA don't announce aria-expanded because the browser diff --git a/packages/components/src/panel/test/body.tsx b/packages/components/src/panel/test/body.tsx index 226c6b2b502e1b..fb745f2c602db7 100644 --- a/packages/components/src/panel/test/body.tsx +++ b/packages/components/src/panel/test/body.tsx @@ -8,7 +8,6 @@ import userEvent from '@testing-library/user-event'; * Internal dependencies */ import { PanelBody } from '../body'; -import type { PanelBodyProps } from '../types'; describe( 'PanelBody', () => { describe( 'basic rendering', () => { @@ -51,7 +50,7 @@ describe( 'PanelBody', () => { it( 'should call the children function, if specified', () => { const { rerender } = render( - { ( { opened }: PanelBodyProps ) => ( + { ( { opened } ) => ( @@ -67,7 +66,7 @@ describe( 'PanelBody', () => { rerender( - { ( { opened }: PanelBodyProps ) => ( + { ( { opened } ) => ( diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts index 20337043664cfe..ef2fc65df15f3e 100644 --- a/packages/components/src/panel/types.ts +++ b/packages/components/src/panel/types.ts @@ -1,7 +1,8 @@ /** * Internal dependencies */ -import type { ButtonProps } from '../button/types'; +import type { ButtonAsButtonProps } from '../button/types'; +import type { WordPressComponentProps } from '../ui/context'; export type PanelProps = { /** @@ -44,16 +45,24 @@ export type PanelRowProps = { export type PanelBodyProps = { /** - * Props that are passed to the Button component in the PanelBodyTitle within the panel body. + * Props that are passed to the `Button` component in title within the + * `PanelBody`. * * @default {} */ - buttonProps?: ButtonProps; + buttonProps?: WordPressComponentProps< + Omit< ButtonAsButtonProps, 'icon' >, + 'button', + false + >; /** - * The content to display within the panel body. - * If the children is a Function, it will be called with an object with the opened property and return its value. + * The content to display in the `PanelBody`.If a function is provided for + * this prop, it will receive an object with the `opened` prop as an argument. */ - children?: React.ReactNode | ( ( {} ) => React.ReactNode ); + children?: + | React.ReactNode + | ( ( props: { opened: boolean } ) => React.ReactNode ); + /** * The CSS class to apply to the wrapper element. */ @@ -69,7 +78,7 @@ export type PanelBodyProps = { /** * A function that is called when the user clicks on the PanelBody title after the open state is changed. * - * @default true + * @default noop */ onToggle?: ( next: boolean ) => void; /** @@ -90,13 +99,7 @@ export type PanelBodyProps = { scrollAfterOpen?: boolean; }; -export type PanelBodyTitleProps = { - /** - * Props that are passed to the Button component in the PanelBodyTitle within the panel body. - * - * @default {} - */ - buttonProps?: ButtonProps; +export type PanelBodyTitleProps = Omit< ButtonAsButtonProps, 'icon' > & { /** * An icon to be shown next to the PanelBody title. */ @@ -106,8 +109,7 @@ export type PanelBodyTitleProps = { */ isOpened?: boolean; /** - * A callback invoked when 'PanelBodyTitle' is clicked. It is used to - * toggle the body opened or closed. + * The title text. */ - onClick: ( event: React.MouseEvent ) => void; + title?: string; }; From 21ec552d3062395a3e57ccec333bcc725252be22 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 14 Feb 2023 19:14:13 -0800 Subject: [PATCH 11/18] Update changelog --- packages/components/CHANGELOG.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index de726e6106e9bc..6fd50c7364c625 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,7 +10,7 @@ ### Enhancements -- `ToolsPanel`: Separate reset all filter registration from items registration and support global resets ([#48123](https://github.com/WordPress/gutenberg/pull/48123#pullrequestreview-1308386926)). +- `ToolsPanel`: Separate reset all filter registration from items registration and support global resets ([#48123](https://github.com/WordPress/gutenberg/pull/48123#pullrequestreview-1308386926)). ### Internal @@ -31,10 +31,10 @@ ### 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)). +- `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)). - `ColorPalette`: ensure text label contrast checking works with CSS variables ([#47373](https://github.com/WordPress/gutenberg/pull/47373)). -- `Navigator`: Support dynamic paths with parameters ([#47827](https://github.com/WordPress/gutenberg/pull/47827)). -- `Navigator`: Support hierarchical paths navigation and add `NavigatorToParentButton` component ([#47883](https://github.com/WordPress/gutenberg/pull/47883)). +- `Navigator`: Support dynamic paths with parameters ([#47827](https://github.com/WordPress/gutenberg/pull/47827)). +- `Navigator`: Support hierarchical paths navigation and add `NavigatorToParentButton` component ([#47883](https://github.com/WordPress/gutenberg/pull/47883)). ### Internal @@ -54,6 +54,7 @@ - `Navigator`: add more pattern matching tests, refine existing tests ([47910](https://github.com/WordPress/gutenberg/pull/47910)). - `ToolsPanel`: Refactor Storybook examples to TypeScript ([47944](https://github.com/WordPress/gutenberg/pull/47944)). - `ToolsPanel`: Refactor unit tests to TypeScript ([48275](https://github.com/WordPress/gutenberg/pull/48275)). +- `PanelBody`: Convert to TypeScript ([#47702](https://github.com/WordPress/gutenberg/pull/47702)). ## 23.3.0 (2023-02-01) @@ -63,7 +64,7 @@ ### Enhancements -- `Dropdown`: deprecate `position` prop, use `popoverProps` instead ([46865](https://github.com/WordPress/gutenberg/pull/46865)). +- `Dropdown`: deprecate `position` prop, use `popoverProps` instead ([46865](https://github.com/WordPress/gutenberg/pull/46865)). - `Button`: improve padding for buttons with icon and text. ([46764](https://github.com/WordPress/gutenberg/pull/46764)). - `ColorPalette`: Use computed color when css variable is passed to `ColorPicker` ([47181](https://github.com/WordPress/gutenberg/pull/47181)). - `Popover`: add `overlay` option to the `placement` prop ([47004](https://github.com/WordPress/gutenberg/pull/47004)). @@ -76,7 +77,7 @@ - `ColorListPicker`: Convert to TypeScript ([#46358](https://github.com/WordPress/gutenberg/pull/46358)). - `KeyboardShortcuts`: Convert to TypeScript ([#47429](https://github.com/WordPress/gutenberg/pull/47429)). - `ColorPalette`, `BorderControl`, `GradientPicker`: refine types and logic around single vs multiple palettes - ([#47384](https://github.com/WordPress/gutenberg/pull/47384)). + ([#47384](https://github.com/WordPress/gutenberg/pull/47384)). - `Button`: Convert to TypeScript ([#46997](https://github.com/WordPress/gutenberg/pull/46997)). - `QueryControls`: Convert to TypeScript ([#46721](https://github.com/WordPress/gutenberg/pull/46721)). - `TreeGrid`: Convert to TypeScript ([#47516](https://github.com/WordPress/gutenberg/pull/47516)). @@ -91,6 +92,7 @@ ## 23.2.0 (2023-01-11) ### Internal + - `AlignmentMatrixControl`: Update center cell label to 'Center' instead of 'Center Center' ([#46852](https://github.com/WordPress/gutenberg/pull/46852)). - `Toolbar`: move all subcomponents under the same folder ([46951](https://github.com/WordPress/gutenberg/pull/46951)). - `Dashicon`: remove unnecessary type for `className` prop ([46849](https://github.com/WordPress/gutenberg/pull/46849)). From 7d99c1ada3c8d6d90daab010383276bc7de144bb Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 15 Feb 2023 19:21:24 -0800 Subject: [PATCH 12/18] Update JSDoc descriptions --- packages/components/src/panel/types.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts index ef2fc65df15f3e..8d580657685e0a 100644 --- a/packages/components/src/panel/types.ts +++ b/packages/components/src/panel/types.ts @@ -68,7 +68,7 @@ export type PanelBodyProps = { */ className?: string; /** - * An icon to be shown next to the PanelBody title. + * An icon to be shown next to the title. */ icon?: JSX.Element; /** @@ -76,23 +76,24 @@ export type PanelBodyProps = { */ initialOpen?: boolean; /** - * A function that is called when the user clicks on the PanelBody title after the open state is changed. + * A function that is called any time the component is toggled from its closed + * state to its opened state, or vice versa. * * @default noop */ onToggle?: ( next: boolean ) => void; /** - * If opened is true then the Panel will remain open regardless of the initialOpen prop and the panel will be prevented from being closed. + * When set to `true`, the component will remain open regardless of the + * `initialOpen` prop and the panel will be prevented from being closed. */ opened?: boolean; /** - * Title of the PanelBody. This shows even when it is closed. + * Title text. It shows even when it is closed. */ title?: string; /** - * Scrolls the content into view when visible. - * This improves the UX when there are multiple stacking Panel Body components. - * components in a scrollable container. + * Scrolls the content into view when visible. This improves the UX when + * multiple `PanelBody` are stacked in a scrollable container. * * @default true */ @@ -101,11 +102,11 @@ export type PanelBodyProps = { export type PanelBodyTitleProps = Omit< ButtonAsButtonProps, 'icon' > & { /** - * An icon to be shown next to the PanelBody title. + * An icon to be shown next to the title. */ icon?: JSX.Element; /** - * Whether or not the panel body is currently opened or not. + * Whether or not the `PanelBody` is currently opened or not. */ isOpened?: boolean; /** From dab23360a16acc48f2a489d3a3d3ea4591a92efc Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 17 Feb 2023 17:26:23 -0800 Subject: [PATCH 13/18] Update readme descriptions to match JSDocs --- packages/components/src/panel/README.md | 29 ++++++++++++++++++------- packages/components/src/panel/types.ts | 2 +- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md index 04cf6d6eeeda1e..15957dd5a88347 100644 --- a/packages/components/src/panel/README.md +++ b/packages/components/src/panel/README.md @@ -101,38 +101,41 @@ The `PanelBody` creates a collapsible container that can be toggled open or clos ###### title -Title of the `PanelBody`. This shows even when it is closed. +Title text. It shows even when it is closed. - Type: `String` - Required: No ###### opened -If opened is true then the `Panel` will remain open regardless of the `initialOpen` prop and the panel will be prevented from being closed. +When set to `true`, the component will remain open regardless of the `initialOpen` prop and the +panel will be prevented from being closed. - Type: `Boolean` - Required: No ###### className -The class that will be added with `components-panel__body`, if the panel is currently open, the `is-opened` class will also be passed to the classes of the wrapper div. If no `className` is passed then only `components-panel__body` and `is-opened` is used. +The CSS class to apply to the wrapper element. - Type: `String` - Required: No ###### icon -An icon to be shown next to the `PanelBody` title. +An icon to be shown next to the title. -- Type: `String` +- Type: `JSX.Element` - Required: No ###### onToggle -A function that is called when the user clicks on the `PanelBody` title after the open state is changed. +A function that is called any time the component is toggled from its closed state to its +opened state, or vice versa. - Type: `function` - Required: No +- Default: noop ###### initialOpen @@ -144,19 +147,29 @@ Whether or not the panel will start open. ###### children -The rendered children. If the children is a `Function`, it will be called with an object with the `opened` property and return its value. +The content to display in the `PanelBody`.If a function is provided for this prop, it will +receive an object with the `opened` prop as an argument. - Type: `React.ReactNode | Function` - Required: No ###### buttonProps -Props that are passed to the `Button` component in the `PanelBodyTitle` within the panel body. +Props that are passed to the `Button` component in title within the `PanelBody`. - Type: `Object` - Required: No - Default: `{}` +###### scrollAfterOpen + +Scrolls the content into view when visible. This improves the UX when multiple `PanelBody` +components are stacked in a scrollable container. + +- Type: `Boolean` +- Required: No +- Default: true + --- #### PanelRow diff --git a/packages/components/src/panel/types.ts b/packages/components/src/panel/types.ts index 8d580657685e0a..9059aad53fa0a1 100644 --- a/packages/components/src/panel/types.ts +++ b/packages/components/src/panel/types.ts @@ -93,7 +93,7 @@ export type PanelBodyProps = { title?: string; /** * Scrolls the content into view when visible. This improves the UX when - * multiple `PanelBody` are stacked in a scrollable container. + * multiple `PanelBody` components are stacked in a scrollable container. * * @default true */ From 7749df22efad48c2b3351748ea48a98497d84878 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 17 Feb 2023 17:29:48 -0800 Subject: [PATCH 14/18] Update types and defaults --- packages/components/src/panel/README.md | 32 ++++++++++--------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md index 15957dd5a88347..fd0900de704491 100644 --- a/packages/components/src/panel/README.md +++ b/packages/components/src/panel/README.md @@ -99,53 +99,47 @@ The `PanelBody` creates a collapsible container that can be toggled open or clos ##### Props -###### title +###### title: `string` Title text. It shows even when it is closed. -- Type: `String` - Required: No -###### opened +###### opened: `boolean` When set to `true`, the component will remain open regardless of the `initialOpen` prop and the panel will be prevented from being closed. -- Type: `Boolean` - Required: No -###### className +###### className: `string` The CSS class to apply to the wrapper element. -- Type: `String` - Required: No -###### icon +###### icon: `JSX.Element` An icon to be shown next to the title. -- Type: `JSX.Element` - Required: No -###### onToggle +###### onToggle: `( next: boolean ) => void;` A function that is called any time the component is toggled from its closed state to its opened state, or vice versa. -- Type: `function` - Required: No -- Default: noop +- Default: `noop` -###### initialOpen +###### initialOpen: `boolean` Whether or not the panel will start open. -- Type: `Boolean` - Required: No -- Default: true +- Default: `true` -###### children +###### children: `| React.ReactNode | ( ( props: { opened: boolean } ) => React.ReactNode )` The content to display in the `PanelBody`.If a function is provided for this prop, it will receive an object with the `opened` prop as an argument. @@ -153,22 +147,20 @@ receive an object with the `opened` prop as an argument. - Type: `React.ReactNode | Function` - Required: No -###### buttonProps +###### buttonProps: `WordPressComponentProps, 'button', false>` Props that are passed to the `Button` component in title within the `PanelBody`. -- Type: `Object` - Required: No - Default: `{}` -###### scrollAfterOpen +###### scrollAfterOpen: `boolean` Scrolls the content into view when visible. This improves the UX when multiple `PanelBody` components are stacked in a scrollable container. -- Type: `Boolean` - Required: No -- Default: true +- Default: `true` --- From 742a87e8f6431c14808c113c73828957e949f4df Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 17 Feb 2023 17:38:42 -0800 Subject: [PATCH 15/18] Match other panel components descriptions to JSDocs --- packages/components/src/panel/README.md | 38 +++++++++++++++++-------- 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md index fd0900de704491..f69079e9fc1261 100644 --- a/packages/components/src/panel/README.md +++ b/packages/components/src/panel/README.md @@ -77,18 +77,23 @@ const MyPanel = () => ( ##### Props -###### className +###### header:`string` -The class that will be added with `components-panel`. If no `className` is passed only `components-panel__body` and `is-opened` is used. +The text that will be rendered as the title of the panel. Text will be rendered inside an +`

` tag. -- Type: `String` - Required: No -###### header +###### className: `string` + +The CSS class to apply to the wrapper element. + +- Required: No + +###### children: `React.ReactNode` -Title of the `Panel`. Text will be rendered inside an `

` tag. +The content to display within the panel row. -- Type: `String` - Required: No --- @@ -144,7 +149,6 @@ Whether or not the panel will start open. The content to display in the `PanelBody`.If a function is provided for this prop, it will receive an object with the `opened` prop as an argument. -- Type: `React.ReactNode | Function` - Required: No ###### buttonProps: `WordPressComponentProps, 'button', false>` @@ -170,11 +174,16 @@ components are stacked in a scrollable container. ##### Props -###### className +###### className: `string` + +The CSS class to apply to the wrapper element. + +- Required: No + +###### children: `React.ReactNode` -The class that will be added with `components-panel__row`. to the classes of the wrapper div. If no `className` is passed only `components-panel__row` is used. +The content to display within the panel row. -- Type: `String` - Required: No ##### Ref @@ -191,11 +200,16 @@ PanelRow accepts a forwarded ref that will be added to the wrapper div. Usage: ##### Props -###### label +###### label: `string` The text that will be rendered as the title of the `Panel`. Will be rendered in an `

` tag. -- Type: `String` +- Required: No + +###### children: `React.ReactNode` + +The content to display within the panel row. + - Required: No ## Related components From 9d491d9354333f8c6862913932fc3d3ef438fddd Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 23 Feb 2023 23:21:01 -0800 Subject: [PATCH 16/18] Remove unnecessary initialvalue based on feedback --- packages/components/src/panel/body.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/panel/body.tsx b/packages/components/src/panel/body.tsx index 329be31f375f84..f5ea844754cddd 100644 --- a/packages/components/src/panel/body.tsx +++ b/packages/components/src/panel/body.tsx @@ -57,7 +57,7 @@ export function UnforwardedPanelBody( }; // Ref is used so that the effect does not re-run upon scrollAfterOpen changing value. - const scrollAfterOpenRef = useRef< boolean | undefined >( undefined ); + const scrollAfterOpenRef = useRef< boolean | undefined >(); scrollAfterOpenRef.current = scrollAfterOpen; // Runs after initial render. useUpdateEffect( () => { From 35a3c2fe7b0bf27a089d4f0f14803716c66d1227 Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 23 Feb 2023 23:21:28 -0800 Subject: [PATCH 17/18] Readme fixes based on feedback --- packages/components/src/panel/README.md | 35 ++++++++++++------------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md index f69079e9fc1261..72336188d5dd71 100644 --- a/packages/components/src/panel/README.md +++ b/packages/components/src/panel/README.md @@ -77,20 +77,20 @@ const MyPanel = () => ( ##### Props -###### header:`string` +###### `header`: `string` The text that will be rendered as the title of the panel. Text will be rendered inside an `

` tag. - Required: No -###### className: `string` +###### `className`: `string` The CSS class to apply to the wrapper element. - Required: No -###### children: `React.ReactNode` +###### `children`: `React.ReactNode` The content to display within the panel row. @@ -104,32 +104,32 @@ The `PanelBody` creates a collapsible container that can be toggled open or clos ##### Props -###### title: `string` +###### `title`: `string` Title text. It shows even when it is closed. - Required: No -###### opened: `boolean` +###### `opened`: `boolean` When set to `true`, the component will remain open regardless of the `initialOpen` prop and the panel will be prevented from being closed. - Required: No -###### className: `string` +###### `className`: `string` The CSS class to apply to the wrapper element. - Required: No -###### icon: `JSX.Element` +###### `icon`: `JSX.Element` An icon to be shown next to the title. - Required: No -###### onToggle: `( next: boolean ) => void;` +###### `onToggle`: `( next: boolean ) => void;` A function that is called any time the component is toggled from its closed state to its opened state, or vice versa. @@ -137,28 +137,27 @@ opened state, or vice versa. - Required: No - Default: `noop` -###### initialOpen: `boolean` +###### `initialOpen`: `boolean` Whether or not the panel will start open. - Required: No - Default: `true` -###### children: `| React.ReactNode | ( ( props: { opened: boolean } ) => React.ReactNode )` +###### `children`: `| React.ReactNode | ( ( props: { opened: boolean } ) => React.ReactNode )` -The content to display in the `PanelBody`.If a function is provided for this prop, it will -receive an object with the `opened` prop as an argument. +The content to display in the `PanelBody`. If a function is provided for this prop, it will receive an object with the `opened` prop as an argument. - Required: No -###### buttonProps: `WordPressComponentProps, 'button', false>` +###### `buttonProps`: `WordPressComponentProps, 'button', false>` Props that are passed to the `Button` component in title within the `PanelBody`. - Required: No - Default: `{}` -###### scrollAfterOpen: `boolean` +###### `scrollAfterOpen`: `boolean` Scrolls the content into view when visible. This improves the UX when multiple `PanelBody` components are stacked in a scrollable container. @@ -174,13 +173,13 @@ components are stacked in a scrollable container. ##### Props -###### className: `string` +###### `className`: `string` The CSS class to apply to the wrapper element. - Required: No -###### children: `React.ReactNode` +###### `children`: `React.ReactNode` The content to display within the panel row. @@ -200,13 +199,13 @@ PanelRow accepts a forwarded ref that will be added to the wrapper div. Usage: ##### Props -###### label: `string` +###### `label`: `string` The text that will be rendered as the title of the `Panel`. Will be rendered in an `

` tag. - Required: No -###### children: `React.ReactNode` +###### `children`: `React.ReactNode` The content to display within the panel row. From ecbb8faf81416e8eaee2d5bc26a7cd48d39ef00e Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 2 Mar 2023 10:54:37 -0800 Subject: [PATCH 18/18] Resolve remaining feedback requests --- packages/components/CHANGELOG.md | 5 ++--- packages/components/src/panel/README.md | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 6fd50c7364c625..249ae1cfa617a8 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Internal - `Guide`: Convert to TypeScript ([#47493](https://github.com/WordPress/gutenberg/pull/47493)). +- `PanelBody`: Convert to TypeScript ([#47702](https://github.com/WordPress/gutenberg/pull/47702)). ## 23.5.0 (2023-03-01) @@ -54,7 +55,6 @@ - `Navigator`: add more pattern matching tests, refine existing tests ([47910](https://github.com/WordPress/gutenberg/pull/47910)). - `ToolsPanel`: Refactor Storybook examples to TypeScript ([47944](https://github.com/WordPress/gutenberg/pull/47944)). - `ToolsPanel`: Refactor unit tests to TypeScript ([48275](https://github.com/WordPress/gutenberg/pull/48275)). -- `PanelBody`: Convert to TypeScript ([#47702](https://github.com/WordPress/gutenberg/pull/47702)). ## 23.3.0 (2023-02-01) @@ -76,8 +76,7 @@ - Removed deprecated `@storybook/addon-knobs` dependency from the package ([47152](https://github.com/WordPress/gutenberg/pull/47152)). - `ColorListPicker`: Convert to TypeScript ([#46358](https://github.com/WordPress/gutenberg/pull/46358)). - `KeyboardShortcuts`: Convert to TypeScript ([#47429](https://github.com/WordPress/gutenberg/pull/47429)). -- `ColorPalette`, `BorderControl`, `GradientPicker`: refine types and logic around single vs multiple palettes - ([#47384](https://github.com/WordPress/gutenberg/pull/47384)). +- `ColorPalette`, `BorderControl`, `GradientPicker`: refine types and logic around single vs multiple palettes ([#47384](https://github.com/WordPress/gutenberg/pull/47384)). - `Button`: Convert to TypeScript ([#46997](https://github.com/WordPress/gutenberg/pull/46997)). - `QueryControls`: Convert to TypeScript ([#46721](https://github.com/WordPress/gutenberg/pull/46721)). - `TreeGrid`: Convert to TypeScript ([#47516](https://github.com/WordPress/gutenberg/pull/47516)). diff --git a/packages/components/src/panel/README.md b/packages/components/src/panel/README.md index 72336188d5dd71..be4beca3e75278 100644 --- a/packages/components/src/panel/README.md +++ b/packages/components/src/panel/README.md @@ -94,7 +94,7 @@ The CSS class to apply to the wrapper element. The content to display within the panel row. -- Required: No +- Required: Yes --- @@ -106,7 +106,7 @@ The `PanelBody` creates a collapsible container that can be toggled open or clos ###### `title`: `string` -Title text. It shows even when it is closed. +Title text. It shows even when the component is closed. - Required: No