Skip to content

Commit 50391a7

Browse files
adamkudrnaadamkudrna
committed
Drop Neutral Colors collection from Alert and Card (#615)
We found the Neutral Colors collection insufficiently flexible to use, so we are removing it from more complex components where its usage was unclear and confusing. Features: - New `--rui-Card__background-color` custom property has been introduced to define `Card`'s default background color. Breaking changes: - `Alert`: light and dark colors (Neutral Colors collection) have been dropped with no replacement. - `Card`: light color now corresponds to the default appearance. The dark color option has been dropped with no replacement. Migration: - `Alert`: pick another color from the Feedback Colors collection. - `Card`: remove `color="light"` to keep the default light appearance. If using `color="dark"`, pick another color from the Feedback Colors collection.
1 parent e0dc126 commit 50391a7

File tree

13 files changed

+22
-88
lines changed

13 files changed

+22
-88
lines changed

‎src/components/Alert/Alert.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ Alert.propTypes = {
6969
children: PropTypes.node.isRequired,
7070
/**
7171
* Color variant to clarify importance and meaning of the alert. Implements
72-
* [Feedback and Neutral color collections](/docs/foundation/collections#colors).
72+
* [Feedback color collection](/docs/foundation/collections#colors).
7373
*/
74-
color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
74+
color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note']),
7575
/**
7676
* Optional element to be displayed next to the alert body.
7777
*/

‎src/components/Alert/README.md

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -111,32 +111,6 @@ Neutral informative alert.
111111
</Alert>
112112
```
113113

114-
### Light
115-
116-
Light alert variant.
117-
118-
```docoff-react-preview
119-
<docoff-placeholder dark>
120-
<Alert color="light">
121-
<strong>Light alert:</strong> Stands out on dark backgrounds.
122-
{' '}
123-
<TextLink href="/" label="This is a link" />
124-
</Alert>
125-
</docoff-placeholder>
126-
```
127-
128-
### Dark
129-
130-
Dark alert variant.
131-
132-
```docoff-react-preview
133-
<Alert color="dark">
134-
<strong>Dark alert:</strong> Stands out on light backgrounds.
135-
{' '}
136-
<TextLink href="/" label="This is a link" />
137-
</Alert>
138-
```
139-
140114
## Alerts with Icons
141115

142116
An icon can (and should) accompany the message.

‎src/components/Alert/__tests__/Alert.test.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
} from '@testing-library/react';
77
import userEvent from '@testing-library/user-event';
88
import { feedbackColorPropTest } from '../../../../tests/propTests/feedbackColorPropTest';
9-
import { neutralColorPropTest } from '../../../../tests/propTests/neutralColorPropTest';
109
import defaultTranslations from '../../../translations/en';
1110
import { Alert } from '../Alert';
1211

@@ -22,7 +21,6 @@ describe('rendering', () => {
2221
(rootElement) => expect(within(rootElement).getByText('content text')),
2322
],
2423
...feedbackColorPropTest,
25-
...neutralColorPropTest,
2624
[
2725
{ icon: (<div>icon</div>) },
2826
(rootElement) => expect(within(rootElement).getByText('icon')),

‎src/components/Alert/_settings.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use "sass:list";
21
@use "sass:map";
32
@use "../../styles/settings/collections";
43
@use "../../styles/theme/typography";
@@ -8,5 +7,5 @@ $font-size: map.get(typography.$font-size-values, 1);
87
$line-height: typography.$line-height-base;
98
$min-height: calc(#{$font-size} * #{$line-height} + 2 * #{theme.$padding});
109

11-
$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
10+
$colors: collections.$feedback-colors;
1211
$themeable-properties: color, foreground-color, background-color;

‎src/components/Card/Card.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Card = ({
1818
{...transferProps(restProps)}
1919
className={classNames(
2020
styles.root,
21-
getRootColorClassName(color, styles),
21+
color && getRootColorClassName(color, styles),
2222
dense && styles.isRootDense,
2323
raised && styles.isRootRaised,
2424
disabled && styles.isRootDisabled,
@@ -29,7 +29,7 @@ export const Card = ({
2929
);
3030

3131
Card.defaultProps = {
32-
color: 'light',
32+
color: undefined,
3333
dense: false,
3434
disabled: false,
3535
raised: false,
@@ -45,9 +45,9 @@ Card.propTypes = {
4545
children: PropTypes.node.isRequired,
4646
/**
4747
* Color to clarify importance and meaning of the card. Implements
48-
* [Feedback and Neutral color collections](/docs/foundation/collections#colors).
48+
* [Feedback color collection](/docs/foundation/collections#colors).
4949
*/
50-
color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
50+
color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note']),
5151
/**
5252
* Make the card more compact.
5353
*/

‎src/components/Card/Card.module.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
flex-direction: column;
1313
min-width: 0; // 1.
1414
color: var(--rui-local-color);
15-
border: theme.$border-width solid var(--rui-local-border-color);
15+
border: theme.$border-width solid var(--rui-local-border-color, transparent);
1616
border-radius: theme.$border-radius;
17-
background-color: var(--rui-local-background-color);
17+
background-color: var(--rui-local-background-color, theme.$background-color);
1818
}
1919

2020
.body {

‎src/components/Card/README.md

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ for card content.
148148
## Color Variants
149149

150150
To cover all possible needs of your project, Card is available in colors from
151-
[Feedback and Neutral color collections](/docs/foundation/collections#colors).
151+
[Feedback color collection](/docs/foundation/collections#colors).
152152

153153
```docoff-react-preview
154154
<Card color="success">
@@ -211,26 +211,6 @@ To cover all possible needs of your project, Card is available in colors from
211211
<Button label="Read more" priority="outline" color="note" />
212212
</CardFooter>
213213
</Card>
214-
<Card>
215-
<CardBody>
216-
Hello! I&apos;m light (default) variant of card.
217-
{' '}
218-
<TextLink href="/" label="This is a link" />
219-
</CardBody>
220-
<CardFooter>
221-
<Button label="Read more" priority="outline" color="dark" />
222-
</CardFooter>
223-
</Card>
224-
<Card color="dark">
225-
<CardBody>
226-
Hello! I&apos;m dark variant of card.
227-
{' '}
228-
<TextLink href="/" label="This is a link" />
229-
</CardBody>
230-
<CardFooter>
231-
<Button label="Read more" priority="outline" color="light" />
232-
</CardFooter>
233-
</Card>
234214
```
235215

236216
## States
@@ -314,6 +294,7 @@ Separate your card actions with CardFooter. See
314294
| `--rui-Card__padding` | Padding shared by card header, body and footer |
315295
| `--rui-Card__border-width` | Border width |
316296
| `--rui-Card__border-radius` | Corner radius |
297+
| `--rui-Card__background-color` | Card background color |
317298
| `--rui-Card--dense__padding` | Padding of dense card |
318299
| `--rui-Card--raised__box-shadow` | Box shadow of raised card |
319300
| `--rui-Card--disabled__background-color` | Card background color in disabled state |

‎src/components/Card/__tests__/Card.test.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
within,
55
} from '@testing-library/react';
66
import { feedbackColorPropTest } from '../../../../tests/propTests/feedbackColorPropTest';
7-
import { neutralColorPropTest } from '../../../../tests/propTests/neutralColorPropTest';
87
import { raisedPropTest } from '../../../../tests/propTests/raisedPropTest';
98
import { ScrollView } from '../../ScrollView';
109
import { Card } from '../Card';
@@ -35,7 +34,6 @@ describe('rendering', () => {
3534
(rootElement) => expect(within(rootElement).getByText('scroll view content')),
3635
],
3736
...feedbackColorPropTest,
38-
...neutralColorPropTest,
3937
...densePropTest('Root'),
4038
[
4139
{ disabled: true },

‎src/components/Card/_settings.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
@use "sass:list";
21
@use "../../styles/settings/collections";
32

4-
$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
3+
$colors: collections.$feedback-colors;
54
$themeable-properties: color, border-color, background-color;

‎src/components/Card/_theme.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
$padding: var(--rui-Card__padding);
22
$border-width: var(--rui-Card__border-width);
33
$border-radius: var(--rui-Card__border-radius);
4+
$background-color: var(--rui-Card__background-color);
45

56
$dense-padding: var(--rui-Card--dense__padding);
67
$raised-box-shadow: var(--rui-Card--raised__box-shadow);

0 commit comments

Comments
 (0)