mirror of
https://github.com/primer/css.git
synced 2024-10-27 09:48:58 +03:00
Adding new .Truncate class and deprecating css-truncate
This commit is contained in:
parent
65b5aec15e
commit
9e1ff7dc20
@ -4,6 +4,12 @@
|
|||||||
* array and a "message" string.
|
* array and a "message" string.
|
||||||
*/
|
*/
|
||||||
const versionDeprecations = {
|
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': [
|
'17.0.0': [
|
||||||
{
|
{
|
||||||
selectors: [
|
selectors: [
|
||||||
|
@ -1,53 +1,63 @@
|
|||||||
---
|
---
|
||||||
title: Truncate
|
title: Truncate
|
||||||
path: components/truncate
|
path: components/truncate
|
||||||
status: Stable
|
status: Experimental
|
||||||
source: 'https://github.com/primer/css/tree/main/src/truncate'
|
source: 'https://github.com/primer/css/tree/main/src/truncate'
|
||||||
bundle: 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
|
```html live
|
||||||
<div class="col-3">
|
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
||||||
<div class="css-truncate css-truncate-overflow border p-3">
|
<span class="Truncate">
|
||||||
branch-name-that-is-really-long
|
<span class="Truncate-text">branch-name-that-is-really-long</span>
|
||||||
</div>
|
</span>
|
||||||
<div class="border p-3 mt-3">
|
|
||||||
branch-name-that-is-really-long
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 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
|
```html live
|
||||||
Some text with a
|
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
||||||
<strong class="css-truncate css-truncate-target">
|
<span class="Truncate">
|
||||||
branch-name-that-is-really-long
|
<span class="Truncate-text Truncate-text--beginning">branch-name-that-is-really-long</span>
|
||||||
</strong>
|
</span>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
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
|
```html live
|
||||||
Some text with a
|
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
||||||
<strong class="css-truncate css-truncate-target" style="max-width: 180px">
|
<span class="Truncate">
|
||||||
branch-name-that-is-really-long
|
<span class="Truncate-text">really-long-repository-owner-name</span>
|
||||||
</strong>
|
<span class="Truncate-text Truncate-text--primary text-bold">
|
||||||
|
<span class="text-normal">/</span> really-long-repository-name
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
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
|
```html live
|
||||||
Some text with a
|
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
|
||||||
<strong class="css-truncate css-truncate-target expandable">
|
<span class="Truncate">
|
||||||
branch-name-that-is-really-long
|
<a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
|
||||||
</strong>
|
<a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
|
||||||
|
<a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
|
||||||
|
<a href="#" class="Truncate-text Truncate-text--expandable">really-long-repository-owner-name</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
@ -29,3 +29,38 @@
|
|||||||
max-width: 10000px !important;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user