fix(design-system): height for input wrapper (#5197)

* fix(design-system): height for input wrapper * Update input height and mixins in _mixins.scss
Talend · Feb 20, 2024 · 106b735 · 106b735
1 parent 9a18bdb
commit 106b735
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/.changeset/fresh-hats-juggle.md b/.changeset/fresh-hats-juggle.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix: height for input wrapper
diff --git a/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.scss b/packages/design-system/src/components/Form/Primitives/InputWrapper/InputWrapper.module.scss
@@ -3,7 +3,7 @@
 
 .inputShell {
 	@include Form.border-styles();
-	height: tokens.$coral-sizing-m;
+	height: 2rem;
 	display: flex;
 	flex-flow: row;
 	gap: 0;

diff --git a/packages/design-system/src/components/Form/Primitives/_mixins.scss b/packages/design-system/src/components/Form/Primitives/_mixins.scss
@@ -1,8 +1,8 @@
 @use '~@talend/design-tokens/lib/tokens';
 
-$standard-input-height: calc(#{tokens.$coral-sizing-m} - 0.125rem);
+$standard-input-height: calc(2rem - 0.125rem);
 
-@mixin base-input () {
+@mixin base-input() {
 	background: transparent;
 	color: tokens.$coral-color-neutral-text;
 	padding: tokens.$coral-spacing-xs;
@@ -51,7 +51,7 @@ $standard-input-height: calc(#{tokens.$coral-sizing-m} - 0.125rem);
 	}
 }
 
-@mixin border-styles () {
+@mixin border-styles() {
 	border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border;
 	box-shadow: 0 0 0 0 transparent;
 	border-radius: tokens.$coral-radius-s;
@@ -98,5 +98,4 @@ $standard-input-height: calc(#{tokens.$coral-sizing-m} - 0.125rem);
 			box-shadow: 0 0 0 0.0625rem tokens.$coral-color-danger-border;
 		}
 	}
-
 }