Skip to content

Commit bb8b551

Browse files
laurkimaveline
laurkim
and
aveline
authored
[Layout foundations] Add LegacyCard component (#8238)
### WHY are these changes introduced? Resolves #8231. Creating a `LegacyCard` component that is a duplicate of the existing `Card` in light of upcoming work to replace this with the `AlphaCard` component. ### WHAT is this pull request doing? Adds `LegacyCard` to `polaris-react`. Adds `LegacyCard` page to style guide with examples and prop table. <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: aveline <aveline@users.noreply.github.com>
1 parent 0ee4325 commit bb8b551

37 files changed

+3868
-1579
lines changed

‎.changeset/swift-jokes-punch.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/polaris': minor
3+
'polaris.shopify.com': minor
4+
---
5+
6+
Added `LegacyCard` component

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

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
@import '../../styles/common';
2+
3+
.LegacyCard {
4+
background-color: var(--p-surface);
5+
box-shadow: var(--p-shadow-card);
6+
outline: var(--p-border-width-1) solid transparent;
7+
8+
+ .LegacyCard {
9+
margin-top: var(--p-space-4);
10+
11+
@media print {
12+
margin-top: calc(-1 * var(--p-space-2));
13+
}
14+
}
15+
16+
@media #{$p-breakpoints-sm-up} {
17+
border-radius: var(--p-border-radius-2);
18+
}
19+
20+
@media print {
21+
box-shadow: none;
22+
}
23+
}
24+
25+
.subdued {
26+
background-color: var(--p-surface-subdued);
27+
}
28+
29+
.Section-hideOnPrint,
30+
.hideOnPrint {
31+
@media print {
32+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
33+
display: none !important;
34+
}
35+
}
36+
37+
.Header {
38+
padding: var(--p-space-4) var(--p-space-4) 0;
39+
40+
@media #{$p-breakpoints-sm-up} {
41+
padding: var(--p-space-5) var(--p-space-5) 0;
42+
}
43+
44+
@media print and #{$p-breakpoints-sm-up} {
45+
padding: var(--p-space-2) var(--p-space-4) var(--p-space-0);
46+
}
47+
}
48+
49+
.Section {
50+
padding: var(--p-space-4);
51+
52+
@media #{$p-breakpoints-sm-up} {
53+
padding: var(--p-space-5);
54+
}
55+
56+
+ .Section {
57+
border-top: var(--p-border-divider);
58+
59+
@media print {
60+
border-top: 0;
61+
}
62+
}
63+
64+
@media print {
65+
padding-top: var(--p-space-1);
66+
padding-bottom: var(--p-space-1);
67+
}
68+
}
69+
70+
.Section:first-child {
71+
border-top-left-radius: var(--p-border-radius-2);
72+
border-top-right-radius: var(--p-border-radius-2);
73+
}
74+
75+
.Section:last-child {
76+
border-bottom-left-radius: var(--p-border-radius-2);
77+
border-bottom-right-radius: var(--p-border-radius-2);
78+
}
79+
80+
.Section-fullWidth {
81+
padding: var(--p-space-4) var(--p-space-0);
82+
83+
@media #{$p-breakpoints-sm-up} {
84+
padding: var(--p-space-5) var(--p-space-0);
85+
}
86+
}
87+
88+
.Section-flush {
89+
padding: var(--p-space-0);
90+
91+
@media #{$p-breakpoints-sm-up} {
92+
padding: var(--p-space-0);
93+
}
94+
}
95+
96+
.Section-subdued {
97+
background-color: var(--p-surface-subdued);
98+
99+
@media (-ms-high-contrast: active) {
100+
background-color: transparent;
101+
}
102+
103+
.Header + & {
104+
border-top: var(--p-border-divider);
105+
margin-top: var(--p-space-5);
106+
}
107+
}
108+
109+
.SectionHeader {
110+
padding-bottom: var(--p-space-2);
111+
112+
.Section-fullWidth & {
113+
padding-left: var(--p-space-4);
114+
padding-right: var(--p-space-4);
115+
116+
@media #{$p-breakpoints-sm-up} {
117+
padding-left: var(--p-space-5);
118+
padding-right: var(--p-space-5);
119+
}
120+
}
121+
}
122+
123+
.Subsection {
124+
+ .Subsection {
125+
margin-top: var(--p-space-4);
126+
padding-top: var(--p-space-4);
127+
border-top: var(--p-border-divider);
128+
129+
@media print {
130+
border-top: 0;
131+
}
132+
}
133+
134+
@media print {
135+
padding-top: var(--p-space-1);
136+
padding-bottom: var(--p-space-1);
137+
}
138+
}
139+
140+
.Footer {
141+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
142+
display: flex;
143+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
144+
justify-content: flex-end;
145+
padding: 0 var(--p-space-4) var(--p-space-4);
146+
147+
@media #{$p-breakpoints-sm-up} {
148+
padding: 0 var(--p-space-5) var(--p-space-5);
149+
}
150+
151+
&.LeftJustified {
152+
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
153+
justify-content: flex-start;
154+
}
155+
156+
.Section-subdued + & {
157+
border-top: var(--p-border-divider);
158+
padding: var(--p-space-5);
159+
}
160+
}

0 commit comments

Comments
 (0)