Moving Away From `Primer::Truncate`

This guide will show you how to upgrade from the now-deprecated Primer::Truncate component to the latest Primer::Beta::Truncate component.

The new Truncate component additionally now includes a text slot used for the truncated text.

Some Migration Examples

Migrating the most common use cases of the Truncate component simply requires changing the name.

Previously we might have something like:

<%= render( :p)) { "Some really, really verbose content" } %>

That's now:

<%= render( :p)) { "Some really, really verbose content" } %>

The tag argument now defaults to :span instead of :div, so if we want to continue wrapping content in <div> tags we'll need to explicitly set that. So, if we'd been using:

<%= render( { "Some more very very long text" } %>

We can now equivalently write:

<%= render( :div)) { "Some more very very long text" } %>


The following arguments for the component initializer have changed between the deprecated and newer versions of the Truncate component.

From Primer::TruncateTo Primer::Beta::TruncateNotes
tagtagPreviously defaulted to :div, now :span.
inlinen/aRemoved in Primer::Beta::Truncate.
n/apriorityIf true, the text will be given priority (by increasing flex-basis).

The remaining arguments for Truncate can be found in the documentation for that component.

Please see the following for complete descriptions and examples.


Back to development docs