primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-10-27 09:48:58 +03:00
Code Issues Projects Releases Wiki Activity

Adding new .Truncate class and deprecating css-truncate

Browse Source
This commit is contained in:
Jon Rohan 2021-04-23 14:31:06 -07:00
parent 65b5aec15e
commit 9e1ff7dc20
No known key found for this signature in database
GPG Key ID: B0BBE304A9A0AECB
3 changed files with 78 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
deprecations.js
View File

@ -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: [

64
docs/content/components/truncate.md
View File

@ -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>
``` ```

35
src/truncate/truncate.scss
View File

@ -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;
}
}
}