Merge pull request #1030 from pat270/clay-1029

(#1029) Table Autofit added `.table-cell-expand-small`, `.table-cell-expand-smaller`, and `.table-cell-expand-smallest`
liferay · Jun 28, 2018 · fc47d66 · fc47d66
2 parents 2aa35cb + 1db16b6
commit fc47d66
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/packages/clay-css/src/content/tables.html b/packages/clay-css/src/content/tables.html
@@ -1224,6 +1224,8 @@ <h3>Table Helpers</h3>
 
 		<blockquote class="blockquote">
 			<p><code>table-autofit</code> constrains table columns to be only as wide as its content, but must be used with <code>table-cell-expand</code>. <code>table-cell-expand</code> will fill the remaining space.</p>
+
+			<p>Use <code>table-cell-expand-small</code>, <code>table-cell-expand-smaller</code>, <code>table-cell-expand-smallest</code> with <code>table-cell-expand</code> to size columns smaller relative to the widest column.</p>
 		</blockquote>
 
 		<div class="table-responsive">
@@ -1237,10 +1239,9 @@ <h3>Table Helpers</h3>
 								<span class="text-truncate" title="Description">Title</span>
 							</a>
 						</th>
-						<th>Status</th>
-						<th>Modified Date</th>
-						<th>Display Date</th>
-						<th>Author</th>
+						<th class="table-cell-expand-small">Modified Date</th>
+						<th class="table-cell-expand-smaller">Display Date</th>
+						<th class="table-cell-expand-smallest">Author</th>
 						<th>Type</th>
 					</tr>
 				</thead>
@@ -1262,10 +1263,9 @@ <h3>Table Helpers</h3>
 								</span>
 							</div>
 						</td>
-						<td>--</td>
-						<td>2 Hours Ago</td>
-						<td>--</td>
-						<td>Stanley Nelson</td>
+						<td class="table-cell-expand-small">2 Hours Ago</td>
+						<td class="table-cell-expand-smaller">--</td>
+						<td class="table-cell-expand-smallest">Stanley Nelson</td>
 						<td>Folder</td>
 					</tr>
 				</tbody>

diff --git a/packages/clay-css/src/scss/components/_tables.scss b/packages/clay-css/src/scss/components/_tables.scss
@@ -490,6 +490,24 @@ th {
 	.table-cell-expand {
 		@extend %table-cell-expand;
 	}
+
+	.table-cell-expand-small {
+		max-width: $table-cell-expand-small-max-width;
+		width: $table-cell-expand-small-width;
+		word-wrap: break-word;
+	}
+
+	.table-cell-expand-smaller {
+		max-width: $table-cell-expand-smaller-max-width;
+		width: $table-cell-expand-smaller-width;
+		word-wrap: break-word;
+	}
+
+	.table-cell-expand-smallest {
+		max-width: $table-cell-expand-smallest-max-width;
+		width: $table-cell-expand-smallest-width;
+		word-wrap: break-word;
+	}
 }
 
 .table-nowrap {

diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss
@@ -48,6 +48,15 @@ $table-quick-action-menu-hover-bg: $table-hover-bg !default;
 
 $table-cell-expand-min-width: 12.5rem !default; // 200px
 
+$table-cell-expand-small-max-width: 12.5rem !default; // 200px
+$table-cell-expand-small-width: 25% !default;
+
+$table-cell-expand-smaller-max-width: 12.5rem !default; // 200px
+$table-cell-expand-smaller-width: 15% !default;
+
+$table-cell-expand-smallest-max-width: 12.5rem !default; // 200px
+$table-cell-expand-smallest-width: 10% !default;
+
 // Table Bordered
 
 $table-bordered-border-width: $table-border-width !default;