From 6fb89110b775d42693d94a873ac1b6231c6588da Mon Sep 17 00:00:00 2001
From: jongomez <jon.olive.gomez@gmail.com>
Date: Wed, 18 Oct 2023 14:59:26 +0100
Subject: [PATCH] fix: fix year dropdown paddings and icon container size

---
 .../components/Calendar/Calendar.classes.ts   |  4 +++
 .../components/Calendar/Calendar.styles.ts    | 34 ++++++++++++++++---
 .../src/components/Calendar/Calendar.tsx      |  1 +
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/lsd-react/src/components/Calendar/Calendar.classes.ts b/packages/lsd-react/src/components/Calendar/Calendar.classes.ts
index be87cb0..53fa92a 100644
--- a/packages/lsd-react/src/components/Calendar/Calendar.classes.ts
+++ b/packages/lsd-react/src/components/Calendar/Calendar.classes.ts
@@ -2,6 +2,10 @@ export const calendarClasses = {
   root: `lsd-calendar`,
   container: 'lsd-calendar-container',
 
+  small: 'lsd-calendar--small',
+  medium: 'lsd-calendar--medium',
+  large: 'lsd-calendar--large',
+
   open: 'lsd-calendar--open',
   disabled: 'lsd-calendar--disabled',
 
diff --git a/packages/lsd-react/src/components/Calendar/Calendar.styles.ts b/packages/lsd-react/src/components/Calendar/Calendar.styles.ts
index 4c15ec6..48dc0a8 100644
--- a/packages/lsd-react/src/components/Calendar/Calendar.styles.ts
+++ b/packages/lsd-react/src/components/Calendar/Calendar.styles.ts
@@ -69,8 +69,6 @@ export const CalendarStyles = css`
     align-items: center;
     cursor: pointer;
     border: none;
-    width: 14px;
-    padding: 0 6px;
   }
 
   .${calendarClasses.month} {
@@ -222,8 +220,6 @@ export const CalendarStyles = css`
 
     background: rgb(var(--lsd-surface-primary));
 
-    padding: 5px 0px 5px 12px;
-
     :hover {
       text-decoration: underline;
     }
@@ -232,4 +228,34 @@ export const CalendarStyles = css`
   .${calendarClasses.yearAndIcon} {
     border: 1px solid rgb(var(--lsd-border-primary));
   }
+
+  .${calendarClasses.large} {
+    .${calendarClasses.year} {
+      padding: 6px 0px 6px 14px;
+    }
+
+    .${calendarClasses.changeYearIconContainer} {
+      width: 32px;
+    }
+  }
+
+  .${calendarClasses.medium} {
+    .${calendarClasses.year} {
+      padding: 6px 0px 6px 12px;
+    }
+
+    .${calendarClasses.changeYearIconContainer} {
+      width: 28px;
+    }
+  }
+
+  .${calendarClasses.small} {
+    .${calendarClasses.year} {
+      padding: 6px 0px 6px 12px;
+    }
+
+    .${calendarClasses.changeYearIconContainer} {
+      width: 28px;
+    }
+  }
 `
diff --git a/packages/lsd-react/src/components/Calendar/Calendar.tsx b/packages/lsd-react/src/components/Calendar/Calendar.tsx
index 3f009bc..f6d24e1 100644
--- a/packages/lsd-react/src/components/Calendar/Calendar.tsx
+++ b/packages/lsd-react/src/components/Calendar/Calendar.tsx
@@ -184,6 +184,7 @@ export const Calendar: React.FC<CalendarProps> & {
           commonProps.className,
           props.className,
           calendarClasses.root,
+          calendarClasses[size],
           open && calendarClasses.open,
           disabled && calendarClasses.disabled,
         )}