@wordpress/components 28.6.0 → 28.8.0

package/src/index.ts

@@ -12,7 +12,11 @@ export {
 } from '@wordpress/primitives';
 
 // Components.
-export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';
+export {
+	/** @deprecated Import `AlignmentMatrixControl` instead. */
+	default as __experimentalAlignmentMatrixControl,
+	default as AlignmentMatrixControl,
+} from './alignment-matrix-control';
 export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
@@ -62,6 +66,7 @@ export {
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
 } from './composite/legacy';
+export { Composite } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';

package/src/input-control/index.tsx

@@ -100,8 +100,8 @@ export function UnforwardedInputControl(
 					isPressEnterToChange={ isPressEnterToChange }
 					onKeyDown={ onKeyDown }
 					onValidate={ onValidate }
-					paddingInlineStart={ prefix ? space( 2 ) : undefined }
-					paddingInlineEnd={ suffix ? space( 2 ) : undefined }
+					paddingInlineStart={ prefix ? space( 1 ) : undefined }
+					paddingInlineEnd={ suffix ? space( 1 ) : undefined }
 					ref={ ref }
 					size={ size }
 					stateReducer={ stateReducer }

package/src/input-control/input-base.tsx

@@ -14,13 +14,7 @@ import { useMemo } from '@wordpress/element';
  */
 import Backdrop from './backdrop';
 import Label from './label';
-import {
-	Container,
-	Root,
-	Prefix,
-	Suffix,
-	getSizeConfig,
-} from './styles/input-control-styles';
+import { Container, Root, Prefix, Suffix } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
 import type { WordPressComponentProps } from '../context';
 import {
@@ -90,16 +84,12 @@ function InputBase(
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
-	const { paddingLeft, paddingRight } = getSizeConfig( {
-		inputSize: size,
-		__next40pxDefaultSize,
-	} );
 	const prefixSuffixContextValue = useMemo( () => {
 		return {
-			InputControlPrefixWrapper: { paddingLeft },
-			InputControlSuffixWrapper: { paddingRight },
+			InputControlPrefixWrapper: { __next40pxDefaultSize, size },
+			InputControlSuffixWrapper: { __next40pxDefaultSize, size },
 		};
-	}, [ paddingLeft, paddingRight ] );
+	}, [ __next40pxDefaultSize, size ] );
 
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.

package/src/input-control/input-prefix-wrapper.tsx

@@ -6,19 +6,23 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { Spacer } from '../spacer';
 import type { WordPressComponentProps } from '../context';
 import { contextConnect, useContextSystem } from '../context';
-import type { InputControlPrefixWrapperProps } from './types';
+import type { PrefixSuffixWrapperProps } from './types';
+import { PrefixSuffixWrapper } from './styles/input-control-styles';
 
 function UnconnectedInputControlPrefixWrapper(
-	props: WordPressComponentProps< InputControlPrefixWrapperProps, 'div' >,
+	props: WordPressComponentProps< PrefixSuffixWrapperProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const derivedProps = useContextSystem( props, 'InputControlPrefixWrapper' );
 
 	return (
-		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
+		<PrefixSuffixWrapper
+			{ ...derivedProps }
+			isPrefix
+			ref={ forwardedRef }
+		/>
 	);
 }
 

package/src/input-control/input-suffix-wrapper.tsx

@@ -6,20 +6,18 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import { Spacer } from '../spacer';
 import type { WordPressComponentProps } from '../context';
 import { contextConnect, useContextSystem } from '../context';
-import type { InputControlSuffixWrapperProps } from './types';
+import type { PrefixSuffixWrapperProps } from './types';
+import { PrefixSuffixWrapper } from './styles/input-control-styles';
 
 function UnconnectedInputControlSuffixWrapper(
-	props: WordPressComponentProps< InputControlSuffixWrapperProps, 'div' >,
+	props: WordPressComponentProps< PrefixSuffixWrapperProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const derivedProps = useContextSystem( props, 'InputControlSuffixWrapper' );
 
-	return (
-		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
-	);
+	return <PrefixSuffixWrapper { ...derivedProps } ref={ forwardedRef } />;
 }
 
 /**

package/src/input-control/reducer/reducer.ts

@@ -192,25 +192,28 @@ export function useInputControlStateReducer(
 	const pressDown = createKeyEvent( actions.PRESS_DOWN );
 	const pressEnter = createKeyEvent( actions.PRESS_ENTER );
 
-	const currentState = useRef( state );
-	const refProps = useRef( { value: initialState.value, onChangeHandler } );
+	const currentStateRef = useRef( state );
+	const refPropsRef = useRef( {
+		value: initialState.value,
+		onChangeHandler,
+	} );
 
 	// Freshens refs to props and state so that subsequent effects have access
 	// to their latest values without their changes causing effect runs.
 	useLayoutEffect( () => {
-		currentState.current = state;
-		refProps.current = { value: initialState.value, onChangeHandler };
+		currentStateRef.current = state;
+		refPropsRef.current = { value: initialState.value, onChangeHandler };
 	} );
 
 	// Propagates the latest state through onChange.
 	useLayoutEffect( () => {
 		if (
-			currentState.current._event !== undefined &&
-			state.value !== refProps.current.value &&
+			currentStateRef.current._event !== undefined &&
+			state.value !== refPropsRef.current.value &&
 			! state.isDirty
 		) {
-			refProps.current.onChangeHandler( state.value ?? '', {
-				event: currentState.current._event as
+			refPropsRef.current.onChangeHandler( state.value ?? '', {
+				event: currentStateRef.current._event as
 					| ChangeEvent< HTMLInputElement >
 					| PointerEvent< HTMLInputElement >,
 			} );
@@ -220,8 +223,8 @@ export function useInputControlStateReducer(
 	// Updates the state from props.
 	useLayoutEffect( () => {
 		if (
-			initialState.value !== currentState.current.value &&
-			! currentState.current.isDirty
+			initialState.value !== currentStateRef.current.value &&
+			! currentStateRef.current.isDirty
 		) {
 			dispatch( {
 				type: actions.CONTROL,

package/src/input-control/stories/index.story.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import { seen, unseen } from '@wordpress/icons';
+import { closeSmall, Icon, link, seen, unseen } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -75,6 +75,29 @@ WithSuffix.args = {
 	suffix: <InputControlSuffixWrapper>%</InputControlSuffixWrapper>,
 };
 
+/**
+ * `<InputControlPrefixWrapper>` and `<InputControlSuffixWrapper>` have a `variant` prop that can be used to
+ * adjust the wrapper based on the prefix or suffix content.
+ *
+ * - `'default'`: Standard padding for text content.
+ * - `'icon'`: For icons.
+ * - `'control'`: For controls, like buttons or selects.
+ */
+export const WithIconOrControl = Template.bind( {} );
+WithIconOrControl.args = {
+	...Default.args,
+	prefix: (
+		<InputControlPrefixWrapper variant="icon">
+			<Icon icon={ link } />
+		</InputControlPrefixWrapper>
+	),
+	suffix: (
+		<InputControlSuffixWrapper variant="control">
+			<Button icon={ closeSmall } size="small" label="Clear" />
+		</InputControlSuffixWrapper>
+	),
+};
+
 export const WithSideLabel = Template.bind( {} );
 WithSideLabel.args = {
 	...Default.args,
@@ -95,17 +118,13 @@ export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
 			type={ visible ? 'text' : 'password' }
 			label="Password"
 			suffix={
-				<InputControlSuffixWrapper>
-					<div style={ { display: 'flex' } }>
-						<Button
-							size="small"
-							icon={ visible ? unseen : seen }
-							onClick={ () => setVisible( ( value ) => ! value ) }
-							label={
-								visible ? 'Hide password' : 'Show password'
-							}
-						/>
-					</div>
+				<InputControlSuffixWrapper variant="control">
+					<Button
+						size="small"
+						icon={ visible ? unseen : seen }
+						onClick={ () => setVisible( ( value ) => ! value ) }
+						label={ visible ? 'Hide password' : 'Show password' }
+					/>
 				</InputControlSuffixWrapper>
 			}
 			{ ...args }

package/src/input-control/styles/input-control-styles.tsx

@@ -13,8 +13,7 @@ import type { WordPressComponentProps } from '../../context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';
-import type { LabelPosition, Size } from '../types';
-import { space } from '../../utils/space';
+import type { LabelPosition, Size, PrefixSuffixWrapperProps } from '../types';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -78,7 +77,7 @@ export const BackdropUI = styled.div< BackdropProps >`
 export const Root = styled( Flex )`
 	box-sizing: border-box;
 	position: relative;
-	border-radius: 2px;
+	border-radius: ${ CONFIG.radiusSmall };
 	padding-top: 0;
 
 	// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
@@ -188,29 +187,29 @@ export const getSizeConfig = ( {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: space( 4 ),
-			paddingRight: space( 4 ),
+			paddingLeft: CONFIG.controlPaddingX,
+			paddingRight: CONFIG.controlPaddingX,
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
-			paddingLeft: space( 2 ),
-			paddingRight: space( 2 ),
+			paddingLeft: CONFIG.controlPaddingXSmall,
+			paddingRight: CONFIG.controlPaddingXSmall,
 		},
 		compact: {
 			height: 32,
 			lineHeight: 1,
 			minHeight: 32,
-			paddingLeft: space( 2 ),
-			paddingRight: space( 2 ),
+			paddingLeft: CONFIG.controlPaddingXSmall,
+			paddingRight: CONFIG.controlPaddingXSmall,
 		},
 		'__unstable-large': {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: space( 4 ),
-			paddingRight: space( 4 ),
+			paddingLeft: CONFIG.controlPaddingX,
+			paddingRight: CONFIG.controlPaddingX,
 		},
 	};
 
@@ -319,3 +318,35 @@ export const Label = (
 export const LabelWrapper = styled( FlexItem )`
 	max-width: calc( 100% - 10px );
 `;
+
+const prefixSuffixWrapperStyles = ( {
+	variant = 'default',
+	size,
+	__next40pxDefaultSize,
+	isPrefix,
+}: PrefixSuffixWrapperProps & { isPrefix?: boolean } ) => {
+	const { paddingLeft: padding } = getSizeConfig( {
+		inputSize: size,
+		__next40pxDefaultSize,
+	} );
+
+	const paddingProperty = isPrefix
+		? 'paddingInlineStart'
+		: 'paddingInlineEnd';
+
+	if ( variant === 'default' ) {
+		return css( {
+			[ paddingProperty ]: padding,
+		} );
+	}
+
+	// If variant is 'icon' or 'control'
+	return css( {
+		display: 'flex',
+		[ paddingProperty ]: padding - 4,
+	} );
+};
+
+export const PrefixSuffixWrapper = styled.div`
+	${ prefixSuffixWrapperStyles }
+`;

package/src/input-control/types.ts

@@ -31,6 +31,7 @@ interface BaseProps {
 	 *
 	 * @default false
 	 * @deprecated
+	 * @ignore
 	 */
 	__next36pxDefaultSize?: boolean;
 	/**
@@ -208,16 +209,31 @@ export interface InputControlLabelProps {
 	size?: BaseProps[ 'size' ];
 }
 
-export type InputControlPrefixWrapperProps = {
+export type PrefixSuffixWrapperProps = {
 	/**
-	 * The prefix to be inserted.
+	 * The content to be inserted.
 	 */
 	children: ReactNode;
-};
-
-export type InputControlSuffixWrapperProps = {
 	/**
-	 * The suffix to be inserted.
+	 * Internal prop used to control the padding size of the wrapper.
+	 *
+	 * @ignore
 	 */
-	children: ReactNode;
+	size?: BaseProps[ 'size' ];
+	/**
+	 * Internal prop used to control the padding size of the wrapper.
+	 *
+	 * @ignore
+	 */
+	__next40pxDefaultSize?: BaseProps[ '__next40pxDefaultSize' ];
+	/**
+	 * Adjust the wrapper based on the prefix or suffix content.
+	 *
+	 * - `'default'`: Standard padding for text content.
+	 * - `'icon'`: For icons.
+	 * - `'control'`: For controls, like buttons or selects.
+	 *
+	 * @default 'default'
+	 */
+	variant?: 'default' | 'icon' | 'control';
 };

package/src/input-control/utils.ts

@@ -73,7 +73,7 @@ export function useDraft( props: {
 	onBlur?: FocusEventHandler;
 	onChange: InputChangeCallback;
 } ) {
-	const refPreviousValue = useRef( props.value );
+	const previousValueRef = useRef( props.value );
 	const [ draft, setDraft ] = useState< {
 		value?: string;
 		isStale?: boolean;
@@ -84,8 +84,8 @@ export function useDraft( props: {
 	// To do so, it tracks the previous value and marks the draft value as stale
 	// after each render.
 	useLayoutEffect( () => {
-		const { current: previousValue } = refPreviousValue;
-		refPreviousValue.current = props.value;
+		const { current: previousValue } = previousValueRef;
+		previousValueRef.current = props.value;
 		if ( draft.value !== undefined && ! draft.isStale ) {
 			setDraft( { ...draft, isStale: true } );
 		} else if ( draft.isStale && props.value !== previousValue ) {

package/src/item-group/styles.ts

@@ -105,12 +105,12 @@ const paddingYLarge = `calc((${ CONFIG.controlHeightLarge } - ${ baseFontHeight
 
 export const itemSizes = {
 	small: css`
-		padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall };
+		padding: ${ paddingYSmall } ${ CONFIG.controlPaddingXSmall }px;
 	`,
 	medium: css`
-		padding: ${ paddingY } ${ CONFIG.controlPaddingX };
+		padding: ${ paddingY } ${ CONFIG.controlPaddingX }px;
 	`,
 	large: css`
-		padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge };
+		padding: ${ paddingYLarge } ${ CONFIG.controlPaddingXLarge }px;
 	`,
 };

package/src/item-group/test/__snapshots__/index.js.snap

@@ -12,7 +12,7 @@ Snapshot Diff:
       >
         <div
 -         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
++         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -25,7 +25,7 @@ Snapshot Diff:
       >
         <div
 -         class="components-item css-au4yox-PolymorphicDiv-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-1h3jinl-PolymorphicDiv-large-item-spacedAround e19lxcc00"
++         class="components-item css-1ycukrf-PolymorphicDiv-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -45,7 +45,7 @@ Snapshot Diff:
     >
       <div
 -       class="components-item css-tpom78-PolymorphicDiv-medium-item e19lxcc00"
-+       class="components-item css-vss65r-PolymorphicDiv-large-item e19lxcc00"
++       class="components-item css-sbyvbg-PolymorphicDiv-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >

package/src/modal/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import type { ForwardedRef, KeyboardEvent, RefObject, UIEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -37,10 +36,12 @@ import Button from '../button';
 import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+import { Spacer } from '../spacer';
+import { useModalExitAnimation } from './use-modal-exit-animation';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
 type Dismissers = Set<
-	RefObject< ModalProps[ 'onRequestClose' ] | undefined >
+	React.RefObject< ModalProps[ 'onRequestClose' ] | undefined >
 >;
 const ModalContext = createContext< Dismissers >( new Set() );
 
@@ -49,7 +50,7 @@ const bodyOpenClasses = new Map< string, number >();
 
 function UnforwardedModal(
 	props: ModalProps,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) {
 	const {
 		bodyOpenClassName = 'modal-open',
@@ -69,7 +70,7 @@ function UnforwardedModal(
 		closeButtonLabel,
 		children,
 		style,
-		overlayClassName,
+		overlayClassName: overlayClassnameProp,
 		className,
 		contentLabel,
 		onKeyDown,
@@ -134,9 +135,9 @@ function UnforwardedModal(
 	}, [] );
 
 	// Keeps a fresh ref for the subsequent effect.
-	const refOnRequestClose = useRef< ModalProps[ 'onRequestClose' ] >();
+	const onRequestCloseRef = useRef< ModalProps[ 'onRequestClose' ] >();
 	useEffect( () => {
-		refOnRequestClose.current = onRequestClose;
+		onRequestCloseRef.current = onRequestClose;
 	}, [ onRequestClose ] );
 
 	// The list of `onRequestClose` callbacks of open (non-nested) Modals. Only
@@ -149,10 +150,10 @@ function UnforwardedModal(
 	// onRequestClose for any prior and/or nested modals as applicable.
 	useEffect( () => {
 		// add this modal instance to the dismissers set
-		dismissers.add( refOnRequestClose );
+		dismissers.add( onRequestCloseRef );
 		// request that all the other modals close themselves
 		for ( const dismisser of dismissers ) {
-			if ( dismisser !== refOnRequestClose ) {
+			if ( dismisser !== onRequestCloseRef ) {
 				dismisser.current?.();
 			}
 		}
@@ -162,7 +163,7 @@ function UnforwardedModal(
 				dismisser.current?.();
 			}
 			// remove this modal instance from the dismissers set
-			dismissers.delete( refOnRequestClose );
+			dismissers.delete( onRequestCloseRef );
 		};
 	}, [ dismissers, nestedDismissers ] );
 
@@ -183,6 +184,9 @@ function UnforwardedModal(
 		};
 	}, [ bodyOpenClassName ] );
 
+	const { closeModal, frameRef, frameStyle, overlayClassname } =
+		useModalExitAnimation();
+
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
 		if ( ! window.ResizeObserver || ! childrenContainerRef.current ) {
@@ -199,21 +203,21 @@ function UnforwardedModal(
 		};
 	}, [ isContentScrollable, childrenContainerRef ] );
 
-	function handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {
+	function handleEscapeKeyDown(
+		event: React.KeyboardEvent< HTMLDivElement >
+	) {
 		if (
 			shouldCloseOnEsc &&
 			( event.code === 'Escape' || event.key === 'Escape' ) &&
 			! event.defaultPrevented
 		) {
 			event.preventDefault();
-			if ( onRequestClose ) {
-				onRequestClose( event );
-			}
+			closeModal().then( () => onRequestClose( event ) );
 		}
 	}
 
 	const onContentContainerScroll = useCallback(
-		( e: UIEvent< HTMLDivElement > ) => {
+		( e: React.UIEvent< HTMLDivElement > ) => {
 			const scrollY = e?.currentTarget?.scrollTop ?? -1;
 
 			if ( ! hasScrolledContent && scrollY > 0 ) {
@@ -247,7 +251,7 @@ function UnforwardedModal(
 			const isSameTarget = target === pressTarget;
 			pressTarget = null;
 			if ( button === 0 && isSameTarget ) {
-				onRequestClose();
+				closeModal().then( () => onRequestClose() );
 			}
 		},
 	};
@@ -258,7 +262,8 @@ function UnforwardedModal(
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
 			className={ clsx(
 				'components-modal__screen-overlay',
-				overlayClassName
+				overlayClassname,
+				overlayClassnameProp
 			) }
 			onKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }
 			{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }
@@ -270,8 +275,12 @@ function UnforwardedModal(
 						sizeClass,
 						className
 					) }
-					style={ style }
+					style={ {
+						...frameStyle,
+						...style,
+					} }
 					ref={ useMergeRefs( [
+						frameRef,
 						constrainedTabbingRef,
 						focusReturnRef,
 						focusOnMount !== 'firstContentElement'
@@ -323,13 +332,27 @@ function UnforwardedModal(
 								</div>
 								{ headerActions }
 								{ isDismissible && (
-									<Button
-										onClick={ onRequestClose }
-										icon={ close }
-										label={
-											closeButtonLabel || __( 'Close' )
-										}
-									/>
+									<>
+										<Spacer
+											marginBottom={ 0 }
+											marginLeft={ 3 }
+										/>
+										<Button
+											size="small"
+											onClick={ (
+												event: React.MouseEvent< HTMLButtonElement >
+											) =>
+												closeModal().then( () =>
+													onRequestClose( event )
+												)
+											}
+											icon={ close }
+											label={
+												closeButtonLabel ||
+												__( 'Close' )
+											}
+										/>
+									</>
 								) }
 							</div>
 						) }

package/src/modal/stories/index.story.tsx

@@ -7,7 +7,7 @@ import type { StoryFn, Meta } from '@storybook/react';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { starEmpty, starFilled } from '@wordpress/icons';
+import { fullscreen } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -103,22 +103,16 @@ WithsizeSmall.args = {
 };
 WithsizeSmall.storyName = 'With size: small';
 
-const LikeButton = () => {
-	const [ isLiked, setIsLiked ] = useState( false );
-	return (
-		<Button
-			icon={ isLiked ? starFilled : starEmpty }
-			label="Like"
-			onClick={ () => setIsLiked( ! isLiked ) }
-		/>
-	);
-};
-
+/**
+ * The `headerActions` prop can be used to add auxiliary actions to the header, for example a fullscreen mode toggle.
+ */
 export const WithHeaderActions: StoryFn< typeof Modal > = Template.bind( {} );
 WithHeaderActions.args = {
 	...Default.args,
-	headerActions: <LikeButton />,
-	isDismissible: false,
+	headerActions: (
+		<Button icon={ fullscreen } label="Fullscreen mode" size="small" />
+	),
+	children: <div style={ { height: '200px' } } />,
 };
 WithHeaderActions.parameters = {
 	...Default.parameters,