Skip to content

Commit ae32fd5

Browse files
sophschneidersam-b-rose
sophschneider
authored and
sam-b-rose
committed
Remove conditional se23 logic from Banner
1 parent 3a67a3f commit ae32fd5

File tree

4 files changed

+57
-958
lines changed

4 files changed

+57
-958
lines changed

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

Lines changed: 22 additions & 283 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,36 @@
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;
213-
}
214-
}
215-
216-
.hasDismiss {
217-
padding-right: calc(var(--p-space-8) + var(--p-space-2));
218-
219-
#{$se23} & {
220-
padding: 0;
46+
margin-top: var(--p-space-4);
22147
}
22248
}
223-
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;
260-
261-
@media (-ms-high-contrast: active) {
262-
outline: var(--p-border-width-2) dotted;
263-
}
264-
}
265-
266-
&:visited {
267-
color: inherit;
268-
}
269-
}
270-
271-
.Text {
272-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
273-
@include focus-ring;
274-
}
275-
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);
286-
287-
&:focus-visible {
288-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
289-
@include focus-ring($style: 'focused');
290-
}
291-
}
292-
293-
.loading {
294-
position: relative;
295-
color: transparent;
296-
pointer-events: none;
297-
}
298-
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));
309-
}

0 commit comments

Comments
 (0)