Skip to content

Commit

Permalink
Merge pull request #774 from pat270/clay-773
Browse files Browse the repository at this point in the history 
(#773) Remove white space between `table-responsive` and `table` when there is overflow
  • Loading branch information
@marcoscv-work
marcoscv-work authored Apr 9, 2018
2 parents 8e464bc + e5afc8a commit 4b1bbb3
Show file tree
Hide file tree
Showing 5 changed files with 257 additions and 14 deletions.
2 changes: 2 additions & 0 deletions packages/clay/src/content/button_group.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ <h3>Button Group Item</h3>

<blockquote class="blockquote">
<p>A component for spacing buttons without having to worry about white space added by browsers.</p>

<p>Use the helper class <code>btn-group-nowrap</code> if you want the <code>btn-group</code> to not wrap by default.</p>
</blockquote>

<div class="btn-group">
Expand Down
237 changes: 229 additions & 8 deletions packages/clay/src/content/tables.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ <h3>Table List</h3>
<code>show-quick-actions-on-hover</code> will need Javascript to add class <code>table-focus</code> on the table row when an item inside is focused to make it keyboard accessible.
</div>

<div class="table-responsive-lg">
<table class="show-quick-actions-on-hover table table-autofit table-list">
<div class="table-responsive">
<table class="show-quick-actions-on-hover table table-autofit table-list table-nowrap">
<thead>
<tr>
<th></th>
Expand Down Expand Up @@ -1007,6 +1007,217 @@ <h3>Table List with Table Bordered</h3>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Table List (Inline Edit Table) Example</h3>

<div class="table-responsive">
<table class="table table-autofit table-list table-nowrap">
<thead>
<tr>
<th>
<span class="text-truncate-inline">
<span class="text-truncate" title=""></span>
</span>
</th>
<th class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate" title="Title">Title</span>
</span>
</th>
<th class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate" title="Author">Author</span>
</span>
</th>
<th class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate" title="Modified Date">Modified Date</span>
</span>
</th>
<th class="table-column-text-end"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox">
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand">
<div class="table-list-title">
<a class="text-truncate-inline" href="#1">
<span class="text-truncate" title="Web Content 342122-322-abcdefg">Web Content 342122-322-abcdefg</span>
</a>
</div>
</td>
<td class="table-cell-expand">
<a class="table-list-link text-truncate-inline" href="#1">
<span class="text-truncate" title="Marge Peggie Margaret Meg Maggie Miller">Marge Peggie Margaret Meg Maggie Miller</span>
</a>
</td>
<td class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate" title="35 Seconds Ago">35 Seconds Ago</span>
</span>
</td>
<td class="table-column-text-end">
<div class="btn-group btn-group-nowrap">
<div class="btn-group-item">
<button class="btn btn-secondary btn-sm" type="button">Edit</button>
</div>
<div class="btn-group-item">
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
<li><a class="dropdown-item" href="#1" role="button">Recycle Bin</a></li>
</ul>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox">
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand">
<div class="table-list-title">
<a class="text-truncate-inline" href="#1">
<span class="text-truncate" title="Web Content C">Web Content C</span>
</a>
</div>
</td>
<td class="table-cell-expand">
<a class="table-list-link text-truncate-inline" href="#1">
<span class="text-truncate" title="Arnold Geen">Arnold Geen</span>
</a>
</td>
<td class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate" title="15 Minutes Ago">15 Minutes Ago</span>
</span>
</td>
<td class="table-column-text-end">
<div class="btn-group btn-group-nowrap">
<div class="btn-group-item">
<button class="btn btn-secondary btn-sm" type="button">Edit</button>
</div>
<div class="btn-group-item">
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
<li><a class="dropdown-item" href="#1" role="button">Recycle Bin</a></li>
</ul>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox">
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand">
<input class="form-control form-control-sm" type="text" value="Web Content B">
</td>
<td class="table-cell-expand">
<input class="form-control form-control-sm" type="text" value="Matthew Richards">
</td>
<td class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate" title="20 Minutes Ago">20 Minutes Ago</span>
</span>
</td>
<td class="table-column-text-end">
<div class="btn-group btn-group-nowrap">
<div class="btn-group-item">
<button class="btn btn-primary btn-sm" type="button">Save</button>
</div>
<div class="btn-group-item">
<button class="btn btn-secondary btn-sm" type="button">Cancel</button>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" type="checkbox">
<span class="custom-control-label"></span>
</label>
</div>
</td>
<td class="table-cell-expand">
<div class="table-list-title">
<a class="text-truncate-inline" href="#1">
<span class="text-truncate" title="Web Content E">Web Content E</span>
</a>
</div>
</td>
<td class="table-cell-expand">
<a class="table-list-link text-truncate-inline" href="#1">
<span class="text-truncate" title="Michael Dellen">Michael Dellen</span>
</a>
</td>
<td class="table-cell-expand">
<span class="text-truncate-inline">
<span class="text-truncate" title="5 Minutes Ago">5 Minutes Ago</span>
</span>
</td>
<td class="table-column-text-end">
<div class="btn-group btn-group-nowrap">
<div class="btn-group-item">
<button class="btn btn-secondary btn-sm" type="button">Edit</button>
</div>
<div class="btn-group-item">
<div class="dropdown dropdown-action">
<a aria-expanded="false" aria-haspopup="true" class="component-action dropdown-toggle" data-toggle="dropdown" href="#1" id="dropdownAction1" role="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#ellipsis-v" />
</svg>
</a>
<ul aria-labelledby="" class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#1" role="button">Edit</a></li>
<li><a class="dropdown-item" href="#1" role="button">Recycle Bin</a></li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Table Helpers</h3>
Expand Down Expand Up @@ -1177,12 +1388,22 @@ <h3>Vertical Alignment</h3>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Table Column Text-{start|center|end}</h3>

<blockquote class="blockquote">
<p>We have added some classes to help horizontally align contents inside a table column. The classes <code>table-column-text-start</code>, <code>table-column-text-center</code>, and <code>table-column-text-end</code> will align text left, center, and right respectively.</p>
</blockquote>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Table</h3>

<div class="alert alert-warning">
Because of the dynamic nature of content in tables, we left it to the developer to size and align columns inside tables. Add a unique class to each column and min-width / max-width to space the tables to your specific requirements. In the example below to center the remove icon create class, <code>remove-column</code> for example, and add it to each th/td element in the column. In your CSS set <code>```.remove-column { text-align: center; }```</code>.
Because of the dynamic nature of content in tables, we left it to the developer to size and align columns inside tables. Add a unique class to each column and min-width / max-width to space the tables to your specific requirements.
</div>

<div class="table-responsive">
Expand All @@ -1191,7 +1412,7 @@ <h3>Table</h3>
<tr>
<th class="table-cell-expand">Name</th>
<th class="table-cell-expand">Roles</th>
<th>Remove</th>
<th class="table-column-text-center">Remove</th>
</tr>
</thead>
<tbody>
Expand All @@ -1215,7 +1436,7 @@ <h3>Table</h3>
</a>(.table-action-link),
<span>and some regular text</span>
</td>
<td>
<td class="table-column-text-center">
<button class="btn btn-unstyled table-action-link" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times-circle">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times-circle" />
Expand All @@ -1232,7 +1453,7 @@ <h3>Table</h3>
<td class="table-cell-expand">
<a class="table-link" href="#1">Liferay Site Owner</a>
</td>
<td>
<td class="table-column-text-center">
<a class="table-action-link" href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times-circle">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times-circle" />
Expand All @@ -1249,7 +1470,7 @@ <h3>Table</h3>
<td class="table-cell-expand">
<a class="table-link" href="#1">Liferay Site Owner</a>
</td>
<td>
<td class="table-column-text-center">
<a class="table-action-link" href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times-circle">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times-circle" />
Expand All @@ -1266,7 +1487,7 @@ <h3>Table</h3>
<td class="table-cell-expand">
<a class="table-link" href="#1">Liferay Site Owner</a>
</td>
<td>
<td class="table-column-text-center">
<a class="table-action-link" href="#1">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times-circle">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times-circle" />
Expand Down
4 changes: 4 additions & 0 deletions packages/clay/src/scss/components/_button-groups.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
flex-wrap: wrap;
}

.btn-group-nowrap {
flex-wrap: nowrap;
}

.btn-group-item {
align-items: center;
display: inline-flex;
Expand Down
20 changes: 15 additions & 5 deletions packages/clay/src/scss/components/_tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ th {

.table {
border-collapse: collapse;
margin-bottom: $table-margin-bottom;

thead {
td,
Expand Down Expand Up @@ -86,6 +87,18 @@ th {
}
}

.table-column-text-start {
text-align: left;
}

.table-column-text-center {
text-align: center;
}

.table-column-text-end {
text-align: right;
}

%table-cell-expand {
display: table-cell;
max-width: $table-cell-expand-min-width;
Expand Down Expand Up @@ -568,18 +581,15 @@ th {
}
}

// Chrome 61.0.3163.100 bug, box-shadow on th td with .table-responsive causes
// vertical scrollbar to appear.
// Table Responsive

.table-responsive {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);

&#{$infix} {
@include media-breakpoint-down($breakpoint) {
overflow-y: hidden;
}
margin-bottom: $table-responsive-margin-bottom;
}
}
}
8 changes: 7 additions & 1 deletion packages/clay/src/scss/variables/_tables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
$table-responsive-margin-bottom: 1.5rem !default;

// Table

$table-margin-bottom: 0 !default;

$table-cell-gutters: $grid-gutter-width / 2 !default; // 15px

$table-head-border-bottom-width: null !default;
Expand Down Expand Up @@ -90,7 +96,7 @@ $table-list-border-color: $table-border-color !default;
$table-list-border-width: 0.0625rem !default; // 1px
$table-list-border-radius: 6px !default;
$table-list-font-size: null !default;
$table-list-margin-bottom: 1.5rem !default;
$table-list-margin-bottom: $table-list-border-width !default;
$table-list-margin-top: null !default;

$table-list-head-bg: null !default;
Expand Down

0 comments on commit 4b1bbb3

Please sign in to comment.