diff --git a/.changeset/grumpy-bats-live.md b/.changeset/grumpy-bats-live.md new file mode 100644 index 00000000000..61ce2263950 --- /dev/null +++ b/.changeset/grumpy-bats-live.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Add flex-direction: column-reverse to AlphaStack diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/AlphaStack/AlphaStack.scss index 1c6ff1abf40..e15a1838af3 100644 --- a/polaris-react/src/components/AlphaStack/AlphaStack.scss +++ b/polaris-react/src/components/AlphaStack/AlphaStack.scss @@ -13,7 +13,8 @@ --pc-stack-gap-xl: var(--pc-stack-gap-lg); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY display: flex; - flex-direction: column; + // stylelint-disable-next-line -- local component custom property is required for flex direction + flex-direction: var(--pc-stack-order); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY align-items: var(--pc-stack-align); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @@ -38,10 +39,6 @@ // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-stack-gap-xl); } - - > * { - max-width: 100%; - } } .listReset { diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx index ee9b1246990..cd08f3eeda6 100644 --- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx +++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx @@ -36,6 +36,8 @@ export interface AlphaStackProps extends React.AriaAttributes { gap?: Gap; /** HTML id attribute */ id?: string; + /** Toggle order of child items */ + reverseOrder?: boolean; } export const AlphaStack = ({ @@ -45,6 +47,7 @@ export const AlphaStack = ({ fullWidth = false, gap = '4', id, + reverseOrder = false, ...restProps }: AlphaStackProps) => { const className = classNames( @@ -55,6 +58,7 @@ export const AlphaStack = ({ const style = { '--pc-stack-align': align ? `${align}` : '', + '--pc-stack-order': reverseOrder ? 'column-reverse' : 'column', ...getResponsiveProps('stack', 'gap', 'space', gap), } as React.CSSProperties;