Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .changeset/strange-toys-bake.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
'@cloudfour/patterns': minor
---

Add `u-inline-block` utility
Add `u-rescue-orphan` utility to fine-tune where text breaks occur as space allows
3 changes: 0 additions & 3 deletions src/utilities/display/demo/inline-block.twig

This file was deleted.

5 changes: 5 additions & 0 deletions src/utilities/display/demo/rescue-orphan.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div class="u-border-md u-pad-1" style="max-width: 11em;">
<a href="#">
Look how the last two words <span class="u-rescue-orphan">stay together</span>
</a>
</div>
5 changes: 3 additions & 2 deletions src/utilities/display/display.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
display: block;
}

/// Set `display` to `inline-block`
.u-inline-block {
/// Attempt to keep chunks of text together as space allows
.u-rescue-orphan {
display: inline-block;
text-decoration: inherit;
}
8 changes: 4 additions & 4 deletions src/utilities/display/display.stories.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +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';
import rescueOrphanDemo from './demo/rescue-orphan.twig';

<Meta title="Utilities/Display" />

Expand Down Expand Up @@ -32,10 +32,10 @@ The `u-clearfix` class forces a container to expand to fit floated children.
<Story name="Clearfix">{clearfixDemo}</Story>
</Canvas>

## Inline Block
## Rescue Orphan

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.
The `u-rescue-orphan` class can wrap the last few words of a chunk of text, attempting to keep them together unless space limitations force a break. This can help reduce the chance of [a typographic orphan](https://en.wikipedia.org/wiki/Widows_and_orphans) in some situations.

<Canvas>
<Story name="Inline Block">{inlineBlockDemo}</Story>
<Story name="Rescue Orphan">{rescueOrphanDemo}</Story>
</Canvas>