Ensure non-responsive React props are properly encapsulated when converted to CSS Custom Properties

Author: jesstelford

.changeset/cyan-hats-jam.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Correctly scope CSS Variables for non-responsive props on `Tooltip`, `RangeSlider`, `ProgressBar`, and `HorizontalStack`.

.changeset/slimy-donuts-report.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Add support for non-responsive values to `Grid`'s `gap`, `columns`, and `areas` props.

polaris-react/src/components/HorizontalStack/HorizontalStack.scss

@@ -1,12 +1,13 @@
 @import '../../styles/common';
 
 .HorizontalStack {
-  @include responsive-props('horizontal-stack', 'gap', 'gap');
   display: flex;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex-wrap: var(--pc-horizontal-stack-wrap);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: var(--pc-horizontal-stack-block-align);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  justify-content: var(--pc-horizontal-stack-align);
+  @include responsive-props('horizontal-stack', 'gap', 'gap');
+  @include non-responsive-prop('horizontal-stack', 'wrap', 'flex-wrap');
+  @include non-responsive-prop(
+    'horizontal-stack',
+    'block-align',
+    'align-items'
+  );
+  @include non-responsive-prop('horizontal-stack', 'align', 'justify-content');
 }

polaris-react/src/components/ProgressBar/ProgressBar.scss

@@ -12,6 +12,8 @@
 }
 
 .ProgressBar {
+  @include scope-custom-property('progress-bar', 'duration');
+  @include scope-custom-property('progress-bar', 'percent');
   overflow: hidden;
   width: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY

polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.scss

@@ -25,6 +25,8 @@ $range-wrapper: 28px;
 }
 
 .Track {
+  @include scope-custom-property('range-slider', 'progress-upper');
+  @include scope-custom-property('range-slider', 'progress-lower');
   // stylelint-disable -- Polaris component custom properties
   --pc-dual-thumb-unselected-range: transparent;
   --pc-dual-thumb-selected-range: var(--p-color-bg-interactive);

polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss

@@ -79,6 +79,11 @@
 }
 
 .Input {
+  @include scope-custom-property('range-slider', 'min');
+  @include scope-custom-property('range-slider', 'max');
+  @include scope-custom-property('range-slider', 'current');
+  @include scope-custom-property('range-slider', 'progess');
+  @include scope-custom-property('range-slider', 'output-factor');
   // stylelint-disable -- Polaris component custom properties
   --pc-single-thumb-progress-lower: var(--p-color-bg-interactive);
   --pc-single-thumb-progress-upper: transparent;

polaris-react/src/components/ShadowBevel/ShadowBevel.scss

@@ -5,6 +5,8 @@
   // stylelint-disable-next-line -- Explicitly set `0` to create a local stacking context. While the initial `z-index: auto` has a stack level of `0` within the current stacking context, it does not create a new local stacking context.
   z-index: 0;
 
+  @include scope-custom-property('shadow-bevel', 'z-index');
+
   @include responsive-props(
     $componentName: 'shadow-bevel',
     $componentProp: 'box-shadow',

polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss

@@ -1,6 +1,10 @@
 @import '../../../../styles/common';
 
 .TooltipOverlay {
+  @include scope-custom-property('tooltip', 'chevron-x-pos');
+  @include scope-custom-property('tooltip', 'border-radius');
+  @include scope-custom-property('tooltip', 'padding');
+
   // stylelint-disable -- Polaris component custom properties
   --pc-tooltip-overlay-offset: var(--p-space-3);
   --pc-tooltip-shadow-bevel-z-index: 1;