From 1809395b44b55c4518b6abaa748a1b153b498d80 Mon Sep 17 00:00:00 2001
From: Tyler Sticka <tyler@cloudfour.com>
Date: Mon, 25 Jul 2022 13:58:50 -0700
Subject: [PATCH] Add `u-inline-block` utility

---
 .changeset/strange-toys-bake.md              |  5 +++++
 src/utilities/display/demo/clearfix.twig     |  4 ++--
 src/utilities/display/demo/inline-block.twig |  3 +++
 src/utilities/display/display.scss           | 16 ++++++++--------
 src/utilities/display/display.stories.mdx    |  9 +++++++++
 5 files changed, 27 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/strange-toys-bake.md
 create mode 100644 src/utilities/display/demo/inline-block.twig

diff --git a/.changeset/strange-toys-bake.md b/.changeset/strange-toys-bake.md
new file mode 100644
index 000000000..e7da94a50
--- /dev/null
+++ b/.changeset/strange-toys-bake.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add `u-inline-block` utility
diff --git a/src/utilities/display/demo/clearfix.twig b/src/utilities/display/demo/clearfix.twig
index 10e7f831a..cc342fce9 100644
--- a/src/utilities/display/demo/clearfix.twig
+++ b/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>
diff --git a/src/utilities/display/demo/inline-block.twig b/src/utilities/display/demo/inline-block.twig
new file mode 100644
index 000000000..a03e54d12
--- /dev/null
+++ b/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>
diff --git a/src/utilities/display/display.scss b/src/utilities/display/display.scss
index 780570048..df082f627 100644
--- a/src/utilities/display/display.scss
+++ b/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;
+}
diff --git a/src/utilities/display/display.stories.mdx b/src/utilities/display/display.stories.mdx
index 86c73f2ed..364f6be27 100644
--- a/src/utilities/display/display.stories.mdx
+++ b/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>