Skip to content

Commit 96224f0

Browse files
mukunkumukunku
authored
feat(notice/toast): update styles for SHINE (#2109)
* base styles for notice and toast * dark mode * light hc * cleanup * update svelte component * update links * remove commented code * lint * Create lazy-teachers-wink.md * update migration guide * update baseline * fix lint, tests, and storybook * lint harder * fix tests * lint again * Handle word wrapping for code blocks * make notices support multi-line properly * fix responsiveness of examples * adjust examples * adjust comment * cleanup stories (#2117) * Update lazy-teachers-wink.md * lint * update icon to cross * fix test * fix gap issue between multiple notice actions * lint * fix gaps
1 parent 85c14d4 commit 96224f0

376 files changed

Lines changed: 1161 additions & 1065 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/lazy-teachers-wink.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@stackoverflow/stacks": minor
3+
"@stackoverflow/stacks-svelte": minor
4+
---
5+
6+
feat(notice): update styles for SHINE
7+
feat(toast): update styles for SHINE
8+
9+
BREAKING CHANGES
10+
* Markup for notices has been updated

‎MIGRATION_GUIDE.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,11 @@ The menu component has been updated to use new class names and structure. The fo
112112
- New `.s-navigation--icon` class to style icons alongside navigation items
113113
- New `.s-navigation--avatar` class to style avatars alongside navigation items
114114

115+
#### Notices
116+
- Markup has been been updated
117+
- New `.s-notice--icon` class to style the new notice icons
118+
- New `.s-notice--dismiss` class to style the optional dismiss button
119+
115120
#### Pagination
116121
- The next and previous button now uses an `ArrowRight` and `ArrowLeft` icon instead of text. To apply the new styling, use the class `.s-pagination--item__nav`. Since these buttons use icons to represent their behavior, make sure to include descriptive text for screen readers.
117122

‎packages/stacks-classic/lib/components/notice/notice.less‎

Lines changed: 82 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -9,32 +9,18 @@
99
*/
1010
.generate-variant-variables(@colorName: "", @modifier: "") {
1111
& when (@modifier = "") {
12-
--_no-bc: ~"var(--@{colorName}-300)";
1312
--_no-bg: ~"var(--@{colorName}-100)";
14-
--_no-btn-bg-active: ~"var(--@{colorName}-200)";
15-
--_no-btn-bg-focus: ~"var(--@{colorName}-200)";
16-
--_no-btn-fc: ~"var(--@{colorName}-500)";
13+
--_no-icon-bg: ~"var(--@{colorName}-200)";
1714
--_no-code-bc: ~"var(--@{colorName}-300)";
1815
--_no-code-bg: ~"var(--@{colorName}-200)";
19-
20-
.highcontrast-mode({
21-
--_no-bc: ~"var(--@{colorName}-400)";
22-
});
2316
}
2417

2518
& when (@modifier = important) {
26-
--_no-bc: var(--_no-bg);
2719
--_no-bg: ~"var(--@{colorName}-400)";
20+
--_no-icon-bg: ~"var(--@{colorName}-500)";
2821
--_no-fc: var(--white);
29-
--_no-btn-bg-active: ~"var(--@{colorName}-500)";
30-
--_no-btn-bg-focus: ~"var(--@{colorName}-500)";
31-
--_no-btn-fc: ~"var(--@{colorName}-100)";
3222
--_no-code-bc: ~"var(--@{colorName}-300)";
3323
--_no-code-bg: ~"var(--@{colorName}-500)";
34-
35-
.highcontrast-mode({
36-
--_no-bg: ~"var(--@{colorName}-500)";
37-
});
3824
}
3925
}
4026

@@ -47,47 +33,27 @@
4733
* @baseClass - The base class name for the notice component
4834
*/
4935
.construct-notice-component(@baseClass) {
50-
--_no-bc: var(--black-225);
51-
--_no-bg: var(--black-100);
52-
--_no-fc: var(--black-500);
53-
--_no-btn-bg-active: var(--black-250);
54-
--_no-btn-bg-focus: var(--black-225);
55-
--_no-btn-fc: var(--_no-fc);
36+
--_no-bg: var(--black-150);
37+
--_no-icon-bg: var(--black-200);
38+
--_no-fc: var(--black-600);
5639
--_no-code-bc: var(--black-300);
5740
--_no-code-bg: var(--black-200);
5841
--_no-code-fc: var(--_no-fc);
5942

6043
// CONTEXTUAL STYLES
6144
.highcontrast-mode({
62-
&,
63-
&.@{baseClass}__danger,
64-
&.@{baseClass}__info,
65-
&.@{baseClass}__success,
66-
&.@{baseClass}__warning {
67-
--_no-code-bc: var(--black-400);
68-
--_no-code-bg: var(--white);
69-
--_no-code-fc: var(--black);
70-
71-
&.@{baseClass}__important {
72-
--_no-code-bc: var(--black-200);
73-
--_no-code-bg: var(--black);
74-
--_no-code-fc: var(--white);
75-
}
45+
&:not(&__important) {
46+
--_no-icon-bc: var(--_no-code-bc);
7647
}
77-
78-
--_no-bc: var(--black-400);
7948
});
8049

8150
// MODIFIERS
82-
&__important:not(.@{baseClass}__danger):not(.@{baseClass}__info):not(.@{baseClass}__success):not(.@{baseClass}__warning) {
83-
--_no-bc: var(--_no-bg);
84-
--_no-bg: var(--black-500);
51+
&__important {
52+
--_no-bg: var(--black-400);
53+
--_no-icon-bg: var(--black-500);
8554
--_no-fc: var(--white);
86-
--_no-btn-bg-focus: var(--black-600);
87-
--_no-btn-bg-active: var(--black-600);
88-
--_no-btn-fc: var(--_no-fc);
8955
--_no-code-bc: var(--black-300);
90-
--_no-code-bg: var(--black-600);
56+
--_no-code-bg: var(--black-500);
9157
}
9258

9359
// VARIANTS
@@ -103,11 +69,11 @@
10369

10470
&__info {
10571
&:not(.@{baseClass}__important) {
106-
.generate-variant-variables(theme-secondary);
72+
.generate-variant-variables(blue);
10773
}
10874

10975
&.@{baseClass}__important {
110-
.generate-variant-variables(theme-secondary, important);
76+
.generate-variant-variables(blue, important);
11177
}
11278
}
11379

@@ -121,33 +87,57 @@
12187
}
12288
}
12389

90+
&__featured {
91+
&:not(.@{baseClass}__important) {
92+
.generate-variant-variables(purple);
93+
}
94+
95+
&.@{baseClass}__important {
96+
.generate-variant-variables(purple, important);
97+
}
98+
}
99+
100+
&__activity {
101+
&:not(.@{baseClass}__important) {
102+
.generate-variant-variables(pink);
103+
}
104+
105+
&.@{baseClass}__important {
106+
.generate-variant-variables(pink, important);
107+
}
108+
}
109+
124110
&__warning {
125111
&:not(.@{baseClass}__important) {
126112
.generate-variant-variables(yellow);
127-
--_no-btn-fc: var(--yellow-600);
113+
128114
}
129115

130116
&.@{baseClass}__important {
131-
--_no-bc: var(--_no-bg);
132-
--_no-bg: var(--yellow-400);
117+
--_no-bg: var(--yellow-300);
118+
--_no-icon-bg: var(--yellow-400);
133119
--_no-fc: var(--black);
134-
--_no-btn-fc: var(--_no-fc);
135-
--_no-btn-bg-active: var(--yellow-300);
136-
--_no-btn-bg-focus: var(--yellow-300);
137-
--_no-code-bc: var(--yellow-500);
138-
--_no-code-bg: var(--yellow-300);
120+
--_no-code-bc: var(--yellow-400);
121+
--_no-code-bg: var(--yellow-200);
122+
123+
.s-notice--icon {
124+
color: var(--white);
125+
}
139126

140127
.dark-mode({
141128
--_no-fc: var(--white);
142129
--_no-code-bc: var(--yellow-300);
143130
--_no-code-bg: var(--yellow-500);
131+
--_no-bg: var(--yellow-400);
132+
--_no-icon-bg: var(--yellow-500);
144133
});
145134

146135
.highcontrast-mode({
147-
--_no-bg: var(--yellow-500);
136+
--_no-bg: var(--yellow-400);
137+
--_no-icon-bg: var(--yellow-500);
138+
--_no-code-bc: var(--yellow-300);
139+
--_no-code-bg: var(--yellow-500);
148140
--_no-fc: var(--white);
149-
--_no-btn-bg-active: transparent;
150-
--_no-btn-bg-focus: transparent;
151141
});
152142
}
153143
}
@@ -157,41 +147,60 @@
157147
background-color: var(--_no-code-bg);
158148
color: var(--_no-code-fc);
159149
outline: var(--su-static1) solid var(--_no-code-bc);
160-
161-
border-radius: var(--br-md);
162150
padding-left: var(--su2);
163151
padding-right: var(--su2);
152+
white-space: nowrap;
164153
}
165154

166-
& &--btn {
167-
// TODO: decouple .s-notice--btn from .s-btn
155+
button&--dismiss {
168156
&:active {
169-
background-color: var(--_no-btn-bg-active, inherit) !important;
157+
background-color: var(--_no-fc);
158+
color: var(--_no-bg);
170159
}
171160

172161
&:focus-visible,
173162
&:hover,
174163
&.focus-inset-bordered {
175-
background-color: var(--_no-btn-bg-focus, inherit) !important;
164+
background-color: var(--_no-fc);
165+
color: var(--_no-bg);
176166
}
167+
}
177168

178-
color: var(--_no-btn-fc, inherit) !important;
179-
padding: var(--su8);
169+
:has(>button&--dismiss) {
170+
padding-left: var(--su24);
171+
//Add spacing between multiple notice actions
172+
gap: calc(var(--su24) - var(--su2)); //22px
173+
//Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component
174+
word-wrap: initial !important;
180175
}
181176

182177
// STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
183178
background: var(--_no-bg);
184-
border-color: var(--_no-bc);
185179
color: var(--_no-fc);
186-
187-
border-style: solid;
188-
font-size: var(--fs-body1);
189180
}
190181

191182
.s-notice {
192183
.construct-notice-component(s-notice);
193184

194-
border-radius: var(--br-md);
195-
border-width: var(--su-static1);
196-
padding: var(--su16);
185+
display: flex;
186+
align-items: center;
187+
188+
--_no-pd: var(--su8);
189+
padding: var(--_no-pd) var(--su12) var(--_no-pd) 0;
190+
191+
&--icon {
192+
background: var(--_no-icon-bg);
193+
border: var(--su1) solid var(--_no-icon-bc, var(--_no-icon-bg));
194+
padding: var(--_no-pd);
195+
margin-right: var(--su12);
196+
align-self: stretch;
197+
198+
//Position the svg icon
199+
display: flex;
200+
align-items: top;
201+
202+
//Negative margin to make up for s-notice's padding
203+
margin-top: calc(var(--_no-pd) * -1);
204+
margin-bottom: calc(var(--_no-pd) * -1);
205+
}
197206
}

‎packages/stacks-classic/lib/components/notice/notice.visual.test.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ describe("notice", () => {
1313
ariaHidden: "false",
1414
},
1515
children: {
16-
default: `Test notice <code>some code</code> <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a>`,
16+
default: `<span>Test notice <code>some code</code> <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a></span>`,
17+
longText: `<span>Test notice <code>some code</code> <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a> with very long text that should surely wrap around to the next line so we can test the visual changes of multi-line notices in our pages.</span>`,
1718
},
1819
tag: "aside",
1920
template: ({ component, testid }) => html`

‎packages/stacks-classic/lib/components/toast/toast.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
padding-bottom: var(--su8);
1818
padding-top: var(--su8);
1919
pointer-events: all;
20-
width: 100%;
2120
}
2221

2322
display: flex;

‎packages/stacks-classic/screenshots/Chromium/baseline/s-banner-dark-danger-important.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:24c9d1a050adf4efe3818ffa0c12f3000c38c61b43e0cde707ce0d20853433a8
3-
size 6371
2+
oid sha256:f7e60632d703a964b2d625eccfca5475172b87f9856ed92fefdb13bcfc90d970
3+
size 6409

‎packages/stacks-classic/screenshots/Chromium/baseline/s-banner-dark-danger.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:7295ec2338835ccc51538e32fbff6b774a22e657cf9350ed9066c28c16a7e5ca
3-
size 6488
2+
oid sha256:1138e1535e5026009fedce998579c72f8675a838d33390b6b64a35f6b19338ed
3+
size 6384

‎packages/stacks-classic/screenshots/Chromium/baseline/s-banner-dark-important.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:a03230868334d6692349cc5c016e96820d8f88e1433cd272c130253189091917
3-
size 5800
2+
oid sha256:ec308000e5be40b13d304c22c8162f59c198d40a5424a100fda24219dc2c6ac5
3+
size 6502

‎packages/stacks-classic/screenshots/Chromium/baseline/s-banner-dark-info-important.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:10c38fc65c97a8aba6778ae3875247b835fafeb9c185bedaf9041c5eccfa2205
3-
size 6424
2+
oid sha256:ce1900eef7c4ce324ea0f4391b59a134ef9f03f68eddfbe917bbb76a302b58e4
3+
size 6459

‎packages/stacks-classic/screenshots/Chromium/baseline/s-banner-dark-info.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:ad6a894cfea22b8badf2ceb23b7a8cd119a7413e10287c477852c67fa0bb2f9f
3-
size 6359
2+
oid sha256:a9ae5525eab413862563a31933e5223c56461767273ea59396cf7ca2f23b2a84
3+
size 6600

0 commit comments

Comments
 (0)