Skip to content

Commit

Permalink
Support responsive syntax for all of <Box>'s style props.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jesstelford
jesstelford committed Oct 19, 2023
1 parent f548035 commit f3a65b2
Show file tree
Hide file tree
Showing 5 changed files with 207 additions and 260 deletions.
5 changes: 5 additions & 0 deletions .changeset/cuddly-ants-reflect.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': minor
---

Support responsive syntax for all of <Box>'s style props.
133 changes: 32 additions & 101 deletions polaris-react/src/components/Box/Box.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,110 +8,41 @@
padding-inline-start: 0;
}

/* prettier-ignore */
.Box {
@include responsive-props('box', 'background', 'background-color');
@include responsive-props('box', 'border-block-end-width', 'border-block-end-width', ('xs': 0));
@include responsive-props('box', 'border-block-start-width', 'border-block-start-width', ('xs': 0));
@include responsive-props('box', 'border-color', 'border-color');
@include responsive-props('box', 'border-end-end-radius', 'border-end-end-radius');
@include responsive-props('box', 'border-end-start-radius', 'border-end-start-radius');
@include responsive-props('box', 'border-inline-end-width', 'border-inline-end-width', ('xs': 0));
@include responsive-props('box', 'border-inline-start-width', 'border-inline-start-width', ('xs': 0));
@include responsive-props('box', 'border-start-end-radius', 'border-start-end-radius');
@include responsive-props('box', 'border-start-start-radius', 'border-start-start-radius');
@include responsive-props('box', 'border-style', 'border-style');
@include responsive-props('box', 'color', 'color');
@include responsive-props('box', 'inset-block-end', 'inset-block-end');
@include responsive-props('box', 'inset-block-start', 'inset-block-start');
@include responsive-props('box', 'inset-inline-end', 'inset-inline-end');
@include responsive-props('box', 'inset-inline-start', 'inset-inline-start');
@include responsive-props('box', 'max-width', 'max-width');
@include responsive-props('box', 'min-height', 'min-height');
@include responsive-props('box', 'min-width', 'min-width');
@include responsive-props('box', 'outline-color', 'outline-color');
@include responsive-props('box', 'outline-style', 'outline-style');
@include responsive-props('box', 'outline-width', 'outline-width');
@include responsive-props('box', 'overflow-x', 'overflow-x');
@include responsive-props('box', 'overflow-y', 'overflow-y');
@include responsive-props('box', 'padding-block-end', 'padding-block-end');
@include responsive-props(
'box',
'padding-block-start',
'padding-block-start'
);
@include responsive-props(
'box',
'padding-inline-start',
'padding-inline-start'
);
@include responsive-props('box', 'padding-block-start', 'padding-block-start');
@include responsive-props('box', 'padding-inline-end', 'padding-inline-end');

// stylelint-disable -- Polaris component custom properties
--pc-box-shadow: initial;
--pc-box-background: initial;
--pc-box-border-radius: initial;
--pc-box-border-end-start-radius: var(--pc-box-border-radius);
--pc-box-border-end-end-radius: var(--pc-box-border-radius);
--pc-box-border-start-start-radius: var(--pc-box-border-radius);
--pc-box-border-start-end-radius: var(--pc-box-border-radius);
--pc-box-color: initial;
--pc-box-min-height: initial;
--pc-box-min-width: initial;
--pc-box-max-width: initial;
--pc-box-outline-color: initial;
--pc-box-outline-style: initial;
--pc-box-outline-width: initial;
--pc-box-overflow-x: initial;
--pc-box-overflow-y: initial;
--pc-box-width: initial;
--pc-box-border-style: initial;
--pc-box-border-color: initial;
--pc-box-border-width: 0;
--pc-box-border-block-start-width: var(--pc-box-border-width);
--pc-box-border-block-end-width: var(--pc-box-border-width);
--pc-box-border-inline-start-width: var(--pc-box-border-width);
--pc-box-border-inline-end-width: var(--pc-box-border-width);
--pc-box-inset-block-start: initial;
--pc-box-inset-block-end: initial;
--pc-box-inset-inline-start: initial;
--pc-box-inset-inline-end: initial;
// stylelint-enable
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
inset-block-start: var(--pc-box-inset-block-start);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
inset-block-end: var(--pc-box-inset-block-end);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
inset-inline-start: var(--pc-box-inset-inline-start);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
inset-inline-end: var(--pc-box-inset-inline-end);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
background-color: var(--pc-box-background);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
box-shadow: var(--pc-box-shadow);
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
border-end-start-radius: var(--pc-box-border-end-start-radius);
// stylelint-enable
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
border-end-end-radius: var(--pc-box-border-end-end-radius);
// stylelint-enable
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
border-start-start-radius: var(--pc-box-border-start-start-radius);
// stylelint-enable
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
border-start-end-radius: var(--pc-box-border-start-end-radius);
// stylelint-enable
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
border-color: var(--pc-box-border-color);
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
border-style: var(--pc-box-border-style);
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
border-block-start-width: var(--pc-box-border-block-start-width);
// stylelint-enable
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
border-block-end-width: var(--pc-box-border-block-end-width);
// stylelint-enable
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
border-inline-start-width: var(--pc-box-border-inline-start-width);
// stylelint-enable
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
border-inline-end-width: var(--pc-box-border-inline-end-width);
// stylelint-enable
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
color: var(--pc-box-color);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
min-height: var(--pc-box-min-height);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
min-width: var(--pc-box-min-width);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
max-width: var(--pc-box-max-width);
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
outline-color: var(--pc-box-outline-color);
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
outline-style: var(--pc-box-outline-style);
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
outline-width: var(--pc-box-outline-width);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
overflow-x: var(--pc-box-overflow-x);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
overflow-y: var(--pc-box-overflow-y);
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
width: var(--pc-box-width);
@include responsive-props('box', 'padding-inline-start', 'padding-inline-start');
@include responsive-props('box', 'shadow', 'box-shadow');
@include responsive-props('box', 'width', 'width');
@include responsive-props('box', 'position', 'position');
@include responsive-props('box', 'z-index', 'z-index');
@include responsive-props('box', 'opacity', 'opacity');
-webkit-overflow-scrolling: touch;
}

Expand Down
Loading

0 comments on commit f3a65b2

Please sign in to comment.