Skip to content

Commit

Permalink
Site: (liferay#798) Update Label and Badges to break to new line by d…
Browse files Browse the repository at this point in the history 
…efault and add examples of truncating text
  • Loading branch information
@pat270
pat270 committed Apr 16, 2018
1 parent 884f17a commit 4c3d1f1
Show file tree
Hide file tree
Showing 15 changed files with 559 additions and 364 deletions.
323 changes: 137 additions & 186 deletions packages/clay/src/content/badges_and_labels.html
View file

Large diffs are not rendered by default.

44 changes: 33 additions & 11 deletions packages/clay/src/content/cards.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,9 @@ <h3 class="card-title" title="thumbnail_coffee.jpg">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down Expand Up @@ -140,7 +142,9 @@ <h3 class="card-title" title="empty-background.png">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down Expand Up @@ -228,7 +232,9 @@ <h3 class="card-title" title="lexicon_icon_camera_av93ii2oofffmmmsjf2332.svg">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down Expand Up @@ -286,7 +292,9 @@ <h3 class="card-title" title="deliverable.doc">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down Expand Up @@ -326,7 +334,9 @@ <h3 class="card-title" title="deliverable.doc">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down Expand Up @@ -1182,7 +1192,9 @@ <h3 class="card-title">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down Expand Up @@ -1282,7 +1294,9 @@ <h3 class="card-title">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down Expand Up @@ -1402,7 +1416,9 @@ <h3 class="card-title">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down Expand Up @@ -1503,7 +1519,9 @@ <h3 class="card-title">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down Expand Up @@ -1627,7 +1645,9 @@ <h3 class="card-title">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down Expand Up @@ -1794,7 +1814,9 @@ <h3 class="card-title">
</span>
</p>
<div class="card-detail">
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</section>
</div>
Expand Down
168 changes: 98 additions & 70 deletions packages/clay/src/content/form_elements_input_groups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,9 @@ <h3>Input Group (Mixed)</h3>
</svg>
</span>
en-US
<span class="label label-info">Default</span>
<span class="label label-info">
<span class="label-item label-item-expand">Default</span>
</span>
</a>
</li>
<li>
Expand All @@ -187,7 +189,9 @@ <h3>Input Group (Mixed)</h3>
</svg>
</span>
en-GB
<span class="label label-success">Translated</span>
<span class="label label-success">
<span class="label-item label-item-expand">Translated</span>
</span>
</a>
</li>
<li>
Expand All @@ -198,7 +202,9 @@ <h3>Input Group (Mixed)</h3>
</svg>
</span>
es-ES
<span class="label label-success">Translated</span>
<span class="label label-success">
<span class="label-item label-item-expand">Translated</span>
</span>
</a>
</li>
<li>
Expand All @@ -209,7 +215,9 @@ <h3>Input Group (Mixed)</h3>
</svg>
</span>
fr-FR
<span class="label label-warning">Not Translated</span>
<span class="label label-warning">
<span class="label-item label-item-expand">Not Translated</span>
</span>
</a>
</li>
</ul>
Expand Down Expand Up @@ -753,7 +761,7 @@ <h3>Form Control Tag Group</h3>
</blockquote>

<div class="alert alert-warning">
This component requires custom javascript. The class <code>focus</code> must be managed when interacting with this component. It must be added/removed on <code>input-group-item</code> when any item in <code>form-control-tag-group</code> is focused/blurred.<br><br>
This component requires custom javascript. The class <code>focus</code> must be managed when interacting with this component. It must be added/removed on <code>form-control-tag-group</code> when any item in <code>form-control-tag-group</code> is focused/blurred.<br><br>

If <code>form-control-tag-group</code> is clicked, <code>form-control-inset</code> must be focused.
</div>
Expand Down Expand Up @@ -782,44 +790,54 @@ <h3>Form Control Tag Group</h3>
<div class="input-group-item">
<div class="form-control form-control-tag-group">
<span class="label label-dismissible label-secondary">
wall<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
<span class="label-item label-item-expand">wall</span>
<span class="label-item label-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
<span class="label label-dismissible label-secondary">
wallpaper<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
<span class="label-item label-item-expand">wallpaper</span>
<span class="label-item label-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
<span class="label label-dismissible label-secondary">
wonderwall<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
<span class="label-item label-item-expand">wonderwall</span>
<span class="label-item label-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
<span class="label label-dismissible label-secondary">
winterfell<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
<span class="label-item label-item-expand">winterfell</span>
<span class="label-item label-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
<span class="label label-dismissible label-secondary">
kings landing<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
<span class="label-item label-item-expand">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre</span>
<span class="label-item label-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
<input class="form-control-inset" id="tagsField2" type="text" value="some value">
</div>
Expand Down Expand Up @@ -879,44 +897,54 @@ <h3>Form Control Tag Group With Contenteditable Elements</h3>
<div class="input-group-item">
<div class="form-control form-control-tag-group">
<span class="label label-dismissible label-secondary">
wall<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
<span class="label-item label-item-expand">wall</span>
<span class="label-item label-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
<span class="label label-dismissible label-secondary">
wallpaper<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
<span class="label-item label-item-expand">wallpaper</span>
<span class="label-item label-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
<span class="label label-dismissible label-secondary">
wonderwall<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
<span class="label-item label-item-expand">wonderwall</span>
<span class="label-item label-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
<span class="label label-dismissible label-secondary">
winterfell<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
<span class="label-item label-item-expand">winterfell</span>
<span class="label-item label-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
<span class="label label-dismissible label-secondary">
kings landing<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
<span class="label-item label-item-expand">kings landing</span>
<span class="label-item label-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button>
</span>
</span>
<input class="form-control-hidden" id="tagsContentEditableField2" tabindex="-1">
<span class="form-control-inset" contenteditable>some value</span>
Expand All @@ -940,23 +968,23 @@ <h3>Form Control Tag Group With Contenteditable Elements</h3>
});

$('.form-control-inset').on('focusin', function(event) {
$(this).closest('.input-group-item').addClass('focus');
$(this).closest('.form-control-tag-group').addClass('focus');
});

$('.form-control-inset').on('focusout', function(event) {
$(this).closest('.input-group-item').removeClass('focus');
$(this).closest('.form-control-tag-group').removeClass('focus');
});

$('.form-control-tag-group .label button').on('focus', function(event) {
$(this).closest('.input-group-item').addClass('focus');
$(this).closest('.form-control-tag-group').addClass('focus');
});

$('.form-control-tag-group .label button').on('blur', function(event) {
$(this).closest('.input-group-item').removeClass('focus');
$(this).closest('.form-control-tag-group').removeClass('focus');
});

$('.form-control-hidden').on('focus', function(event) {
$(this).closest('.input-group-item').find('form-control-inset').focus();
$(this).closest('.form-control-tag-group').find('form-control-inset').focus();
});

$('.form-control-hidden').on('focus', function(event) {
Expand Down
4 changes: 3 additions & 1 deletion packages/clay/src/content/grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,9 @@ <h1 class="navbar-title navbar-text-truncate">Application</h1>
</td>
<td>700KB</td>
<td>
<span class="label label-success">Approved</span>
<span class="label label-success">
<span class="label-item label-item-expand">Approved</span>
</span>
</td>
<td>6 days ago</td>
<td>4 days ago</td>
Expand Down
Loading

0 comments on commit 4c3d1f1

Please sign in to comment.