Add flex properties to Inline, use logical property instead of alignY

.changeset/little-islands-act.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Renamed `alignY` prop to `alignBlock` on `Inline`
+Added more flex properties to `align` on `Inline`

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

@@ -67,7 +67,7 @@ export function Toast({
   return (
     <div className={className}>
       <KeypressListener keyCode={Key.Escape} handler={onDismiss} />
-      <Inline alignY="center">
+      <Inline blockAlign="center">
         <Text as="span" variant="bodyMd" fontWeight="medium">
           {content}
         </Text>

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

@@ -2,6 +2,6 @@
   display: flex;
   gap: var(--pc-inline-spacing);
   flex-wrap: var(--pc-inline-wrap);
-  align-items: var(--pc-inline-align-y);
+  align-items: var(--pc-inline-block-align);
   justify-content: var(--pc-inline-align);
 }

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

@@ -20,9 +20,9 @@ export function Default() {
   );
 }
 
-export function AlignYCenter() {
+export function AlignStart() {
   return (
-    <Inline alignY="center" spacing="1">
+    <Inline align="start" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -31,9 +31,9 @@ export function AlignYCenter() {
   );
 }
 
-export function AlignYTop() {
+export function AlignCenter() {
   return (
-    <Inline alignY="top" spacing="1">
+    <Inline align="center" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -42,9 +42,9 @@ export function AlignYTop() {
   );
 }
 
-export function AlignYBottom() {
+export function AlignEnd() {
   return (
-    <Inline alignY="bottom" spacing="1">
+    <Inline align="end" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -53,9 +53,39 @@ export function AlignYBottom() {
   );
 }
 
-export function AlignYBaseline() {
+export function AlignSpaceAround() {
+  return (
+    <Inline align="space-around" spacing="1">
+      <Badge>One</Badge>
+      <Badge>Two</Badge>
+      <Badge>Three</Badge>
+    </Inline>
+  );
+}
+
+export function AlignSpaceBetween() {
+  return (
+    <Inline align="space-between" spacing="1">
+      <Badge>One</Badge>
+      <Badge>Two</Badge>
+      <Badge>Three</Badge>
+    </Inline>
+  );
+}
+
+export function AlignSpaceEvenly() {
   return (
-    <Inline alignY="baseline" spacing="1">
+    <Inline align="space-evenly" spacing="1">
+      <Badge>One</Badge>
+      <Badge>Two</Badge>
+      <Badge>Three</Badge>
+    </Inline>
+  );
+}
+
+export function BlockAlignCenter() {
+  return (
+    <Inline blockAlign="center" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -64,9 +94,9 @@ export function AlignYBaseline() {
   );
 }
 
-export function AlignStart() {
+export function BlockAlignStart() {
   return (
-    <Inline align="start" alignY="center" spacing="1">
+    <Inline blockAlign="start" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -75,9 +105,9 @@ export function AlignStart() {
   );
 }
 
-export function AlignCenter() {
+export function BlockAlignEnd() {
   return (
-    <Inline align="center" alignY="center" spacing="1">
+    <Inline blockAlign="end" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -86,9 +116,20 @@ export function AlignCenter() {
   );
 }
 
-export function AlignEnd() {
+export function BlockAlignBaseline() {
+  return (
+    <Inline blockAlign="baseline" spacing="1">
+      <Thumbnail source={ImageMajor} alt="example" />
+      <Badge>One</Badge>
+      <Badge>Two</Badge>
+      <Badge>Three</Badge>
+    </Inline>
+  );
+}
+
+export function BlockAlignStrech() {
   return (
-    <Inline align="end" alignY="center" spacing="1">
+    <Inline blockAlign="stretch" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>
@@ -97,9 +138,9 @@ export function AlignEnd() {
   );
 }
 
-export function AlignCenterAlignYCenter() {
+export function AlignCenterBlockAlignCenter() {
   return (
-    <Inline align="center" alignY="center" spacing="1">
+    <Inline align="center" blockAlign="center" spacing="1">
       <Thumbnail source={ImageMajor} alt="example" />
       <Badge>One</Badge>
       <Badge>Two</Badge>

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

@@ -3,40 +3,46 @@ import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
 
 import styles from './Inline.scss';
 
-const AlignY = {
-  top: 'start',
-  center: 'center',
-  bottom: 'end',
-  baseline: 'baseline',
-};
-
-type Align = 'start' | 'center' | 'end';
+type Align =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'space-around'
+  | 'space-between'
+  | 'space-evenly';
+type BlockAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 
 export interface InlineProps {
-  /** Elements to display inside stack */
-  children?: React.ReactNode;
-  /** Wrap stack elements to additional rows as needed on small screens (Defaults to true) */
-  wrap?: boolean;
+  /** Adjust horizontal alignment of elements
+   * @default 'start'
+   */
+  align?: Align;
+  /** Adjust vertical alignment of elements
+   * @default 'center'
+   */
+  blockAlign?: BlockAlign;
   /** The spacing between elements
    * @default '4'
    */
   spacing?: SpacingSpaceScale;
-  /** Adjust vertical alignment of elements */
-  alignY?: keyof typeof AlignY;
-  /** Adjust horizontal alignment of elements */
-  align?: Align;
+  /** Wrap stack elements to additional rows as needed on small screens
+   * @default true
+   */
+  wrap?: boolean;
+  /** Elements to display inside stack */
+  children?: React.ReactNode;
 }
 
 export const Inline = function Inline({
-  children,
+  align = 'start',
+  blockAlign = 'center',
   spacing = '4',
-  align,
-  alignY,
   wrap = true,
+  children,
 }: InlineProps) {
   const style = {
     '--pc-inline-align': align,
-    '--pc-inline-align-y': alignY ? AlignY[alignY] : undefined,
+    '--pc-inline-block-align': blockAlign,
     '--pc-inline-wrap': wrap ? 'wrap' : 'nowrap',
     '--pc-inline-spacing': `var(--p-space-${spacing})`,
   } as React.CSSProperties;

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

@@ -26,7 +26,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align="center" alignY="center">
+      <Inline align="center" blockAlign="center">
         <div
           style={{
             color: '#FFFFFF',

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

@@ -26,7 +26,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align="center" alignY="center">
+      <Inline align="center" blockAlign="center">
         <div
           style={{
             color: '#FFFFFF',

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

@@ -48,7 +48,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align="center" alignY="center">
+      <Inline align="center" blockAlign="center">
         <div
           style={{
             color: '#FFFFFF',

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

@@ -43,7 +43,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width ?? undefined,
       }}
     >
-      <Inline align="center" alignY="center">
+      <Inline align="center" blockAlign="center">
         <div
           style={{
             color: '#FFFFFF',

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

@@ -46,7 +46,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
         width: width,
       }}
     >
-      <Inline align="center" alignY="center">
+      <Inline align="center" blockAlign="center">
         <div
           style={{
             color: '#FFFFFF',

polaris.shopify.com/pages/examples/inline-with-spacing.tsx

@@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function InlineWithSpacingExample() {
   return (
     <AlphaStack spacing="8">
-      <Inline alignY="center">
+      <Inline blockAlign="center">
         <SpacingBackground width="436px">
           <Inline wrap={false}>
             <Placeholder width="106px" height="36px" />

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

@@ -6,31 +6,31 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function InlineWithVerticalAlignmentExample() {
   return (
     <AlphaStack spacing="16">
-      <Inline alignY="top">
+      <Inline blockAlign="top">
         <Placeholder width="106px" label="Top" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
       </Inline>
-      <Inline alignY="center">
+      <Inline blockAlign="center">
         <Placeholder width="106px" label="Center" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
       </Inline>
-      <Inline alignY="bottom">
+      <Inline blockAlign="bottom">
         <Placeholder width="106px" label="Bottom" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
         <Placeholder width="106px" height="20px" />
       </Inline>
-      <Inline alignY="baseline">
+      <Inline blockAlign="baseline">
         <Placeholder width="106px" header={true} label="Baseline" />
         <Placeholder width="106px" padding="0" label="text" />
         <Placeholder width="106px" padding="0" label="text" />
@@ -58,7 +58,7 @@ const Placeholder = ({
         width: width,
       }}
     >
-      <Inline align="center" alignY="center">
+      <Inline align="center" blockAlign="center">
         <div
           style={{
             color: '#FFFFFF',