Skip to content

Commit 47ca93d

Browse files
asudohasudoh
authored
feat(notification): introduce high contrast style (#2814)
Fixes #2354.
1 parent 20d9619 commit 47ca93d

File tree

7 files changed

+124
-22
lines changed

7 files changed

+124
-22
lines changed

‎packages/components/src/components/notification/README.md‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,23 @@
1111

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

14-
| Selector | Description |
15-
| ----------------------------------- | -------------------------------------- |
16-
| `.bx--inline-notification--error` | Apply error color to border and icon |
17-
| `.bx--inline-notification--success` | Apply success color to border and icon |
18-
| `.bx--inline-notification--info` | Apply info color to border and icon |
19-
| `.bx--inline-notification--warning` | Apply warning color to border and icon |
14+
| Selector | Description |
15+
| ---------------------------------------- | -------------------------------------------------------------- |
16+
| `.bx--inline-notification--low-contrast` | Use low contrast variant (The color scheme used until `v10.2`) |
17+
| `.bx--inline-notification--error` | Apply error color to border and icon |
18+
| `.bx--inline-notification--success` | Apply success color to border and icon |
19+
| `.bx--inline-notification--info` | Apply info color to border and icon |
20+
| `.bx--inline-notification--warning` | Apply warning color to border and icon |
2021

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

23-
| Selector | Description |
24-
| ---------------------------------- | ---------------------------------- |
25-
| `.bx--toast-notification--error` | Apply error color on left border |
26-
| `.bx--toast-notification--success` | Apply success color on left border |
27-
| `.bx--toast-notification--info` | Apply info color on left border |
28-
| `.bx--toast-notification--warning` | Apply warning color on left border |
24+
| Selector | Description |
25+
| --------------------------------------- | -------------------------------------------------------------- |
26+
| `.bx--toast-notification--low-contrast` | Use low contrast variant (The color scheme used until `v10.2`) |
27+
| `.bx--toast-notification--error` | Apply error color on left border |
28+
| `.bx--toast-notification--success` | Apply success color on left border |
29+
| `.bx--toast-notification--info` | Apply info color on left border |
30+
| `.bx--toast-notification--warning` | Apply warning color on left border |
2931

3032
### JavaScript
3133

‎packages/components/src/components/notification/_inline-notification.scss‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,9 @@
3030
min-height: rem(48px);
3131
min-width: rem(288px);
3232
max-width: rem(288px);
33-
color: $text-01;
33+
color: $inverse-01;
3434
margin-top: $carbon--spacing-05;
3535
margin-bottom: $carbon--spacing-05;
36-
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
3736

3837
@include carbon--breakpoint(md) {
3938
max-width: rem(608px);
@@ -48,21 +47,38 @@
4847
}
4948
}
5049

50+
.#{$prefix}--inline-notification--low-contrast {
51+
color: $text-01;
52+
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
53+
}
54+
5155
.#{$prefix}--inline-notification--error {
56+
@include notification--experimental($inverse-support-01, $inverse-02);
57+
}
58+
59+
.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--error {
5260
@include notification--experimental(
5361
$support-01,
5462
$notification-error-background-color
5563
);
5664
}
5765

5866
.#{$prefix}--inline-notification--success {
67+
@include notification--experimental($inverse-support-02, $inverse-02);
68+
}
69+
70+
.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--success {
5971
@include notification--experimental(
6072
$support-02,
6173
$notification-success-background-color
6274
);
6375
}
6476

6577
.#{$prefix}--inline-notification--info {
78+
@include notification--experimental($inverse-support-04, $inverse-02);
79+
}
80+
81+
.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--info {
6682
@include notification--experimental(
6783
$support-04,
6884
$notification-info-background-color
@@ -74,6 +90,10 @@
7490
}
7591

7692
.#{$prefix}--inline-notification--warning {
93+
@include notification--experimental($inverse-support-03, $inverse-02);
94+
}
95+
96+
.#{$prefix}--inline-notification--low-contrast.#{$prefix}--inline-notification--warning {
7797
@include notification--experimental(
7898
$support-03,
7999
$notification-warning-background-color
@@ -136,9 +156,15 @@
136156
.#{$prefix}--inline-notification__close-icon {
137157
height: 1rem;
138158
width: 1rem;
139-
fill: $ui-05;
159+
fill: $inverse-01;
140160
}
141161
}
162+
163+
.#{$prefix}--inline-notification--low-contrast
164+
.#{$prefix}--inline-notification__close-button
165+
.#{$prefix}--inline-notification__close-icon {
166+
fill: $ui-05;
167+
}
142168
}
143169

144170
@include exports('inline-notifications') {

‎packages/components/src/components/notification/_toast-notification.scss‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
width: rem(288px);
2929
height: auto;
3030
padding-left: $carbon--spacing-05;
31-
color: $text-01;
31+
color: $inverse-01;
3232
margin-top: $carbon--spacing-03;
3333
margin-bottom: $carbon--spacing-03;
3434
margin-right: $carbon--spacing-05;
@@ -43,28 +43,48 @@
4343
}
4444
}
4545

46+
.#{$prefix}--toast-notification--low-contrast {
47+
color: $text-01;
48+
}
49+
4650
.#{$prefix}--toast-notification--error {
51+
@include notification--experimental($inverse-support-01, $inverse-02);
52+
}
53+
54+
.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--error {
4755
@include notification--experimental(
4856
$support-01,
4957
$notification-error-background-color
5058
);
5159
}
5260

5361
.#{$prefix}--toast-notification--success {
62+
@include notification--experimental($inverse-support-02, $inverse-02);
63+
}
64+
65+
.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--success {
5466
@include notification--experimental(
5567
$support-02,
5668
$notification-success-background-color
5769
);
5870
}
5971

6072
.#{$prefix}--toast-notification--info {
73+
@include notification--experimental($inverse-support-04, $inverse-02);
74+
}
75+
76+
.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--info {
6177
@include notification--experimental(
6278
$support-04,
6379
$notification-info-background-color
6480
);
6581
}
6682

6783
.#{$prefix}--toast-notification--warning {
84+
@include notification--experimental($inverse-support-03, $inverse-02);
85+
}
86+
87+
.#{$prefix}--toast-notification--low-contrast.#{$prefix}--toast-notification--warning {
6888
@include notification--experimental(
6989
$support-03,
7090
$notification-warning-background-color
@@ -108,10 +128,16 @@
108128
.#{$prefix}--toast-notification__close-icon {
109129
height: 1rem;
110130
width: 1rem;
111-
fill: $ui-05;
131+
fill: $inverse-01;
112132
}
113133
}
114134

135+
.#{$prefix}--toast-notification--low-contrast
136+
.#{$prefix}--toast-notification__close-button
137+
.#{$prefix}--toast-notification__close-icon {
138+
fill: $ui-05;
139+
}
140+
115141
.#{$prefix}--toast-notification__title {
116142
@include type-style('heading-01');
117143

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

126-
color: $text-01;
152+
color: $inverse-01;
127153
margin-top: 0;
128154
margin-bottom: $carbon--spacing-06;
129155
word-break: break-word;
130156
}
131157

158+
.#{$prefix}--toast-notification--low-contrast
159+
.#{$prefix}--toast-notification__subtitle {
160+
color: $text-01;
161+
}
162+
132163
.#{$prefix}--toast-notification__caption {
133164
@include type-style('body-short-01');
134165

135-
color: $text-01;
166+
color: $inverse-01;
136167
margin-bottom: $carbon--spacing-05;
137168
}
169+
170+
.#{$prefix}--toast-notification--low-contrast
171+
.#{$prefix}--toast-notification__caption {
172+
color: $text-01;
173+
}
138174
}
139175

140176
@include exports('toast-notifications') {

‎packages/components/src/components/notification/notification.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,15 @@ module.exports = {
5252
items,
5353
},
5454
},
55+
{
56+
name: 'low-contrast',
57+
label: 'Inline Notification (Low contrast)',
58+
context: {
59+
variant: 'inline',
60+
lowContrast: true,
61+
items,
62+
},
63+
},
5564
{
5665
name: 'toast',
5766
label: 'Toast Notification',
@@ -65,5 +74,19 @@ module.exports = {
6574
items,
6675
},
6776
},
77+
{
78+
name: 'low-contrast',
79+
label: 'Toast Notification (Low contrast)',
80+
notes: `
81+
Toast notifications are typically passive, meaning they won't affect the user's workflow if not addressed.
82+
Toast Notifications use 'kind' props to specify the kind of notification that should render
83+
(error, info, success, warning).
84+
`,
85+
context: {
86+
variant: 'toast',
87+
lowContrast: true,
88+
items,
89+
},
90+
},
6891
],
6992
};

‎packages/components/src/components/notification/notification.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
-->
77

88
{{#each items}}
9-
<div data-notification class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}" role="alert">
9+
<div data-notification class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}{{#if ../lowContrast}} {{@root.prefix}}--{{../variant}}-notification--low-contrast{{/if}}" role="alert">
1010
{{#is ../variant "toast"}}
1111
{{#is type "error"}}
1212
{{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}

‎packages/react/src/components/Notification/Notification-story.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const kinds = {
1919
};
2020
const notificationProps = () => ({
2121
kind: select('The notification kind (kind)', kinds, 'info'),
22+
lowContrast: boolean('Use low contrast variant (lowContrast)', false),
2223
role: text('ARIA role (role)', 'alert'),
2324
title: text('Title (title)', 'Notification title'),
2425
subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),

‎packages/react/src/components/Notification/Notification.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,11 @@ export class ToastNotification extends Component {
212212
*/
213213
kind: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired,
214214

215+
/**
216+
* Specify whether you are using the low contrast variant of the ToastNotification.
217+
*/
218+
lowContrast: PropTypes.bool,
219+
215220
/**
216221
* Specify the title
217222
*/
@@ -304,14 +309,16 @@ export class ToastNotification extends Component {
304309
subtitle,
305310
title,
306311
kind,
312+
lowContrast,
307313
hideCloseButton,
308314
...other
309315
} = this.props;
310316

311317
const classes = classNames(
312318
`${prefix}--toast-notification`,
313319
{
314-
[`${prefix}--toast-notification--${this.props.kind}`]: this.props.kind,
320+
[`${prefix}--toast-notification--low-contrast`]: lowContrast,
321+
[`${prefix}--toast-notification--${kind}`]: kind,
315322
},
316323
className
317324
);
@@ -359,6 +366,11 @@ export class InlineNotification extends Component {
359366
*/
360367
kind: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired,
361368

369+
/**
370+
* Specify whether you are using the low contrast variant of the InlineNotification.
371+
*/
372+
lowContrast: PropTypes.bool,
373+
362374
/**
363375
* Specify the title
364376
*/
@@ -428,14 +440,16 @@ export class InlineNotification extends Component {
428440
subtitle,
429441
title,
430442
kind,
443+
lowContrast,
431444
hideCloseButton,
432445
...other
433446
} = this.props;
434447

435448
const classes = classNames(
436449
`${prefix}--inline-notification`,
437450
{
438-
[`${prefix}--inline-notification--${this.props.kind}`]: this.props.kind,
451+
[`${prefix}--inline-notification--low-contrast`]: lowContrast,
452+
[`${prefix}--inline-notification--${kind}`]: kind,
439453
},
440454
className
441455
);

0 commit comments

Comments
 (0)