Add Block Size Utilities (#2203)

In a recent WordPress change I had use for a `u-block-size-full` util
but it didn't exist. This adds both "full" and "auto" size utils for
the block direction.

Author: spaceninja

.changeset/thin-schools-brush.md

@@ -0,0 +1,5 @@
+---
+"@cloudfour/patterns": minor
+---
+
+Add Block Size Utilities: Adds "full" and "auto" size utility classes for the `block` direction.

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

@@ -0,0 +1,12 @@
+<div class="demo-u-size-block">
+  <div style="height:150px;">
+    <div class="u-size-block-full u-pad-n1 u-rounded t-dark t-alternate u-text-center">
+      full (in a 150px tall container)
+    </div>
+  </div>
+  <div style="height:150px;">
+    <div class="u-size-block-auto u-pad-n1 u-rounded t-dark t-alternate u-text-center">
+      auto (in a 150px tall container)
+    </div>
+  </div>
+</div>

src/utilities/size/demo/styles.scss

@@ -8,6 +8,12 @@
   }
 }
 
+.demo-u-size-block {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
 .demo-u-size-responsive {
   display: flex;
   gap: 1em;

src/utilities/size/size.scss

@@ -21,8 +21,21 @@
   }
 }
 
+// Set the block size styles in a mixin. The suffix will let us easily append
+// breakpoint suffixes.
+@mixin _block-size-utilities($suffix: '') {
+  .u-size-block-full#{$suffix} {
+    block-size: 100% !important;
+  }
+
+  .u-size-block-auto#{$suffix} {
+    block-size: auto !important;
+  }
+}
+
 // Include the default versions (no media queries)
 @include _inline-size-utilities;
+@include _block-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
@@ -31,4 +44,5 @@
 @include media-query.breakpoint-loop using ($key) {
   $suffix: \@#{$key};
   @include _inline-size-utilities($suffix);
+  @include _block-size-utilities($suffix);
 }

src/utilities/size/size.stories.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import inlineSizeDemo from './demo/inline-size.twig';
+import blockSizeDemo from './demo/block-size.twig';
 import responsiveDemo from './demo/responsive.twig';
 import './demo/styles.scss';
 
@@ -34,6 +35,17 @@ Utilities beginning with `u-size-inline-` specify the `inline-size` of an elemen
   <Story name="Inline size (Width)">{() => inlineSizeDemo()}</Story>
 </Canvas>
 
+## Block size
+
+Utilities beginning with `u-size-block-` specify the `block-size` of an element:
+
+- `u-size-block-full` sets the `block-size` to `100%` of the container.
+- `u-size-block-auto` sets the `block-size` to the natural value for the element.
+
+<Canvas>
+  <Story name="Block size (Height)">{() => blockSizeDemo()}</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.