[Box] Add support for responsive padding

[aveline]

WHY are these changes introduced?

Support #7354 by adding responsive padding to Box

WHAT is this pull request doing?

• Add a mixin for generating responsive custom properties
• Box now accepts a spacing token or object with breakpoints that map to spacing tokens for padding

How to 🎩

Box stories have been added with responsive spacing

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	210.16 KB (+0.01% 🔺)
polaris-react-esm	136.22 KB (-0.01% 🔽)
polaris-react-esnext	191.76 KB (+0.16% 🔺)
polaris-react-css	41.77 KB (+0.9% 🔺)

[chazdean]

Tophatted 🎩! Looking forward to using this 👍🏾

[aaronccasanova]

This responsive-props abstraction looks great and really cleans up duplications. However, I think there may be an opportunity to further optimize the outputted CSS. Right now, the generated CSS creates 4 media queries for each mixin usage which the Sass compiler can't deduplicate. I don't think we need to address the optimization in this PR, but it may be worth investigating an API where you define all responsive props upfront and inject them into only 4 media queries e.g.

@include responsive-props(
  ('box', 'padding', 'padding'),
  ('box', 'padding-block-start', 'padding-block-start', 'padding'),
  ('box', 'padding-block-end', 'padding-block-start', 'padding'),
  // etc.
);

[aaronccasanova]

Couldn't shake it! Here's a proof of concept that consolidates the outputted CSS:

Updated responsive-props API

$p-breakpoints-sm-up: '(min-width: 1px)';
$p-breakpoints-md-up: '(min-width: 2px)';
$p-breakpoints-lg-up: '(min-width: 3px)';
$p-breakpoints-xl-up: '(min-width: 4px)';

@mixin responsive-props($props...) {
  @each $prop in $props {
    $componentName: map-get($prop, component-name);
    $componentProp: map-get($prop, component-prop);

    --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
    );
  }
  
  @each $prop in $props {
    $componentName: map-get($prop, component-name);
    $componentProp: map-get($prop, component-prop);
    $declarationProp: map-get($prop, declaration-prop);
    $fallbackProp: map-get($prop, fallback-prop);

    #{$declarationProp}: var(
      --pc-#{$componentName}-#{$componentProp}-xs,
      if($fallbackProp, --pc-#{$componentName}-#{$fallbackProp}-xs, null),
     );
  }

  @media #{$p-breakpoints-sm-up} {
    @each $config in $props {
      $componentName: map-get($config, component-name);
      $componentProp: map-get($config, component-prop);
      $declarationProp: map-get($config, declaration-prop);
      $fallbackProp: map-get($config, fallback-prop);

      #{$declarationProp}: var(
        --pc-#{$componentName}-#{$componentProp}-sm,
        if($fallbackProp, --pc-#{$componentName}-#{$fallbackProp}-sm, null),
      );
    }
  }

  @media #{$p-breakpoints-md-up} {
    @each $prop in $props {
      $componentName: map-get($prop, component-name);
      $componentProp: map-get($prop, component-prop);
      $declarationProp: map-get($prop, declaration-prop);
      $fallbackProp: map-get($prop, fallback-prop);

      #{$declarationProp}: var(
        --pc-#{$componentName}-#{$componentProp}-md,
        if($fallbackProp, --pc-#{$componentName}-#{$fallbackProp}-md, null),
      );
    }
  }

  @media #{$p-breakpoints-lg-up} {
    @each $prop in $props {
      $componentName: map-get($prop, component-name);
      $componentProp: map-get($prop, component-prop);
      $declarationProp: map-get($prop, declaration-prop);
      $fallbackProp: map-get($prop, fallback-prop);

      #{$declarationProp}: var(
        --pc-#{$componentName}-#{$componentProp}-lg,
        if($fallbackProp, --pc-#{$componentName}-#{$fallbackProp}-lg, null),
      );
    }
  }

  @media #{$p-breakpoints-xl-up} {
    @each $prop in $props {
      $componentName: map-get($prop, component-name);
      $componentProp: map-get($prop, component-prop);
      $declarationProp: map-get($prop, declaration-prop);
      $fallbackProp: map-get($prop, fallback-prop);

      #{$declarationProp}: var(
        --pc-#{$componentName}-#{$componentProp}-xl,
        if($fallbackProp, --pc-#{$componentName}-#{$fallbackProp}-xl, null),
      );
    }
  }
}

Example usage:

.Box {
  @include responsive-props(
    (
      component-name: box,
      component-prop: padding,
      declaration-prop: padding,
    ),
    (
      component-name: box,
      component-prop: padding-block-start,
      declaration-prop: padding-block-start,
      fallback-prop: padding,
    ),
  );
}

Example output:

.Box {
  --pc-box-padding-xs: initial;
  --pc-box-padding-sm:
    var(--pc-box-padding-xs);
  --pc-box-padding-md: var(
    --pc-box-padding-sm
  );
  --pc-box-padding-lg: var(
    --pc-box-padding-md
  );
  --pc-box-padding-xl: var(
    --pc-box-padding-lg
  );
  --pc-box-padding-block-start-xs: initial;
  --pc-box-padding-block-start-sm:
    var(--pc-box-padding-block-start-xs);
  --pc-box-padding-block-start-md: var(
    --pc-box-padding-block-start-sm
  );
  --pc-box-padding-block-start-lg: var(
    --pc-box-padding-block-start-md
  );
  --pc-box-padding-block-start-xl: var(
    --pc-box-padding-block-start-lg
  );
  padding: var(--pc-box-padding-xs, );
  padding-block-start: var(--pc-box-padding-block-start-xs, --pc-box-padding-xs);
}
@media (min-width: 1px) {
  .Box {
    padding: var(--pc-box-padding-sm, );
    padding-block-start: var(--pc-box-padding-block-start-sm, --pc-box-padding-sm);
  }
}
@media (min-width: 2px) {
  .Box {
    padding: var(--pc-box-padding-md, );
    padding-block-start: var(--pc-box-padding-block-start-md, --pc-box-padding-md);
  }
}
@media (min-width: 3px) {
  .Box {
    padding: var(--pc-box-padding-lg, );
    padding-block-start: var(--pc-box-padding-block-start-lg, --pc-box-padding-lg);
  }
}
@media (min-width: 4px) {
  .Box {
    padding: var(--pc-box-padding-xl, );
    padding-block-start: var(--pc-box-padding-block-start-xl, --pc-box-padding-xl);
  }
}

[aveline]

This is great and will look at this in a next iteration. Going to merge this as is now to unblock some other work.

[kyledurand]

LGTM 👍

[laurkim]

Nice! 💯