Skip to content

Commit 01d479b

Browse files
sophschneiderkyledurand
sophschneider
authored and
kyledurand
committed
[Banner] Consolidate se23 logic and styles (#10001)
### WHY are these changes introduced? Fixes #9919 ### WHAT is this pull request doing? * Removes se23 conditional logic for `Banner.tsx` * Consolidates se23 conditional styles for `Banner.scss` * Removes unused styles * Merges `BannerExperimental` with main Banner ### How to 🎩 Compare production and this PR's chromatic storybook to make sure styles are the same [Production](https://storybook.polaris.shopify.com/?path=/story/all-components-banner--all&globals=polarisSummerEditions2023:true) [This PR](https://5d559397bae39100201eedc1-cwkvegwhxb.chromatic.com/?path=/story/all-components-banner--all)
1 parent ad6928e commit 01d479b

File tree

9 files changed

+360
-1269
lines changed

9 files changed

+360
-1269
lines changed

‎polaris-react/src/components/Banner/Banner.scss‎

Lines changed: 48 additions & 266 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,9 @@
11
@import '../../styles/common';
22

3-
@mixin banner-variants($in-page) {
4-
border: var(--p-border-width-1) solid var(--p-color-border-strong);
5-
background-color: var(--p-color-bg-app);
6-
7-
#{$se23} & {
8-
border: none;
9-
background-color: var(--p-color-bg);
10-
}
11-
12-
@if $in-page {
13-
border-radius: 0;
14-
border-width: var(--p-border-width-1) 0;
15-
16-
#{$se23} & {
17-
@include shadow-bevel(
18-
$boxShadow: var(--p-shadow-sm),
19-
$borderRadius: var(--p-border-radius-0-experimental),
20-
// The following arguments explicitly ignore the shadow-bevel opt out
21-
$border: none,
22-
$content: ''
23-
);
24-
}
25-
26-
@media #{$p-breakpoints-sm-up} {
27-
border-width: var(--p-border-width-1);
28-
border-radius: var(--p-border-radius-2);
29-
30-
#{$se23} & {
31-
@include shadow-bevel(
32-
$boxShadow: var(--p-shadow-sm),
33-
$borderRadius: var(--p-border-radius-3),
34-
// The following arguments explicitly ignore the shadow-bevel opt out
35-
$border: none,
36-
$content: ''
37-
);
38-
}
39-
}
40-
} @else {
41-
border-radius: var(--p-border-radius-1);
42-
43-
#{$se23} & {
44-
box-shadow: none;
45-
border-radius: var(--p-border-radius-2);
46-
}
47-
}
3+
.Banner {
4+
background-color: var(--p-color-bg);
5+
position: relative;
6+
display: flex;
487

498
&:focus {
509
outline: none;
@@ -54,256 +13,79 @@
5413
outline: var(--p-border-width-2) solid
5514
var(--p-color-border-interactive-focus);
5615
}
57-
58-
&.statusSuccess {
59-
border-color: var(--p-color-border-success-subdued);
60-
background-color: var(--p-color-bg-success-subdued);
61-
}
62-
63-
&.statusInfo {
64-
border-color: var(--p-color-border-info-subdued);
65-
background-color: var(--p-color-bg-info-subdued);
66-
}
67-
68-
&.statusWarning {
69-
border-color: var(--p-color-border-caution-subdued);
70-
background-color: var(--p-color-bg-caution-subdued);
71-
}
72-
73-
&.statusCritical {
74-
border-color: var(--p-color-border-critical-subdued);
75-
background-color: var(--p-color-bg-critical-subdued);
76-
}
77-
}
78-
79-
.Banner {
80-
// stylelint-disable -- Polaris component custom properties
81-
--pc-banner-secondary-action-horizontal-padding: var(--p-space-3);
82-
--pc-banner-secondary-action-vertical-padding: var(--p-space-2);
83-
// stylelint-enable
84-
position: relative;
85-
display: flex;
86-
87-
// stylelint-disable selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
88-
&.statusCritical .PrimaryAction.Button {
89-
border-color: var(--p-color-border-critical-subdued);
90-
91-
&:hover {
92-
border-color: var(--p-color-border-critical-subdued);
93-
background: var(--p-color-bg-critical-subdued-hover);
94-
}
95-
96-
&:active {
97-
border-color: var(--p-color-border-critical-subdued);
98-
background: var(--p-color-bg-critical-subdued-active);
99-
}
100-
101-
&:focus:not(:active) {
102-
border-color: var(--p-color-border-critical-subdued);
103-
background: var(--p-color-bg-critical-subdued);
104-
}
105-
}
106-
107-
&.statusWarning .PrimaryAction.Button {
108-
border-color: var(--p-color-border-caution-subdued);
109-
110-
&:hover {
111-
border-color: var(--p-color-border-caution-subdued);
112-
background: var(--p-color-bg-caution-subdued-hover);
113-
}
114-
115-
&:active {
116-
border-color: var(--p-color-border-caution-subdued);
117-
background: var(--p-color-bg-caution-subdued-active);
118-
}
119-
120-
&:focus:not(:active) {
121-
border-color: var(--p-color-border-caution-subdued);
122-
background: var(--p-color-bg-caution-subdued);
123-
}
124-
}
125-
126-
&.statusInfo .PrimaryAction.Button {
127-
border-color: var(--p-color-border-info-subdued);
128-
129-
&:hover {
130-
border-color: var(--p-color-border-info-subdued);
131-
background: var(--p-color-bg-info-subdued-hover);
132-
}
133-
134-
&:active {
135-
border-color: var(--p-color-border-info-subdued);
136-
background: var(--p-color-bg-info-subdued-active);
137-
}
138-
139-
&:focus:not(:active) {
140-
border-color: var(--p-color-border-info-subdued);
141-
background: var(--p-color-bg-info-subdued);
142-
}
143-
}
144-
145-
&.statusSuccess .PrimaryAction.Button {
146-
border-color: var(--p-color-border-success-subdued);
147-
148-
&:hover {
149-
border-color: var(--p-color-border-success-subdued);
150-
background: var(--p-color-bg-success-subdued-hover);
151-
}
152-
153-
&:active {
154-
border-color: var(--p-color-border-success-subdued);
155-
background: var(--p-color-bg-success-subdued-active);
156-
}
157-
158-
&:focus:not(:active) {
159-
border-color: var(--p-color-border-success-subdued);
160-
background: var(--p-color-bg-success-subdued);
161-
}
162-
}
163-
// stylelint-enable selector-max-class, selector-max-specificity
164-
}
165-
166-
.ContentWrapper {
167-
margin-top: calc(-1 * var(--p-space-05));
168-
flex: 1 1 auto;
16916
}
17017

17118
.withinContentContainer {
172-
padding: var(--p-space-4);
173-
174-
#{$se23} & {
175-
padding: 0;
176-
}
177-
178-
.Dismiss {
179-
top: var(--p-space-4);
180-
right: var(--p-space-3);
181-
position: absolute;
182-
}
183-
184-
@include banner-variants($in-page: false);
19+
border-radius: var(--p-border-radius-2);
18520

18621
+ .Banner {
18722
margin-top: var(--p-space-2);
188-
189-
#{$se23} & {
190-
box-shadow: none;
191-
}
19223
}
19324
}
19425

19526
.withinPage {
196-
border-radius: 0 0 var(--p-border-radius-1) var(--p-border-radius-1);
197-
padding: var(--p-space-5);
198-
199-
#{$se23} & {
200-
padding: 0;
27+
@include shadow-bevel(
28+
$boxShadow: var(--p-shadow-sm),
29+
$borderRadius: var(--p-border-radius-0-experimental),
30+
// The following arguments explicitly ignore the shadow-bevel opt out
31+
$border: none,
32+
$content: ''
33+
);
34+
35+
@media #{$p-breakpoints-sm-up} {
36+
@include shadow-bevel(
37+
$boxShadow: var(--p-shadow-sm),
38+
$borderRadius: var(--p-border-radius-3),
39+
// The following arguments explicitly ignore the shadow-bevel opt out
40+
$border: none,
41+
$content: ''
42+
);
20143
}
20244

203-
@include banner-variants(true);
204-
20545
+ .Banner {
206-
margin-top: var(--p-space-5);
207-
}
208-
209-
.Dismiss {
210-
right: var(--p-space-4);
211-
top: var(--p-space-5);
212-
position: absolute;
46+
margin-top: var(--p-space-4);
21347
}
21448
}
21549

216-
.hasDismiss {
217-
padding-right: calc(var(--p-space-8) + var(--p-space-2));
50+
// stylelint-disable -- Duplicate selectors to bump specificity for button svg color override
51+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#increasing_specificity_by_duplicating_selector
21852

219-
#{$se23} & {
220-
padding: 0;
53+
@mixin recolor-icon($fill-color: null) {
54+
svg,
55+
path {
56+
fill: $fill-color;
22157
}
22258
}
22359

224-
// We need pretty high specificity to do the descendant selectors
225-
// onto the text, which needs to be the relative positioned wrapper
226-
// so that the borders/ backgrounds do not extend outside of it.
227-
228-
.SecondaryAction {
229-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
230-
@include unstyled-button;
231-
display: inline-block;
232-
text-align: left;
233-
text-decoration: none;
234-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
235-
margin: calc(-1 * var(--pc-banner-secondary-action-vertical-padding))
236-
calc(-0.5 * var(--pc-banner-secondary-action-horizontal-padding));
237-
// stylelint-enable
238-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
239-
padding: var(--pc-banner-secondary-action-vertical-padding)
240-
var(--pc-banner-secondary-action-horizontal-padding);
241-
// stylelint-enable
242-
color: var(--p-color-text);
243-
padding-left: var(--p-space-2);
244-
245-
&:hover > .Text {
246-
text-decoration: underline;
247-
}
248-
249-
&:active > .Text {
250-
text-decoration: underline;
251-
}
252-
253-
&:focus-visible > .Text {
254-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
255-
@include plain-button-backdrop;
256-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
257-
@include focus-ring($style: 'focused');
258-
box-shadow: none;
259-
text-decoration: underline;
60+
.icon-on-color.icon-on-color.icon-on-color {
61+
@include recolor-icon(var(--p-color-icon-on-color));
62+
}
26063

261-
@media (-ms-high-contrast: active) {
262-
outline: var(--p-border-width-2) dotted;
263-
}
264-
}
64+
.icon-success-strong-experimental.icon-success-strong-experimental.icon-success-strong-experimental {
65+
@include recolor-icon(var(--p-color-icon-success-strong-experimental));
66+
}
26567

266-
&:visited {
267-
color: inherit;
268-
}
68+
.text-warning-strong.text-warning-strong.text-warning-strong {
69+
@include recolor-icon(var(--p-color-text-warning-strong));
26970
}
27071

271-
.Text {
272-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
273-
@include focus-ring;
72+
.icon-warning-strong-experimental.icon-warning-strong-experimental.icon-warning-strong-experimental {
73+
@include recolor-icon(var(--p-color-icon-warning-strong-experimental));
27474
}
27575

276-
.Button {
277-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
278-
@include button-base;
279-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
280-
@include focus-ring($border-width: 2px);
281-
font-size: var(--p-font-size-100);
282-
font-weight: var(--p-font-weight-medium);
283-
line-height: var(--p-font-line-height-1);
284-
letter-spacing: initial;
285-
color: var(--p-color-text);
76+
.icon-critical-strong-experimental.icon-critical-strong-experimental.icon-critical-strong-experimental {
77+
@include recolor-icon(var(--p-color-icon-critical-strong-experimental));
78+
}
28679

287-
&:focus-visible {
288-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
289-
@include focus-ring($style: 'focused');
290-
}
80+
.text-info-strong.text-info-strong.text-info-strong {
81+
@include recolor-icon(var(--p-color-text-info-strong));
29182
}
29283

293-
.loading {
294-
position: relative;
295-
color: transparent;
296-
pointer-events: none;
84+
.icon-info-strong-experimental.icon-info-strong-experimental.icon-info-strong-experimental {
85+
@include recolor-icon(var(--p-color-icon-info-strong-experimental));
29786
}
29887

299-
.Spinner {
300-
// stylelint-disable-next-line -- Polaris component custom properties
301-
--pc-spinner-size: var(--p-space-5);
302-
position: absolute;
303-
top: 50%;
304-
left: 50%;
305-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
306-
margin-top: calc(-1 * (var(--pc-spinner-size) / 2));
307-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
308-
margin-left: calc(-1 * (var(--pc-spinner-size) / 2));
88+
.icon-subdued.icon-subdued.icon-subdued {
89+
@include recolor-icon(var(--p-color-icon-subdued));
30990
}
91+
// stylelint-enable

0 commit comments

Comments
 (0)