Fix: Add button styles to notice actions without url. Allow custom cl…

…asses on notice actions. (#13116)
WordPress · Mar 6, 2019 · db81de4 · db81de4
1 parent 6ff3006
commit db81de4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/packages/components/src/notice/README.md b/packages/components/src/notice/README.md
@@ -31,4 +31,4 @@ The following props are used to control the display of the component.
 * `status`: (string) can be `warning` (yellow), `success` (green), `error` (red).
 * `onRemove`: function called when dismissing the notice
 * `isDismissible`: (boolean) defaults to true, whether the notice should be dismissible or not
-* `actions`: (array) an array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function.
+* `actions`: (array) an array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function. A `className` property can be used to add custom classes to the button styles. By default, some classes are used (e.g: is-link or is-default) the default classes can be removed by setting property `noDefaultClasses` to `false`.
diff --git a/packages/components/src/notice/index.js b/packages/components/src/notice/index.js
@@ -36,17 +36,35 @@ function Notice( {
 		<div className={ classes }>
 			<div className="components-notice__content">
 				{ children }
-				{ actions.map( ( { label, url, onClick }, index ) => (
-					<Button
-						key={ index }
-						href={ url }
-						isLink={ !! url }
-						onClick={ onClick }
-						className="components-notice__action"
-					>
-						{ label }
-					</Button>
-				) ) }
+				{ actions.map(
+					(
+						{
+							className: buttonCustomClasses,
+							label,
+							noDefaultClasses = false,
+							onClick,
+							url,
+						},
+						index
+					) => {
+						return (
+							<Button
+								key={ index }
+								href={ url }
+								isDefault={ ! noDefaultClasses && ! url }
+								isLink={ ! noDefaultClasses && !! url }
+								onClick={ url ? undefined : onClick }
+								className={ classnames(
+									'components-notice__action',
+									buttonCustomClasses
+								) }
+							>
+								{ label }
+							</Button>
+						);
+					}
+
+				) }
 			</div>
 			{ isDismissible && (
 				<IconButton

diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
@@ -34,6 +34,9 @@
 	&.is-link {
 		margin-left: 4px;
 	}
+	&.is-default {
+		vertical-align: initial;
+	}
 }
 
 .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
@@ -11,6 +11,7 @@ exports[`Notice should match snapshot 1`] = `
     <ForwardRef(Button)
       className="components-notice__action"
       href="https://example.com"
+      isDefault={false}
       isLink={true}
     >
       View