From 5a9d77042fe04005dce0309788971b1501ddde8a Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 12 Jun 2023 14:26:32 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20parents=20of=20Labe?=
 =?UTF-8?q?lledBox=20must=20be=20flex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously we enforced the height of the LabelledBox div with height: 100%, but
if the parent container of LabelledBox had an auto height this wasn't working
anymore. Setting height: 100% to a child works only if its parent has a fixed
height. In our situation we needed the LabelledBox to work for the multi select
which has a auto growing height. To solve this issue we just have to force the
parent containers of LabelledBox to display flex in order for it to stretches
its children to take all of its height, including LabelledBox div.
---
 packages/react/src/components/Forms/Input/index.scss       | 7 ++++++-
 packages/react/src/components/Forms/Input/index.tsx        | 6 ++++--
 packages/react/src/components/Forms/LabelledBox/index.scss | 1 -
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Forms/Input/index.scss b/packages/react/src/components/Forms/Input/index.scss
index b2d4974..09458fa 100644
--- a/packages/react/src/components/Forms/Input/index.scss
+++ b/packages/react/src/components/Forms/Input/index.scss
@@ -5,7 +5,6 @@
   border-style: var(--c--components--forms-input--border-style);
   background-color: var(--c--components--forms-input--background-color);
   display: flex;
-  align-items: center;
   transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
   padding: 0 1rem;
   gap: 1rem;
@@ -29,6 +28,12 @@
     background-color: transparent;
     @extend %text-style;
 
+    &__icon-left,
+    &__icon-right {
+      display: flex;
+      align-items: center;
+    }
+
     &--medium {
       min-width: 150px;
     }
diff --git a/packages/react/src/components/Forms/Input/index.tsx b/packages/react/src/components/Forms/Input/index.tsx
index 99f654a..d6befff 100644
--- a/packages/react/src/components/Forms/Input/index.tsx
+++ b/packages/react/src/components/Forms/Input/index.tsx
@@ -106,7 +106,7 @@ export const Input = forwardRef<InputRefType, Props>(
             inputRef.current?.focus();
           }}
         >
-          {!!icon && icon}
+          {!!icon && <div className="c__input__icon-left">{icon}</div>}
           <LabelledBox
             label={label}
             htmlFor={idToUse.current}
@@ -133,7 +133,9 @@ export const Input = forwardRef<InputRefType, Props>(
               ref={inputRef}
             />
           </LabelledBox>
-          {!!rightIcon && rightIcon}
+          {!!rightIcon && (
+            <div className="c__input__icon-right">{rightIcon}</div>
+          )}
         </div>
       </Field>
     );
diff --git a/packages/react/src/components/Forms/LabelledBox/index.scss b/packages/react/src/components/Forms/LabelledBox/index.scss
index 838fb17..e75f15f 100644
--- a/packages/react/src/components/Forms/LabelledBox/index.scss
+++ b/packages/react/src/components/Forms/LabelledBox/index.scss
@@ -1,5 +1,4 @@
 .labelled-box {
-  height: 100%;
   width: 100%;
   position: relative;
   box-sizing: border-box;