From 8ddd6ee1418ac38833a54e796d75269a2cb8a048 Mon Sep 17 00:00:00 2001
From: Caleb Eby <caleb.eby01@gmail.com>
Date: Thu, 14 Jul 2022 12:32:19 -0700
Subject: [PATCH 1/3] Add clearfix utility

---
 .changeset/cool-dolls-raise.md            |  5 +++++
 package-lock.json                         |  4 ++--
 src/utilities/display/demo/clearfix.twig  |  3 +++
 src/utilities/display/display.scss        | 10 ++++++++++
 src/utilities/display/display.stories.mdx |  9 +++++++++
 5 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/cool-dolls-raise.md
 create mode 100644 src/utilities/display/demo/clearfix.twig

diff --git a/.changeset/cool-dolls-raise.md b/.changeset/cool-dolls-raise.md
new file mode 100644
index 000000000..8b015996a
--- /dev/null
+++ b/.changeset/cool-dolls-raise.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add clearfix utility
diff --git a/package-lock.json b/package-lock.json
index af102b1c0..de63509fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@cloudfour/patterns",
-  "version": "11.0.0",
+  "version": "11.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@cloudfour/patterns",
-      "version": "11.0.0",
+      "version": "11.2.1",
       "license": "MIT",
       "dependencies": {
         "focus-visible": "5.2.0",
diff --git a/src/utilities/display/demo/clearfix.twig b/src/utilities/display/demo/clearfix.twig
new file mode 100644
index 000000000..10e7f831a
--- /dev/null
+++ b/src/utilities/display/demo/clearfix.twig
@@ -0,0 +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>
diff --git a/src/utilities/display/display.scss b/src/utilities/display/display.scss
index 2c413da95..3190e024d 100644
--- a/src/utilities/display/display.scss
+++ b/src/utilities/display/display.scss
@@ -7,3 +7,13 @@
 .u-hidden-visually {
   @include a11y.sr-only($important: true);
 }
+
+/**
+ * Clearfix: force parent container to expand to fit floated children
+ * https://www.cssmojo.com/latest-new-clearfix-so-far/
+ */
+.u-clearfix::after {
+  content: '';
+  display: block;
+  clear: both;
+}
diff --git a/src/utilities/display/display.stories.mdx b/src/utilities/display/display.stories.mdx
index d2cb1938c..4844e5623 100644
--- a/src/utilities/display/display.stories.mdx
+++ b/src/utilities/display/display.stories.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import hiddenVisuallyDemo from './demo/hidden-visually.twig';
+import clearfixDemo from './demo/clearfix.twig';
 
 <Meta title="Utilities/Display" />
 
@@ -21,3 +22,11 @@ In this example, the link will include text when read aloud:
 <Canvas>
   <Story name="Hidden Visually">{hiddenVisuallyDemo}</Story>
 </Canvas>
+
+## Clearfix
+
+The `u-clearfix` class forces a parent container to expand to fit floated children.
+
+<Canvas>
+  <Story name="Clearfix">{clearfixDemo}</Story>
+</Canvas>

From c535874d9f04f5e2da437b364cfb3e3a659279ce Mon Sep 17 00:00:00 2001
From: Caleb Eby <caleb.eby01@gmail.com>
Date: Thu, 14 Jul 2022 12:36:44 -0700
Subject: [PATCH 2/3] stylelint

---
 src/utilities/display/display.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utilities/display/display.scss b/src/utilities/display/display.scss
index 3190e024d..fa3cc1ba0 100644
--- a/src/utilities/display/display.scss
+++ b/src/utilities/display/display.scss
@@ -13,7 +13,7 @@
  * https://www.cssmojo.com/latest-new-clearfix-so-far/
  */
 .u-clearfix::after {
+  clear: both;
   content: '';
   display: block;
-  clear: both;
 }

From ad98c9310ba1d498af0a2a84cfd80470ab09262e Mon Sep 17 00:00:00 2001
From: Caleb Eby <caleb.eby01@gmail.com>
Date: Thu, 14 Jul 2022 12:37:04 -0700
Subject: [PATCH 3/3] Reword comment/description

---
 src/utilities/display/display.scss        | 2 +-
 src/utilities/display/display.stories.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utilities/display/display.scss b/src/utilities/display/display.scss
index fa3cc1ba0..780570048 100644
--- a/src/utilities/display/display.scss
+++ b/src/utilities/display/display.scss
@@ -9,7 +9,7 @@
 }
 
 /**
- * Clearfix: force parent container to expand to fit floated children
+ * Clearfix: forces a container to expand to fit floated children
  * https://www.cssmojo.com/latest-new-clearfix-so-far/
  */
 .u-clearfix::after {
diff --git a/src/utilities/display/display.stories.mdx b/src/utilities/display/display.stories.mdx
index 4844e5623..86c73f2ed 100644
--- a/src/utilities/display/display.stories.mdx
+++ b/src/utilities/display/display.stories.mdx
@@ -25,7 +25,7 @@ In this example, the link will include text when read aloud:
 
 ## Clearfix
 
-The `u-clearfix` class forces a parent container to expand to fit floated children.
+The `u-clearfix` class forces a container to expand to fit floated children.
 
 <Canvas>
   <Story name="Clearfix">{clearfixDemo}</Story>