diff --git a/deprecations.js b/deprecations.js
index ba81c099..a668bd5a 100644
--- a/deprecations.js
+++ b/deprecations.js
@@ -4,6 +4,12 @@
* array and a "message" string.
*/
const versionDeprecations = {
+ '18.0.0': [
+ {
+ selectors: ['.css-truncate', '.css-truncate-target', '.css-truncate-overflow', '.expandable'],
+ message: '.css-truncate has been deprecated in favor of .Truncate'
+ }
+ ],
'17.0.0': [
{
selectors: [
diff --git a/docs/content/components/truncate.md b/docs/content/components/truncate.md
index 5e72f0f0..7b109b0b 100644
--- a/docs/content/components/truncate.md
+++ b/docs/content/components/truncate.md
@@ -1,53 +1,63 @@
---
title: Truncate
path: components/truncate
-status: Stable
+status: Experimental
source: 'https://github.com/primer/css/tree/main/src/truncate'
bundle: truncate
---
-The `css-truncate` class will shorten text with an ellipsis.
+When text reaches lengths larger than existing container, shorten with ellipses.
-## Truncate overflow
+## Truncate
-Combine the `css-truncate` and `css-truncate-overflow` classes to prevent text that overflows from wrapping.
+Adding the `.Truncate` class and wrapping the inner text with `.Truncate-text` will truncate the text.
```html live
-
-
- branch-name-that-is-really-long
-
-
- branch-name-that-is-really-long
-
+
+
+ branch-name-that-is-really-long
+
```
-## Truncate target
+## Truncate beginning
-Combine the `css-truncate` and `css-truncate-target` classes for inline (or inline-block) elements with a fixed maximum width (default: `125px`).
+Adding `.Truncate-text--beginning` to the `.Truncate-text` element will add the ellipses to the beginning of the line of text.
```html live
-Some text with a
-
- branch-name-that-is-really-long
-
+
+
+ branch-name-that-is-really-long
+
+
```
-You can override the maximum width of the truncated text with an inline `style` attribute:
+## Truncate multiple items
+
+You can add multiple `.Truncate-text` items in the same row and they will truncate evenly. If you want to make one of the items the primary text that doesn't truncate first, add the class `.Truncate-text--primary` class.
```html live
-Some text with a
-
- branch-name-that-is-really-long
-
+
+
+ really-long-repository-owner-name
+
+ / really-long-repository-name
+
+
+
```
-You can reveal the entire string on hover with the addition of `.expandable`.
+## Expand on hover or focus
+
+When there are multiple items in a list, you can add the `.Truncate-text--expandable` class to the `.Truncate-text` items and they will grow when `:hover` or `:focus` state is applied to them.
```html live
-Some text with a
-
- branch-name-that-is-really-long
-
+
```
diff --git a/src/truncate/truncate.scss b/src/truncate/truncate.scss
index 8590f1b4..7643434b 100644
--- a/src/truncate/truncate.scss
+++ b/src/truncate/truncate.scss
@@ -29,3 +29,38 @@
max-width: 10000px !important;
}
}
+
+.Truncate {
+ display: inline-flex;
+ min-width: 0;
+ max-width: 100%;
+
+ .Truncate-text {
+ min-width: 3em;
+ max-width: 100%;
+ max-width: fit-content;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ + .Truncate-text {
+ margin-right: $spacer-1;
+ margin-left: $spacer-1;
+ }
+
+ &.Truncate-text--beginning {
+ direction: rtl;
+ }
+
+ &.Truncate-text--primary {
+ flex-shrink: 0;
+ }
+
+ &.Truncate-text--expandable:hover,
+ &.Truncate-text--expandable:focus,
+ &.Truncate-text--expandable:active {
+ flex-shrink: 0;
+ cursor: pointer;
+ }
+ }
+}