fix: cleanup

dhis2 · Oct 10, 2024 · ee426b4 · ee426b4
1 parent def0b43
commit ee426b4
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/src/data-workspace/final-form-wrapper.js b/src/data-workspace/final-form-wrapper.js
@@ -31,7 +31,6 @@ export function FinalFormWrapper({ children, dataValueSet }) {
     // TODO: Reinitialize form `onSuccess` of dataValueSets query
     // See https://dhis2.atlassian.net/browse/TECH-1357
     const [initialValues] = useState(() => createInitialValues(dataValueSet))
-
     return (
         <Form
             onSubmit={onSubmit}

diff --git a/src/data-workspace/inputs/datetime-input.js b/src/data-workspace/inputs/datetime-input.js
@@ -85,10 +85,10 @@ export const DateTimeInput = ({
                 input.onFocus()
             }}
         >
-            <div>
+            <div className={styles.dateTimeInput}>
                 <CalendarInput
                     {...input}
-                    label={i18n.t('Pick a date and time')}
+                    label={i18n.t('Pick a date')}
                     className={styles.dateInput}
                     autoComplete="off"
                     onKeyDown={onKeyDown}
@@ -104,8 +104,15 @@ export const DateTimeInput = ({
                     locale={keyUiLocale}
                 />
             </div>
-            <div>
+            <div className={styles.dateTimeInput}>
+                <label
+                    htmlFor={`${fieldname}-time`}
+                    className={styles.timeLabel}
+                >
+                    {i18n.t('Pick a time')}
+                </label>
                 <input
+                    id={`${fieldname}-time`}
                     readOnly={locked}
                     type="time"
                     value={time}
@@ -117,7 +124,7 @@ export const DateTimeInput = ({
                     data-test="time-input"
                 />
             </div>
-            <div>
+            <div className={styles.dateTimeInput}>
                 <Button small onClick={clearValue}>
                     {i18n.t('Clear')}
                 </Button>

diff --git a/src/data-workspace/inputs/datetime-input.test.js b/src/data-workspace/inputs/datetime-input.test.js
@@ -92,7 +92,7 @@ describe('date input field', () => {
                 <DateTimeInput {...props} />
             </FormWrapper>
         )
-        const calendarInputLabel = getByText('Pick a date and time')
+        const calendarInputLabel = getByText('Pick a date')
         const calendarInput = getByRole('textbox')
         let calendar = queryByTestId('calendar')
 
@@ -150,7 +150,7 @@ describe('date input field', () => {
         // check that mutate function was not called
         expect(mutate.mock.calls).toHaveLength(0)
 
-        const calendarInputLabel = getByText('Pick a date and time')
+        const calendarInputLabel = getByText('Pick a date')
         const calendarInput = getByRole('textbox')
         let calendar = queryByTestId('calendar')
 
@@ -251,7 +251,7 @@ describe('date input field', () => {
                 <DateTimeInput {...props} />
             </FormWrapper>
         )
-        const calendarInputLabel = getByText('Pick a date and time')
+        const calendarInputLabel = getByText('Pick a date')
         const calendarInput = getByRole('textbox')
         let calendar = queryByTestId('calendar')
 
@@ -300,7 +300,7 @@ describe('date input field', () => {
                 <DateTimeInput {...props} />
             </FormWrapper>
         )
-        const calendarInputLabel = getByText('Pick a date and time')
+        const calendarInputLabel = getByText('Pick a date')
         const calendarInput = getByRole('textbox')
         let calendar = queryByTestId('calendar')
 

diff --git a/src/data-workspace/inputs/inputs.module.css b/src/data-workspace/inputs/inputs.module.css
@@ -110,6 +110,12 @@
     margin-inline: var(--spacers-dp4);
 }
 
-.dateTimeInput div {
-    margin-block: var(--spacers-dp4);
-}
+.dateTimeInput {
+    padding-block: var(--spacers-dp4);
+}
+
+.timeLabel {
+    display: block;
+    font-size: 14px;
+    margin-block-end: var(--spacers-dp4);
+}