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(