Add responsive inline size utilities (#1854)

Author: tylersticka

.changeset/perfect-seahorses-knock.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add responsive inline size utilities

src/utilities/size/demo/inline-size.twig

@@ -0,0 +1,22 @@
+<div class="demo-u-size-inline">
+  {% for columns in 2..6 %}
+    <div>
+      <div class="u-size-inline-1/{{columns}} u-pad-n1 u-rounded t-dark t-alternate u-text-center">
+        1/{{columns}}
+      </div>
+      <div class="u-size-inline-{{columns - 1}}/{{columns}} u-pad-n1 u-rounded t-dark t-alternate u-text-center">
+        {{columns - 1}}/{{columns}}
+      </div>
+    </div>
+  {% endfor %}
+  <div>
+    <div class="u-size-inline-full u-pad-n1 u-rounded t-dark t-alternate u-text-center">
+      full
+    </div>
+  </div>
+  <div>
+    <div class="u-size-inline-auto u-pad-n1 u-rounded t-dark t-alternate u-text-center">
+      auto
+    </div>
+  </div>
+</div>

src/utilities/size/demo/responsive.twig

@@ -0,0 +1,16 @@
+<div class="demo-u-size-responsive">
+  <div class="u-size-inline-1/2 u-size-inline-2/3@s u-size-inline-3/4@m u-size-inline-4/5@l u-size-inline-5/6@xl t-dark t-alternate u-rounded u-pad-n1">
+    <div>1/2</div>
+    <div>2/3@s</div>
+    <div>3/4@m</div>
+    <div>4/5@l</div>
+    <div>5/6@xl</div>
+  </div>
+  <div class="u-size-inline-1/2 u-size-inline-1/3@s u-size-inline-1/4@m u-size-inline-1/5@l u-size-inline-1/6@xl t-dark t-alternate u-rounded u-pad-n1">
+    <div>1/2</div>
+    <div>1/3@s</div>
+    <div>1/4@m</div>
+    <div>1/5@l</div>
+    <div>1/6@xl</div>
+  </div>
+</div>

src/utilities/size/demo/styles.scss

@@ -0,0 +1,14 @@
+.demo-u-size-inline {
+  display: grid;
+  gap: 1em;
+
+  > * {
+    display: flex;
+    gap: inherit;
+  }
+}
+
+.demo-u-size-responsive {
+  display: flex;
+  gap: 1em;
+}

src/utilities/size/size.scss

@@ -0,0 +1,34 @@
+@use 'sass:math';
+@use '../../mixins/media-query';
+
+// Set the inline size styles in a mixin. The suffix will let us easily append
+// breakpoint suffixes.
+@mixin _inline-size-utilities($suffix: '') {
+  @for $columns from 2 through 6 {
+    @for $column from 1 through $columns {
+      .u-size-inline-#{$column}\/#{$columns}#{$suffix} {
+        inline-size: math.div($column, $columns) * 100% !important;
+      }
+    }
+  }
+
+  .u-size-inline-full#{$suffix} {
+    inline-size: 100% !important;
+  }
+
+  .u-size-inline-auto#{$suffix} {
+    inline-size: auto !important;
+  }
+}
+
+// Include the default versions (no media queries)
+@include _inline-size-utilities;
+
+// Include responsive versions. This would be simpler if we could use the
+// `breakpoint-classes` mixin instead, but in this case we want all of the
+// responsive versions to be grouped by breakpoint so larger breakpoints will
+// naturally override smaller ones.
+@include media-query.breakpoint-loop using ($key) {
+  $suffix: \@#{$key};
+  @include _inline-size-utilities($suffix);
+}

src/utilities/size/size.stories.mdx

@@ -0,0 +1,43 @@
+import { Story, Canvas, Meta } from '@storybook/addon-docs';
+import inlineSizeDemo from './demo/inline-size.twig';
+import responsiveDemo from './demo/responsive.twig';
+import './demo/styles.scss';
+
+<Meta title="Utilities/Size" />
+
+# Size
+
+Utilities for specifying the size occupied by an element. While largely unnecessary in objects and components thanks to [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout), these utilities can still be useful for fine-tuning one-off elements in page content.
+
+## Logical Properties
+
+All of our utilities use [logical properties](https://www.w3.org/TR/css-logical-1/) instead of specific directions [in supported browsers](https://caniuse.com/#feat=css-logical-props) to simplify potential localization projects.
+
+The following table maps the traditional physical property for `direction: ltr` and `writing-mode: horizontal-tb` to its equivalent logical property:
+
+| Physical Property | Logical Property |
+| ----------------- | ---------------- |
+| `height`          | `block-size`     |
+| `width`           | `inline-size`    |
+
+You can observe how utilities respond to various `direction` and `writing-mode` values by selecting a different "Text flow" in this project's toolbar.
+
+## Inline size
+
+Utilities beginning with `u-size-inline-` specify the `inline-size` of an element:
+
+- `u-size-inline-{fraction}` for percentage widths, where `{fraction}` represents the desired ratio. For example, `u-size-inline-2/5` would set `inline-size` to `40%`. Fractions with denominators of `2` through `6` are supported.
+- `u-size-inline-full` sets the `inline-size` to `100%` of the container.
+- `u-size-inline-auto` sets the `inline-size` to the natural value for the element.
+
+<Canvas>
+  <Story name="Inline size (Width)">{() => inlineSizeDemo()}</Story>
+</Canvas>
+
+## Responsive
+
+All of these utilities include responsive variations. Appending `@{breakpoint}` to the end of the class name will cause the utility to change for the given breakpoint.
+
+<Canvas>
+  <Story name="Responsive">{() => responsiveDemo()}</Story>
+</Canvas>