fix: clear button and arrow alignment issues (#1609)

* fix: clear button alignment in calendar input component * fix: prev and next arrow alignment in calendar navigation container * fix: remove tests dependent on calendarDate
dhis2 · Sep 27, 2024 · ba0b657 · ba0b657
1 parent aeea338
commit ba0b657
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 77 deletions.
diff --git a/collections/ui/API.md b/collections/ui/API.md
@@ -255,13 +255,14 @@ import { CalendarInput } from '@dhis2/ui'
 |date|string|||the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601)|
 |dir|'ltr' │ 'rtl'|||the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control|
 |format|'YYYY-MM-DD' │ 'DD-MM-YYYY'|||The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY`|
+|inputWidth|string|||the width of input field|
 |locale|string|||any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15)|
 |maxDate|string|||The maximum selectable date|
 |minDate|string|||The minimum selectable date|
 |numberingSystem|string|||numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts|
 |strictValidation|boolean|||Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled|
 |weekDayFormat|'narrow' │ 'short' │ 'long'|`'narrow'`||the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow)|
-|width|string|`'240px'`||the width of the calendar component|
+|width|string|`'300px'`||the width of the calendar component|
 
 ### Card
 

diff --git a/components/calendar/API.md b/components/calendar/API.md
@@ -49,10 +49,11 @@ import { CalendarInput } from '@dhis2/ui'
 |date|string|||the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601)|
 |dir|'ltr' │ 'rtl'|||the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control|
 |format|'YYYY-MM-DD' │ 'DD-MM-YYYY'|||The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY`|
+|inputWidth|string|||the width of input field|
 |locale|string|||any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15)|
 |maxDate|string|||The maximum selectable date|
 |minDate|string|||The minimum selectable date|
 |numberingSystem|string|||numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts|
 |strictValidation|boolean|||Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled|
 |weekDayFormat|'narrow' │ 'short' │ 'long'|`'narrow'`||the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow)|
-|width|string|`'240px'`||the width of the calendar component|
+|width|string|`'300px'`||the width of the calendar component|
diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js
@@ -34,13 +34,15 @@ export const CalendarInput = ({
     clearable,
     minDate,
     maxDate,
-    format, // todo: props and types for format and validation
+    format,
     strictValidation,
+    inputWidth,
     ...rest
 } = {}) => {
     const ref = useRef()
     const [open, setOpen] = useState(false)
     const [partialDate, setPartialDate] = useState(date)
+    const [isIconDisplayed, setIsIconDisplayed] = useState(false)
 
     const excludeRef = useRef(null)
 
@@ -58,8 +60,21 @@ export const CalendarInput = ({
 
     const pickerResults = useDatePicker({
         onDateSelect: (result) => {
+            const validated = validateDateString(result.calendarDateString, {
+                calendar,
+                format,
+                minDateString: minDate,
+                maxDateString: maxDate,
+                strictValidation,
+            })
+            setIsIconDisplayed(
+                validated.errorMessage || validated.warningMessage
+            )
             setOpen(false)
-            parentOnDateSelect?.(result)
+            parentOnDateSelect?.({
+                calendarDateString: result.calendarDateString,
+                ...validated,
+            })
         },
         date,
         minDate: minDate,
@@ -82,6 +97,7 @@ export const CalendarInput = ({
             maxDateString: maxDate,
             strictValidation,
         })
+        setIsIconDisplayed(validated.errorMessage || validated.warningMessage)
         parentOnDateSelect?.({ calendarDateString: partialDate, ...validated })
 
         if (
@@ -133,6 +149,7 @@ export const CalendarInput = ({
                     }
                     error={!!pickerResults.errorMessage}
                     warning={!!pickerResults.warningMessage}
+                    inputWidth={inputWidth}
                 />
                 {clearable && (
                     <div
@@ -151,6 +168,7 @@ export const CalendarInput = ({
                             small
                             onClick={() => {
                                 parentOnDateSelect?.(null)
+                                setIsIconDisplayed(false)
                             }}
                             type="button"
                         >
@@ -185,10 +203,11 @@ export const CalendarInput = ({
                 {`
                     .calendar-input-wrapper {
                         position: relative;
+                        width: ${inputWidth};
                     }
                     .calendar-clear-button {
                         position: absolute;
-                        inset-inline-end: 6px;
+                        inset-inline-end: ${isIconDisplayed ? '36px' : '6px'};
                         inset-block-start: 27px;
                     }
                     .calendar-clear-button.with-icon {
@@ -206,7 +225,7 @@ export const CalendarInput = ({
 CalendarInput.defaultProps = {
     dataTest: 'dhis2-uiwidgets-calendar-inputfield',
     cellSize: '32px',
-    width: '240px',
+    width: '300px',
     weekDayFormat: 'narrow',
 }
 
@@ -227,6 +246,8 @@ CalendarInput.propTypes = {
     dir: PropTypes.oneOf(['ltr', 'rtl']),
     /** The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY` */
     format: PropTypes.oneOf(['YYYY-MM-DD', 'DD-MM-YYYY']),
+    /** the width of input field */
+    inputWidth: PropTypes.string,
     /** any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15) */
     locale: PropTypes.string,
     /** The maximum selectable date */

diff --git a/components/calendar/src/calendar/navigation-container.js b/components/calendar/src/calendar/navigation-container.js
@@ -92,73 +92,64 @@ export const NavigationContainer = ({
                 </div>
             </div>
             <style jsx>{`
-                button {
-                    background: none;
-                    border: 0;
+                .navigation-container {
+                    display: flex;
+                    justify-content: space-between;
+                    padding: ${spacers.dp4};
+                    border-bottom: 1px solid ${wrapperBorderColor};
+                    background-color: ${headerBackground};
+                    font-size: 1.08em;
                 }
                 .month,
                 .year {
                     display: flex;
-                    width: 100%;
                     align-items: center;
-                    justify-content: center;
-                    cursor: default;
+                    justify-content: space-between;
+                    width: 50%;
                 }
-
-                .month .curr,
-                .year .curr {
-                    flex: 2;
-                    white-space: nowrap;
+                .prev,
+                .next,
+                .curr {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                 }
-
                 .prev,
                 .next {
-                    flex: 1;
-                    text-align: center;
+                    width: 24px;
+                    flex-shrink: 0;
                 }
-
-                .prev button,
-                .next button {
+                .curr {
+                    flex: 0 1 auto;
+                    overflow: hidden;
+                }
+                button {
+                    background: none;
+                    border: 0;
                     padding: ${spacers.dp4};
                     height: 24px;
                     width: 24px;
                     color: ${colors.grey600};
                     border-radius: 3px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                 }
-
-                .prev button svg,
-                .next button svg {
-                    width: 16px;
-                    height: 16px;
-                }
-
-                .prev:hover button,
-                .next:hover button {
+                button:hover {
                     background-color: ${colors.grey200};
                     color: ${colors.grey900};
                     cursor: pointer;
                 }
-
-                .prev button:active,
-                .next button:active {
+                button:active {
                     background-color: ${colors.grey300};
                 }
-
                 .label {
-                    display: flex;
-                    padding: 4px 8px;
-                    justify-content: center;
-                    min-height: 16px;
-                }
-
-                .navigation-container {
-                    gap: ${spacers.dp8};
-                    padding: ${spacers.dp4};
-                    display: flex;
-                    flex-direction: row;
-                    border-bottom: 1px solid ${wrapperBorderColor};
-                    background-color: ${headerBackground};
-                    font-size: 1.08em; /*15px*/
+                    padding: ${spacers.dp4} ${spacers.dp8};
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                    max-width: 100%;
                 }
             `}</style>
         </>

diff --git a/components/calendar/src/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js b/components/calendar/src/features/supports_ethiopic_calendar/supports_ethiopic_calendar.js
@@ -49,8 +49,4 @@ Then('we should be able to select a day', () => {
     )
 
     cy.get('[data-test="storybook-calendar-result"]').should('have.text', date)
-    cy.get('[data-test="storybook-calendar-result-iso"]').should(
-        'have.text',
-        '13 October 2021'
-    )
 })
diff --git a/components/calendar/src/features/supports_gregorian_calendar/supports_gregorian_calendar.js b/components/calendar/src/features/supports_gregorian_calendar/supports_gregorian_calendar.js
@@ -50,8 +50,4 @@ Then('we should be able to select a day', () => {
     )
 
     cy.get('[data-test="storybook-calendar-result"]').should('have.text', date)
-    cy.get('[data-test="storybook-calendar-result-iso"]').should(
-        'have.text',
-        '13 October 2021'
-    )
 })
diff --git a/components/calendar/src/features/supports_nepali_calendar/supports_nepali_calendar.js b/components/calendar/src/features/supports_nepali_calendar/supports_nepali_calendar.js
@@ -48,8 +48,4 @@ Then('we should be able to select a day', () => {
         'have.text',
         nepaliDate
     )
-    cy.get('[data-test="storybook-calendar-result-iso"]').should(
-        'have.text',
-        '13 October 2021'
-    )
 })
diff --git a/components/calendar/src/stories/calendar-input.prod.stories.js b/components/calendar/src/stories/calendar-input.prod.stories.js
@@ -124,17 +124,16 @@ export function CalendarWithEditiableInput() {
         <div>
             <>
                 <CalendarInput
-                    editable
                     date={date}
                     calendar="gregory"
                     onDateSelect={(selectedDate) => {
                         const date = selectedDate?.calendarDateString
                         setDate(date)
                     }}
-                    width={'700px'}
-                    inputWidth="900px"
-                    minDate={'2020-07-01'}
-                    maxDate={'2020-07-09'}
+                    width="400px"
+                    minDate="2020-07-01"
+                    maxDate="2020-07-09"
+                    clearable
                 />
             </>
         </div>

diff --git a/components/calendar/src/stories/calendar-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js
@@ -137,16 +137,6 @@ export const CalendarStoryWrapper = (props) => {
                                     {selectedDate.calendarDateString}
                                 </span>
                             </div>
-                            <div>
-                                <label>iso date: </label>
-                                <span data-test="storybook-calendar-result-iso">
-                                    {selectedDate.calendarDate
-                                        ?.withCalendar('iso8601')
-                                        .toLocaleString('en-GB', {
-                                            dateStyle: 'long',
-                                        })}
-                                </span>
-                            </div>
                             <div>
                                 <label>callback:</label>
                                 {JSON.stringify(selectedDate, null, 2)}