Skip to content

[Layout] AlphaStack add paddingBlockStart and paddingBlockEnd #8588

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

[Layout] AlphaStack add paddingBlockStart and paddingBlockEnd #8588

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7c9320
Add `paddingBlockStart` and `paddingBlockEnd` to `AlphaStack`
aveline Mar 7, 2023
652fe00
changeset
aveline Mar 7, 2023
5fadf57
Update Playground.tsx
aveline Mar 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wild-mayflies-rule.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Added `paddingBlockStart` and `paddingBlockEnd` props to `AlphaStack`
7 changes: 7 additions & 0 deletions polaris-react/src/components/AlphaStack/AlphaStack.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
20 changes: 20 additions & 0 deletions polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,3 +117,23 @@ export function WithFullWidthChildren() {
</AlphaStack>
);
}

export function WithResponsivePaddingBlockStartAndEnd() {
return (
<AlphaStack
gap="4"
paddingBlockStart={{sm: '2', md: '6'}}
paddingBlockEnd={{sm: '2', md: '6'}}
>
<Box background="surface" padding="1">
01
</Box>
<Box background="surface" padding="1">
02
</Box>
<Box background="surface" padding="1">
03
</Box>
</AlphaStack>
);
}
28 changes: 28 additions & 0 deletions polaris-react/src/components/AlphaStack/AlphaStack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ type Element = 'div' | 'ul' | 'ol' | 'fieldset';

type Gap = ResponsiveProp<SpacingSpaceScale>;

type Spacing = ResponsiveProp<SpacingSpaceScale>;

export interface AlphaStackProps extends React.AriaAttributes {
children?: React.ReactNode;
/** HTML Element type
Expand All @@ -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;
}

Expand All @@ -45,6 +59,8 @@ export const AlphaStack = ({
fullWidth = false,
gap,
id,
paddingBlockStart,
paddingBlockEnd,
reverseOrder = false,
...restProps
}: AlphaStackProps) => {
Expand All @@ -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(
Expand Down