Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Add button styles to notice actions without url. Allow custom classes on notice actions. #13116

Merged
merged 1 commit into from Jan 29, 2019
Merged

Fix: Add button styles to notice actions without url. Allow custom classes on notice actions. #13116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/src/notice/README.md
View file
Open in desktop
Expand Up @@ -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`.
40 changes: 29 additions & 11 deletions packages/components/src/notice/index.js
View file
Open in desktop
Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions packages/components/src/notice/style.scss
View file
Open in desktop
Expand Up @@ -34,6 +34,9 @@
&.is-link {
margin-left: 4px;
}
&.is-default {
vertical-align: initial;
}
}

.components-notice__dismiss {
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/notice/test/__snapshots__/index.js.snap
View file
Open in desktop
Expand Up @@ -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
Expand Down