Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

fix(list): added ellipsis to text and secondary text if text overflows #2049

Merged
merged 6 commits into from
Jan 24, 2018
Merged

fix(list): added ellipsis to text and secondary text if text overflows #2049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
18a344d
fix(list): added ellipsis to text and secondary text if text overflows
Jan 23, 2018
0d508e2
Merge branch 'master' into fix/list/meta-graphic-alignment
Jan 23, 2018
6f8de35
Merge branch 'master' into fix/list/meta-graphic-alignment
Jan 23, 2018
77fe583
Merge branch 'master' into fix/list/meta-graphic-alignment
Jan 24, 2018
5ac3825
Merge branch 'master' into fix/list/meta-graphic-alignment
Jan 24, 2018
3b764b8
Merge branch 'master' into fix/list/meta-graphic-alignment
Jan 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions demos/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -835,6 +835,65 @@ <h3>Example - Two-line Avatar + Text + Icon (Dark)</h3>
</li>
</ul>
</section>
<section>
<h3>Lists w/ Ellipsis</h3>
<ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
<li href="#" class="mdc-list-item">
<span class="mdc-list-item__graphic">
<i class="material-icons" aria-hidden="true">
folder
</i>
</span>
<span class="mdc-list-item__text">
Photos
<span class="mdc-list-item__secondary-text">
This is some secondary text
</span>
</span>
<span class="mdc-list-item__meta">
<i class="material-icons" aria-hidden="true">
folder
</i>
</span>
</li>
<li href="#" class="mdc-list-item">
<span class="mdc-list-item__graphic">
<i class="material-icons" aria-hidden="true">
folder
</i>
</span>
<span class="mdc-list-item__text">
Photos of my best photography using my finely tuned skills and eye
<span class="mdc-list-item__secondary-text">
This is some secondary text
</span>
</span>
<span class="mdc-list-item__meta">
<i class="material-icons" aria-hidden="true">
folder
</i>
</span>
</li>
<li href="#" class="mdc-list-item">
<span class="mdc-list-item__graphic">
<i class="material-icons" aria-hidden="true">
folder
</i>
</span>
<span class="mdc-list-item__text">
Work Photos
<span class="mdc-list-item__secondary-text">
This is a description of work photos from the years 2018 to present time while I was a barista
</span>
</span>
<span class="mdc-list-item__meta">
<i class="material-icons" aria-hidden="true">
folder
</i>
</span>
</li>
</ul>
</section>
</section>
<section>
<h2>List Dividers</h2>
Expand Down
10 changes: 5 additions & 5 deletions packages/mdc-list/mdc-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,6 @@
// postcss-bem-linter: define list-item

.mdc-list-item {
@include mdc-typography-overflow-ellipsis;

display: flex;
position: relative;
align-items: center;
Expand Down Expand Up @@ -104,9 +102,11 @@
@include mdc-rtl-reflexive-property(margin, auto, 0, ".mdc-list-item");
}

.mdc-list-item__text {
display: inline-flex;
flex-direction: column;
.mdc-list-item__text,
.mdc-list-item__secondary-text {
@include mdc-typography-overflow-ellipsis;

display: block;
}

.mdc-list-item__secondary-text {
Expand Down