From de98e3b5eea17053ef5eb46158fd08b7faaa510c Mon Sep 17 00:00:00 2001
From: Monica Wheeler <monica.wheeler@kajabi.com>
Date: Wed, 20 Nov 2024 15:39:42 -0600
Subject: [PATCH] style(empty state): add text wrap balance to empty state text

---
 .../views/examples/components/empty_state/_preview.html.erb | 6 +++---
 .../lib/stylesheets/components/_empty_state.scss            | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/app/views/examples/components/empty_state/_preview.html.erb b/docs/app/views/examples/components/empty_state/_preview.html.erb
index f033a770f5..33255f462a 100644
--- a/docs/app/views/examples/components/empty_state/_preview.html.erb
+++ b/docs/app/views/examples/components/empty_state/_preview.html.erb
@@ -2,7 +2,7 @@
 <%= sage_component SageEmptyState, {
   icon: "trash",
   title: "Title for state",
-  text: "Text to appear below. Lorem ipsum dolor sit amet consectituor."
+  text: "Text to appear below. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor.",
 } do %>
   <p>Other stuff such as buttons...</p>
 <% end %>
@@ -12,7 +12,7 @@
 <%= sage_component SageEmptyState, {
   icon: "bold",
   title: "Title for state, compact variety",
-  text: "Text to appear below. Lorem ipsum dolor sit amet consectituor.",
+  text: "Text to appear below. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor.",
   size: "compact",
 } do %>
   <p>Other stuff such as buttons...</p>
@@ -22,7 +22,7 @@
 <%= sage_component SageEmptyState, {
   graphic: image_tag("card-placeholder-lg.png", alt: ""),
   title: "Title for state, with graphic instead of icon",
-  text: "Text to appear below. Lorem ipsum dolor sit amet consectituor.",
+  text: "Text to appear below. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor. Lorem ipsum dolor sit amet consectituor.",
 } do %>
   <p>Other stuff such as buttons...</p>
 <% end %>
diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
index 065b4142c5..9b2262bbae 100644
--- a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -90,6 +90,7 @@ $-empty-state-icon-compact-size: rem(56px);
   @extend %t-sage-body;
 
   word-wrap: break-word;
+  text-wrap: balance;
 }
 
 .sage-empty-state__text,