Support responsive syntax for all of <Box>'s style props.

Shopify · Oct 5, 2023 · e777305 · e777305
1 parent b6c8d1b
commit e777305
Show file tree

Hide file tree

Showing 5 changed files with 218 additions and 257 deletions.
diff --git a/.changeset/cuddly-ants-reflect.md b/.changeset/cuddly-ants-reflect.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Support responsive syntax for all of <Box>'s style props.
diff --git a/polaris-react/src/components/Box/Box.scss b/polaris-react/src/components/Box/Box.scss
@@ -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', 0);
+  @include responsive-props('box', 'border-block-start-width', 'border-block-start-width', 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', 0);
+  @include responsive-props('box', 'border-inline-start-width', 'border-inline-start-width', 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;
 }