primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-30 11:17:05 +03:00
Code Issues Projects Releases Wiki Activity

Make sure truncate is a direct child (#1483)

Browse Source 
* Make sure truncate is a direct child

* Create clean-wolves-type.md
This commit is contained in:
Jon Rohan 2021-06-30 20:42:18 -07:00 committed by GitHub
parent 1380e8860b
commit 84488397f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/clean-wolves-type.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Make sure truncate is a direct child

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

@ -10,7 +10,7 @@ When text reaches lengths larger than existing container, shorten with ellipses.
## Truncate ## Truncate
Adding the `.Truncate` class and wrapping the inner text with `.Truncate-text` will truncate the text. Adding the `.Truncate` class and wrapping the inner text with `.Truncate-text` will truncate the text. `.Truncate-text` must be a direct decendent of `.Truncate`.
```html live ```html live
<div class="Box p-2" style="resize: horizontal;overflow: scroll;"> <div class="Box p-2" style="resize: horizontal;overflow: scroll;">
@ -39,15 +39,15 @@ You can add multiple `.Truncate-text` items in the same row and they will trunca
```html live ```html live
<div class="Box p-2" style="resize: horizontal;overflow: scroll;"> <div class="Box p-2" style="resize: horizontal;overflow: scroll;">
<span class="Truncate"> <ol class="Truncate">
<span class="Truncate-text">primer</span> <li class="Truncate-text">primer</li>
<span class="Truncate-text Truncate-text--primary">/ css</span> <li class="Truncate-text Truncate-text--primary">/ css</li>
<span class="Truncate-text">/ Issues</span> <li class="Truncate-text">/ Issues</li>
<span class="Truncate-text">/ #123 —</span> <li class="Truncate-text">/ #123 —</li>
<span class="Truncate-text Truncate-text--primary"> <li class="Truncate-text Truncate-text--primary">
Visual bug on primer.style found in lists Visual bug on primer.style found in lists
</span> </li>
</span> </ol>
</div> </div>
``` ```

2
src/truncate/truncate.scss
View File

@ -35,7 +35,7 @@
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
.Truncate-text { > .Truncate-text {
min-width: 1ch; min-width: 1ch;
max-width: fit-content; max-width: fit-content;
overflow: hidden; overflow: hidden;