Skip to content

Commit c1cdaca

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 8f12712 commit c1cdaca

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: 37 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,81 +6,90 @@
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",
51-
"--spectrum-alert-banner-neutral-background",
52-
"--spectrum-alert-banner-size",
53-
"--spectrum-alert-banner-start-edge",
64+
"--spectrum-alert-banner-text-margin-block-end",
65+
"--spectrum-alert-banner-text-margin-block-start",
5466
"--spectrum-alert-banner-text-to-button-horizontal",
5567
"--spectrum-alert-banner-text-to-button-vertical",
56-
"--spectrum-alert-banner-text-to-divider",
57-
"--spectrum-alert-banner-top-icon",
58-
"--spectrum-alert-banner-top-text",
5968
"--spectrum-alert-banner-top-to-text",
6069
"--spectrum-alert-banner-top-to-workflow-icon",
6170
"--spectrum-alert-banner-width"
6271
],
6372
"global": [
6473
"--spectrum-border-width-100",
74+
"--spectrum-cjk-line-height-100",
6575
"--spectrum-font-size-100",
6676
"--spectrum-informative-background-color-default",
77+
"--spectrum-line-height-100",
6778
"--spectrum-negative-background-color-default",
79+
"--spectrum-neutral-subdued-background-color-default",
80+
"--spectrum-sans-font-family-stack",
81+
"--spectrum-spacing-200",
6882
"--spectrum-spacing-300",
6983
"--spectrum-text-to-visual-300",
7084
"--spectrum-white",
7185
"--spectrum-workflow-icon-size-100"
7286
],
7387
"system-theme": [],
7488
"passthroughs": [
75-
"--mod-button-margin-block",
76-
"--mod-button-margin-left",
77-
"--mod-button-margin-right",
7889
"--mod-closebutton-align-self",
7990
"--mod-closebutton-margin-inline",
8091
"--mod-closebutton-margin-top",
81-
"--mod-divider-vertical-align",
82-
"--mod-divider-vertical-height",
83-
"--mod-divider-vertical-margin"
92+
"--mod-icon-size"
8493
],
8594
"high-contrast": [
8695
"--highcontrast-alert-banner-border-color",

‎components/alertbanner/index.css

Lines changed: 62 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -14,95 +14,110 @@
1414
.spectrum-AlertBanner {
1515
--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
1616
--spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
17-
--spectrum-alert-banner-size: auto;
17+
--spectrum-alert-banner-inline-size: auto;
18+
1819
--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
19-
--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
20+
--spectrum-alert-banner-line-height: var(--spectrum-line-height-100);
21+
--spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack);
22+
--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
2023

2124
/* spacing */
2225
--spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
23-
--spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
26+
--spectrum-alert-banner-inline-start-to-content: var(--spectrum-spacing-300);
27+
--spectrum-alert-banner-inline-end-to-content: var(--spectrum-spacing-300);
2428
--spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
25-
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- internal reference below; todo solve for this edge case in the plugin */
26-
--spectrum-alert-banner-text-to-divider: 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);
29+
--spectrum-alert-banner-block-edge-to-button: var(--spectrum-spacing-200);
30+
--spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
31+
--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 */
32+
33+
/* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the
34+
padding-block of its parent AlertBanner-body element. */
35+
--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)));
36+
--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)));
3037

3138
/* 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);
39+
--spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default));
3440
--spectrum-alert-banner-font-color: var(--spectrum-white);
3541

36-
/* 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;
42+
/* @passthrough -- settings for nested Close button */
43+
--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));
44+
--mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button));
45+
--mod-closebutton-align-self: flex-start;
4046

41-
/* settings for nested Button */
42-
--mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button));
43-
--mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider));
44-
--mod-button-margin-left: auto;
47+
&:lang(ja),
48+
&:lang(zh),
49+
&:lang(ko) {
50+
--spectrum-alert-banner-line-height: var(--spectrum-cjk-line-height-100);
51+
}
52+
}
4553

46-
/* settings for nested CloseButton */
47-
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
48-
--mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
49-
--mod-closebutton-align-self: flex-start;
54+
.spectrum-AlertBanner--info {
55+
--spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default));
56+
}
5057

58+
.spectrum-AlertBanner--negative {
59+
--spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default));
60+
}
61+
62+
.spectrum-AlertBanner {
5163
display: none;
5264
justify-content: space-between;
53-
inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
65+
inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size));
5466
max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
5567
min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
5668
font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
69+
font-family: var(--mod-alert-banner-font-family, var(--spectrum-alert-banner-font-family));
70+
line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height));
5771
color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
58-
background-color: var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background));
72+
background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background));
5973
border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
6074

6175
&.is-open {
6276
display: flex;
6377
}
6478
}
6579

66-
.spectrum-AlertBanner--info {
67-
background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
68-
}
69-
70-
.spectrum-AlertBanner--negative {
71-
background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
72-
}
73-
7480
.spectrum-AlertBanner-body {
7581
inline-size: 100%;
7682
display: flex;
77-
78-
/* --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 */
79-
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);
8083
flex-wrap: wrap;
8184
align-items: center;
82-
margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge));
83-
}
85+
justify-content: flex-end;
8486

85-
.spectrum-AlertBanner-content {
86-
display: flex;
87+
/* Inline spacing between text and button, only when the button has not wrapped to the next line. */
88+
column-gap: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
89+
90+
/* Block spacing between text and button, when the button has wrapped to the next line. Takes into
91+
account the existing margins on the text. */
92+
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));
93+
94+
padding-block: var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button));
95+
margin-inline-start: var(--mod-alert-banner-inline-start-to-content, var(--spectrum-alert-banner-inline-start-to-content));
96+
margin-inline-end: var(--mod-alert-banner-inline-end-to-content, var(--spectrum-alert-banner-inline-end-to-content));
97+
98+
/* When dismissible, this spacing is handled by the margin-inline-start on the close button instead. */
99+
.spectrum-AlertBanner:has(.spectrum-CloseButton) & {
100+
margin-inline-end: 0;
101+
}
87102
}
88103

89-
.spectrum-AlertBanner-end {
104+
.spectrum-AlertBanner-content {
90105
display: flex;
91-
align-items: center;
106+
flex-grow: 1;
92107
}
93108

94109
.spectrum-AlertBanner-icon {
95-
inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
96-
block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
97-
margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon));
110+
/* @passthrough -- icon-size */
111+
--mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
112+
113+
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)));
98114
margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
99115
flex-shrink: 0;
100116
}
101117

102118
.spectrum-AlertBanner-text {
103-
margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text));
104-
margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text));
105-
margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
119+
margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start));
120+
margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end));
106121
}
107122

108123
@media (forced-colors: active) {

0 commit comments

Comments
 (0)