From edd8c40dfc1b7b8318004fc265714bb583f6dd1a Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 12 Sep 2019 14:47:09 -0700
Subject: [PATCH] feat(clay-css): List Group add `.list-group-sm` modifier to
 make `.list-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
---
 .../src/scss/atlas/variables/_list-group.scss |  1 -
 .../src/scss/components/_list-group.scss      | 22 ++++++++++++++++++-
 .../src/scss/components/_sidebar.scss         |  2 +-
 .../src/scss/variables/_list-group.scss       | 20 ++++++++++++++++-
 4 files changed, 41 insertions(+), 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
index 148ea757ff..a02b657556 100644
--- 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
index 2d566e8d41..f72b147eec 100644
--- 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);
+	}
 }
\ No newline at end of file
diff --git a/packages/clay-css/src/scss/components/_sidebar.scss b/packages/clay-css/src/scss/components/_sidebar.scss
index 38219c0445..bdbcc2c8bc 100644
--- 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
index 8ffa3dbb40..655f228a3a 100644
--- a/packages/clay-css/src/scss/variables/_list-group.scss
+++ b/packages/clay-css/src/scss/variables/_list-group.scss
@@ -31,6 +31,7 @@ $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);
 
@@ -38,6 +39,7 @@ $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);
\ No newline at end of file
+), $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);
\ No newline at end of file