diff --git a/.changeset/wild-mayflies-rule.md b/.changeset/wild-mayflies-rule.md
new file mode 100644
index 00000000000..7cf032a5bad
--- /dev/null
+++ b/.changeset/wild-mayflies-rule.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added `paddingBlockStart` and `paddingBlockEnd` props to `AlphaStack`
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/AlphaStack/AlphaStack.scss
index 23380cc37b1..22a527ea5c2 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.scss
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.scss
@@ -18,6 +18,13 @@
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
gap: var(--pc-stack-gap-xs);
+ @include responsive-props('stack', 'padding-block-end', 'padding-block-end');
+ @include responsive-props(
+ 'stack',
+ 'padding-block-start',
+ 'padding-block-start'
+ );
+
@media #{$p-breakpoints-sm-up} {
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
gap: var(--pc-stack-gap-sm);
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
index ceac4cd8c78..6a8afa0b5b1 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
@@ -117,3 +117,23 @@ export function WithFullWidthChildren() {
);
}
+
+export function WithResponsivePaddingBlockStartAndEnd() {
+ return (
+
+
+ 01
+
+
+ 02
+
+
+ 03
+
+
+ );
+}
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
index 47c823eac61..c7aa39349c7 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
@@ -16,6 +16,8 @@ type Element = 'div' | 'ul' | 'ol' | 'fieldset';
type Gap = ResponsiveProp;
+type Spacing = ResponsiveProp;
+
export interface AlphaStackProps extends React.AriaAttributes {
children?: React.ReactNode;
/** HTML Element type
@@ -35,6 +37,18 @@ export interface AlphaStackProps extends React.AriaAttributes {
/** Reverse the render order of child items
* @default false
*/
+ /** Vertical start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
+ * @example
+ * paddingBlockStart='4'
+ * paddingBlockStart={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+ */
+ paddingBlockStart?: Spacing;
+ /** Vertical end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
+ * @example
+ * paddingBlockEnd='4'
+ * paddingBlockEnd={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+ */
+ paddingBlockEnd?: Spacing;
reverseOrder?: boolean;
}
@@ -45,6 +59,8 @@ export const AlphaStack = ({
fullWidth = false,
gap,
id,
+ paddingBlockStart,
+ paddingBlockEnd,
reverseOrder = false,
...restProps
}: AlphaStackProps) => {
@@ -59,6 +75,18 @@ export const AlphaStack = ({
'--pc-stack-align': align ? `${align}` : '',
'--pc-stack-order': reverseOrder ? 'column-reverse' : 'column',
...getResponsiveProps('stack', 'gap', 'space', gap),
+ ...getResponsiveProps(
+ 'stack',
+ 'padding-block-end',
+ 'space',
+ paddingBlockEnd,
+ ),
+ ...getResponsiveProps(
+ 'stack',
+ 'padding-block-start',
+ 'space',
+ paddingBlockStart,
+ ),
} as React.CSSProperties;
return createElement(