Skip to content

Fix typo in responsive-props mixin #7757

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

Merged
merged 6 commits into from
Nov 18, 2022
Merged

Fix typo in responsive-props mixin #7757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6a8485c
Fix typo
aveline Nov 17, 2022
cf05742
Add examples for responsive spacing props
aveline Nov 17, 2022
df4b0d8
Update props.json
aveline Nov 17, 2022
ea9bbed
changeset
aveline Nov 17, 2022
b3b7514
Merge branch 'main' into box-typo
aveline Nov 18, 2022
17f1381
Update props.json
aveline Nov 18, 2022
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
6 changes: 6 additions & 0 deletions .changeset/new-birds-pretend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@shopify/polaris': patch
'polaris.shopify.com': patch
---

Fixed typo in `responsive-props` mixin. Added jsdoc examples for responsive spacing props in `Box`.
30 changes: 25 additions & 5 deletions polaris-react/src/components/Box/Box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,15 +138,35 @@ export interface BoxProps {
overflowX?: Overflow;
/** Clip vertical content of children */
overflowY?: Overflow;
/** Spacing around children */
/** Spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
* @example
* padding='4'
* padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
*/
padding?: Spacing;
/** Vertical start spacing around children */
/** 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 */
/** 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;
/** Horizontal start spacing around children */
/** Horizontal start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
* @example
* paddingInlineStart='4'
* paddingInlineStart={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
*/
paddingInlineStart?: Spacing;
/** Horizontal end spacing around children */
/** Horizontal end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
* @example
* paddingInlineEnd='4'
* paddingInlineEnd={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
*/
paddingInlineEnd?: Spacing;
/** Shadow */
shadow?: DepthShadowAlias;
Expand Down
22 changes: 11 additions & 11 deletions polaris-react/src/styles/shared/_responsive-props.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@mixin responsive-props(
$componentName,
$componentProp,
$declartionProp,
$declarationProp,
$shorthandFallback: null
) {
--pc-#{$componentName}-#{$componentProp}-xs: initial;
Expand All @@ -18,55 +18,55 @@
--pc-#{$componentName}-#{$componentProp}-lg
);
@if $shorthandFallback {
#{$declartionProp}: var(
#{$declarationProp}: var(
--pc-#{$componentName}-#{$componentProp}-xs,
var(--pc-#{$componentName}-#{$shorthandFallback}-xs)
);

@media #{$p-breakpoints-sm-up} {
#{$declartionProp}: var(
#{$declarationProp}: var(
--pc-#{$componentName}-#{$componentProp}-sm,
var(--pc-#{$componentName}-#{$shorthandFallback}-sm)
);
}

@media #{$p-breakpoints-md-up} {
#{$declartionProp}: var(
#{$declarationProp}: var(
--pc-#{$componentName}-#{$componentProp}-md,
var(--pc-#{$componentName}-#{$shorthandFallback}-md)
);
}

@media #{$p-breakpoints-lg-up} {
#{$declartionProp}: var(
#{$declarationProp}: var(
--pc-#{$componentName}-#{$componentProp}-lg,
var(--pc-#{$componentName}-#{$shorthandFallback}-lg)
);
}

@media #{$p-breakpoints-xl-up} {
#{$declartionProp}: var(
#{$declarationProp}: var(
--pc-#{$componentName}-#{$componentProp}-xl,
var(--pc-#{$componentName}-#{$shorthandFallback}-xl)
);
}
} @else {
#{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xs);
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-xs);

@media #{$p-breakpoints-sm-up} {
#{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-sm);
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-sm);
}

@media #{$p-breakpoints-md-up} {
#{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-md);
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-md);
}

@media #{$p-breakpoints-lg-up} {
#{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-lg);
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-lg);
}

@media #{$p-breakpoints-xl-up} {
#{$declartionProp}: var(--pc-#{$componentName}-#{$componentProp}-xl);
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-xl);
}
}
}
Loading