Improve display for multiple action buttons in notices (#31799)

WordPress · May 14, 2021 · 69f3a97 · 69f3a97
1 parent 818018d
commit 69f3a97
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 54 deletions.
diff --git a/packages/components/src/notice/index.js b/packages/components/src/notice/index.js
@@ -88,36 +88,38 @@ function Notice( {
 		<div className={ classes }>
 			<div className="components-notice__content">
 				{ children }
-				{ actions.map(
-					(
-						{
-							className: buttonCustomClasses,
-							label,
-							isPrimary,
-							noDefaultClasses = false,
-							onClick,
-							url,
-						},
-						index
-					) => {
-						return (
-							<Button
-								key={ index }
-								href={ url }
-								isPrimary={ isPrimary }
-								isSecondary={ ! noDefaultClasses && ! url }
-								isLink={ ! noDefaultClasses && !! url }
-								onClick={ url ? undefined : onClick }
-								className={ classnames(
-									'components-notice__action',
-									buttonCustomClasses
-								) }
-							>
-								{ label }
-							</Button>
-						);
-					}
-				) }
+				<div className="components-notice__actions">
+					{ actions.map(
+						(
+							{
+								className: buttonCustomClasses,
+								label,
+								isPrimary,
+								noDefaultClasses = false,
+								onClick,
+								url,
+							},
+							index
+						) => {
+							return (
+								<Button
+									key={ index }
+									href={ url }
+									isPrimary={ isPrimary }
+									isSecondary={ ! noDefaultClasses && ! url }
+									isLink={ ! noDefaultClasses && !! url }
+									onClick={ url ? undefined : onClick }
+									className={ classnames(
+										'components-notice__action',
+										buttonCustomClasses
+									) }
+								>
+									{ label }
+								</Button>
+							);
+						}
+					) }
+				</div>
 			</div>
 			{ isDismissible && (
 				<Button

diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
@@ -34,6 +34,11 @@
 	margin: $grid-unit-05 #{ $button-size-small + $border-width } $grid-unit-05 0;
 }
 
+.components-notice__actions {
+	display: flex;
+	flex-wrap: wrap;
+}
+
 .components-notice__action.components-button {
 	&,
 	&.is-link {
@@ -42,6 +47,10 @@
 	&.is-secondary {
 		vertical-align: initial;
 	}
+
+	// When it has better support, this can be replaced
+	// with column-gap since these are flex items.
+	margin-right: $grid-unit-10;
 }
 
 .components-notice__dismiss {

diff --git a/packages/components/src/notice/test/__snapshots__/index.js.snap b/packages/components/src/notice/test/__snapshots__/index.js.snap
@@ -8,31 +8,35 @@ exports[`Notice should match snapshot 1`] = `
     className="components-notice__content"
   >
     Example
-    <ForwardRef(Button)
-      className="components-notice__action"
-      href="https://example.com"
-      isLink={true}
-      isSecondary={false}
+    <div
+      className="components-notice__actions"
     >
-      More information
-    </ForwardRef(Button)>
-    <ForwardRef(Button)
-      className="components-notice__action"
-      isLink={false}
-      isSecondary={true}
-      onClick={[Function]}
-    >
-      Cancel
-    </ForwardRef(Button)>
-    <ForwardRef(Button)
-      className="components-notice__action"
-      isLink={false}
-      isPrimary={true}
-      isSecondary={true}
-      onClick={[Function]}
-    >
-      Submit
-    </ForwardRef(Button)>
+      <ForwardRef(Button)
+        className="components-notice__action"
+        href="https://example.com"
+        isLink={true}
+        isSecondary={false}
+      >
+        More information
+      </ForwardRef(Button)>
+      <ForwardRef(Button)
+        className="components-notice__action"
+        isLink={false}
+        isSecondary={true}
+        onClick={[Function]}
+      >
+        Cancel
+      </ForwardRef(Button)>
+      <ForwardRef(Button)
+        className="components-notice__action"
+        isLink={false}
+        isPrimary={true}
+        isSecondary={true}
+        onClick={[Function]}
+      >
+        Submit
+      </ForwardRef(Button)>
+    </div>
   </div>
   <ForwardRef(Button)
     className="components-notice__dismiss"