Skip to content

Commit 1364be7

Browse files
kyledurandkyledurand
authored
Add flex properties to Inline, use logical property instead of alignY (#7633)
Part of #7592 > Add more granular control within Inline i.e. justify-content: space-between Changed `alignY` prop name to `blockAlign` to be multiple writing mode friendly.
1 parent 4db4417 commit 1364be7

File tree

13 files changed

+2650
-2648
lines changed

13 files changed

+2650
-2648
lines changed

‎.changeset/little-islands-act.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@shopify/polaris': patch
3+
'polaris.shopify.com': patch
4+
---
5+
6+
Renamed `alignY` prop to `alignBlock` on `Inline`
7+
Added more flex properties to `align` on `Inline`

‎polaris-react/src/components/Frame/components/Toast/Toast.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export function Toast({
6767
return (
6868
<div className={className}>
6969
<KeypressListener keyCode={Key.Escape} handler={onDismiss} />
70-
<Inline alignY="center">
70+
<Inline blockAlign="center">
7171
<Text as="span" variant="bodyMd" fontWeight="medium">
7272
{content}
7373
</Text>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
display: flex;
33
gap: var(--pc-inline-spacing);
44
flex-wrap: var(--pc-inline-wrap);
5-
align-items: var(--pc-inline-align-y);
5+
align-items: var(--pc-inline-block-align);
66
justify-content: var(--pc-inline-align);
77
}

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

Lines changed: 57 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ export function Default() {
2020
);
2121
}
2222

23-
export function AlignYCenter() {
23+
export function AlignStart() {
2424
return (
25-
<Inline alignY="center" spacing="1">
25+
<Inline align="start" spacing="1">
2626
<Thumbnail source={ImageMajor} alt="example" />
2727
<Badge>One</Badge>
2828
<Badge>Two</Badge>
@@ -31,9 +31,9 @@ export function AlignYCenter() {
3131
);
3232
}
3333

34-
export function AlignYTop() {
34+
export function AlignCenter() {
3535
return (
36-
<Inline alignY="top" spacing="1">
36+
<Inline align="center" spacing="1">
3737
<Thumbnail source={ImageMajor} alt="example" />
3838
<Badge>One</Badge>
3939
<Badge>Two</Badge>
@@ -42,9 +42,9 @@ export function AlignYTop() {
4242
);
4343
}
4444

45-
export function AlignYBottom() {
45+
export function AlignEnd() {
4646
return (
47-
<Inline alignY="bottom" spacing="1">
47+
<Inline align="end" spacing="1">
4848
<Thumbnail source={ImageMajor} alt="example" />
4949
<Badge>One</Badge>
5050
<Badge>Two</Badge>
@@ -53,9 +53,39 @@ export function AlignYBottom() {
5353
);
5454
}
5555

56-
export function AlignYBaseline() {
56+
export function AlignSpaceAround() {
57+
return (
58+
<Inline align="space-around" spacing="1">
59+
<Badge>One</Badge>
60+
<Badge>Two</Badge>
61+
<Badge>Three</Badge>
62+
</Inline>
63+
);
64+
}
65+
66+
export function AlignSpaceBetween() {
67+
return (
68+
<Inline align="space-between" spacing="1">
69+
<Badge>One</Badge>
70+
<Badge>Two</Badge>
71+
<Badge>Three</Badge>
72+
</Inline>
73+
);
74+
}
75+
76+
export function AlignSpaceEvenly() {
5777
return (
58-
<Inline alignY="baseline" spacing="1">
78+
<Inline align="space-evenly" spacing="1">
79+
<Badge>One</Badge>
80+
<Badge>Two</Badge>
81+
<Badge>Three</Badge>
82+
</Inline>
83+
);
84+
}
85+
86+
export function BlockAlignCenter() {
87+
return (
88+
<Inline blockAlign="center" spacing="1">
5989
<Thumbnail source={ImageMajor} alt="example" />
6090
<Badge>One</Badge>
6191
<Badge>Two</Badge>
@@ -64,9 +94,9 @@ export function AlignYBaseline() {
6494
);
6595
}
6696

67-
export function AlignStart() {
97+
export function BlockAlignStart() {
6898
return (
69-
<Inline align="start" alignY="center" spacing="1">
99+
<Inline blockAlign="start" spacing="1">
70100
<Thumbnail source={ImageMajor} alt="example" />
71101
<Badge>One</Badge>
72102
<Badge>Two</Badge>
@@ -75,9 +105,9 @@ export function AlignStart() {
75105
);
76106
}
77107

78-
export function AlignCenter() {
108+
export function BlockAlignEnd() {
79109
return (
80-
<Inline align="center" alignY="center" spacing="1">
110+
<Inline blockAlign="end" spacing="1">
81111
<Thumbnail source={ImageMajor} alt="example" />
82112
<Badge>One</Badge>
83113
<Badge>Two</Badge>
@@ -86,9 +116,20 @@ export function AlignCenter() {
86116
);
87117
}
88118

89-
export function AlignEnd() {
119+
export function BlockAlignBaseline() {
120+
return (
121+
<Inline blockAlign="baseline" spacing="1">
122+
<Thumbnail source={ImageMajor} alt="example" />
123+
<Badge>One</Badge>
124+
<Badge>Two</Badge>
125+
<Badge>Three</Badge>
126+
</Inline>
127+
);
128+
}
129+
130+
export function BlockAlignStrech() {
90131
return (
91-
<Inline align="end" alignY="center" spacing="1">
132+
<Inline blockAlign="stretch" spacing="1">
92133
<Thumbnail source={ImageMajor} alt="example" />
93134
<Badge>One</Badge>
94135
<Badge>Two</Badge>
@@ -97,9 +138,9 @@ export function AlignEnd() {
97138
);
98139
}
99140

100-
export function AlignCenterAlignYCenter() {
141+
export function AlignCenterBlockAlignCenter() {
101142
return (
102-
<Inline align="center" alignY="center" spacing="1">
143+
<Inline align="center" blockAlign="center" spacing="1">
103144
<Thumbnail source={ImageMajor} alt="example" />
104145
<Badge>One</Badge>
105146
<Badge>Two</Badge>

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

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,46 @@ import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
33

44
import styles from './Inline.scss';
55

6-
const AlignY = {
7-
top: 'start',
8-
center: 'center',
9-
bottom: 'end',
10-
baseline: 'baseline',
11-
};
12-
13-
type Align = 'start' | 'center' | 'end';
6+
type Align =
7+
| 'start'
8+
| 'center'
9+
| 'end'
10+
| 'space-around'
11+
| 'space-between'
12+
| 'space-evenly';
13+
type BlockAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
1414

1515
export interface InlineProps {
16-
/** Elements to display inside stack */
17-
children?: React.ReactNode;
18-
/** Wrap stack elements to additional rows as needed on small screens (Defaults to true) */
19-
wrap?: boolean;
16+
/** Adjust horizontal alignment of elements
17+
* @default 'start'
18+
*/
19+
align?: Align;
20+
/** Adjust vertical alignment of elements
21+
* @default 'center'
22+
*/
23+
blockAlign?: BlockAlign;
2024
/** The spacing between elements
2125
* @default '4'
2226
*/
2327
spacing?: SpacingSpaceScale;
24-
/** Adjust vertical alignment of elements */
25-
alignY?: keyof typeof AlignY;
26-
/** Adjust horizontal alignment of elements */
27-
align?: Align;
28+
/** Wrap stack elements to additional rows as needed on small screens
29+
* @default true
30+
*/
31+
wrap?: boolean;
32+
/** Elements to display inside stack */
33+
children?: React.ReactNode;
2834
}
2935

3036
export const Inline = function Inline({
31-
children,
37+
align = 'start',
38+
blockAlign = 'center',
3239
spacing = '4',
33-
align,
34-
alignY,
3540
wrap = true,
41+
children,
3642
}: InlineProps) {
3743
const style = {
3844
'--pc-inline-align': align,
39-
'--pc-inline-align-y': alignY ? AlignY[alignY] : undefined,
45+
'--pc-inline-block-align': blockAlign,
4046
'--pc-inline-wrap': wrap ? 'wrap' : 'nowrap',
4147
'--pc-inline-spacing': `var(--p-space-${spacing})`,
4248
} as React.CSSProperties;

‎polaris.shopify.com/pages/examples/columns-default.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
2626
width: width ?? undefined,
2727
}}
2828
>
29-
<Inline align="center" alignY="center">
29+
<Inline align="center" blockAlign="center">
3030
<div
3131
style={{
3232
color: '#FFFFFF',

‎polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
2626
width: width ?? undefined,
2727
}}
2828
>
29-
<Inline align="center" alignY="center">
29+
<Inline align="center" blockAlign="center">
3030
<div
3131
style={{
3232
color: '#FFFFFF',

‎polaris.shopify.com/pages/examples/columns-with-set-number.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
4848
width: width ?? undefined,
4949
}}
5050
>
51-
<Inline align="center" alignY="center">
51+
<Inline align="center" blockAlign="center">
5252
<div
5353
style={{
5454
color: '#FFFFFF',

‎polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
4343
width: width ?? undefined,
4444
}}
4545
>
46-
<Inline align="center" alignY="center">
46+
<Inline align="center" blockAlign="center">
4747
<div
4848
style={{
4949
color: '#FFFFFF',

‎polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
4646
width: width,
4747
}}
4848
>
49-
<Inline align="center" alignY="center">
49+
<Inline align="center" blockAlign="center">
5050
<div
5151
style={{
5252
color: '#FFFFFF',

0 commit comments

Comments
 (0)