From 5bdc8c612b783a877a84a80521d0cc9280b4f6a4 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 29 Jan 2019 10:06:28 +0000
Subject: [PATCH] Fix: Add button styles to notice actions without url. Allow
 custom classes on notice actions. (#13116)

---
 packages/components/src/notice/README.md      |  2 +-
 packages/components/src/notice/index.js       | 40 ++++++++++++++-----
 packages/components/src/notice/style.scss     |  3 ++
 .../notice/test/__snapshots__/index.js.snap   |  1 +
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/notice/README.md b/packages/components/src/notice/README.md
index c32bf02a3de10..9b0b62937b7f8 100644
--- 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
index 90b2d908deee9..99d5f9968f111 100644
--- 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
index 31b364c7e21a6..8003d33384a3c 100644
--- 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
index 7be3c43c0a1b5..28b35679ceec6 100644
--- 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