fix(@clayui/css): Forms form-control-tag-group component-action sho…

…uld be height 100% fix(@clayui/css): Forms clear and loading indicator icons should be vertically centered relative to input fix(@clayui/css): Forms `form-control-inset` remove clear and reveal button on IE11 fix(@clayui/css): Forms adds sass maps `$form-control-inset` and `form-control-tag-group-component-action`
liferay · Mar 5, 2021 · 4b4b140 · 4b4b140
1 parent 1196560
commit 4b4b140
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 20 deletions.
diff --git a/packages/clay-css/src/scss/components/_forms.scss b/packages/clay-css/src/scss/components/_forms.scss
@@ -257,6 +257,10 @@ div {
 
 	.autofit-col {
 		@include clay-container($form-control-tag-group-autofit-col);
+
+		.form-control-inset {
+			width: auto;
+		}
 	}
 
 	.input-group-item {
@@ -271,32 +275,27 @@ div {
 		@include clay-button-variant($form-control-tag-group-btn);
 	}
 
-	.btn-monospaced,
-	.component-action {
+	.btn-monospaced {
 		@include clay-button-variant($form-control-tag-group-btn-monospaced);
 	}
+
+	.component-action {
+		@include clay-link($form-control-tag-group-component-action);
+	}
 }
 
 .form-control-inset {
-	background-color: transparent;
-	border-width: 0;
-	color: $input-color;
-	flex-grow: 1;
-	margin-bottom: $form-control-inset-margin-y;
-	margin-top: $form-control-inset-margin-y;
-	min-height: $form-control-inset-min-height;
-	padding: 0;
+	@include clay-form-control-variant($form-control-inset);
 
-	&:focus {
-		outline: 0;
-	}
+	// IE10+
+	// `::-ms-clear` disable clear button at the edge of an `<input type="text">`
+	// `::-ms-reveal` disable password reveal button on `<input type="password">`
 
-	&:disabled {
-		background-color: $input-disabled-bg;
-		border-color: $input-disabled-border-color;
-		color: $input-disabled-color;
-		cursor: $input-disabled-cursor;
-		opacity: $input-disabled-opacity;
+	&::-ms-clear,
+	&::-ms-reveal {
+		display: none;
+		height: 0;
+		width: 0;
 	}
 }
 

diff --git a/packages/clay-css/src/scss/variables/_forms.scss b/packages/clay-css/src/scss/variables/_forms.scss
@@ -213,14 +213,42 @@ $form-control-inset-margin-y: (
 			$form-control-inset-min-height
 	) / 2 !default;
 
+$form-control-inset: () !default;
+$form-control-inset: map-deep-merge(
+	(
+		background-color: transparent,
+		border-width: 0,
+		color: $input-color,
+		flex-grow: 1,
+		margin-bottom: $form-control-inset-margin-y,
+		margin-top: $form-control-inset-margin-y,
+		min-height: $form-control-inset-min-height,
+		padding: 0,
+		width: 50px,
+		focus: (
+			outline: 0,
+		),
+		disabled: (
+			background-color: $input-disabled-bg,
+			border-color: $input-disabled-border-color,
+			color: $input-disabled-color,
+			cursor: $input-disabled-cursor,
+			opacity: $input-disabled-opacity,
+		),
+	),
+	$form-control-inset
+);
+
 $form-control-tag-group: () !default;
 $form-control-tag-group: map-deep-merge(
 	(
 		align-items: center,
+		color: $secondary,
 		display: flex,
 		flex-wrap: wrap,
 		height: auto,
 		padding-bottom: $form-control-tag-group-padding-y,
+		padding-right: 0.5rem,
 		padding-top: $form-control-tag-group-padding-y,
 	),
 	$form-control-tag-group
@@ -250,7 +278,7 @@ $form-control-tag-group-autofit-col: map-deep-merge(
 $form-control-tag-group-input-group-item: () !default;
 $form-control-tag-group-input-group-item: map-deep-merge(
 	(
-		align-items: flex-start,
+		align-items: center,
 	),
 	$form-control-tag-group-input-group-item
 );
@@ -294,6 +322,17 @@ $form-control-tag-group-btn-monospaced: map-deep-merge(
 	$form-control-tag-group-btn-monospaced
 );
 
+$form-control-tag-group-component-action: () !default;
+$form-control-tag-group-component-action: map-deep-merge(
+	(
+		height: 100%,
+		margin-bottom: 0,
+		margin-top: 0,
+		width: 2rem,
+	),
+	$form-control-tag-group-component-action
+);
+
 // Form Grid
 
 $form-grid-gutter-width: 10px !default;