Skip to content

Commit 839d069

Browse files
jawinncastastrophe
jawinn
authored and
castastrophe
committed
feat(alertbanner): migrate to spectrum 2 (#2652)
* feat(alertbanner): start migration to spectrum two Migrates the component to spectrum two. - Theme files are removed, and their custom properties integrated into the main index.css. - Renames misspelled mod custom property (noted in docs) - Simplifies background color styles by changing a single custom property per variant, as done on other components. * feat(alertbanner): spectrum 2 spacing and mod name cleanup Adjust some spacings to match the Spectrum 2 spec spacing. And renames some mods so they are more consistent with current naming conventions, and their purpose is more clear. === Update spacing to match the Spectrum 2 spec === One issue with the S1 version was that there was too much space between the text and the button, when the button wrapped to the next line. And there was a different token defined for the space from the bottom edge to the text, and vertically between the button and the text. This helps resolve this by moving some of the spacing to padding on the AlertBanner-body, and subtracting this value from some of the other custom properties. Along with using both column-gap and row-gap properties. === adjust storybook template spacing and decorator === Improves spacing in Storybook template, especially the Chromatic only template. Decorator and wrapper styles are modeled after those used in Action button, so they look more similar. Previously the layout was a little cramped and the "detail" elements were missing their margins because they were display inline. * docs(alertbanner): custom storybook docs page and template updates Creates a custom MDX docs page in Storybook for the Alert banner component. And reworks the stories and chromatic-only templates a little to facilitate and increase coverage. Includes Storybook VRT coverage for the max width changes in PR #2762 . Tests the display of the alert banner when in a container larger than and smaller than its max-inline-size. * chore(alertbanner): linter updates and update mods - Add stylelint disable line comments for some false positives caught by the linter. - Re-generate mods file * docs(alertbanner): use stories and template from main Use the stories and updated template from main, with a few things left out that are not yet available in the spectrum-two branch. * feat(alertbanner): support no close button or no action button Adds spacing to the end of the alert banner when the close button is not displayed, or both the close button and action button are not displayed. These are allowed combinations of options. * feat(alertbanner): use spec defined line-height token * feat(alertbanner): add font-family token and mod * feat(alertbanner): add cjk line-height * feat(alertbanner): remove unnecessary styles for end element Remove styles for .spectrum-AlertBanner-end, which were no longer doing anything after the removal of the divider.
1 parent bc3a818 commit 839d069

File tree

3 files changed

+118
-75
lines changed

3 files changed

+118
-75
lines changed

‎.changeset/tame-bobcats-beam.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
"@spectrum-css/alertbanner": major
3+
---
4+
5+
#### Spectrum 2 migration
6+
7+
Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed.
8+
9+
The following changes have been made to the mod custom properties:
10+
11+
- `--mod-alert-banner-size` was renamed to `--mod-alert-banner-inline-size`
12+
- `--mod-alert-banner-neutral-background` was previously misspelled. The mod `--mod-alert-banner-background` was also added, which will take precendence over the variant background mods.
13+
- `--mod-alert-banner-top-text` was renamed to `--mod-alert-banner-top-to-text`
14+
- `--mod-alert-banner-top-icon` was renamed to `--mod-alert-banner-top-to-icon`
15+
- `--mod-alert-banner-bottom-text` was renamed to `--mod-alert-banner-bottom-to-text`
16+
- `--mod-alert-banner-start-edge` was renamed to `--mod-alert-banner-inline-start-to-content`
17+
- `--mod-alert-banner-edge-to-button` was renamed to `--mod-alert-banner-block-edge-to-button`
18+
- The spacing on either side of the close button is now controlled by two separate mods; `--mod-alert-banner-close-button-to-inline-end` and `--mod-alert-banner-close-button-to-content`. The previous `--mod-alert-banner-close-button-spacing` has been removed.
19+
- A new mod `--mod-alert-banner-inline-end-to-content` was added, which handles the inline end spacing when the alert banner does not have a close button. Or when there is neither a close button or an action button.

‎components/alertbanner/dist/metadata.json

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,81 +6,91 @@
66
".spectrum-AlertBanner--negative",
77
".spectrum-AlertBanner-body",
88
".spectrum-AlertBanner-content",
9-
".spectrum-AlertBanner-end",
109
".spectrum-AlertBanner-icon",
1110
".spectrum-AlertBanner-text",
12-
".spectrum-AlertBanner.is-open"
11+
".spectrum-AlertBanner.is-open",
12+
".spectrum-AlertBanner:has(.spectrum-CloseButton) .spectrum-AlertBanner-body",
13+
".spectrum-AlertBanner:lang(ja)",
14+
".spectrum-AlertBanner:lang(ko)",
15+
".spectrum-AlertBanner:lang(zh)"
1316
],
1417
"modifiers": [
15-
"--mod-alert-banner-bottom-text",
16-
"--mod-alert-banner-close-button-spacing",
17-
"--mod-alert-banner-edge-to-button",
18-
"--mod-alert-banner-edge-to-divider",
18+
"--mod-alert-banner-background",
19+
"--mod-alert-banner-block-edge-to-button",
20+
"--mod-alert-banner-bottom-to-text",
21+
"--mod-alert-banner-close-button-to-content",
22+
"--mod-alert-banner-close-button-to-inline-end",
1923
"--mod-alert-banner-font-color",
24+
"--mod-alert-banner-font-family",
2025
"--mod-alert-banner-font-size",
2126
"--mod-alert-banner-icon-size",
2227
"--mod-alert-banner-icon-to-text",
2328
"--mod-alert-banner-informative-background",
29+
"--mod-alert-banner-inline-end-to-content",
30+
"--mod-alert-banner-inline-size",
31+
"--mod-alert-banner-inline-start-to-content",
32+
"--mod-alert-banner-line-height",
2433
"--mod-alert-banner-max-inline-size",
2534
"--mod-alert-banner-min-height",
2635
"--mod-alert-banner-negative-background",
2736
"--mod-alert-banner-neutral-background",
28-
"--mod-alert-banner-size",
29-
"--mod-alert-banner-start-edge",
37+
"--mod-alert-banner-text-margin-block-end",
38+
"--mod-alert-banner-text-margin-block-start",
3039
"--mod-alert-banner-text-to-button-horizontal",
3140
"--mod-alert-banner-text-to-button-vertical",
32-
"--mod-alert-banner-text-to-divider",
33-
"--mod-alert-banner-top-icon",
34-
"--mod-alert-banner-top-text"
41+
"--mod-alert-banner-top-to-close-button",
42+
"--mod-alert-banner-top-to-icon",
43+
"--mod-alert-banner-top-to-text"
3544
],
3645
"component": [
37-
"--spectrum-alert-banner-bottom-text",
46+
"--spectrum-alert-banner-background",
47+
"--spectrum-alert-banner-block-edge-to-button",
3848
"--spectrum-alert-banner-bottom-to-text",
3949
"--spectrum-alert-banner-close-button-spacing",
40-
"--spectrum-alert-banner-edge-to-button",
41-
"--spectrum-alert-banner-edge-to-divider",
50+
"--spectrum-alert-banner-close-button-to-content",
51+
"--spectrum-alert-banner-close-button-to-inline-end",
4252
"--spectrum-alert-banner-font-color",
53+
"--spectrum-alert-banner-font-family",
4354
"--spectrum-alert-banner-font-size",
4455
"--spectrum-alert-banner-icon-size",
4556
"--spectrum-alert-banner-icon-to-text",
46-
"--spectrum-alert-banner-informative-background",
57+
"--spectrum-alert-banner-inline-end-to-content",
58+
"--spectrum-alert-banner-inline-size",
59+
"--spectrum-alert-banner-inline-start-to-content",
60+
"--spectrum-alert-banner-line-height",
4761
"--spectrum-alert-banner-max-inline-size",
4862
"--spectrum-alert-banner-min-height",
4963
"--spectrum-alert-banner-minimum-height",
50-
"--spectrum-alert-banner-negative-background",
5164
"--spectrum-alert-banner-neutral-background",
52-
"--spectrum-alert-banner-size",
53-
"--spectrum-alert-banner-start-edge",
65+
"--spectrum-alert-banner-text-margin-block-end",
66+
"--spectrum-alert-banner-text-margin-block-start",
5467
"--spectrum-alert-banner-text-to-button-horizontal",
5568
"--spectrum-alert-banner-text-to-button-vertical",
56-
"--spectrum-alert-banner-top-icon",
57-
"--spectrum-alert-banner-top-text",
5869
"--spectrum-alert-banner-top-to-text",
5970
"--spectrum-alert-banner-top-to-workflow-icon",
6071
"--spectrum-alert-banner-width"
6172
],
6273
"global": [
6374
"--spectrum-border-width-100",
75+
"--spectrum-cjk-line-height-100",
6476
"--spectrum-font-size-100",
6577
"--spectrum-informative-background-color-default",
78+
"--spectrum-line-height-100",
6679
"--spectrum-negative-background-color-default",
6780
"--spectrum-neutral-subdued-background-color-default",
81+
"--spectrum-sans-font-family-stack",
82+
"--spectrum-spacing-200",
6883
"--spectrum-spacing-300",
6984
"--spectrum-text-to-visual-300",
7085
"--spectrum-white",
7186
"--spectrum-workflow-icon-size-100"
7287
],
7388
"system-theme": [],
7489
"passthroughs": [
75-
"--mod-button-margin-block",
76-
"--mod-button-margin-left",
77-
"--mod-button-margin-right",
7890
"--mod-closebutton-align-self",
7991
"--mod-closebutton-margin-inline",
8092
"--mod-closebutton-margin-top",
81-
"--mod-divider-vertical-align",
82-
"--mod-divider-vertical-height",
83-
"--mod-divider-vertical-margin"
93+
"--mod-icon-size"
8494
],
8595
"high-contrast": [
8696
"--highcontrast-alert-banner-border-color",

‎components/alertbanner/index.css

Lines changed: 63 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -16,96 +16,110 @@
1616

1717
--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
1818
--spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
19-
--spectrum-alert-banner-size: auto;
19+
--spectrum-alert-banner-inline-size: auto;
20+
2021
--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
21-
--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
22+
--spectrum-alert-banner-line-height: var(--spectrum-line-height-100);
23+
--spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack);
24+
--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
2225

2326
/* spacing */
2427
--spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
25-
--spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
28+
--spectrum-alert-banner-inline-start-to-content: var(--spectrum-spacing-300);
29+
--spectrum-alert-banner-inline-end-to-content: var(--spectrum-spacing-300);
2630
--spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
27-
--spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
28-
--spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
29-
--spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text);
31+
--spectrum-alert-banner-block-edge-to-button: var(--spectrum-spacing-200);
32+
--spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
33+
--spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
34+
35+
/* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the
36+
padding-block of its parent AlertBanner-body element. */
37+
--spectrum-alert-banner-text-margin-block-start: max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
38+
--spectrum-alert-banner-text-margin-block-end: max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
3039

3140
/* colors */
32-
--spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default);
33-
--spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
41+
--spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default));
3442
--spectrum-alert-banner-font-color: var(--spectrum-white);
3543

36-
/* @passthrough start -- settings for nested Divider */
37-
--mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider));
38-
--mod-divider-vertical-height: auto;
39-
--mod-divider-vertical-align: stretch;
40-
/* @passthrough end */
41-
42-
/* @passthrough start -- settings for nested Button */
43-
--mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button));
44-
--mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-spacing-300));
45-
--mod-button-margin-left: auto;
46-
/* @passthrough end */
47-
48-
/* @passthrough start -- settings for nested CloseButton */
49-
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
50-
--mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
44+
/* @passthrough -- settings for nested Close button */
45+
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-to-content, var(--spectrum-alert-banner-close-button-to-content)) var(--mod-alert-banner-close-button-to-inline-end, var(--spectrum-alert-banner-close-button-to-inline-end));
46+
--mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button));
5147
--mod-closebutton-align-self: flex-start;
52-
/* @passthrough end */
5348

49+
&:lang(ja),
50+
&:lang(zh),
51+
&:lang(ko) {
52+
--spectrum-alert-banner-line-height: var(--spectrum-cjk-line-height-100);
53+
}
54+
}
55+
56+
.spectrum-AlertBanner--info {
57+
--spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default));
58+
}
59+
60+
.spectrum-AlertBanner--negative {
61+
--spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default));
62+
}
63+
64+
.spectrum-AlertBanner {
5465
display: none;
5566
justify-content: space-between;
56-
inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
67+
inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size));
5768
max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
5869
min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
5970
font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
71+
font-family: var(--mod-alert-banner-font-family, var(--spectrum-alert-banner-font-family));
72+
line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height));
6073
color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
61-
background-color: var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background));
74+
background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background));
6275
border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
6376

6477
&.is-open {
6578
display: flex;
6679
}
6780
}
6881

69-
.spectrum-AlertBanner--info {
70-
background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
71-
}
72-
73-
.spectrum-AlertBanner--negative {
74-
background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
75-
}
76-
7782
.spectrum-AlertBanner-body {
7883
inline-size: 100%;
7984
display: flex;
80-
81-
/* --mod-* for alert-banner-text-to-button-vertical will only accept values larger than alert-banner-edge-to-bottom, as gap only recognizes positive values */
82-
gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px);
8385
flex-wrap: wrap;
8486
align-items: center;
85-
margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge));
86-
}
87+
justify-content: flex-end;
8788

88-
.spectrum-AlertBanner-content {
89-
display: flex;
89+
/* Inline spacing between text and button, only when the button has not wrapped to the next line. */
90+
column-gap: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
91+
92+
/* Block spacing between text and button, when the button has wrapped to the next line. Takes into
93+
account the existing margins on the text. */
94+
row-gap: max(var(--mod-alert-banner-text-to-button-vertical, 0px), var(--spectrum-alert-banner-text-to-button-vertical) - var(--spectrum-alert-banner-text-margin-block-end));
95+
96+
padding-block: var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button));
97+
margin-inline-start: var(--mod-alert-banner-inline-start-to-content, var(--spectrum-alert-banner-inline-start-to-content));
98+
margin-inline-end: var(--mod-alert-banner-inline-end-to-content, var(--spectrum-alert-banner-inline-end-to-content));
99+
100+
/* When dismissible, this spacing is handled by the margin-inline-start on the close button instead. */
101+
.spectrum-AlertBanner:has(.spectrum-CloseButton) & {
102+
margin-inline-end: 0;
103+
}
90104
}
91105

92-
.spectrum-AlertBanner-end {
106+
.spectrum-AlertBanner-content {
93107
display: flex;
94-
align-items: center;
108+
flex-grow: 1;
95109
}
96110

97111
.spectrum-AlertBanner-icon {
98-
inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
99-
block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
100-
margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon));
112+
/* @passthrough -- icon-size */
113+
--mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
114+
115+
margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
101116
margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
102117
flex-shrink: 0;
103118
}
104119

105120
.spectrum-AlertBanner-text {
106-
margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text));
107-
margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text));
108-
margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
121+
margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start));
122+
margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end));
109123
}
110124

111125
@media (forced-colors: active) {

0 commit comments

Comments
 (0)