Skip to content

Commit 91ad8cc

Browse files
kyledurandlaurkim
kyledurand
authored and
laurkim
committed
[ResourceItem] Use layout components (#7784)
Closes: #7580 This slightly moves the checkbox handle 2px to the left. This means it now lines up with our 20px padding instead of 22px from the card edge. Also improves vertical alignment of the checkboxes and bulk select on xs screens Before | After ---|--- ![image](https://screenshot.click/24-12-z59dz-bpdqu.png) | ![image](https://screenshot.click/24-12-viiqs-efiaf.png) The only CSS that remains is for interactive elements, interactive behavior (hover, focus), and transitions (which are being removed in https://github.com/Shopify/polaris/pull/7290/files).
1 parent 392b873 commit 91ad8cc

File tree

7 files changed

+206
-306
lines changed

7 files changed

+206
-306
lines changed

‎.changeset/nine-worms-sip.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Rebuilt `ResourceItem` with layout components

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,20 @@ $bulk-actions-button-stacking-order: (
7979
max-width: 100%;
8080
pointer-events: auto;
8181

82+
@media #{$p-breakpoints-sm-down} {
83+
// stylelint-disable-next-line selector-max-combinators, selector-max-type -- the first item of button group on small screen needs to fill the space
84+
> div > div:first-child {
85+
flex: 1 1 auto;
86+
}
87+
}
88+
89+
@media #{$p-breakpoints-sm-up} {
90+
width: auto;
91+
justify-content: flex-start;
92+
margin-right: var(--p-space-2);
93+
margin-left: calc(-1 * var(--p-space-05));
94+
}
95+
8296
.Group-measuring & {
8397
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
8498
position: absolute;
@@ -96,6 +110,11 @@ $bulk-actions-button-stacking-order: (
96110
}
97111
}
98112

113+
.CheckableContainer {
114+
flex: 1 1 0;
115+
margin-left: calc(-1 * (var(--p-space-05) + var(--p-space-1)));
116+
}
117+
99118
.disabled {
100119
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
101120
@include base-button-disabled;

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

Lines changed: 11 additions & 199 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,33 @@
11
@import '../../styles/common';
22

33
@mixin action-hide {
4-
clip: rect(1px, 1px, 1px, 1px);
4+
clip: rect(0, 0, 0, 0);
55
overflow: hidden;
6-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
7-
height: 1px;
86
}
97

108
@mixin action-unhide {
119
clip: auto;
1210
overflow: visible;
13-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
14-
height: 100%;
15-
}
16-
17-
.CheckboxWrapper {
18-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
19-
display: flex;
2011
}
2112

2213
.ResourceItem {
2314
// stylelint-disable -- Polaris component custom properties
2415
--pc-resource-item-min-height: 44px;
2516
--pc-resource-item-disclosure-width: 48px;
26-
// Offset equals handle width + handle margin-left + handle margin-right
27-
--pc-resource-item-offset: 40px;
17+
--pc-resource-item-offset: 38px;
2818
--pc-resource-item-clickable-stacking-order: 1;
2919
--pc-resource-item-content-stacking-order: 2;
3020
// stylelint-enable
31-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
32-
position: relative;
3321
outline: none;
3422
cursor: pointer;
3523

36-
&:not(.persistActions) {
37-
.Actions {
38-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
39-
right: var(--p-space-4);
40-
}
41-
}
42-
4324
&:hover {
4425
background-color: var(--p-surface-hovered);
4526

46-
&:not(.persistActions) {
47-
// stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
48-
.Actions {
27+
.Actions {
28+
/* stylelint-disable-next-line selector-max-combinators */
29+
> * {
4930
@include action-unhide;
50-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
51-
@media #{$p-breakpoints-lg-down} {
52-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
53-
display: none;
54-
}
5531
}
5632
}
5733
}
@@ -95,83 +71,6 @@
9571
border: none;
9672
}
9773

98-
// Item inner container
99-
.Container {
100-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
101-
position: relative;
102-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
103-
z-index: var(--pc-resource-item-content-stacking-order);
104-
padding: var(--p-space-3) var(--p-space-4);
105-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
106-
min-height: var(--pc-resource-item-min-height);
107-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
108-
display: flex;
109-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
110-
align-items: flex-start;
111-
112-
@media #{$p-breakpoints-sm-up} {
113-
padding: var(--p-space-3) var(--p-space-5);
114-
}
115-
}
116-
117-
.alignmentLeading {
118-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
119-
align-items: flex-start;
120-
}
121-
122-
.alignmentTrailing {
123-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
124-
align-items: flex-end;
125-
}
126-
127-
.alignmentCenter {
128-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
129-
align-items: center;
130-
}
131-
132-
.alignmentFill {
133-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
134-
align-items: stretch;
135-
}
136-
137-
.alignmentBaseline {
138-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
139-
align-items: baseline;
140-
}
141-
142-
.Owned {
143-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
144-
display: flex;
145-
}
146-
147-
.OwnedNoMedia {
148-
padding-top: var(--p-space-1);
149-
}
150-
151-
// Item handle
152-
.Handle {
153-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
154-
width: 48px;
155-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
156-
min-height: var(--pc-resource-item-min-height);
157-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
158-
justify-content: center;
159-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
160-
align-items: center;
161-
margin: calc(-1 * var(--p-space-3)) var(--p-space-1)
162-
calc(-1 * var(--p-space-3)) calc(-1 * var(--p-space-3));
163-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
164-
display: flex;
165-
166-
@media #{$p-breakpoints-sm-down} {
167-
visibility: hidden;
168-
169-
.selectMode & {
170-
visibility: visible;
171-
}
172-
}
173-
}
174-
17574
.selectable {
17675
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
17776
width: calc(100% + var(--pc-resource-item-offset));
@@ -193,104 +92,20 @@
19392
}
19493
}
19594

196-
.Media {
197-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
198-
flex: 0 0 auto;
199-
margin-right: var(--p-space-5);
200-
color: inherit;
201-
text-decoration: none;
202-
}
203-
204-
// Item content
205-
.Content {
206-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
207-
@include layout-flex-fix;
208-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
209-
flex: 1 1 auto;
210-
}
211-
21295
// Item actions
21396
.Actions {
214-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
215-
position: absolute;
216-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
217-
top: 0;
218-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
219-
display: flex;
220-
pointer-events: initial;
221-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
222-
height: 100%;
223-
max-height: 56px;
224-
225-
@include action-hide;
226-
227-
.focused & {
228-
@include action-unhide;
97+
> * {
98+
@include action-hide;
22999
}
230100

231-
@media #{$p-breakpoints-lg-down} {
232-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
233-
display: none;
234-
}
235-
}
236-
237-
.persistActions {
238-
.Actions {
239-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
240-
position: relative;
241-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
242-
display: flex;
243-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
244-
flex: 0 0 auto;
245-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
246-
flex-basis: auto;
247-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
248-
align-items: center;
249-
margin-top: 0;
250-
margin-left: var(--p-space-4);
251-
pointer-events: initial;
252-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
253-
height: 100%;
254-
255-
@media #{$p-breakpoints-lg-down} {
256-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
257-
display: none;
101+
.focused & {
102+
// stylelint-disable-next-line selector-max-combinators
103+
> * {
104+
@include action-unhide;
258105
}
259106
}
260107
}
261108

262-
.Disclosure {
263-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
264-
position: relative;
265-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
266-
top: calc(-1 * var(--p-space-3));
267-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
268-
right: calc(-1 * var(--p-space-4));
269-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
270-
display: none;
271-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
272-
width: var(--pc-resource-item-disclosure-width);
273-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
274-
min-height: var(--pc-resource-item-min-height);
275-
pointer-events: initial;
276-
277-
.selectMode & {
278-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
279-
display: none;
280-
}
281-
282-
@media #{$p-breakpoints-lg-down} {
283-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
284-
display: flex;
285-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
286-
flex: 0 0 var(--pc-resource-item-disclosure-width);
287-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
288-
justify-content: center;
289-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
290-
align-items: center;
291-
}
292-
}
293-
294109
.selected {
295110
background-color: var(--p-surface-selected);
296111

@@ -304,9 +119,6 @@
304119
}
305120

306121
.ListItem {
307-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
308-
position: relative;
309-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
310122
@include focus-ring($border-width: -1px);
311123

312124
.ListItem + & {

0 commit comments

Comments
 (0)