From 106b735503b44aa0c32204644e179b79052586bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Romain?= <sromain@talend.com>
Date: Tue, 20 Feb 2024 08:03:00 +0100
Subject: [PATCH] fix(design-system): height for input wrapper (#5197)

* fix(design-system): height for input wrapper

* Update input height and mixins in _mixins.scss
---
 .changeset/fresh-hats-juggle.md                            | 5 +++++
 .../Form/Primitives/InputWrapper/InputWrapper.module.scss  | 2 +-
 .../src/components/Form/Primitives/_mixins.scss            | 7 +++----
 3 files changed, 9 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/fresh-hats-juggle.md

diff --git a/.changeset/fresh-hats-juggle.md b/.changeset/fresh-hats-juggle.md
new file mode 100644
index 00000000000..c09a12919a3
--- /dev/null
+++ 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
index f7ef9ba2187..fe962a8f999 100644
--- 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
index ec91e9c9ec1..4d8ec9a2776 100644
--- 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;
 		}
 	}
-
 }