From 6885006c07cf0c5193fd57606ebcb6dfcaae6e9b Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 10 Nov 2022 12:01:54 -0800 Subject: [PATCH 01/11] Add responsive-props mixin --- polaris-react/src/styles/_common.scss | 1 + .../src/styles/shared/_responsive-props.scss | 33 +++++++++++++++++++ polaris-react/src/utilities/css.ts | 4 ++- 3 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 polaris-react/src/styles/shared/_responsive-props.scss diff --git a/polaris-react/src/styles/_common.scss b/polaris-react/src/styles/_common.scss index 35afcd48810..c1e6f1b2d5d 100644 --- a/polaris-react/src/styles/_common.scss +++ b/polaris-react/src/styles/_common.scss @@ -15,6 +15,7 @@ @import './shared/icons'; @import './shared/layout'; @import './shared/page'; +@import './shared/responsive-props'; @import './shared/typography'; @import './shared/interaction-state'; diff --git a/polaris-react/src/styles/shared/_responsive-props.scss b/polaris-react/src/styles/shared/_responsive-props.scss new file mode 100644 index 00000000000..ab41b48c9b5 --- /dev/null +++ b/polaris-react/src/styles/shared/_responsive-props.scss @@ -0,0 +1,33 @@ +@mixin responsive-props($componentName, $componentProp, $declartionProp, $shorthandFallback: null) { + @if $shorthandFallback == null { + --pc-#{$componentName}-#{$componentProp}-xs: initial; + --pc-#{$componentName}-#{$componentProp}-sm: var(--pc-#{$componentName}-#{$componentProp}-xs); + --pc-#{$componentName}-#{$componentProp}-md: var(--pc-#{$componentName}-#{$componentProp}-sm); + --pc-#{$componentName}-#{$componentProp}-lg: var(--pc-#{$componentName}-#{$componentProp}-md); + --pc-#{$componentName}-#{$componentProp}-xl: var(--pc-#{$componentName}-#{$componentProp}-lg); + } @else { + --pc-#{$componentName}-#{$componentProp}-xs: var(--pc-#{$componentName}-#{$shorthandFallback}-xs); + --pc-#{$componentName}-#{$componentProp}-sm: var(--pc-#{$componentName}-#{$shorthandFallback}-sm); + --pc-#{$componentName}-#{$componentProp}-md: var(--pc-#{$componentName}-#{$shorthandFallback}-md); + --pc-#{$componentName}-#{$componentProp}-lg: var(--pc-#{$componentName}-#{$shorthandFallback}-lg); + --pc-#{$componentName}-#{$componentProp}-xl: var(--pc-#{$componentName}-#{$shorthandFallback}-xl); + } + + #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xs); + + @media #{$p-breakpoints-sm-up} { + #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-sm); + } + + @media #{$p-breakpoints-md-up} { + #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-md); + } + + @media #{$p-breakpoints-lg-up} { + #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-lg); + } + + @media #{$p-breakpoints-xl-up} { + #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xl); + } +} diff --git a/polaris-react/src/utilities/css.ts b/polaris-react/src/utilities/css.ts index fc1f112923b..73494ca7c34 100644 --- a/polaris-react/src/utilities/css.ts +++ b/polaris-react/src/utilities/css.ts @@ -30,12 +30,14 @@ export function getResponsiveProps( componentName: string, componentProp: string, tokenSubgroup: string, - responsiveProp: + responsiveProp?: | string | { [Breakpoint in BreakpointsAlias]?: string; }, ) { + if (responsiveProp == null) return {}; + if (typeof responsiveProp === 'string') { return { [`--pc-${componentName}-${componentProp}-xs`]: `var(--p-${tokenSubgroup}-${responsiveProp})`, From 5411b3c31889e2b4e61270764793fe2c9559d842 Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 10 Nov 2022 12:02:25 -0800 Subject: [PATCH 02/11] Add responsive padding to `Box` --- polaris-react/src/components/Box/Box.scss | 14 ++-- .../src/components/Box/Box.stories.tsx | 43 ++++++++++- polaris-react/src/components/Box/Box.tsx | 71 ++++++++++--------- 3 files changed, 87 insertions(+), 41 deletions(-) diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss index 7e839dcd6fe..42d928021b6 100644 --- a/polaris-react/src/components/Box/Box.scss +++ b/polaris-react/src/components/Box/Box.scss @@ -1,4 +1,11 @@ +@import '../../styles/common'; + .Box { + @include responsive-props('box', 'padding', 'padding'); + @include responsive-props('box', 'padding-block-end', 'padding-block-end', 'padding'); + @include responsive-props('box', 'padding-block-start', 'padding-block-start', 'padding'); + @include responsive-props('box', 'padding-inline-start', 'padding-inline-start', 'padding'); + @include responsive-props('box', 'padding-inline-end', 'padding-inline-end', 'padding'); --pc-box-shadow: initial; --pc-box-background: initial; --pc-box-border-radius: initial; @@ -69,13 +76,6 @@ max-width: var(--pc-box-max-width); overflow-x: var(--pc-box-overflow-x); overflow-y: var(--pc-box-overflow-y); - padding-block-end: var(--pc-box-padding-block-end, var(--pc-box-padding)); - padding-inline-start: var( - --pc-box-padding-inline-start, - var(--pc-box-padding) - ); - padding-inline-end: var(--pc-box-padding-inline-end, var(--pc-box-padding)); - padding-block-start: var(--pc-box-padding-block-start, var(--pc-box-padding)); width: var(--pc-box-width); -webkit-overflow-scrolling: touch; } diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx index d35c249f85a..bad0fccc80a 100644 --- a/polaris-react/src/components/Box/Box.stories.tsx +++ b/polaris-react/src/components/Box/Box.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type {ComponentMeta} from '@storybook/react'; -import {Box, Icon} from '@shopify/polaris'; +import {AlphaStack, Box, Icon} from '@shopify/polaris'; import {PaintBrushMajor} from '@shopify/polaris-icons'; export default { @@ -30,3 +30,44 @@ export function BoxWithBorderRadius() { ); } + +export function BoxWithResponsivePadding() { + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx index 09ffbc4feab..d4340faadad 100644 --- a/polaris-react/src/components/Box/Box.tsx +++ b/polaris-react/src/components/Box/Box.tsx @@ -10,7 +10,12 @@ import type { SpacingSpaceScale, } from '@shopify/polaris-tokens'; -import {classNames, sanitizeCustomProperties} from '../../utilities/css'; +import { + getResponsiveProps, + ResponsiveProp, + classNames, + sanitizeCustomProperties, +} from '../../utilities/css'; import styles from './Box.scss'; @@ -42,6 +47,8 @@ export type BorderTokenAlias = | 'divider-on-dark' | 'transparent'; +type Spacing = ResponsiveProp; + interface Border { blockStart: BorderTokenAlias; blockEnd: BorderTokenAlias; @@ -75,13 +82,6 @@ interface BorderRadius { endEnd: BorderRadiusTokenScale; } -interface Spacing { - blockStart: SpacingSpaceScale; - blockEnd: SpacingSpaceScale; - inlineStart: SpacingSpaceScale; - inlineEnd: SpacingSpaceScale; -} - interface BorderWidth { blockStart: ShapeBorderWidthScale; blockEnd: ShapeBorderWidthScale; @@ -139,15 +139,15 @@ export interface BoxProps { /** Clip vertical content of children */ overflowY?: Overflow; /** Spacing around children */ - padding?: SpacingSpaceScale; + padding?: Spacing; /** Vertical start spacing around children */ - paddingBlockStart?: SpacingSpaceScale; + paddingBlockStart?: Spacing; /** Vertical end spacing around children */ - paddingBlockEnd?: SpacingSpaceScale; + paddingBlockEnd?: Spacing; /** Horizontal start spacing around children */ - paddingInlineStart?: SpacingSpaceScale; + paddingInlineStart?: Spacing; /** Horizontal end spacing around children */ - paddingInlineEnd?: SpacingSpaceScale; + paddingInlineEnd?: Spacing; /** Shadow */ shadow?: DepthShadowAlias; /** Set width of container */ @@ -215,13 +215,6 @@ export const Box = forwardRef( inlineEnd: borderInlineEndWidth, } as BorderWidth; - const paddings = { - blockEnd: paddingBlockEnd, - inlineStart: paddingInlineStart, - inlineEnd: paddingInlineEnd, - blockStart: paddingBlockStart, - } as Spacing; - const style = { '--pc-box-color': color ? `var(--p-${color})` : undefined, '--pc-box-background': background ? `var(--p-${background})` : undefined, @@ -273,19 +266,31 @@ export const Box = forwardRef( '--pc-box-max-width': maxWidth, '--pc-box-overflow-x': overflowX, '--pc-box-overflow-y': overflowY, - '--pc-box-padding': padding ? `var(--p-space-${padding})` : undefined, - '--pc-box-padding-block-end': paddings.blockEnd - ? `var(--p-space-${paddings.blockEnd})` - : undefined, - '--pc-box-padding-inline-start': paddings.inlineStart - ? `var(--p-space-${paddings.inlineStart})` - : undefined, - '--pc-box-padding-inline-end': paddings.inlineEnd - ? `var(--p-space-${paddings.inlineEnd})` - : undefined, - '--pc-box-padding-block-start': paddings.blockStart - ? `var(--p-space-${paddings.blockStart})` - : undefined, + ...getResponsiveProps('box', 'padding', 'space', padding), + ...getResponsiveProps( + 'box', + 'padding-block-end', + 'space', + paddingBlockEnd, + ), + ...getResponsiveProps( + 'box', + 'padding-block-start', + 'space', + paddingBlockStart, + ), + ...getResponsiveProps( + 'box', + 'padding-inline-start', + 'space', + paddingInlineStart, + ), + ...getResponsiveProps( + 'box', + 'padding-inline-end', + 'space', + paddingInlineEnd, + ), '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : undefined, '--pc-box-width': width, } as React.CSSProperties; From 23d41c37a1320134a185810b71e7adfddece69d7 Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 10 Nov 2022 12:10:41 -0800 Subject: [PATCH 03/11] changeset --- .changeset/small-gifts-hope.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/small-gifts-hope.md diff --git a/.changeset/small-gifts-hope.md b/.changeset/small-gifts-hope.md new file mode 100644 index 00000000000..a4c621de259 --- /dev/null +++ b/.changeset/small-gifts-hope.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Added support for responsive padding to `Box` From ceb42d3963681df7f1ee6e4be10c5b2f7a8496de Mon Sep 17 00:00:00 2001 From: aveline Date: Thu, 10 Nov 2022 14:53:55 -0800 Subject: [PATCH 04/11] =?UTF-8?q?=F0=9F=91=95=20linting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- polaris-react/src/components/Box/Box.scss | 28 ++++++++++-- .../src/styles/shared/_responsive-props.scss | 43 ++++++++++++++----- 2 files changed, 57 insertions(+), 14 deletions(-) diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss index 42d928021b6..8063961da76 100644 --- a/polaris-react/src/components/Box/Box.scss +++ b/polaris-react/src/components/Box/Box.scss @@ -2,10 +2,30 @@ .Box { @include responsive-props('box', 'padding', 'padding'); - @include responsive-props('box', 'padding-block-end', 'padding-block-end', 'padding'); - @include responsive-props('box', 'padding-block-start', 'padding-block-start', 'padding'); - @include responsive-props('box', 'padding-inline-start', 'padding-inline-start', 'padding'); - @include responsive-props('box', 'padding-inline-end', 'padding-inline-end', 'padding'); + @include responsive-props( + 'box', + 'padding-block-end', + 'padding-block-end', + 'padding' + ); + @include responsive-props( + 'box', + 'padding-block-start', + 'padding-block-start', + 'padding' + ); + @include responsive-props( + 'box', + 'padding-inline-start', + 'padding-inline-start', + 'padding' + ); + @include responsive-props( + 'box', + 'padding-inline-end', + 'padding-inline-end', + 'padding' + ); --pc-box-shadow: initial; --pc-box-background: initial; --pc-box-border-radius: initial; diff --git a/polaris-react/src/styles/shared/_responsive-props.scss b/polaris-react/src/styles/shared/_responsive-props.scss index ab41b48c9b5..a537b1444dc 100644 --- a/polaris-react/src/styles/shared/_responsive-props.scss +++ b/polaris-react/src/styles/shared/_responsive-props.scss @@ -1,16 +1,39 @@ -@mixin responsive-props($componentName, $componentProp, $declartionProp, $shorthandFallback: null) { +@mixin responsive-props( + $componentName, + $componentProp, + $declartionProp, + $shorthandFallback: null +) { @if $shorthandFallback == null { --pc-#{$componentName}-#{$componentProp}-xs: initial; - --pc-#{$componentName}-#{$componentProp}-sm: var(--pc-#{$componentName}-#{$componentProp}-xs); - --pc-#{$componentName}-#{$componentProp}-md: var(--pc-#{$componentName}-#{$componentProp}-sm); - --pc-#{$componentName}-#{$componentProp}-lg: var(--pc-#{$componentName}-#{$componentProp}-md); - --pc-#{$componentName}-#{$componentProp}-xl: var(--pc-#{$componentName}-#{$componentProp}-lg); + --pc-#{$componentName}-#{$componentProp}-sm: var( + --pc-#{$componentName}-#{$componentProp}-xs + ); + --pc-#{$componentName}-#{$componentProp}-md: var( + --pc-#{$componentName}-#{$componentProp}-sm + ); + --pc-#{$componentName}-#{$componentProp}-lg: var( + --pc-#{$componentName}-#{$componentProp}-md + ); + --pc-#{$componentName}-#{$componentProp}-xl: var( + --pc-#{$componentName}-#{$componentProp}-lg + ); } @else { - --pc-#{$componentName}-#{$componentProp}-xs: var(--pc-#{$componentName}-#{$shorthandFallback}-xs); - --pc-#{$componentName}-#{$componentProp}-sm: var(--pc-#{$componentName}-#{$shorthandFallback}-sm); - --pc-#{$componentName}-#{$componentProp}-md: var(--pc-#{$componentName}-#{$shorthandFallback}-md); - --pc-#{$componentName}-#{$componentProp}-lg: var(--pc-#{$componentName}-#{$shorthandFallback}-lg); - --pc-#{$componentName}-#{$componentProp}-xl: var(--pc-#{$componentName}-#{$shorthandFallback}-xl); + --pc-#{$componentName}-#{$componentProp}-xs: var( + --pc-#{$componentName}-#{$shorthandFallback}-xs + ); + --pc-#{$componentName}-#{$componentProp}-sm: var( + --pc-#{$componentName}-#{$shorthandFallback}-sm + ); + --pc-#{$componentName}-#{$componentProp}-md: var( + --pc-#{$componentName}-#{$shorthandFallback}-md + ); + --pc-#{$componentName}-#{$componentProp}-lg: var( + --pc-#{$componentName}-#{$shorthandFallback}-lg + ); + --pc-#{$componentName}-#{$componentProp}-xl: var( + --pc-#{$componentName}-#{$shorthandFallback}-xl + ); } #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xs); From 5dae27a7f3e02d2a8cb0dfa16c245e1aa6cebf90 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 14 Nov 2022 07:30:41 -0800 Subject: [PATCH 05/11] =?UTF-8?q?=F0=9F=91=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- polaris-react/src/styles/shared/_responsive-props.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/polaris-react/src/styles/shared/_responsive-props.scss b/polaris-react/src/styles/shared/_responsive-props.scss index a537b1444dc..1fffd321a69 100644 --- a/polaris-react/src/styles/shared/_responsive-props.scss +++ b/polaris-react/src/styles/shared/_responsive-props.scss @@ -4,7 +4,7 @@ $declartionProp, $shorthandFallback: null ) { - @if $shorthandFallback == null { + @if not $shorthandFallback { --pc-#{$componentName}-#{$componentProp}-xs: initial; --pc-#{$componentName}-#{$componentProp}-sm: var( --pc-#{$componentName}-#{$componentProp}-xs @@ -35,7 +35,6 @@ --pc-#{$componentName}-#{$shorthandFallback}-xl ); } - #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xs); @media #{$p-breakpoints-sm-up} { From 11f4616883541c49876cceb4ea8ffc4e44ea1540 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 14 Nov 2022 07:42:52 -0800 Subject: [PATCH 06/11] =?UTF-8?q?=F0=9F=91=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- polaris-react/src/components/Box/Box.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss index 8063961da76..49f5d6fbb66 100644 --- a/polaris-react/src/components/Box/Box.scss +++ b/polaris-react/src/components/Box/Box.scss @@ -26,6 +26,7 @@ 'padding-inline-end', 'padding' ); + --pc-box-shadow: initial; --pc-box-background: initial; --pc-box-border-radius: initial; From 0bd5c778e5ab1d7b606596579d49f84a3d0af7c7 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 14 Nov 2022 08:01:52 -0800 Subject: [PATCH 07/11] =?UTF-8?q?=F0=9F=92=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Box/tests/Box.test.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/polaris-react/src/components/Box/tests/Box.test.tsx b/polaris-react/src/components/Box/tests/Box.test.tsx index 1c788fe259c..a13be52bcae 100644 --- a/polaris-react/src/components/Box/tests/Box.test.tsx +++ b/polaris-react/src/components/Box/tests/Box.test.tsx @@ -79,7 +79,7 @@ describe('Box', () => { expect(box).toContainReactComponent('div', { style: { - '--pc-box-padding-inline-start': 'var(--p-space-2)', + '--pc-box-padding-inline-start-xs': 'var(--p-space-2)', } as React.CSSProperties, }); }); @@ -93,9 +93,22 @@ describe('Box', () => { expect(box).toContainReactComponent('div', { style: { - '--pc-box-padding': 'var(--p-space-1)', - '--pc-box-padding-inline-start': 'var(--p-space-2)', + '--pc-box-padding-xs': 'var(--p-space-1)', + '--pc-box-padding-inline-start-xs': 'var(--p-space-2)', } as React.CSSProperties, }); }); + + it('accepts padding based on breakpoints', () => { + const box = mountWithApp( + {children}, + ); + + expect(box).toContainReactComponent('div', { + style: expect.objectContaining({ + '--pc-box-padding-md': 'var(--p-space-8)', + '--pc-box-padding-xs': 'var(--p-space-2)', + }) as React.CSSProperties, + }); + }); }); From b01f4d91e23b7b9620a7dbe1910732fa73691107 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 14 Nov 2022 10:00:14 -0800 Subject: [PATCH 08/11] Fix responsive css mixin --- .../src/styles/shared/_responsive-props.scss | 100 +++++++++++------- 1 file changed, 59 insertions(+), 41 deletions(-) diff --git a/polaris-react/src/styles/shared/_responsive-props.scss b/polaris-react/src/styles/shared/_responsive-props.scss index 1fffd321a69..54f814d7624 100644 --- a/polaris-react/src/styles/shared/_responsive-props.scss +++ b/polaris-react/src/styles/shared/_responsive-props.scss @@ -4,52 +4,70 @@ $declartionProp, $shorthandFallback: null ) { - @if not $shorthandFallback { - --pc-#{$componentName}-#{$componentProp}-xs: initial; - --pc-#{$componentName}-#{$componentProp}-sm: var( - --pc-#{$componentName}-#{$componentProp}-xs + --pc-#{$componentName}-#{$componentProp}-xs: initial; + --pc-#{$componentName}-#{$componentProp}-sm: var( + --pc-#{$componentName}-#{$componentProp}-xs + ); + --pc-#{$componentName}-#{$componentProp}-md: var( + --pc-#{$componentName}-#{$componentProp}-sm + ); + --pc-#{$componentName}-#{$componentProp}-lg: var( + --pc-#{$componentName}-#{$componentProp}-md + ); + --pc-#{$componentName}-#{$componentProp}-xl: var( + --pc-#{$componentName}-#{$componentProp}-lg + ); + @if $shorthandFallback { + #{$declartionProp}: var( + --pc-#{$componentName}-#{$componentProp}-xs, + var(--pc-#{$componentName}-#{$shorthandFallback}-xs) ); - --pc-#{$componentName}-#{$componentProp}-md: var( - --pc-#{$componentName}-#{$componentProp}-sm - ); - --pc-#{$componentName}-#{$componentProp}-lg: var( - --pc-#{$componentName}-#{$componentProp}-md - ); - --pc-#{$componentName}-#{$componentProp}-xl: var( - --pc-#{$componentName}-#{$componentProp}-lg - ); - } @else { - --pc-#{$componentName}-#{$componentProp}-xs: var( - --pc-#{$componentName}-#{$shorthandFallback}-xs - ); - --pc-#{$componentName}-#{$componentProp}-sm: var( - --pc-#{$componentName}-#{$shorthandFallback}-sm - ); - --pc-#{$componentName}-#{$componentProp}-md: var( - --pc-#{$componentName}-#{$shorthandFallback}-md - ); - --pc-#{$componentName}-#{$componentProp}-lg: var( - --pc-#{$componentName}-#{$shorthandFallback}-lg - ); - --pc-#{$componentName}-#{$componentProp}-xl: var( - --pc-#{$componentName}-#{$shorthandFallback}-xl - ); - } - #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xs); - @media #{$p-breakpoints-sm-up} { - #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-sm); - } + @media #{$p-breakpoints-sm-up} { + #{$declartionProp}: var( + --pc-#{$componentName}-#{$componentProp}-sm, + var(--pc-#{$componentName}-#{$shorthandFallback}-sm) + ); + } - @media #{$p-breakpoints-md-up} { - #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-md); - } + @media #{$p-breakpoints-md-up} { + #{$declartionProp}: var( + --pc-#{$componentName}-#{$componentProp}-md, + var(--pc-#{$componentName}-#{$shorthandFallback}-md) + ); + } + + @media #{$p-breakpoints-lg-up} { + #{$declartionProp}: var( + --pc-#{$componentName}-#{$componentProp}-lg, + var(--pc-#{$componentName}-#{$shorthandFallback}-lg) + ); + } - @media #{$p-breakpoints-lg-up} { - #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-lg); + @media #{$p-breakpoints-xl-up} { + #{$declartionProp}: var( + --pc-#{$componentName}-#{$componentProp}-xl, + var(--pc-#{$componentName}-#{$shorthandFallback}-xl) + ); + } } + else { + #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xs); + + @media #{$p-breakpoints-sm-up} { + #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-sm); + } + + @media #{$p-breakpoints-md-up} { + #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-md); + } + + @media #{$p-breakpoints-lg-up} { + #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-lg); + } - @media #{$p-breakpoints-xl-up} { - #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xl); + @media #{$p-breakpoints-xl-up} { + #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xl); + } } } From 955a76ce0a3719d11d6b8656da4819715d381559 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 14 Nov 2022 10:26:48 -0800 Subject: [PATCH 09/11] =?UTF-8?q?=F0=9F=91=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- polaris-react/src/styles/shared/_responsive-props.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/styles/shared/_responsive-props.scss b/polaris-react/src/styles/shared/_responsive-props.scss index 54f814d7624..4711d4ccd3c 100644 --- a/polaris-react/src/styles/shared/_responsive-props.scss +++ b/polaris-react/src/styles/shared/_responsive-props.scss @@ -51,7 +51,7 @@ ); } } - else { + @else { #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xs); @media #{$p-breakpoints-sm-up} { From 7a72e21f3fde90058d06087da4d69216486a05c4 Mon Sep 17 00:00:00 2001 From: aveline Date: Mon, 14 Nov 2022 10:40:38 -0800 Subject: [PATCH 10/11] =?UTF-8?q?=F0=9F=91=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- polaris-react/src/styles/shared/_responsive-props.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/polaris-react/src/styles/shared/_responsive-props.scss b/polaris-react/src/styles/shared/_responsive-props.scss index 4711d4ccd3c..c2534b1052f 100644 --- a/polaris-react/src/styles/shared/_responsive-props.scss +++ b/polaris-react/src/styles/shared/_responsive-props.scss @@ -50,8 +50,7 @@ var(--pc-#{$componentName}-#{$shorthandFallback}-xl) ); } - } - @else { + } @else { #{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xs); @media #{$p-breakpoints-sm-up} { From 301dc4b7adb6805cbe2714629f7adda5a6ecb5be Mon Sep 17 00:00:00 2001 From: aveline Date: Tue, 15 Nov 2022 14:50:40 -0800 Subject: [PATCH 11/11] Update polaris-react/src/utilities/css.ts Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- polaris-react/src/utilities/css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/utilities/css.ts b/polaris-react/src/utilities/css.ts index 73494ca7c34..74c8e02b9f5 100644 --- a/polaris-react/src/utilities/css.ts +++ b/polaris-react/src/utilities/css.ts @@ -36,7 +36,7 @@ export function getResponsiveProps( [Breakpoint in BreakpointsAlias]?: string; }, ) { - if (responsiveProp == null) return {}; + if (!responsiveProp) return {}; if (typeof responsiveProp === 'string') { return {