style(empty state): add text wrap balance to empty state text (#2026)

Kajabi · Nov 21, 2024 · 48a06cf · 48a06cf
1 parent 66fb3ec
commit 48a06cf
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 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
@@ -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
@@ -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,