fix: feedback and add prop to DateField

scaleway · Feb 6, 2025 · 09040f2 · 09040f2
1 parent 969e2eb
commit 09040f2
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 66 deletions.
diff --git a/.changeset/spicy-files-fold.md b/.changeset/spicy-files-fold.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": patch
+---
+
+Add prop `input` to `<DateInputFieldV2 />`
diff --git a/packages/form/src/components/DateField/__stories__/Input.stories.tsx b/packages/form/src/components/DateField/__stories__/Input.stories.tsx
@@ -0,0 +1,18 @@
+import type { StoryFn } from '@storybook/react'
+import { Stack } from '@ultraviolet/ui'
+import type { ComponentProps } from 'react'
+import { DateField } from '..'
+import { Submit } from '../../Submit'
+
+export const Input: StoryFn<ComponentProps<typeof DateField>> = args => (
+  <Stack gap={1}>
+    <DateField {...args} />
+    <Submit>Submit</Submit>
+  </Stack>
+)
+
+Input.args = {
+  name: 'date',
+  required: true,
+  input: 'calendar',
+}
diff --git a/packages/form/src/components/DateField/__stories__/index.stories.tsx b/packages/form/src/components/DateField/__stories__/index.stories.tsx
@@ -82,3 +82,4 @@ export { Required } from './Required.stories'
 export { MinMaxDate } from './MinMaxDate.stories'
 export { MinMaxDateWithTimeField } from './MinMaxWithTimeField.stories'
 export { MinMaxDateRange } from './MinMaxDateRange.stories'
+export { Input } from './Input.stories'
diff --git a/packages/form/src/components/DateField/index.tsx b/packages/form/src/components/DateField/index.tsx
@@ -70,6 +70,7 @@ export const DateField = <
   'data-testid': dataTestId,
   shouldUnregister = false,
   showMonthYearPicker,
+  input = 'text',
 }: DateFieldProps<TFieldValues, TFieldName>) => {
   const { getError } = useErrors()
   const {
@@ -152,6 +153,7 @@ export const DateField = <
           ? (field.value as [Date | null, Date | null])[1]
           : undefined
       }
+      input={input}
     />
   )
 }
diff --git a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -731,12 +731,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with default date
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  display: inline-block;
-  text-transform: lowercase;
-}
-
-.emotion-32::first-letter {
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 
 .emotion-38 {
@@ -1584,12 +1579,7 @@ exports[`DateInput > render correctly with showMonthYearPicker with excluded mon
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  display: inline-block;
-  text-transform: lowercase;
-}
-
-.emotion-32::first-letter {
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 
 .emotion-38 {
@@ -5180,12 +5170,7 @@ exports[`DateInput > renders correctly with a array of dates to exclude 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  display: inline-block;
-  text-transform: lowercase;
-}
-
-.emotion-32::first-letter {
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 
 .emotion-38 {
@@ -6448,12 +6433,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  display: inline-block;
-  text-transform: lowercase;
-}
-
-.emotion-32::first-letter {
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 
 .emotion-38 {
@@ -7594,12 +7574,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  display: inline-block;
-  text-transform: lowercase;
-}
-
-.emotion-32::first-letter {
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 
 .emotion-38 {
@@ -8740,12 +8715,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  display: inline-block;
-  text-transform: lowercase;
-}
-
-.emotion-32::first-letter {
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 
 .emotion-38 {
@@ -9816,7 +9786,7 @@ exports[`DateInput > renders correctly with input = "calendar 1`] = `
   padding: 1rem;
   border-radius: 0.25rem;
   background-color: #ffffff;
-  width: 264px;
+  width: 16.5rem;
 }
 
 .emotion-7[data-is-active='true'] {
@@ -9827,6 +9797,10 @@ exports[`DateInput > renders correctly with input = "calendar 1`] = `
   border: 1px solid #e9eaeb;
 }
 
+.emotion-7[data-disabled="true"] {
+  cursor: not-allowed;
+}
+
 .emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -9951,12 +9925,7 @@ exports[`DateInput > renders correctly with input = "calendar 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  display: inline-block;
-  text-transform: lowercase;
-}
-
-.emotion-18::first-letter {
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 
 .emotion-24 {
@@ -10668,7 +10637,7 @@ exports[`DateInput > renders correctly with input = "calendar disabled 1`] = `
   padding: 1rem;
   border-radius: 0.25rem;
   background-color: #ffffff;
-  width: 264px;
+  width: 16.5rem;
 }
 
 .emotion-7[data-is-active='true'] {
@@ -10679,6 +10648,10 @@ exports[`DateInput > renders correctly with input = "calendar disabled 1`] = `
   border: 1px solid #e9eaeb;
 }
 
+.emotion-7[data-disabled="true"] {
+  cursor: not-allowed;
+}
+
 .emotion-9 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -10794,12 +10767,7 @@ exports[`DateInput > renders correctly with input = "calendar disabled 1`] = `
   text-transform: none;
   -webkit-text-decoration: none;
   text-decoration: none;
-  display: inline-block;
-  text-transform: lowercase;
-}
-
-.emotion-18::first-letter {
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 
 .emotion-24 {
@@ -10910,7 +10878,7 @@ exports[`DateInput > renders correctly with input = "calendar disabled 1`] = `
         </label>
         <div
           class="emotion-6 emotion-7 emotion-8"
-          data-disabled="false"
+          data-disabled="true"
           data-is-active="false"
         >
           <div

diff --git a/packages/ui/src/components/DateInput/components/CalendarContent.tsx b/packages/ui/src/components/DateInput/components/CalendarContent.tsx
@@ -9,12 +9,7 @@ import { Daily } from './CalendarDaily'
 import { Monthly } from './CalendarMonthly'
 
 const CapitalizedText = styled(Text)`
-  display: inline-block;
-  text-transform: lowercase;
-
-  &::first-letter {
-    text-transform: uppercase;
-  }
+  text-transform: capitalize;
 `
 export const CalendarContent = () => {
   const {
@@ -97,11 +92,7 @@ export const CalendarContent = () => {
           }
         />
       </Stack>
-      {showMonthYearPicker ? (
-        <Monthly disabled={disabled} />
-      ) : (
-        <Daily disabled={disabled} />
-      )}
+      {showMonthYearPicker ? <Monthly /> : <Daily />}
     </Stack>
   )
 }
diff --git a/packages/ui/src/components/DateInput/components/CalendarDaily.tsx b/packages/ui/src/components/DateInput/components/CalendarDaily.tsx
@@ -36,7 +36,7 @@ const CapitalizedText = styled(Text)`
   }
 `
 
-export const Daily = ({ disabled }: { disabled: boolean }) => {
+export const Daily = () => {
   const {
     value,
     yearToShow,
@@ -56,6 +56,7 @@ export const Daily = ({ disabled }: { disabled: boolean }) => {
     format,
     setVisible,
     readOnly,
+    disabled,
   } = useContext(DateInputContext)
 
   const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>(

diff --git a/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx b/packages/ui/src/components/DateInput/components/CalendarMonthly.tsx
@@ -29,7 +29,7 @@ text-transform: lowercase;
 }
 `
 
-export const Monthly = ({ disabled }: { disabled: boolean }) => {
+export const Monthly = () => {
   const {
     yearToShow,
     setValue,
@@ -47,6 +47,7 @@ export const Monthly = ({ disabled }: { disabled: boolean }) => {
     format,
     setVisible,
     readOnly,
+    disabled,
   } = useContext(DateInputContext)
   const [rangeState, setRangeState] = useState<'start' | 'none' | 'done'>(
     range?.start ? 'start' : 'none',

diff --git a/packages/ui/src/components/DateInput/index.tsx b/packages/ui/src/components/DateInput/index.tsx
@@ -18,7 +18,11 @@ width: 100%;`
 
 const StyledCard = styled(Card)`
   ${({ theme }) => styleCalendarContainer(theme)}
-  width: 264px;
+  width: 16.5rem;
+
+  &[data-disabled="true"] {
+      cursor: not-allowed;
+    }
 `
 
 type DateInputProps<IsRange extends undefined | boolean = false> = {
@@ -337,7 +341,7 @@ export const DateInput = <IsRange extends undefined | boolean>({
               </Text>
             )}
 
-            <StyledCard>
+            <StyledCard disabled={disabled}>
               <CalendarContent />
             </StyledCard>
           </Stack>