Skip to content

Commit a2c9b1d

Browse files
alex-pagelaurkim
alex-page
and
laurkim
authored
Rename Inline to HorizontalStack (#8936)
### WHY are these changes introduced? With the UI consolidation effort happening we are aligning component names and properties across repositories. This is a first step to align component names. ### WHAT is this pull request doing? **⚠️ Breaking change** to rename `Inline` to `HorizontalStack` --------- Co-authored-by: Lo Kim <[email protected]>
1 parent 4880e3e commit a2c9b1d

File tree

54 files changed

+339
-280
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+339
-280
lines changed

‎.changeset/afraid-lizards-know.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+
Renamed Inline to HorizontalStack

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {buttonFrom} from '../Button';
66
import {SettingAction} from '../SettingAction';
77
import {AlphaCard} from '../AlphaCard';
88
import {Box} from '../Box';
9-
import {Inline} from '../Inline';
9+
import {HorizontalStack} from '../HorizontalStack';
1010
import {Text} from '../Text';
1111
import {VerticalStack} from '../VerticalStack';
1212

@@ -71,13 +71,13 @@ export function AccountConnection({
7171
return (
7272
<AlphaCard>
7373
<SettingAction action={actionElement}>
74-
<Inline gap="4">
74+
<HorizontalStack gap="4">
7575
{avatarMarkup}
7676
<VerticalStack gap="2">
7777
{titleMarkup}
7878
{detailsMarkup}
7979
</VerticalStack>
80-
</Inline>
80+
</HorizontalStack>
8181
</SettingAction>
8282
{termsOfServiceMarkup}
8383
</AlphaCard>

‎polaris-react/src/components/ActionList/components/Item/Item.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {Badge} from '../../../Badge';
99
import {Text} from '../../../Text';
1010
import styles from '../../ActionList.scss';
1111
import {handleMouseUpByBlurring} from '../../../../utilities/focus';
12-
import {Inline} from '../../../Inline';
12+
import {HorizontalStack} from '../../../HorizontalStack';
1313
import {Box} from '../../../Box';
1414

1515
export type ItemProps = ActionListItemDescriptor;
@@ -89,12 +89,12 @@ export function Item({
8989
const textMarkup = <span className={styles.Text}>{contentMarkup}</span>;
9090

9191
const contentElement = (
92-
<Inline blockAlign="center" gap="4">
92+
<HorizontalStack blockAlign="center" gap="4">
9393
{prefixMarkup}
9494
{textMarkup}
9595
{badgeMarkup}
9696
{suffixMarkup}
97-
</Inline>
97+
</HorizontalStack>
9898
);
9999

100100
const scrollMarkup = active ? <Scrollable.ScrollTo /> : null;

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {UnstyledButton} from '../UnstyledButton';
1111
import {classNames} from '../../utilities/css';
1212
import type {AppliedFilterInterface, FilterInterface} from '../../types';
1313
import {Link} from '../Link';
14-
import {Inline} from '../Inline';
14+
import {HorizontalStack} from '../HorizontalStack';
1515
import {Box} from '../Box';
1616
import {Spinner} from '../Spinner';
1717

@@ -232,7 +232,7 @@ export function AlphaFilters({
232232
md: '3',
233233
}}
234234
>
235-
<Inline
235+
<HorizontalStack
236236
align="start"
237237
blockAlign="center"
238238
gap={{
@@ -264,7 +264,7 @@ export function AlphaFilters({
264264
/>
265265
</div>
266266
{additionalContent}
267-
</Inline>
267+
</HorizontalStack>
268268
</Box>
269269
</div>
270270
);
@@ -358,7 +358,7 @@ export function AlphaFilters({
358358
</div>
359359
{hideQueryField ? (
360360
<Box paddingInlineEnd="2" paddingBlockStart="2">
361-
<Inline
361+
<HorizontalStack
362362
align="start"
363363
blockAlign="center"
364364
gap={{
@@ -367,7 +367,7 @@ export function AlphaFilters({
367367
}}
368368
>
369369
{additionalContent}
370-
</Inline>
370+
</HorizontalStack>
371371
</Box>
372372
) : null}
373373
</div>

‎polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {Button} from '../../../Button';
88
import {VerticalStack} from '../../../VerticalStack';
99
import {Icon} from '../../../Icon';
1010
import {Text} from '../../../Text';
11-
import {Inline} from '../../../Inline';
11+
import {HorizontalStack} from '../../../HorizontalStack';
1212
import {UnstyledButton} from '../../../UnstyledButton';
1313
import {useBreakpoints} from '../../../../utilities/breakpoints';
1414
import {classNames} from '../../../../utilities/css';
@@ -116,7 +116,7 @@ export function FilterPill({
116116

117117
const activator = (
118118
<div className={buttonClasses}>
119-
<Inline gap="0" wrap={false}>
119+
<HorizontalStack gap="0" wrap={false}>
120120
<UnstyledButton
121121
onFocus={setFocusedTrue}
122122
onBlur={setFocusedFalse}
@@ -125,7 +125,12 @@ export function FilterPill({
125125
type="button"
126126
disabled={disabled}
127127
>
128-
<Inline wrap={false} align="center" blockAlign="center" gap="0">
128+
<HorizontalStack
129+
wrap={false}
130+
align="center"
131+
blockAlign="center"
132+
gap="0"
133+
>
129134
{selected ? (
130135
<>{wrappedLabel}</>
131136
) : (
@@ -136,7 +141,7 @@ export function FilterPill({
136141
</div>
137142
</>
138143
)}
139-
</Inline>
144+
</HorizontalStack>
140145
</UnstyledButton>
141146

142147
{selected ? (
@@ -152,7 +157,7 @@ export function FilterPill({
152157
</div>
153158
</UnstyledButton>
154159
) : null}
155-
</Inline>
160+
</HorizontalStack>
156161
</div>
157162
);
158163

‎polaris-react/src/components/AlphaTabs/components/Tab/Tab.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import {Popover} from '../../../Popover';
3434
import {ActionList} from '../../../ActionList';
3535
import {Modal} from '../../../Modal';
3636
import {Badge} from '../../../Badge';
37-
import {Inline} from '../../../Inline';
37+
import {HorizontalStack} from '../../../HorizontalStack';
3838
import {Text} from '../../../Text';
3939
import type {AlphaTabPropsWithAddedMethods, AlphaTabAction} from '../../types';
4040
import styles from '../../AlphaTabs.scss';
@@ -304,7 +304,12 @@ export const Tab = forwardRef(
304304
onClick={handleClick}
305305
onKeyDown={handleKeyDown}
306306
>
307-
<Inline gap="2" align="center" blockAlign="center" wrap={false}>
307+
<HorizontalStack
308+
gap="2"
309+
align="center"
310+
blockAlign="center"
311+
wrap={false}
312+
>
308313
<Text
309314
as="span"
310315
variant={mdDown ? 'bodyMd' : 'bodySm'}
@@ -313,7 +318,7 @@ export const Tab = forwardRef(
313318
{icon ?? content}
314319
</Text>
315320
{badgeMarkup}
316-
</Inline>
321+
</HorizontalStack>
317322
{disclosureMarkup}
318323
</BaseComponent>
319324
);

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
Banner,
66
Button,
77
LegacyCard,
8-
Inline,
8+
HorizontalStack,
99
Link,
1010
List,
1111
Modal,
@@ -194,14 +194,14 @@ export function WithEndJustifiedContent() {
194194
return (
195195
<Banner status="critical">
196196
<VerticalStack gap="1">
197-
<Inline gap="4" align="space-between">
197+
<HorizontalStack gap="4" align="space-between">
198198
<Text variant="headingMd" fontWeight="semibold" as="h3">
199199
Deployment failed in 5min
200200
</Text>
201201
<Link external url="https://example.com">
202202
Logs
203203
</Link>
204-
</Inline>
204+
</HorizontalStack>
205205
<p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
206206
</VerticalStack>
207207
</Banner>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import type {
1313
} from '../../types';
1414
import {ActionList} from '../ActionList';
1515
import {Popover} from '../Popover';
16-
import {Inline} from '../Inline';
16+
import {HorizontalStack} from '../HorizontalStack';
1717
// eslint-disable-next-line import/no-deprecated
1818
import {EventListener} from '../EventListener';
1919

@@ -300,10 +300,10 @@ class BulkActionsInner extends PureComponent<CombinedProps, State> {
300300

301301
const groupContent =
302302
promotedActionsMarkup || actionsPopover ? (
303-
<Inline gap="3">
303+
<HorizontalStack gap="3">
304304
{promotedActionsMarkup}
305305
{actionsPopover}
306-
</Inline>
306+
</HorizontalStack>
307307
) : null;
308308

309309
if (!groupContent) {

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Page,
1010
VerticalStack,
1111
Thumbnail,
12-
Inline,
12+
HorizontalStack,
1313
} from '@shopify/polaris';
1414
import {NoteMinor} from '@shopify/polaris-icons';
1515

@@ -33,7 +33,7 @@ export function Default() {
3333
<div style={{padding: '0'}}>
3434
<VerticalStack gap="4">
3535
{files.map((file, index) => (
36-
<Inline gap="4" align="center" key={index}>
36+
<HorizontalStack gap="4" align="center" key={index}>
3737
<Thumbnail
3838
size="small"
3939
alt={file.name}
@@ -50,7 +50,7 @@ export function Default() {
5050
{file.size} bytes
5151
</Text>
5252
</div>
53-
</Inline>
53+
</HorizontalStack>
5454
))}
5555
</VerticalStack>
5656
</div>
@@ -89,7 +89,7 @@ export function WithImageFileUpload() {
8989
const uploadedFiles = files.length > 0 && (
9090
<VerticalStack gap="4">
9191
{files.map((file, index) => (
92-
<Inline gap="4" align="center" key={index}>
92+
<HorizontalStack gap="4" align="center" key={index}>
9393
<Thumbnail
9494
size="small"
9595
alt={file.name}
@@ -102,7 +102,7 @@ export function WithImageFileUpload() {
102102
{file.size} bytes
103103
</Text>
104104
</div>
105-
</Inline>
105+
</HorizontalStack>
106106
))}
107107
</VerticalStack>
108108
);
@@ -146,7 +146,7 @@ export function WithSingleFileUpload() {
146146

147147
const fileUpload = !file && <DropZone.FileUpload />;
148148
const uploadedFile = file && (
149-
<Inline gap="4">
149+
<HorizontalStack gap="4">
150150
<Thumbnail
151151
size="small"
152152
alt={file.name}
@@ -163,7 +163,7 @@ export function WithSingleFileUpload() {
163163
{file.size} bytes
164164
</Text>
165165
</div>
166-
</Inline>
166+
</HorizontalStack>
167167
);
168168

169169
return (
@@ -188,7 +188,7 @@ export function WithDropOnPage() {
188188
const uploadedFiles = files.length > 0 && (
189189
<VerticalStack gap="4">
190190
{files.map((file, index) => (
191-
<Inline gap="4" align="center" key={index}>
191+
<HorizontalStack gap="4" align="center" key={index}>
192192
<Thumbnail
193193
size="small"
194194
alt={file.name}
@@ -205,7 +205,7 @@ export function WithDropOnPage() {
205205
{file.size} bytes
206206
</Text>
207207
</div>
208-
</Inline>
208+
</HorizontalStack>
209209
))}
210210
</VerticalStack>
211211
);
@@ -250,7 +250,7 @@ export function AcceptsOnlySVGFiles() {
250250
const uploadedFiles = files.length > 0 && (
251251
<VerticalStack gap="4">
252252
{files.map((file, index) => (
253-
<Inline gap="4" align="center" key={index}>
253+
<HorizontalStack gap="4" align="center" key={index}>
254254
<Thumbnail
255255
size="small"
256256
alt={file.name}
@@ -263,7 +263,7 @@ export function AcceptsOnlySVGFiles() {
263263
{file.size} bytes
264264
</Text>
265265
</div>
266-
</Inline>
266+
</HorizontalStack>
267267
))}
268268
</VerticalStack>
269269
);
@@ -313,7 +313,7 @@ export function Nested() {
313313
const uploadedFiles = files.length > 0 && (
314314
<VerticalStack gap="4">
315315
{files.map((file, index) => (
316-
<Inline gap="4" align="center" key={index}>
316+
<HorizontalStack gap="4" align="center" key={index}>
317317
<Thumbnail
318318
size="small"
319319
alt={file.name}
@@ -330,7 +330,7 @@ export function Nested() {
330330
{file.size} bytes
331331
</Text>
332332
</div>
333-
</Inline>
333+
</HorizontalStack>
334334
))}
335335
</VerticalStack>
336336
);
@@ -385,7 +385,7 @@ export function WithCustomFileUploadText() {
385385
const uploadedFiles = files.length > 0 && (
386386
<VerticalStack gap="4">
387387
{files.map((file, index) => (
388-
<Inline gap="4" align="center" key={index}>
388+
<HorizontalStack gap="4" align="center" key={index}>
389389
<Thumbnail
390390
size="small"
391391
alt={file.name}
@@ -402,7 +402,7 @@ export function WithCustomFileUploadText() {
402402
{file.size} bytes
403403
</Text>
404404
</div>
405-
</Inline>
405+
</HorizontalStack>
406406
))}
407407
</VerticalStack>
408408
);
@@ -434,7 +434,7 @@ export function WithCustomFileDialogTrigger() {
434434
const uploadedFiles = files.length > 0 && (
435435
<VerticalStack gap="4">
436436
{files.map((file, index) => (
437-
<Inline gap="4" align="center" key={index}>
437+
<HorizontalStack gap="4" align="center" key={index}>
438438
<Thumbnail
439439
size="small"
440440
alt={file.name}
@@ -451,7 +451,7 @@ export function WithCustomFileDialogTrigger() {
451451
{file.size} bytes
452452
</Text>
453453
</div>
454-
</Inline>
454+
</HorizontalStack>
455455
))}
456456
</VerticalStack>
457457
);

0 commit comments

Comments
 (0)