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

feat(notification): introduce high contrast style #2814

Merged
merged 6 commits into from May 25, 2019
Merged

feat(notification): introduce high contrast style #2814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a06d7fe
feat(notification): introduce high contrast style
asudoh May 23, 2019
11a6edd
feat(notification): introduce light variant
asudoh May 24, 2019
7fd04c6
Merge branch 'master' into notification-high-contrast-style
joshblack May 24, 2019
6dc41cc
Merge branch 'master' into notification-high-contrast-style
joshblack May 24, 2019
6bf5529
chore(notification): s/light/low-contrast/
asudoh May 25, 2019
e352f6c
Merge branch 'master' into notification-high-contrast-style
asudoh May 25, 2019
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
26 changes: 14 additions & 12 deletions packages/components/src/components/notification/README.md
View file
Open in desktop
Expand Up @@ -11,21 +11,23 @@

Use these modifiers with `.bx--inline-notification` class.

| Selector | Description |
| ----------------------------------- | -------------------------------------- |
| `.bx--inline-notification--error` | Apply error color to border and icon |
| `.bx--inline-notification--success` | Apply success color to border and icon |
| `.bx--inline-notification--info` | Apply info color to border and icon |
| `.bx--inline-notification--warning` | Apply warning color to border and icon |
| Selector | Description |
| ---------------------------------------- | -------------------------------------------------------------- |
| `.bx--inline-notification--low-contrast` | Use low contrast variant (The color scheme used until `v10.2`) |
| `.bx--inline-notification--error` | Apply error color to border and icon |
| `.bx--inline-notification--success` | Apply success color to border and icon |
| `.bx--inline-notification--info` | Apply info color to border and icon |
| `.bx--inline-notification--warning` | Apply warning color to border and icon |

Use these modifiers with `.bx--toast-notification` class.

| Selector | Description |
| ---------------------------------- | ---------------------------------- |
| `.bx--toast-notification--error` | Apply error color on left border |
| `.bx--toast-notification--success` | Apply success color on left border |
| `.bx--toast-notification--info` | Apply info color on left border |
| `.bx--toast-notification--warning` | Apply warning color on left border |
| Selector | Description |
| --------------------------------------- | -------------------------------------------------------------- |
| `.bx--toast-notification--low-contrast` | Use low contrast variant (The color scheme used until `v10.2`) |
| `.bx--toast-notification--error` | Apply error color on left border |
| `.bx--toast-notification--success` | Apply success color on left border |
| `.bx--toast-notification--info` | Apply info color on left border |
| `.bx--toast-notification--warning` | Apply warning color on left border |

### JavaScript

Expand Down
32 changes: 29 additions & 3 deletions packages/components/src/components/notification/_inline-notification.scss
View file
Open in desktop
Expand Up @@ -30,10 +30,9 @@
min-height: rem(48px);
min-width: rem(288px);
max-width: rem(288px);
color: $text-01;
color: $inverse-01;
margin-top: $carbon--spacing-05;
margin-bottom: $carbon--spacing-05;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);

@include carbon--breakpoint(md) {
max-width: rem(608px);
Expand All @@ -48,21 +47,38 @@
}
}

.#{$prefix}--inline-notification--low-contrast {
color: $text-01;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.#{$prefix}--inline-notification--error {
@include notification--experimental($inverse-support-01, $inverse-02);
}

.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error {
@include notification--experimental(
$support-01,
$notification-error-background-color
);
}

.#{$prefix}--inline-notification--success {
@include notification--experimental($inverse-support-02, $inverse-02);
}

.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success {
@include notification--experimental(
$support-02,
$notification-success-background-color
);
}

.#{$prefix}--inline-notification--info {
@include notification--experimental($inverse-support-04, $inverse-02);
}

.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info {
@include notification--experimental(
$support-04,
$notification-info-background-color
Expand All @@ -74,6 +90,10 @@
}

.#{$prefix}--inline-notification--warning {
@include notification--experimental($inverse-support-03, $inverse-02);
}

.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning {
@include notification--experimental(
$support-03,
$notification-warning-background-color
Expand Down Expand Up @@ -136,9 +156,15 @@
.#{$prefix}--inline-notification__close-icon {
height: 1rem;
width: 1rem;
fill: $ui-05;
fill: $inverse-01;
}
}

.#{$prefix}--inline-notification--low-contrast
.#{$prefix}--inline-notification__close-button
.#{$prefix}--inline-notification__close-icon {
fill: $ui-05;
}
}

@include exports('inline-notifications') {
Expand Down
44 changes: 40 additions & 4 deletions packages/components/src/components/notification/_toast-notification.scss
View file
Open in desktop
Expand Up @@ -28,7 +28,7 @@
width: rem(288px);
height: auto;
padding-left: $carbon--spacing-05;
color: $text-01;
color: $inverse-01;
margin-top: $carbon--spacing-03;
margin-bottom: $carbon--spacing-03;
margin-right: $carbon--spacing-05;
Expand All @@ -43,28 +43,48 @@
}
}

.#{$prefix}--toast-notification--low-contrast {
color: $text-01;
}

.#{$prefix}--toast-notification--error {
@include notification--experimental($inverse-support-01, $inverse-02);
}

.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
@include notification--experimental(
$support-01,
$notification-error-background-color
);
}

.#{$prefix}--toast-notification--success {
@include notification--experimental($inverse-support-02, $inverse-02);
}

.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
@include notification--experimental(
$support-02,
$notification-success-background-color
);
}

.#{$prefix}--toast-notification--info {
@include notification--experimental($inverse-support-04, $inverse-02);
}

.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info {
@include notification--experimental(
$support-04,
$notification-info-background-color
);
}

.#{$prefix}--toast-notification--warning {
@include notification--experimental($inverse-support-03, $inverse-02);
}

.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning {
@include notification--experimental(
$support-03,
$notification-warning-background-color
Expand Down Expand Up @@ -108,10 +128,16 @@
.#{$prefix}--toast-notification__close-icon {
height: 1rem;
width: 1rem;
fill: $ui-05;
fill: $inverse-01;
}
}

.#{$prefix}--toast-notification--low-contrast
.#{$prefix}--toast-notification__close-button
.#{$prefix}--toast-notification__close-icon {
fill: $ui-05;
}

.#{$prefix}--toast-notification__title {
@include type-style('heading-01');

Expand All @@ -123,18 +149,28 @@
.#{$prefix}--toast-notification__subtitle {
@include type-style('body-short-01');

color: $text-01;
color: $inverse-01;
margin-top: 0;
margin-bottom: $carbon--spacing-06;
word-break: break-word;
}

.#{$prefix}--toast-notification--low-contrast
.#{$prefix}--toast-notification__subtitle {
color: $text-01;
}

.#{$prefix}--toast-notification__caption {
@include type-style('body-short-01');

color: $text-01;
color: $inverse-01;
margin-bottom: $carbon--spacing-05;
}

.#{$prefix}--toast-notification--low-contrast
.#{$prefix}--toast-notification__caption {
color: $text-01;
}
}

@include exports('toast-notifications') {
Expand Down
23 changes: 23 additions & 0 deletions packages/components/src/components/notification/notification.config.js
View file
Open in desktop
Expand Up @@ -52,6 +52,15 @@ module.exports = {
items,
},
},
{
name: 'low-contrast',
label: 'Inline Notification (Low contrast)',
context: {
variant: 'inline',
lowContrast: true,
items,
},
},
{
name: 'toast',
label: 'Toast Notification',
Expand All @@ -65,5 +74,19 @@ module.exports = {
items,
},
},
{
name: 'low-contrast',
label: 'Toast Notification (Low contrast)',
notes: `
Toast notifications are typically passive, meaning they won't affect the user's workflow if not addressed.
Toast Notifications use 'kind' props to specify the kind of notification that should render
(error, info, success, warning).
`,
context: {
variant: 'toast',
lowContrast: true,
items,
},
},
],
};
2 changes: 1 addition & 1 deletion packages/components/src/components/notification/notification.hbs
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@
-->

{{#each items}}
<div data-notification class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}" role="alert">
<div data-notification class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}{{#if ../lowContrast}} {{@root.prefix}}--{{../variant}}-notification--low-contrast{{/if}}" role="alert">
{{#is ../variant "toast"}}
{{#is type "error"}}
{{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/components/Notification/Notification-story.js
View file
Open in desktop
Expand Up @@ -19,6 +19,7 @@ const kinds = {
};
const notificationProps = () => ({
kind: select('The notification kind (kind)', kinds, 'info'),
lowContrast: boolean('Use low contrast variant (lowContrast)', false),
role: text('ARIA role (role)', 'alert'),
title: text('Title (title)', 'Notification title'),
subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),
Expand Down
18 changes: 16 additions & 2 deletions packages/react/src/components/Notification/Notification.js
View file
Open in desktop
Expand Up @@ -212,6 +212,11 @@ export class ToastNotification extends Component {
*/
kind: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired,

/**
* Specify whether you are using the low contrast variant of the ToastNotification.
*/
lowContrast: PropTypes.bool,

/**
* Specify the title
*/
Expand Down Expand Up @@ -304,14 +309,16 @@ export class ToastNotification extends Component {
subtitle,
title,
kind,
lowContrast,
hideCloseButton,
...other
} = this.props;

const classes = classNames(
`${prefix}--toast-notification`,
{
[`${prefix}--toast-notification--${this.props.kind}`]: this.props.kind,
[`${prefix}--toast-notification--low-contrast`]: lowContrast,
[`${prefix}--toast-notification--${kind}`]: kind,
},
className
);
Expand Down Expand Up @@ -359,6 +366,11 @@ export class InlineNotification extends Component {
*/
kind: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired,

/**
* Specify whether you are using the low contrast variant of the InlineNotification.
*/
lowContrast: PropTypes.bool,

/**
* Specify the title
*/
Expand Down Expand Up @@ -428,14 +440,16 @@ export class InlineNotification extends Component {
subtitle,
title,
kind,
lowContrast,
hideCloseButton,
...other
} = this.props;

const classes = classNames(
`${prefix}--inline-notification`,
{
[`${prefix}--inline-notification--${this.props.kind}`]: this.props.kind,
[`${prefix}--inline-notification--low-contrast`]: lowContrast,
[`${prefix}--inline-notification--${kind}`]: kind,
},
className
);
Expand Down