From 9de9a9735d804b79c57e7aa8378ed5644113af6c Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 7 Sep 2023 15:26:28 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20improve=20Select=20action?=
 =?UTF-8?q?s=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The button were too big compared to the sketches. So we re-adjust their
sizes and positions.
---
 .changeset/big-radios-exist.md                              | 5 +++++
 packages/react/src/components/Forms/Select/index.scss       | 1 +
 packages/react/src/components/Forms/Select/mono-common.tsx  | 4 ++--
 packages/react/src/components/Forms/Select/multi-common.tsx | 4 ++--
 4 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/big-radios-exist.md

diff --git a/.changeset/big-radios-exist.md b/.changeset/big-radios-exist.md
new file mode 100644
index 0000000..31314df
--- /dev/null
+++ b/.changeset/big-radios-exist.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+improve Select actions ui
diff --git a/packages/react/src/components/Forms/Select/index.scss b/packages/react/src/components/Forms/Select/index.scss
index f458f6d..18fb8a2 100644
--- a/packages/react/src/components/Forms/Select/index.scss
+++ b/packages/react/src/components/Forms/Select/index.scss
@@ -65,6 +65,7 @@
       position: relative;
       top: 3px;
       display: flex;
+      gap: 0.5rem;
       align-items: center;
       // This is made to avoid this relative element to force its container height.
       height: 0;
diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index 07f5237..ea00f9a 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -132,7 +132,7 @@ export const SelectMonoAux = ({
                   <>
                     <Button
                       color="tertiary"
-                      size="small"
+                      size="nano"
                       aria-label={t(
                         "components.forms.select.clear_button_aria_label",
                       )}
@@ -149,7 +149,7 @@ export const SelectMonoAux = ({
 
                 <Button
                   color="tertiary"
-                  size="small"
+                  size="nano"
                   className="c__select__inner__actions__open"
                   icon={
                     <span
diff --git a/packages/react/src/components/Forms/Select/multi-common.tsx b/packages/react/src/components/Forms/Select/multi-common.tsx
index 81f4a5b..3a4b666 100644
--- a/packages/react/src/components/Forms/Select/multi-common.tsx
+++ b/packages/react/src/components/Forms/Select/multi-common.tsx
@@ -116,7 +116,7 @@ export const SelectMultiAux = ({
                   <>
                     <Button
                       color="tertiary"
-                      size="small"
+                      size="nano"
                       aria-label={t(
                         "components.forms.select.clear_all_button_aria_label",
                       )}
@@ -132,7 +132,7 @@ export const SelectMultiAux = ({
                 )}
                 <Button
                   color="tertiary"
-                  size="small"
+                  size="nano"
                   className="c__select__inner__actions__open"
                   icon={
                     <span