feat(clay-css): List Group add .list-group-sm modifier to make `.li…

…st-group-item` shorter feat(clay-css): List Group added Sass maps `$list-group-sm-item`, `$list-group-sm-quick-action-menu` feat(clay-css): List Group use `min-height` on`.list-group-title:only-child` to center text instead of height and add IE11 workaround. This allows text to break to new line. fixes #2423
liferay · Sep 17, 2019 · edd8c40 · edd8c40
1 parent 3eaec3a
commit edd8c40
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_list-group.scss b/packages/clay-css/src/scss/atlas/variables/_list-group.scss
@@ -27,7 +27,6 @@ $list-group-title-link: () !default;
 $list-group-title-link: map-deep-merge((
 	border-radius: 1px,
 	display: inline-block,
-	max-width: 100%,
 	transition: box-shadow 0.15s ease-in-out,
 	hover-color: $gray-900,
 	focus-box-shadow: $component-focus-box-shadow,

diff --git a/packages/clay-css/src/scss/components/_list-group.scss b/packages/clay-css/src/scss/components/_list-group.scss
@@ -181,8 +181,16 @@
 		.list-group-title:only-child {
 			align-items: center;
 			display: flex;
-			height: 32px;
+			min-height: 32px;
 			margin-top: 0;
+
+			// IE11 flexbox min-height workaround
+
+			&::after {
+				content: '';
+				display: block;
+				min-height: inherit;
+			}
 		}
 
 		.dropdown-action {
@@ -338,4 +346,16 @@
 	.autofit-col .quick-action-item {
 		margin-top: $list-group-notification-item-border-top-width - $list-group-item-flex-offset-top;
 	}
+}
+
+// List Group Sm
+
+.list-group-sm {
+	.list-group-item {
+		@include clay-container($list-group-sm-item);
+	}
+
+	.quick-action-menu {
+		@include clay-container($list-group-sm-quick-action-menu);
+	}
 }
diff --git a/packages/clay-css/src/scss/components/_sidebar.scss b/packages/clay-css/src/scss/components/_sidebar.scss
@@ -76,7 +76,7 @@
 		padding-top: $sidebar-list-group-autofit-col-padding-y;
 
 		.list-group-title:only-child {
-			height: map-get($sidebar-list-group-sticker-size, size);
+			min-height: map-get($sidebar-list-group-sticker-size, size);
 		}
 	}
 

diff --git a/packages/clay-css/src/scss/variables/_list-group.scss b/packages/clay-css/src/scss/variables/_list-group.scss
@@ -31,13 +31,15 @@ $list-group-header-title: map-deep-merge((
 $list-group-title-link: () !default;
 $list-group-title-link: map-deep-merge((
 	color: $gray-900,
+	max-width: 100%,
 	hover-color: darken($gray-900, 15%)
 ), $list-group-title-link);
 
 $list-group-title: () !default;
 $list-group-title: map-deep-merge((
 	font-size: 1.125rem, // 18px
 	font-weight: $font-weight-semi-bold,
+	line-height: $line-height-base,
 	margin-bottom: 0,
 	margin-top: $list-group-item-flex-list-group-title-offset-top,
 	clay-link: $list-group-title-link
@@ -129,4 +131,20 @@ $list-group-notification-item-primary: map-deep-merge((
 	border-bottom-left-radius: 0,
 	border-top-left-radius: 0,
 	active-border-left-color: theme-color-level(primary, -9)
-), $list-group-notification-item-primary);
+), $list-group-notification-item-primary);
+
+// List Group Sm
+
+$list-group-sm-item: () !default;
+$list-group-sm-item: map-deep-merge((
+	padding-bottom: 0.40625rem,
+	padding-top: 0.40625rem,
+), $list-group-sm-item);
+
+$list-group-sm-quick-action-menu: () !default;
+$list-group-sm-quick-action-menu: map-deep-merge((
+	margin-bottom: -0.40625rem,
+	margin-top: -0.40625rem,
+	padding-bottom: 0.40625rem,
+	padding-top: 0.40625rem,
+), $list-group-sm-quick-action-menu);