diff --git a/.changeset/few-ghosts-carry.md b/.changeset/few-ghosts-carry.md new file mode 100644 index 00000000000..bf4a7ecb66e --- /dev/null +++ b/.changeset/few-ghosts-carry.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': patch +'polaris.shopify.com': patch +--- + +Renamed `Columns` spacing diff --git a/polaris-react/src/components/Columns/Columns.scss b/polaris-react/src/components/Columns/Columns.scss index 25556b65338..574457e78e3 100644 --- a/polaris-react/src/components/Columns/Columns.scss +++ b/polaris-react/src/components/Columns/Columns.scss @@ -6,32 +6,32 @@ --pc-columns-md: var(--pc-columns-sm); --pc-columns-lg: var(--pc-columns-md); --pc-columns-xl: var(--pc-columns-lg); - --pc-columns-gap-xs: var(--p-space-4); - --pc-columns-gap-sm: var(--pc-columns-gap-xs); - --pc-columns-gap-md: var(--pc-columns-gap-sm); - --pc-columns-gap-lg: var(--pc-columns-gap-md); - --pc-columns-gap-xl: var(--pc-columns-gap-lg); + --pc-columns-space-xs: var(--p-space-4); + --pc-columns-space-sm: var(--pc-columns-space-xs); + --pc-columns-space-md: var(--pc-columns-space-sm); + --pc-columns-space-lg: var(--pc-columns-space-md); + --pc-columns-space-xl: var(--pc-columns-space-lg); display: grid; - gap: var(--pc-columns-gap-xs); + gap: var(--pc-columns-space-xs); grid-template-columns: var(--pc-columns-xs); @media #{$p-breakpoints-sm-up} { - gap: var(--pc-columns-gap-sm); + gap: var(--pc-columns-space-sm); grid-template-columns: var(--pc-columns-sm); } @media #{$p-breakpoints-md-up} { - gap: var(--pc-columns-gap-md); + gap: var(--pc-columns-space-md); grid-template-columns: var(--pc-columns-md); } @media #{$p-breakpoints-lg-up} { - gap: var(--pc-columns-gap-lg); + gap: var(--pc-columns-space-lg); grid-template-columns: var(--pc-columns-lg); } @media #{$p-breakpoints-xl-up} { - gap: var(--pc-columns-gap-xl); + gap: var(--pc-columns-space-xl); grid-template-columns: var(--pc-columns-xl); } } diff --git a/polaris-react/src/components/Columns/Columns.stories.tsx b/polaris-react/src/components/Columns/Columns.stories.tsx index 15a126ccc21..f0577f48630 100644 --- a/polaris-react/src/components/Columns/Columns.stories.tsx +++ b/polaris-react/src/components/Columns/Columns.stories.tsx @@ -10,7 +10,7 @@ export default { export function BasicColumns() { return ( - +
one
two
three
@@ -32,7 +32,7 @@ export function ColumnsWithTemplateColumns() { md: '1fr 3fr auto 1fr', lg: '1fr 4fr auto 2fr 3fr auto', }} - gap={{xs: '4'}} + spacing={{xs: '4'}} >
Column one
Column two
@@ -50,7 +50,7 @@ export function ColumnsWithMixedPropTypes() {
one
two
@@ -68,7 +68,7 @@ export function ColumnsWithVaryingGap() {
Column one
Column two
@@ -81,7 +81,7 @@ export function ColumnsWithVaryingGap() { export function ColumnsWithFreeAndFixedWidths() { return ( - +
Column one