Modal: Decrease close button size (WordPress#65131)

* Modal: Decrease close button size * Remove close button offset * Update story example to show real-life usage * Update header action button size in Freeform block * Add spacer to component itself * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
soloinovator · Sep 10, 2024 · cdeb12e · cdeb12e
1 parent 8b4ca34
commit cdeb12e
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 28 deletions.
diff --git a/packages/block-library/src/freeform/modal.js b/packages/block-library/src/freeform/modal.js
@@ -25,8 +25,7 @@ function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {
 
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			size="small"
 			onClick={ onClick }
 			icon={ fullscreen }
 			isPressed={ isModalFullScreen }

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -10,6 +10,10 @@
 
 -   `Composite`: add stable version of the component ([#63569](https://github.com/WordPress/gutenberg/pull/63569)).
 
+### Enhancements
+
+-   `Modal`: Decrease close button size and remove horizontal offset ([#65131](https://github.com/WordPress/gutenberg/pull/65131)).
+
 ### Internal
 
 -   `Composite`: Remove from private APIs ([#63569](https://github.com/WordPress/gutenberg/pull/63569)).

diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
@@ -37,6 +37,7 @@ 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';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
 type Dismissers = Set<
@@ -323,13 +324,21 @@ function UnforwardedModal(
 								</div>
 								{ headerActions }
 								{ isDismissible && (
-									<Button
-										onClick={ onRequestClose }
-										icon={ close }
-										label={
-											closeButtonLabel || __( 'Close' )
-										}
-									/>
+									<>
+										<Spacer
+											marginBottom={ 0 }
+											marginLeft={ 3 }
+										/>
+										<Button
+											size="small"
+											onClick={ onRequestClose }
+											icon={ close }
+											label={
+												closeButtonLabel ||
+												__( 'Close' )
+											}
+										/>
+									</>
 								) }
 							</div>
 						) }

diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/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,

diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
@@ -116,11 +116,6 @@
 		margin: 0;
 	}
 
-	.components-button {
-		position: relative;
-		left: $grid-unit-10;
-	}
-
 	.components-modal__content.has-scrolled-content:not(.hide-header) & {
 		border-bottom-color: $gray-300;
 	}