Skip to content

Commit 286c63a

Browse files
laurkimavelinekyledurandchazdean
authored
[Layout foundations][Batch 3] Rebuild components with layout primitives (#7950)
### WHY are these changes introduced? Related to [7565](#7565). ### WHAT is this pull request doing? Rebuilds the following components to use our layout primitives. - `Tabs` #7835 - `DropZone` #7840 - `PageHeader` #7916 - `OptionList` #7952 - `Popover` #7960 ### 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 - [ ] [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> Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com> Co-authored-by: Chaz Dean <59836805+chazdean@users.noreply.github.com>
1 parent 17fa970 commit 286c63a

File tree

19 files changed

+191
-263
lines changed

19 files changed

+191
-263
lines changed

‎.changeset/beige-falcons-guess.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+
Remove unused class in Page Header

‎.changeset/fresh-boats-fly.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': minor
3+
---
4+
5+
Updated `Tabs` component to use layout primitives

‎.changeset/lazy-crews-sing.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 Page Header with layout components

‎.changeset/slimy-years-tie.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': minor
3+
---
4+
5+
Updated `OptionList` to use new layout primitives

‎.changeset/thin-apricots-admire.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': minor
3+
---
4+
5+
Updated `Popover` to use new layout primitives

‎polaris-react/src/components/DropZone/DropZone.stories.tsx‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ import {
77
DropZone,
88
List,
99
Page,
10-
Stack,
10+
AlphaStack,
1111
Thumbnail,
12+
Inline,
1213
} from '@shopify/polaris';
1314
import {NoteMinor} from '@shopify/polaris-icons';
1415

@@ -30,9 +31,9 @@ export function Default() {
3031
const fileUpload = !files.length && <DropZone.FileUpload />;
3132
const uploadedFiles = files.length > 0 && (
3233
<div style={{padding: '0'}}>
33-
<Stack vertical>
34+
<AlphaStack>
3435
{files.map((file, index) => (
35-
<Stack alignment="center" key={index}>
36+
<Inline align="center" key={index}>
3637
<Thumbnail
3738
size="small"
3839
alt={file.name}
@@ -49,9 +50,9 @@ export function Default() {
4950
{file.size} bytes
5051
</Text>
5152
</div>
52-
</Stack>
53+
</Inline>
5354
))}
54-
</Stack>
55+
</AlphaStack>
5556
</div>
5657
);
5758

@@ -86,9 +87,9 @@ export function WithImageFileUpload() {
8687

8788
const fileUpload = !files.length && <DropZone.FileUpload />;
8889
const uploadedFiles = files.length > 0 && (
89-
<Stack vertical>
90+
<AlphaStack>
9091
{files.map((file, index) => (
91-
<Stack alignment="center" key={index}>
92+
<Inline align="center" key={index}>
9293
<Thumbnail
9394
size="small"
9495
alt={file.name}
@@ -101,9 +102,9 @@ export function WithImageFileUpload() {
101102
{file.size} bytes
102103
</Text>
103104
</div>
104-
</Stack>
105+
</Inline>
105106
))}
106-
</Stack>
107+
</AlphaStack>
107108
);
108109

109110
const errorMessage = hasError && (
@@ -122,13 +123,13 @@ export function WithImageFileUpload() {
122123
);
123124

124125
return (
125-
<Stack vertical>
126+
<AlphaStack fullWidth>
126127
{errorMessage}
127128
<DropZone accept="image/*" type="image" onDrop={handleDrop}>
128129
{uploadedFiles}
129130
{fileUpload}
130131
</DropZone>
131-
</Stack>
132+
</AlphaStack>
132133
);
133134
}
134135

@@ -145,7 +146,7 @@ export function WithSingleFileUpload() {
145146

146147
const fileUpload = !file && <DropZone.FileUpload />;
147148
const uploadedFile = file && (
148-
<Stack>
149+
<Inline>
149150
<Thumbnail
150151
size="small"
151152
alt={file.name}
@@ -162,7 +163,7 @@ export function WithSingleFileUpload() {
162163
{file.size} bytes
163164
</Text>
164165
</div>
165-
</Stack>
166+
</Inline>
166167
);
167168

168169
return (
@@ -185,9 +186,9 @@ export function WithDropOnPage() {
185186
const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
186187

187188
const uploadedFiles = files.length > 0 && (
188-
<Stack vertical>
189+
<AlphaStack>
189190
{files.map((file, index) => (
190-
<Stack alignment="center" key={index}>
191+
<Inline align="center" key={index}>
191192
<Thumbnail
192193
size="small"
193194
alt={file.name}
@@ -204,9 +205,9 @@ export function WithDropOnPage() {
204205
{file.size} bytes
205206
</Text>
206207
</div>
207-
</Stack>
208+
</Inline>
208209
))}
209-
</Stack>
210+
</AlphaStack>
210211
);
211212

212213
const uploadMessage = !uploadedFiles && <DropZone.FileUpload />;
@@ -247,9 +248,9 @@ export function AcceptsOnlySVGFiles() {
247248
);
248249

249250
const uploadedFiles = files.length > 0 && (
250-
<Stack vertical>
251+
<AlphaStack>
251252
{files.map((file, index) => (
252-
<Stack alignment="center" key={index}>
253+
<Inline align="center" key={index}>
253254
<Thumbnail
254255
size="small"
255256
alt={file.name}
@@ -262,9 +263,9 @@ export function AcceptsOnlySVGFiles() {
262263
{file.size} bytes
263264
</Text>
264265
</div>
265-
</Stack>
266+
</Inline>
266267
))}
267-
</Stack>
268+
</AlphaStack>
268269
);
269270

270271
const errorMessage = hasError && (
@@ -283,7 +284,7 @@ export function AcceptsOnlySVGFiles() {
283284
);
284285

285286
return (
286-
<Stack vertical>
287+
<AlphaStack fullWidth>
287288
{errorMessage}
288289
<DropZone
289290
accept="image/svg+xml"
@@ -293,7 +294,7 @@ export function AcceptsOnlySVGFiles() {
293294
>
294295
{uploadedFiles}
295296
</DropZone>
296-
</Stack>
297+
</AlphaStack>
297298
);
298299
}
299300

@@ -310,9 +311,9 @@ export function Nested() {
310311

311312
const fileUpload = !files.length && <DropZone.FileUpload />;
312313
const uploadedFiles = files.length > 0 && (
313-
<Stack vertical>
314+
<AlphaStack>
314315
{files.map((file, index) => (
315-
<Stack alignment="center" key={index}>
316+
<Inline align="center" key={index}>
316317
<Thumbnail
317318
size="small"
318319
alt={file.name}
@@ -329,9 +330,9 @@ export function Nested() {
329330
{file.size} bytes
330331
</Text>
331332
</div>
332-
</Stack>
333+
</Inline>
333334
))}
334-
</Stack>
335+
</AlphaStack>
335336
);
336337

337338
return (
@@ -382,9 +383,9 @@ export function WithCustomFileUploadText() {
382383
);
383384

384385
const uploadedFiles = files.length > 0 && (
385-
<Stack vertical>
386+
<AlphaStack>
386387
{files.map((file, index) => (
387-
<Stack alignment="center" key={index}>
388+
<Inline align="center" key={index}>
388389
<Thumbnail
389390
size="small"
390391
alt={file.name}
@@ -401,9 +402,9 @@ export function WithCustomFileUploadText() {
401402
{file.size} bytes
402403
</Text>
403404
</div>
404-
</Stack>
405+
</Inline>
405406
))}
406-
</Stack>
407+
</AlphaStack>
407408
);
408409

409410
return (
@@ -431,9 +432,9 @@ export function WithCustomFileDialogTrigger() {
431432
const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
432433

433434
const uploadedFiles = files.length > 0 && (
434-
<Stack vertical>
435+
<AlphaStack>
435436
{files.map((file, index) => (
436-
<Stack alignment="center" key={index}>
437+
<Inline align="center" key={index}>
437438
<Thumbnail
438439
size="small"
439440
alt={file.name}
@@ -450,9 +451,9 @@ export function WithCustomFileDialogTrigger() {
450451
{file.size} bytes
451452
</Text>
452453
</div>
453-
</Stack>
454+
</Inline>
454455
))}
455-
</Stack>
456+
</AlphaStack>
456457
);
457458

458459
return (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@ import {debounce} from '../../utilities/debounce';
1414
import {classNames, variationName} from '../../utilities/css';
1515
import {capitalize} from '../../utilities/capitalize';
1616
import {Icon} from '../Icon';
17-
import {Stack} from '../Stack';
1817
import {Text} from '../Text';
1918
import {Labelled, LabelledProps} from '../Labelled';
2019
import {useI18n} from '../../utilities/i18n';
2120
import {isServer} from '../../utilities/target';
2221
import {useUniqueId} from '../../utilities/unique-id';
2322
import {useComponentDidMount} from '../../utilities/use-component-did-mount';
2423
import {useToggle} from '../../utilities/use-toggle';
24+
import {AlphaStack} from '../AlphaStack';
2525

2626
import {FileUpload} from './components';
2727
import {DropZoneContext} from './context';
@@ -419,14 +419,14 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
419419
) {
420420
return (
421421
<div className={styles.Overlay}>
422-
<Stack vertical spacing="tight">
422+
<AlphaStack gap="2" align="center">
423423
{size === 'small' && <Icon source={icon} color={color} />}
424424
{(size === 'medium' || size === 'large') && (
425425
<Text variant="bodySm" as="p" fontWeight="bold">
426426
{text}
427427
</Text>
428428
)}
429-
</Stack>
429+
</AlphaStack>
430430
</div>
431431
);
432432
}

‎polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import React, {useContext} from 'react';
22

33
import {classNames} from '../../../../utilities/css';
44
import {capitalize} from '../../../../utilities/capitalize';
5-
import {Stack} from '../../../Stack';
65
import {Text} from '../../../Text';
76
import {uploadArrow} from '../../images';
87
import {DropZoneContext} from '../../context';
98
import {useI18n} from '../../../../utilities/i18n';
109
import {createAllowMultipleKey} from '../../utils';
10+
import {AlphaStack} from '../../../AlphaStack';
1111

1212
import styles from './FileUpload.scss';
1313

@@ -55,18 +55,18 @@ export function FileUpload(props: FileUploadProps) {
5555
switch (size) {
5656
case 'large':
5757
viewMarkup = (
58-
<Stack vertical spacing="tight">
58+
<AlphaStack align="center" gap="2">
5959
{actionMarkup}
6060
{actionHintMarkup}
61-
</Stack>
61+
</AlphaStack>
6262
);
6363
break;
6464
case 'medium':
6565
viewMarkup = (
66-
<Stack vertical spacing="tight">
66+
<AlphaStack align="center" gap="2">
6767
{actionMarkup}
6868
{actionHintMarkup}
69-
</Stack>
69+
</AlphaStack>
7070
);
7171
break;
7272
case 'small':

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

Lines changed: 0 additions & 15 deletions
This file was deleted.

0 commit comments

Comments
 (0)