You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
@@ -71,16 +76,26 @@ governing permissions and limitations under the License.
71
76
.spectrum-AlertBanner-body {
72
77
inline-size:100%;
73
78
display: flex;
74
-
75
-
/* --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 */
Copy file name to clipboardExpand all lines: components/alertbanner/metadata/alertbanner.yml
+10-3Lines changed: 10 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,16 @@ sections:
9
9
description: |
10
10
### Version 2.0.0
11
11
#### Spectrum 2 release
12
-
Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed. A few other notable changes and additions:
13
-
- The mod custom property `--mod-alert-banner-netural-background` was misspelled and has been renamed to `--mod-alert-banner-neutral-background`. The
14
-
mod `--mod-alert-banner-background` was also added, which will take precendence over the variant background mods.
12
+
Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed.
13
+
The following mod custom properties have been changed:
14
+
- `--mod-alert-banner-size` was renamed to `--mod-alert-banner-inline-size`
15
+
- `--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.
16
+
- `--mod-alert-banner-top-text` was renamed to `--mod-alert-banner-top-to-text`
17
+
- `--mod-alert-banner-top-icon` was renamed to `--mod-alert-banner-top-to-icon`
18
+
- `--mod-alert-banner-bottom-text` was renamed to `--mod-alert-banner-bottom-to-text`
19
+
- `--mod-alert-banner-start-edge` was renamed to `--mod-alert-banner-inline-start-to-content`
20
+
- `--mod-alert-banner-edge-to-button` was renamed to `--mod-alert-banner-block-edge-to-button`
21
+
- 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.
text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purcahsed the software."
81
-
})}
82
-
${Template({
83
-
...args,
84
-
variant: "negative",
85
-
text: "Connection interupted. Check your network to continue."
86
-
})}
87
-
`)}
77
+
${!window.isChromatic() ? Template(args) : html`
78
+
<divclass="spectrum-Typography">
79
+
${Typography({
80
+
semantics: "detail",
81
+
size: "l",
82
+
content: ["All variants with button, including wrapping"],
83
+
})}
84
+
<div
85
+
style=${styleMap({
86
+
display: "flex",
87
+
flexDirection: "column",
88
+
gap: ".3rem",
89
+
})}
90
+
>
91
+
${Template(args)}
92
+
${Template({
93
+
...args,
94
+
variant: "info",
95
+
text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purchased the software.",
96
+
})}
97
+
${Template({
98
+
...args,
99
+
variant: "negative",
100
+
text: "Connection interupted. Check your network to continue.",
101
+
})}
102
+
</div>
103
+
</div>
104
+
<divclass="spectrum-Typography">
105
+
${Typography({
106
+
semantics: "detail",
107
+
size: "l",
108
+
content: ["All variants without button"],
109
+
})}
110
+
<div
111
+
style=${styleMap({
112
+
display: "flex",
113
+
flexDirection: "column",
114
+
gap: ".3rem",
115
+
})}
116
+
>
117
+
${Template({
118
+
...args,
119
+
actionButtonText: "",
120
+
})}
121
+
${Template({
122
+
...args,
123
+
variant: "info",
124
+
text: "Your trial will expire in 3 days. Once it expires your files will be saved and ready for you to open again once you have purchased the software.",
125
+
actionButtonText: "",
126
+
})}
127
+
${Template({
128
+
...args,
129
+
variant: "negative",
130
+
text: "Connection interupted. Check your network to continue.",
0 commit comments