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

The Field component was only able to display for large fields like
text input, but for small component like Checkbox or Radio we need
to set specific generic padding that are suitable to those.
---
 .changeset/pretty-buckets-refuse.md                        | 5 +++++
 packages/react/src/components/Forms/Field/index.scss       | 6 ++++++
 .../react/src/components/Forms/Field/index.stories.mdx     | 2 +-
 packages/react/src/components/Forms/Field/index.tsx        | 7 ++++++-
 4 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/pretty-buckets-refuse.md

diff --git a/.changeset/pretty-buckets-refuse.md b/.changeset/pretty-buckets-refuse.md
new file mode 100644
index 0000000..18498b4
--- /dev/null
+++ b/.changeset/pretty-buckets-refuse.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+add compact mode to Field
diff --git a/packages/react/src/components/Forms/Field/index.scss b/packages/react/src/components/Forms/Field/index.scss
index d4de3f2..bc67e26 100644
--- a/packages/react/src/components/Forms/Field/index.scss
+++ b/packages/react/src/components/Forms/Field/index.scss
@@ -27,4 +27,10 @@
   &--full-width {
     width: 100%;
   }
+
+  &--compact {
+    align-items: flex-start;
+    width: auto;
+  }
+
 }
\ No newline at end of file
diff --git a/packages/react/src/components/Forms/Field/index.stories.mdx b/packages/react/src/components/Forms/Field/index.stories.mdx
index 02f7199..ea669b4 100644
--- a/packages/react/src/components/Forms/Field/index.stories.mdx
+++ b/packages/react/src/components/Forms/Field/index.stories.mdx
@@ -24,4 +24,4 @@ available design token to do so.
 
 ## Props
 
-<ArgsTable of={Field} />
\ No newline at end of file
+<ArgsTable of={Field} exclude={["compact"]} />
\ No newline at end of file
diff --git a/packages/react/src/components/Forms/Field/index.tsx b/packages/react/src/components/Forms/Field/index.tsx
index 276390f..b2fb6f2 100644
--- a/packages/react/src/components/Forms/Field/index.tsx
+++ b/packages/react/src/components/Forms/Field/index.tsx
@@ -8,6 +8,8 @@ export type FieldProps = {
   text?: string | undefined;
   rightText?: string | undefined;
   fullWidth?: boolean | undefined;
+  compact?: boolean | undefined;
+  className?: string | undefined;
 };
 
 type Props = FieldProps & PropsWithChildren;
@@ -18,11 +20,14 @@ export const Field = ({
   text,
   rightText,
   fullWidth,
+  compact,
+  className,
 }: Props) => {
   return (
     <div
-      className={classNames("c__field", "c__field--" + state, {
+      className={classNames("c__field", "c__field--" + state, className, {
         "c__field--full-width": fullWidth,
+        "c__field--compact": compact,
       })}
     >
       {children}