From 02aa441b3bbdc4498b655e58654a4fa9eb282748 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 12 Jun 2023 14:26:12 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20horizontal=20mode=20to?=
 =?UTF-8?q?=20LabelledBox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This way initially added for the multi select but after some discussions
we decided to keep the label vertical even for the multi select. But this
could be useful in the future.
---
 .../src/components/Forms/LabelledBox/index.scss | 17 +++++++++++++++++
 .../src/components/Forms/LabelledBox/index.tsx  |  3 +++
 2 files changed, 20 insertions(+)

diff --git a/packages/react/src/components/Forms/LabelledBox/index.scss b/packages/react/src/components/Forms/LabelledBox/index.scss
index f56587c..838fb17 100644
--- a/packages/react/src/components/Forms/LabelledBox/index.scss
+++ b/packages/react/src/components/Forms/LabelledBox/index.scss
@@ -38,4 +38,21 @@
       flex-grow: 1;
     }
   }
+
+  &--horizontal {
+    display: flex;
+    align-items: center;
+    height: auto;
+
+    label {
+      padding-top: 0;
+      position: static;
+      flex-shrink: 0;
+    }
+
+    .labelled-box__children {
+      flex-grow: 1;
+      padding: 0;
+    }
+  }
 }
diff --git a/packages/react/src/components/Forms/LabelledBox/index.tsx b/packages/react/src/components/Forms/LabelledBox/index.tsx
index 22e92fe..9db94d3 100644
--- a/packages/react/src/components/Forms/LabelledBox/index.tsx
+++ b/packages/react/src/components/Forms/LabelledBox/index.tsx
@@ -7,6 +7,7 @@ export interface Props extends PropsWithChildren {
   htmlFor?: string;
   labelId?: string;
   hideLabel?: boolean;
+  horizontal?: boolean;
 }
 
 export const LabelledBox = ({
@@ -16,11 +17,13 @@ export const LabelledBox = ({
   htmlFor,
   labelId,
   hideLabel,
+  horizontal,
 }: Props) => {
   return (
     <div
       className={classNames("labelled-box", {
         "labelled-box--no-label": hideLabel,
+        "labelled-box--horizontal": horizontal,
       })}
     >
       {label && (