New: (Fixes #798) Label added option to set $label-line-height, Lab…

…el with Icons should be same size, and better support for long text that break to new lines Update: (#798) Badge with Icons should be the same size and better support for long text that break to new lines
liferay · Apr 16, 2018 · 884f17a · 884f17a
1 parent 6c5b92c
commit 884f17a
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 29 deletions.
diff --git a/packages/clay/src/scss/atlas/variables/_badges.scss b/packages/clay/src/scss/atlas/variables/_badges.scss
@@ -1,9 +1,9 @@
 $badge-border-radius: 10rem !default;
 $badge-font-size: 0.625rem !default; // 10px
 $badge-font-weight: $font-weight-semi-bold !default;
-$badge-line-height: 0.875rem !default // 14px
+$badge-line-height: 1.1 !default;
 $badge-padding-x: 0.25rem !default; // 4px
-$badge-padding-y: 0 !default;
+$badge-padding-y: 0.0625rem !default; // 1px
 
 $badge-item-spacer-x: 0.85714em !default;
 

diff --git a/packages/clay/src/scss/atlas/variables/_forms.scss b/packages/clay/src/scss/atlas/variables/_forms.scss
@@ -104,14 +104,15 @@ $input-select-icon-focus: clay-icon(caret-double-l, $input-select-icon-focus-col
 $input-select-icon-disabled-color: $text-muted !default;
 $input-select-icon-disabled: clay-icon(caret-double-l, $input-select-icon-disabled-color) !default;
 
-// Form Control Label (Labels inside Form Control)
+// Form Control Label (Labels inside Form Control Tag Group)
 
 $form-control-label-size: () !default;
 $form-control-label-size: map-merge((
-	border-width: 0.0625rem,
-	font-size: $input-label-font-size, // 14px
+	border-width: 0.0625rem, // 1px
+	font-size: map-get($label-lg, font-size),
 	height: 1.5rem, // 24px
-	padding-x: 0.625rem, // 10px
+	padding-x: map-get($label-lg, padding-x),
+	padding-y: map-get($label-lg, padding-y),
 	text-transform: none
 ), $form-control-label-size);
 

diff --git a/packages/clay/src/scss/atlas/variables/_labels.scss b/packages/clay/src/scss/atlas/variables/_labels.scss
@@ -1,8 +1,8 @@
 $label-border-radius: 0.125rem !default; // 2px
 $label-font-size: 0.625rem !default; // 10px
 $label-font-weight: $font-weight-semi-bold !default;
-$label-height: 1rem !default; // 16px
 $label-padding-x: 0.5rem !default; // 8px
+$label-padding-y: 0.125rem !default; // 2px
 $label-text-transform: uppercase !default;
 
 $label-item-spacer-x: 0.85714em !default;
@@ -13,9 +13,10 @@ $label-link-text-decoration: none !default;
 $label-link-hover-text-decoration: underline !default;
 
 $label-lg: (
-	font-size: 0.75rem, // 13px
+	font-size: 0.75rem, // 12px
 	height: 1.5rem, // 24px
-	padding-x: 0.625rem // 10px
+	padding-x: 0.625rem, // 10px
+	padding-y: 0.3125rem // 5px
 ) !default;
 
 // Label Variants

diff --git a/packages/clay/src/scss/components/_badges.scss b/packages/clay/src/scss/components/_badges.scss
@@ -72,11 +72,15 @@
 	justify-content: center;
 	min-height: 0;
 	position: relative;
+	text-align: left;
+
+	a {
+		display: inline-flex;
+	}
 
 	.btn-unstyled {
 		color: inherit;
 		display: inline-flex;
-		font-size: $badge-lexicon-icon-height;
 	}
 
 	.close {
@@ -88,17 +92,17 @@
 		margin-top: $badge-lexicon-icon-margin-top;
 		width: $badge-lexicon-icon-width;
 	}
-
-	.text-truncate-inline {
-		display: inline-flex;
-	}
 }
 
 .badge-item-expand {
 	flex-grow: 1;
 	flex-shrink: 1;
-	min-width: 1rem;
+	min-width: $badge-item-expand-min-width;
 	word-wrap: break-word;
+
+	a {
+		flex-direction: column;
+	}
 }
 
 .badge-item-before {

diff --git a/packages/clay/src/scss/components/_labels.scss b/packages/clay/src/scss/components/_labels.scss
@@ -9,7 +9,8 @@
 	display: inline-flex;
 	font-size: $label-font-size;
 	font-weight: $label-font-weight;
-	line-height: $label-height - ($label-border-width * 2);
+	height: $label-height;
+	line-height: $label-line-height;
 	margin-bottom: $label-spacer-y;
 	margin-right: $label-spacer-x;
 	margin-top: $label-spacer-y;
@@ -94,10 +95,13 @@ a.label {
 	min-height: 0;
 	position: relative;
 
+	a {
+		display: inline-flex;
+	}
+
 	.btn-unstyled {
 		color: inherit;
 		display: inline-flex;
-		font-size: $label-lexicon-icon-height;
 	}
 
 	.close {
@@ -120,6 +124,10 @@ a.label {
 	flex-shrink: 1;
 	min-width: 1rem;
 	word-wrap: break-word;
+
+	a {
+		flex-direction: column;
+	}
 }
 
 .label-item-before {

diff --git a/packages/clay/src/scss/mixins/_labels.scss b/packages/clay/src/scss/mixins/_labels.scss
@@ -2,6 +2,7 @@
 	$border-width: setter(map-get($map, border-width), $label-border-width);
 	$font-size: map-get($map, font-size);
 	$height: map-get($map, height);
+	$line-height: map-get($map, line-height);
 	$padding-x: map-get($map, padding-x);
 	$padding-y: map-get($map, padding-y);
 	$text-transform: map-get($map, text-transform);
@@ -12,11 +13,9 @@
 
 	border-width: $border-width;
 	font-size: $font-size;
-
-	@if ($height) {
-		line-height: $height - ($border-width * 2);
-	}
-
+	height: auto;
+	line-height: $line-height;
+	min-height: $height;
 	padding-bottom: $padding-y;
 	padding-left: $padding-x;
 	padding-right: $padding-x;

diff --git a/packages/clay/src/scss/variables/_badges.scss b/packages/clay/src/scss/variables/_badges.scss
@@ -6,10 +6,11 @@ $badge-line-height: null !default;
 $badge-spacer-x: 0.25rem !default; // 4px
 $badge-spacer-y: 0.125rem !default; // 2px
 
-$badge-lexicon-icon-height: 0.8125em !default;
+$badge-lexicon-icon-height: 0.875em !default;
 $badge-lexicon-icon-margin-top: 0 !default;
-$badge-lexicon-icon-width: 0.8125em !default;
+$badge-lexicon-icon-width: 0.875em !default;
 
+$badge-item-expand-min-width: 0.375rem !default;
 $badge-item-spacer-x: 0.5em !default;
 
 $badge-link-color: #FFF !default;

diff --git a/packages/clay/src/scss/variables/_forms.scss b/packages/clay/src/scss/variables/_forms.scss
@@ -54,11 +54,12 @@ $input-readonly-cursor: null !default;
 
 $input-textarea-height: 150px !default;
 
-// Form Control Label (Labels inside Form Control)
+// Form Control Label (Labels inside Form Control Tag Group)
 
 $form-control-label-size: () !default;
 $form-control-label-size: map-merge((
-	height: 1.25rem
+	border-width: 0.0625rem, // 1px
+	height: 1.25rem // 20px
 ), $form-control-label-size);
 
 // Form Control Tag Group

diff --git a/packages/clay/src/scss/variables/_labels.scss b/packages/clay/src/scss/variables/_labels.scss
@@ -3,9 +3,10 @@ $label-link-hover-color: #FFF !default;
 
 $label-font-size: 75% !default;
 $label-font-weight: $font-weight-bold !default;
-$label-height: 1.25rem !default; // 20px
+$label-height: null !default;
+$label-line-height: 1 !default;
 $label-padding-x: 0.4375rem !default; // 7px
-$label-padding-y: null !default; // 3px
+$label-padding-y: 0.1875rem !default; // 3px
 $label-spacer-x: 0.25rem !default; // 4px
 $label-spacer-y: 0.125rem !default; // 2px
 $label-text-transform: null !default;
@@ -50,8 +51,8 @@ $label-close: map-merge((
 $label-lg: () !default;
 $label-lg: map-merge((
 	font-size: 0.875rem, // 14px
-	height: 1.875rem, // 30px
 	padding-x: 1rem, // 16px
+	padding-y: 0.375rem, // 6px
 	text-transform: none
 ), $label-lg);