Skip to content

Commit aa2a196

Browse files
jawinnjawinn
authored
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 213f61b commit aa2a196

File tree

5 files changed

+350
-157
lines changed

5 files changed

+350
-157
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/index.css

Lines changed: 61 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
Copyright 2023 Adobe. All rights reserved.
2+
Copyright 2024 Adobe. All rights reserved.
33
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License. You may obtain a copy
55
of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -11,96 +11,109 @@ governing permissions and limitations under the License.
1111

1212
.spectrum-AlertBanner {
1313
--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
14-
--spectrum-alert-banner-size: var(--spectrum-alert-banner-width);
14+
--spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
15+
--spectrum-alert-banner-inline-size: auto;
16+
1517
--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
16-
--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
18+
--spectrum-alert-banner-line-height: var(--spectrum-line-height-100);
19+
--spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack);
20+
--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
1721

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

2836
/* colors */
29-
--spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default);
30-
--spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
37+
--spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default));
3138
--spectrum-alert-banner-font-color: var(--spectrum-white);
3239

33-
/* settings for nested Divider */
34-
--mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider));
35-
--mod-divider-vertical-height: auto;
36-
--mod-divider-vertical-align: stretch;
40+
/* settings for nested Close button */
41+
--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));
42+
--mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button));
43+
--mod-closebutton-align-self: flex-start;
3744

38-
/* settings for nested Button */
39-
--mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button));
40-
--mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider));
41-
--mod-button-margin-left: auto;
45+
&:lang(ja),
46+
&:lang(zh),
47+
&:lang(ko) {
48+
--spectrum-alert-banner-line-height: var(--spectrum-cjk-line-height-100);
49+
}
50+
}
4251

43-
/* settings for nested CloseButton */
44-
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
45-
--mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
46-
--mod-closebutton-align-self: flex-start;
52+
.spectrum-AlertBanner--info {
53+
--spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default));
54+
}
55+
56+
.spectrum-AlertBanner--negative {
57+
--spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default));
4758
}
4859

4960
.spectrum-AlertBanner {
5061
display: none;
5162
justify-content: space-between;
52-
inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
63+
inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size));
64+
max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
5365
min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
5466
font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
67+
font-family: var(--mod-alert-banner-font-family, var(--spectrum-alert-banner-font-family));
68+
line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height));
5569
color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
56-
background-color: var(--mod-alert-banner-netural-background, var(--spectrum-alert-banner-netural-background));
70+
background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background));
5771
border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);
5872

5973
&.is-open {
6074
display: flex;
6175
}
6276
}
6377

64-
.spectrum-AlertBanner--info {
65-
background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
66-
}
67-
68-
.spectrum-AlertBanner--negative {
69-
background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
70-
}
71-
7278
.spectrum-AlertBanner-body {
7379
inline-size: 100%;
7480
display: flex;
75-
76-
/* --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 */
77-
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);
7881
flex-wrap: wrap;
7982
align-items: center;
80-
margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge));
81-
}
83+
justify-content: flex-end;
8284

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

87-
.spectrum-AlertBanner-end {
102+
.spectrum-AlertBanner-content {
88103
display: flex;
89-
align-items: center;
104+
flex-grow: 1;
90105
}
91106

92107
.spectrum-AlertBanner-icon {
93-
inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
94-
block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
95-
margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon));
108+
--mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
109+
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)));
96110
margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
97111
flex-shrink: 0;
98112
}
99113

100114
.spectrum-AlertBanner-text {
101-
margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text));
102-
margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text));
103-
margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
115+
margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start));
116+
margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end));
104117
}
105118

106119
@media (forced-colors: active) {

‎components/alertbanner/metadata/mods.md

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
1-
| Modifiable custom properties |
2-
| ---------------------------------------------- |
3-
| `--mod-alert-banner-bottom-text` |
4-
| `--mod-alert-banner-close-button-spacing` |
5-
| `--mod-alert-banner-edge-to-button` |
6-
| `--mod-alert-banner-edge-to-divider` |
7-
| `--mod-alert-banner-font-color` |
8-
| `--mod-alert-banner-font-size` |
9-
| `--mod-alert-banner-icon-size` |
10-
| `--mod-alert-banner-icon-to-text` |
11-
| `--mod-alert-banner-informative-background` |
12-
| `--mod-alert-banner-min-height` |
13-
| `--mod-alert-banner-negative-background` |
14-
| `--mod-alert-banner-netural-background` |
15-
| `--mod-alert-banner-size` |
16-
| `--mod-alert-banner-start-edge` |
17-
| `--mod-alert-banner-text-to-button-horizontal` |
18-
| `--mod-alert-banner-text-to-button-vertical` |
19-
| `--mod-alert-banner-text-to-divider` |
20-
| `--mod-alert-banner-top-icon` |
21-
| `--mod-alert-banner-top-text` |
1+
| Modifiable custom properties |
2+
| ----------------------------------------------- |
3+
| `--mod-alert-banner-background` |
4+
| `--mod-alert-banner-block-edge-to-button` |
5+
| `--mod-alert-banner-bottom-to-text` |
6+
| `--mod-alert-banner-close-button-to-content` |
7+
| `--mod-alert-banner-close-button-to-inline-end` |
8+
| `--mod-alert-banner-font-color` |
9+
| `--mod-alert-banner-font-family` |
10+
| `--mod-alert-banner-font-size` |
11+
| `--mod-alert-banner-icon-size` |
12+
| `--mod-alert-banner-icon-to-text` |
13+
| `--mod-alert-banner-informative-background` |
14+
| `--mod-alert-banner-inline-end-to-content` |
15+
| `--mod-alert-banner-inline-size` |
16+
| `--mod-alert-banner-inline-start-to-content` |
17+
| `--mod-alert-banner-line-height` |
18+
| `--mod-alert-banner-max-inline-size` |
19+
| `--mod-alert-banner-min-height` |
20+
| `--mod-alert-banner-negative-background` |
21+
| `--mod-alert-banner-neutral-background` |
22+
| `--mod-alert-banner-text-margin-block-end` |
23+
| `--mod-alert-banner-text-margin-block-start` |
24+
| `--mod-alert-banner-text-to-button-horizontal` |
25+
| `--mod-alert-banner-text-to-button-vertical` |
26+
| `--mod-alert-banner-top-to-close-button` |
27+
| `--mod-alert-banner-top-to-icon` |
28+
| `--mod-alert-banner-top-to-text` |

0 commit comments

Comments
 (0)