From e37221761d8fa8137447935506420c62cc4aaa0f Mon Sep 17 00:00:00 2001
From: jongomez <jon.olive.gomez@gmail.com>
Date: Thu, 28 Sep 2023 12:03:05 +0100
Subject: [PATCH] feat: add individual styles for year month and day

---
 .../components/DateField/DateField.styles.ts  | 26 ++++++++++++-------
 .../src/components/DateField/DateField.tsx    |  1 +
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/lsd-react/src/components/DateField/DateField.styles.ts b/packages/lsd-react/src/components/DateField/DateField.styles.ts
index 608b209..3b48bde 100644
--- a/packages/lsd-react/src/components/DateField/DateField.styles.ts
+++ b/packages/lsd-react/src/components/DateField/DateField.styles.ts
@@ -54,16 +54,6 @@ export const DateFieldStyles = css`
     outline: none;
   }
 
-  .${dateFieldClasses.input}:focus::-webkit-datetime-edit {
-    color: rgb(var(--lsd-text-primary));
-    opacity: 0.3;
-  }
-
-  .${dateFieldClasses.error}
-    .${dateFieldClasses.input}::-webkit-datetime-edit-fields-wrapper {
-    text-decoration: line-through;
-  }
-
   .${dateFieldClasses.supportingText} {
     position: absolute;
   }
@@ -125,4 +115,20 @@ export const DateFieldStyles = css`
       margin: 6px 12px 0 12px;
     }
   }
+
+  .${dateFieldClasses.input}::-webkit-datetime-edit-month-field:focus,
+    .${dateFieldClasses.input}::-webkit-datetime-edit-day-field:focus,
+    .${dateFieldClasses.input}::-webkit-datetime-edit-year-field:focus {
+    color: rgb(var(--lsd-text-primary));
+    opacity: 0.4;
+  }
+
+  .${dateFieldClasses.error}
+    .${dateFieldClasses.input}::-webkit-datetime-edit-year-field,
+    .${dateFieldClasses.error}
+    .${dateFieldClasses.input}::-webkit-datetime-edit-month-field,
+    .${dateFieldClasses.error}
+    .${dateFieldClasses.input}::-webkit-datetime-edit-day-field {
+    text-decoration: line-through;
+  }
 `
diff --git a/packages/lsd-react/src/components/DateField/DateField.tsx b/packages/lsd-react/src/components/DateField/DateField.tsx
index d163cff..53667aa 100644
--- a/packages/lsd-react/src/components/DateField/DateField.tsx
+++ b/packages/lsd-react/src/components/DateField/DateField.tsx
@@ -93,6 +93,7 @@ export const DateField: React.FC<DateFieldProps> & {
           value={input.value}
           onChange={input.onChange}
           className={clsx(inputProps.className, dateFieldClasses.input)}
+          max={inputProps.max || '9999-12-31'}
         />
         {icon ? (
           <span