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 %>
Other stuff such as buttons...
<% 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 %>Other stuff such as buttons...
@@ -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 %>Other stuff such as buttons...
<% 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,