primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-26 23:56:04 +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
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
<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
<div class="Box p-2" style="resize: horizontal;overflow: scroll;">
<span class="Truncate">
<span class="Truncate-text">primer</span>
<span class="Truncate-text Truncate-text--primary">/ css</span>
<span class="Truncate-text">/ Issues</span>
<span class="Truncate-text">/ #123 —</span>
<span class="Truncate-text Truncate-text--primary">
<ol class="Truncate">
<li class="Truncate-text">primer</li>
<li class="Truncate-text Truncate-text--primary">/ css</li>
<li class="Truncate-text">/ Issues</li>
<li class="Truncate-text">/ #123 —</li>
<li class="Truncate-text Truncate-text--primary">
Visual bug on primer.style found in lists
</span>
</span>
</li>
</ol>
</div>
```

2
src/truncate/truncate.scss
View File

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