Skip to content

Commit 008508a

Browse files
sophschneidersophschneider
authored
[LegacyCard] Consolidate se23 styles and logic (#10207)
### WHY are these changes introduced? Fixes #9944 ### WHAT is this pull request doing? * Consolidate se23 logic and styles for the `LegacyCard` Component ### 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-legacycard--all&globals=polarisSummerEditions2023:true) [This PR](https://5d559397bae39100201eedc1-uabmwvpwiv.chromatic.com/?path=/story/all-components-legacycard--all)
1 parent 0bfd30d commit 008508a

File tree

5 files changed

+61
-171
lines changed

5 files changed

+61
-171
lines changed

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

Lines changed: 48 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,16 @@
66
outline: var(--p-border-width-1) solid transparent;
77
overflow: clip;
88

9-
#{$se23} & {
10-
@include shadow-bevel(
11-
$boxShadow: var(--p-shadow-xs),
12-
$borderRadius: var(--p-border-radius-0-experimental),
13-
$zIndex: 101
14-
);
9+
@include shadow-bevel(
10+
$boxShadow: var(--p-shadow-xs),
11+
$borderRadius: var(--p-border-radius-0-experimental),
12+
$zIndex: 101
13+
);
1514

16-
// stylelint-disable-next-line -- se23 override custom heading font sizes
17-
h2,
18-
h3 {
19-
font-size: var(--p-font-size-80-experimental);
20-
}
15+
// Override custom heading font sizes
16+
h2,
17+
h3 {
18+
font-size: var(--p-font-size-80-experimental);
2119
}
2220

2321
+ .LegacyCard {
@@ -31,48 +29,32 @@
3129
@media #{$p-breakpoints-sm-up} {
3230
border-radius: var(--p-border-radius-2);
3331

32+
@include shadow-bevel(
33+
$boxShadow: var(--p-shadow-xs),
34+
$borderRadius: var(--p-border-radius-3),
35+
$zIndex: 101
36+
);
37+
3438
.Section:first-child {
35-
border-top-left-radius: var(--p-border-radius-2);
36-
border-top-right-radius: var(--p-border-radius-2);
39+
border-top-left-radius: var(--p-border-radius-3);
40+
border-top-right-radius: var(--p-border-radius-3);
3741
}
3842

3943
.Section:last-child {
40-
border-bottom-left-radius: var(--p-border-radius-2);
41-
border-bottom-right-radius: var(--p-border-radius-2);
42-
}
43-
44-
#{$se23} & {
45-
@include shadow-bevel(
46-
$boxShadow: var(--p-shadow-xs),
47-
$borderRadius: var(--p-border-radius-3),
48-
$zIndex: 101
49-
);
50-
51-
// stylelint-disable-next-line -- se23 override
52-
.Section:first-child {
53-
border-top-left-radius: var(--p-border-radius-3);
54-
border-top-right-radius: var(--p-border-radius-3);
55-
}
56-
57-
// stylelint-disable-next-line -- se23 override
58-
.Section:last-child {
59-
border-bottom-left-radius: var(--p-border-radius-3);
60-
border-bottom-right-radius: var(--p-border-radius-3);
61-
}
44+
border-bottom-left-radius: var(--p-border-radius-3);
45+
border-bottom-right-radius: var(--p-border-radius-3);
6246
}
6347
}
6448

6549
@media print {
6650
box-shadow: none;
6751

68-
#{$se23} & {
69-
@include shadow-bevel(
70-
$boxShadow: none,
71-
$borderRadius: var(--p-border-radius-0-experimental),
72-
$border: none,
73-
$content: none
74-
);
75-
}
52+
@include shadow-bevel(
53+
$boxShadow: none,
54+
$borderRadius: var(--p-border-radius-0-experimental),
55+
$border: none,
56+
$content: none
57+
);
7658
}
7759
}
7860

@@ -92,11 +74,7 @@
9274
padding: var(--p-space-4) var(--p-space-4) 0;
9375

9476
@media #{$p-breakpoints-sm-up} {
95-
padding: var(--p-space-5) var(--p-space-5) 0;
96-
97-
#{$se23} & {
98-
padding: var(--p-space-2) var(--p-space-4) 0;
99-
}
77+
padding: var(--p-space-2) var(--p-space-4) 0;
10078
}
10179

10280
@media print and #{$p-breakpoints-sm-up} {
@@ -105,30 +83,18 @@
10583
}
10684

10785
.Section {
108-
padding: var(--p-space-4);
109-
110-
#{$se23} & {
111-
padding: var(--p-space-2) var(--p-space-4);
112-
}
86+
padding: var(--p-space-2) var(--p-space-4);
11387

11488
@media #{$p-breakpoints-sm-up} {
115-
padding: var(--p-space-5);
116-
117-
#{$se23} & {
118-
padding: var(--p-space-2) var(--p-space-4);
119-
}
89+
padding: var(--p-space-2) var(--p-space-4);
12090
}
12191

12292
+ .Section {
123-
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
93+
border-top: 0;
12494

12595
@media print {
12696
border-top: 0;
12797
}
128-
129-
#{$se23} & {
130-
border-top: 0;
131-
}
13298
}
13399

134100
@media print {
@@ -141,11 +107,7 @@
141107
padding: var(--p-space-4) 0;
142108

143109
@media #{$p-breakpoints-sm-up} {
144-
padding: var(--p-space-5) 0;
145-
146-
#{$se23} & {
147-
padding: var(--p-space-4) 0;
148-
}
110+
padding: var(--p-space-4) 0;
149111
}
150112
}
151113

@@ -155,42 +117,28 @@
155117
@media #{$p-breakpoints-sm-up} {
156118
padding: 0;
157119
}
158-
159-
#{$se23} & {
160-
padding: 0;
161-
}
162120
}
163121

164122
.Section-subdued {
165123
background-color: var(--p-color-bg-subdued);
166-
167-
#{$se23} & {
168-
padding: var(--p-space-3) var(--p-space-4);
169-
}
124+
padding: var(--p-space-3) var(--p-space-4);
170125

171126
@media (-ms-high-contrast: active) {
172127
background-color: transparent;
173128
}
174129

175130
.Header + & {
176-
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
177-
margin-top: var(--p-space-5);
178-
179-
#{$se23} & {
180-
border-top: 0;
181-
margin-top: 0;
182-
}
131+
border-top: 0;
132+
margin-top: 0;
183133
}
184134
}
185135

186136
.Section-subdued:last-child {
187-
#{$se23} & {
188-
padding: var(--p-space-4);
137+
padding: var(--p-space-4);
189138

190-
@media print {
191-
padding-top: var(--p-space-2);
192-
padding-bottom: var(--p-space-2);
193-
}
139+
@media print {
140+
padding-top: var(--p-space-2);
141+
padding-bottom: var(--p-space-2);
194142
}
195143
}
196144

@@ -202,32 +150,21 @@
202150
padding-right: var(--p-space-4);
203151

204152
@media #{$p-breakpoints-sm-up} {
205-
padding-left: var(--p-space-5);
206-
padding-right: var(--p-space-5);
207-
208-
#{$se23} & {
209-
padding-left: var(--p-space-4);
210-
padding-right: var(--p-space-4);
211-
}
153+
padding-left: var(--p-space-4);
154+
padding-right: var(--p-space-4);
212155
}
213156
}
214157
}
215158

216159
.Subsection {
217160
+ .Subsection {
218-
margin-top: var(--p-space-4);
219-
padding-top: var(--p-space-4);
220-
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
161+
border-top: 0;
162+
margin-top: 0;
163+
padding-top: var(--p-space-2);
221164

222165
@media print {
223166
border-top: 0;
224167
}
225-
226-
#{$se23} & {
227-
border-top: 0;
228-
margin-top: 0;
229-
padding-top: var(--p-space-2);
230-
}
231168
}
232169

233170
@media print {
@@ -239,43 +176,27 @@
239176
.Footer {
240177
display: flex;
241178
justify-content: flex-end;
242-
padding: var(--p-space-2) var(--p-space-4) var(--p-space-4);
243179

244-
#{$se23} & {
245-
padding: 0 var(--p-space-4) var(--p-space-4);
246-
}
180+
padding: 0 var(--p-space-4) var(--p-space-4);
247181

248182
@media #{$p-breakpoints-sm-up} {
249-
padding: 0 var(--p-space-5) var(--p-space-5);
250-
251-
#{$se23} & {
252-
padding: 0 var(--p-space-4) var(--p-space-4);
253-
}
183+
padding: 0 var(--p-space-4) var(--p-space-4);
254184
}
255185

256186
&.LeftJustified {
257187
justify-content: flex-start;
258188
}
259189

260190
.Section-subdued + & {
261-
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
262-
padding: var(--p-space-5);
263-
264-
#{$se23} & {
265-
padding: var(--p-space-4);
266-
border-top: 0;
267-
}
191+
padding: var(--p-space-4);
192+
border-top: 0;
268193
}
269194
}
270195

271196
.FirstSectionPadding {
272-
#{$se23} & {
273-
padding-top: var(--p-space-4);
274-
}
197+
padding-top: var(--p-space-4);
275198
}
276199

277200
.LastSectionPadding {
278-
#{$se23} & {
279-
padding-bottom: var(--p-space-4);
280-
}
201+
padding-bottom: var(--p-space-4);
281202
}

‎polaris-react/src/components/LegacyCard/LegacyCard.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import type {DisableableAction, ComplexAction} from '../../types';
99
import {ActionList} from '../ActionList';
1010
import {Button, buttonFrom} from '../Button';
1111
import {Popover} from '../Popover';
12-
import {useFeatures} from '../../utilities/features';
1312

1413
import {Header, Section, Subsection} from './components';
1514
import styles from './LegacyCard.scss';
@@ -153,14 +152,9 @@ LegacyCard.Subsection = Subsection;
153152
* more browser versions https://caniuse.com/css-nth-child-of.
154153
*/
155154
function useLegacyCardPaddingObserverRef() {
156-
const {polarisSummerEditions2023} = useFeatures();
157155
const legacyCard = useRef<HTMLDivElement>(null);
158156

159157
useEffect(() => {
160-
if (!polarisSummerEditions2023) {
161-
return;
162-
}
163-
164158
const legacyCardNode = legacyCard.current;
165159
let firstSection: Element | undefined;
166160
let lastSection: Element | undefined;
@@ -212,7 +206,7 @@ function useLegacyCardPaddingObserverRef() {
212206
observer.disconnect();
213207
};
214208
}
215-
}, [polarisSummerEditions2023]);
209+
}, []);
216210

217211
return legacyCard;
218212
}

‎polaris-react/src/components/LegacyCard/components/Header/Header.tsx‎

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@ import React, {isValidElement} from 'react';
33
import type {DisableableAction} from '../../../../types';
44
import {buttonsFrom} from '../../../Button';
55
import {ButtonGroup} from '../../../ButtonGroup';
6-
import {LegacyStack} from '../../../LegacyStack';
76
import {Text} from '../../../Text';
87
import styles from '../../LegacyCard.scss';
9-
import {useFeatures} from '../../../../utilities/features';
108
import {InlineStack} from '../../../InlineStack';
119

1210
export interface LegacyCardHeaderProps {
@@ -16,45 +14,32 @@ export interface LegacyCardHeaderProps {
1614
}
1715

1816
export function Header({children, title, actions}: LegacyCardHeaderProps) {
19-
const {polarisSummerEditions2023} = useFeatures();
2017
const actionMarkup = actions ? (
2118
<ButtonGroup>{buttonsFrom(actions, {variant: 'plain'})}</ButtonGroup>
2219
) : null;
2320

2421
const titleMarkup = isValidElement(title) ? (
2522
title
2623
) : (
27-
<Text
28-
variant={polarisSummerEditions2023 ? 'headingSm' : 'headingMd'}
29-
as="h2"
30-
>
24+
<Text variant="headingSm" as="h2">
3125
{title}
3226
</Text>
3327
);
3428

3529
const headingMarkup =
36-
// eslint-disable-next-line no-nested-ternary
3730
actionMarkup || children ? (
38-
polarisSummerEditions2023 ? (
39-
<InlineStack
40-
wrap={false}
41-
gap="2"
42-
align="space-between"
43-
blockAlign="center"
44-
>
45-
{titleMarkup}
46-
<InlineStack wrap={false} gap="4" blockAlign="center">
47-
{actionMarkup}
48-
{children}
49-
</InlineStack>
50-
</InlineStack>
51-
) : (
52-
<LegacyStack alignment="baseline">
53-
<LegacyStack.Item fill>{titleMarkup}</LegacyStack.Item>
31+
<InlineStack
32+
wrap={false}
33+
gap="2"
34+
align="space-between"
35+
blockAlign="center"
36+
>
37+
{titleMarkup}
38+
<InlineStack wrap={false} gap="4" blockAlign="center">
5439
{actionMarkup}
5540
{children}
56-
</LegacyStack>
57-
)
41+
</InlineStack>
42+
</InlineStack>
5843
) : (
5944
titleMarkup
6045
);

0 commit comments

Comments
 (0)