From 9128b59294d0b758e5c3d263ad558ccc1d5a64dc Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 5 Dec 2022 17:18:36 -0600 Subject: [PATCH 1/5] add flex direction prop to AlphaStack for reverse order --- .../src/components/AlphaStack/AlphaStack.scss | 19 +------------------ .../src/components/AlphaStack/AlphaStack.tsx | 4 ++++ 2 files changed, 5 insertions(+), 18 deletions(-) diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/AlphaStack/AlphaStack.scss index 1c6ff1abf40..d56f440855c 100644 --- a/polaris-react/src/components/AlphaStack/AlphaStack.scss +++ b/polaris-react/src/components/AlphaStack/AlphaStack.scss @@ -1,47 +1,31 @@ @import '../../styles/common'; .AlphaStack { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY --pc-stack-gap-xs: var(--p-space-4); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY --pc-stack-gap-sm: var(--pc-stack-gap-xs); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY --pc-stack-gap-md: var(--pc-stack-gap-sm); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY --pc-stack-gap-lg: var(--pc-stack-gap-md); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY --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 -- generated by polaris-migrator DO NOT COPY + flex-direction: var(--pc-stack-order); align-items: var(--pc-stack-align); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-stack-gap-xs); @media #{$p-breakpoints-sm-up} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-stack-gap-sm); } @media #{$p-breakpoints-md-up} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-stack-gap-md); } @media #{$p-breakpoints-lg-up} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-stack-gap-lg); } @media #{$p-breakpoints-xl-up} { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-stack-gap-xl); } - - > * { - max-width: 100%; - } } .listReset { @@ -53,7 +37,6 @@ .fullWidth { > * { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY width: 100%; } } 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; From e285f75a3678a3254d86be2ec4a21b282c257e64 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 5 Dec 2022 17:39:18 -0600 Subject: [PATCH 2/5] bring back the stylelint coments --- .../src/components/AlphaStack/AlphaStack.scss | 19 ++++++++++++++++++- .../src/components/AlphaStack/AlphaStack.tsx | 4 ---- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/AlphaStack/AlphaStack.scss index d56f440855c..1c6ff1abf40 100644 --- a/polaris-react/src/components/AlphaStack/AlphaStack.scss +++ b/polaris-react/src/components/AlphaStack/AlphaStack.scss @@ -1,31 +1,47 @@ @import '../../styles/common'; .AlphaStack { + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY --pc-stack-gap-xs: var(--p-space-4); + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY --pc-stack-gap-sm: var(--pc-stack-gap-xs); + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY --pc-stack-gap-md: var(--pc-stack-gap-sm); + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY --pc-stack-gap-lg: var(--pc-stack-gap-md); + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY --pc-stack-gap-xl: var(--pc-stack-gap-lg); + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY display: flex; - flex-direction: var(--pc-stack-order); + flex-direction: column; + // 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 gap: var(--pc-stack-gap-xs); @media #{$p-breakpoints-sm-up} { + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-stack-gap-sm); } @media #{$p-breakpoints-md-up} { + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-stack-gap-md); } @media #{$p-breakpoints-lg-up} { + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-stack-gap-lg); } @media #{$p-breakpoints-xl-up} { + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY gap: var(--pc-stack-gap-xl); } + + > * { + max-width: 100%; + } } .listReset { @@ -37,6 +53,7 @@ .fullWidth { > * { + // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY width: 100%; } } diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx index cd08f3eeda6..ee9b1246990 100644 --- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx +++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx @@ -36,8 +36,6 @@ export interface AlphaStackProps extends React.AriaAttributes { gap?: Gap; /** HTML id attribute */ id?: string; - /** Toggle order of child items */ - reverseOrder?: boolean; } export const AlphaStack = ({ @@ -47,7 +45,6 @@ export const AlphaStack = ({ fullWidth = false, gap = '4', id, - reverseOrder = false, ...restProps }: AlphaStackProps) => { const className = classNames( @@ -58,7 +55,6 @@ 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; From b339699495ba333020bc7c01cda2ea3aa357ddb7 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 5 Dec 2022 17:42:34 -0600 Subject: [PATCH 3/5] with stylelint --- polaris-react/src/components/AlphaStack/AlphaStack.scss | 6 +----- polaris-react/src/components/AlphaStack/AlphaStack.tsx | 4 ++++ 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/AlphaStack/AlphaStack.scss index 1c6ff1abf40..f113a3cf177 100644 --- a/polaris-react/src/components/AlphaStack/AlphaStack.scss +++ b/polaris-react/src/components/AlphaStack/AlphaStack.scss @@ -13,7 +13,7 @@ --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; + 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 +38,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; From a13cc01cf788c85b5c54d4f415f240e8f4cd3455 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 5 Dec 2022 17:45:45 -0600 Subject: [PATCH 4/5] adding changeset --- .changeset/grumpy-bats-live.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/grumpy-bats-live.md 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 From 46d7c3a0a49a7aef00ade7dce3a64c2fb1c8e0b2 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Tue, 6 Dec 2022 10:54:27 -0600 Subject: [PATCH 5/5] adding ignor message for failing stylelint --- polaris-react/src/components/AlphaStack/AlphaStack.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/AlphaStack/AlphaStack.scss index f113a3cf177..e15a1838af3 100644 --- a/polaris-react/src/components/AlphaStack/AlphaStack.scss +++ b/polaris-react/src/components/AlphaStack/AlphaStack.scss @@ -13,6 +13,7 @@ --pc-stack-gap-xl: var(--pc-stack-gap-lg); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY display: flex; + // 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);