Add u-inline-block utility (#1974)

Author: tylersticka

.changeset/strange-toys-bake.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add `u-inline-block` utility

src/utilities/display/demo/clearfix.twig

@@ -1,3 +1,3 @@
-<div class="u-clearfix" style="border: 3px solid black; padding: 15px">
-  <div style="width: 500px; height: 500px; background: green; float: right">I'm floating!</div>
+<div class="u-clearfix u-border-medium u-pad-1">
+  <div class="u-border-medium u-pad-1 u-size-inline-1/2" style="float: right;">I’m floating!</div>
 </div>

src/utilities/display/demo/inline-block.twig

@@ -0,0 +1,3 @@
+<div class="u-border-md u-pad-1" style="max-width: 11em;">
+  Look how the last two words <span class="u-inline-block">stay together</span>
+</div>

src/utilities/display/display.scss

@@ -1,19 +1,19 @@
 @use '../../mixins/a11y';
 
-/**
- * Hide from everything but assistive devices.
- */
-
+/// Hide from everything but assistive devices.
 .u-hidden-visually {
   @include a11y.sr-only($important: true);
 }
 
-/**
- * Clearfix: forces a container to expand to fit floated children
- * https://www.cssmojo.com/latest-new-clearfix-so-far/
- */
+/// Clearfix: forces a container to expand to fit floated children
+/// @link https://www.cssmojo.com/latest-new-clearfix-so-far/
 .u-clearfix::after {
   clear: both;
   content: '';
   display: block;
 }
+
+/// Set `display` to `inline-block`
+.u-inline-block {
+  display: inline-block;
+}

src/utilities/display/display.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import hiddenVisuallyDemo from './demo/hidden-visually.twig';
 import clearfixDemo from './demo/clearfix.twig';
+import inlineBlockDemo from './demo/inline-block.twig';
 
 <Meta title="Utilities/Display" />
 
@@ -30,3 +31,11 @@ The `u-clearfix` class forces a container to expand to fit floated children.
 <Canvas>
   <Story name="Clearfix">{clearfixDemo}</Story>
 </Canvas>
+
+## Inline Block
+
+The `u-inline-block` class sets the `display` property to `inline-block`. This can be used to discourage inline elements from breaking across multiple lines.
+
+<Canvas>
+  <Story name="Inline Block">{inlineBlockDemo}</Story>
+</Canvas>