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

…asses on notice actions.
WordPress · Jan 2, 2019 · 5522384 · 5522384
1 parent b4ff7cf
commit 5522384
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/packages/components/src/notice/index.js b/packages/components/src/notice/index.js
@@ -36,17 +36,34 @@ 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: buttonAdditionalClass,
+							label,
+							onClick,
+							url,
+						},
+						index
+					) => {
+						return (
+							<Button
+								key={ index }
+								href={ url }
+								isDefault={ ! url }
+								isLink={ !! url }
+								onClick={ url ? undefined : onClick }
+								className={ classnames(
+									'components-notice__action',
+									buttonAdditionalClass
+								) }
+							>
+								{ 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