New: (Fixes #773) Table added option to configure `$table-responsive-…

…margin-bottom` and `$table-margin-bottom`

Update: Table added helper classes `.table-column-text-start`, `.table-column-text-center`, and `.table-column-text-end` to help align content for table columns

Update: Button Group added `.btn-group-nowrap` helper class to force `.btn-group` not to wrap

Update: Table List removed Chrome 61 overflow hack, fixed in newer versions

packages/clay/src/scss/components/_button-groups.scss

@@ -16,6 +16,10 @@
 	flex-wrap: wrap;
 }
 
+.btn-group-nowrap {
+	flex-wrap: nowrap;
+}
+
 .btn-group-item {
 	align-items: center;
 	display: inline-flex;

packages/clay/src/scss/components/_tables.scss

@@ -22,6 +22,7 @@ th {
 
 .table {
 	border-collapse: collapse;
+	margin-bottom: $table-margin-bottom;
 
 	thead {
 		td,
@@ -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;
@@ -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;
 		}
 	}
 }

packages/clay/src/scss/variables/_tables.scss

@@ -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;
@@ -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;