From 71dc458ab4dcc2415127fb8dd0247d54b0032253 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 1 Sep 2023 17:36:36 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20use=20nano=20Button?=
 =?UTF-8?q?=20inside=20DatePicker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Based on the last QA it appears that we were using wrong button size
and icon size ratio. By using the newly created nano size we can make
the code much simpler.
---
 .../Forms/DatePicker/DatePickerAux.tsx        |  6 +++--
 .../components/Forms/DatePicker/index.scss    | 23 +++++++------------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
index 4450ae4..3629fa2 100644
--- a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
@@ -153,7 +153,9 @@ const DatePickerAux = forwardRef(
                   size="small"
                   className="c__date-picker__wrapper__toggle"
                   onClick={pickerState.toggle}
-                  icon={<span className="material-icons">calendar_today</span>}
+                  icon={
+                    <span className="material-icons icon">calendar_today</span>
+                  }
                   disabled={disabled}
                 />
               </div>
@@ -165,7 +167,7 @@ const DatePickerAux = forwardRef(
                     labelAsPlaceholder || disabled,
                 })}
                 color="tertiary"
-                size="small"
+                size="nano"
                 icon={<span className="material-icons">cancel</span>}
                 onClick={onClear}
                 aria-label={t(
diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
index 9b267ed..998396e 100644
--- a/packages/react/src/components/Forms/DatePicker/index.scss
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -30,6 +30,12 @@
       display: flex;
       align-items: center;
     }
+
+    &__toggle {
+      .icon {
+        font-size: var(--c--components--button--medium-icon-font-size);
+      }
+    }
   }
 
   &__inner {
@@ -68,26 +74,13 @@
     }
 
     &__action {
-      display: flex;
-      align-items: center;
-      height: auto;
-
-      &.c__button--small.c__button--icon-only {
-        width: fit-content;
-        height: fit-content;
-        margin: 1.65rem 0 0 0;
-      }
+      flex-shrink: 0;
+      margin-top: 1.375rem;
 
       &--empty {
         color: var(--c--components--forms-field--color);
       }
 
-      .material-icons {
-        font-size: 1rem;
-        position: relative;
-        top: 0.06rem;
-      }
-
       &--hidden {
         visibility: hidden;
         transition: none;