From f1cb883bb4b4ca86a291fc3793b58ceb3a4b26f9 Mon Sep 17 00:00:00 2001 From: alaa-yahia Date: Thu, 26 Sep 2024 03:50:47 +0300 Subject: [PATCH 1/5] fix: clear button alignment in calendar input component --- .../src/calendar-input/calendar-input.js | 29 +++++++++++++--- .../stories/calendar-input.prod.stories.js | 34 +++++++++---------- 2 files changed, 41 insertions(+), 22 deletions(-) diff --git a/components/calendar/src/calendar-input/calendar-input.js b/components/calendar/src/calendar-input/calendar-input.js index 7824d2553..d8d25d755 100644 --- 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 && (
{ 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/stories/calendar-input.prod.stories.js b/components/calendar/src/stories/calendar-input.prod.stories.js index db909a7c5..96baa5d36 100644 --- a/components/calendar/src/stories/calendar-input.prod.stories.js +++ b/components/calendar/src/stories/calendar-input.prod.stories.js @@ -25,19 +25,18 @@ export default { const buildCalendar = ({ date, locale, calendar }) => - () => - ( - {}} - /> - ) + () => ( + {}} + /> + ) export const EthiopicWithAmharic = buildCalendar({ calendar: 'ethiopic', @@ -124,17 +123,16 @@ export function CalendarWithEditiableInput() {
<> { 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 />
From 528bd9921abbcba9cde3123a4e673235cd77d50c Mon Sep 17 00:00:00 2001 From: alaa-yahia Date: Thu, 26 Sep 2024 03:54:37 +0300 Subject: [PATCH 2/5] fix: prev and next arrow alignment in calendar navigation container --- collections/ui/API.md | 5 +- components/calendar/API.md | 5 +- .../src/calendar/navigation-container.js | 79 ++++++++----------- 3 files changed, 41 insertions(+), 48 deletions(-) diff --git a/collections/ui/API.md b/collections/ui/API.md index b73858e5d..9a8748d00 100644 --- a/collections/ui/API.md +++ b/collections/ui/API.md @@ -259,9 +259,10 @@ import { CalendarInput } from '@dhis2/ui' |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| +|strictValidation|boolean|||Whether to use strict validation| +|timeZone|string|||the timeZone to use| |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 index b17b48051..30848fa16 100644 --- a/components/calendar/API.md +++ b/components/calendar/API.md @@ -53,6 +53,7 @@ import { CalendarInput } from '@dhis2/ui' |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| +|strictValidation|boolean|||Whether to use strict validation| +|timeZone|string|||the timeZone to use| |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/navigation-container.js b/components/calendar/src/calendar/navigation-container.js index e35231b9b..cb96990f3 100644 --- a/components/calendar/src/calendar/navigation-container.js +++ b/components/calendar/src/calendar/navigation-container.js @@ -92,73 +92,64 @@ export const NavigationContainer = ({
From 780bf907d53ab4c5e13edc5cee3d67a5ab0f65dc Mon Sep 17 00:00:00 2001 From: alaa-yahia Date: Thu, 26 Sep 2024 17:45:45 +0300 Subject: [PATCH 3/5] fix: remove tests dependant on calendarDate --- .../supports_ethiopic_calendar.js | 4 ---- .../supports_gregorian_calendar.js | 4 ---- .../supports_nepali_calendar.js | 4 ---- .../calendar/src/stories/calendar-story-wrapper.js | 10 ---------- 4 files changed, 22 deletions(-) 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 index f21ddd8ec..5a9c4a518 100644 --- 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 index f96eeeed2..51507b109 100644 --- 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 index 5c75ac14b..2d6860c6d 100644 --- 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-story-wrapper.js b/components/calendar/src/stories/calendar-story-wrapper.js index e43ed9168..dd2e654aa 100644 --- 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} -
- - - {selectedDate.calendarDate - ?.withCalendar('iso8601') - .toLocaleString('en-GB', { - dateStyle: 'long', - })} - -
{JSON.stringify(selectedDate, null, 2)} From 7de5cdc8c60fb101ff15c6a5b857d101c3997729 Mon Sep 17 00:00:00 2001 From: alaa-yahia Date: Thu, 26 Sep 2024 22:36:44 +0300 Subject: [PATCH 4/5] chore: generate api files --- collections/ui/API.md | 4 ++-- components/calendar/API.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/collections/ui/API.md b/collections/ui/API.md index 9a8748d00..96e07654d 100644 --- a/collections/ui/API.md +++ b/collections/ui/API.md @@ -255,12 +255,12 @@ 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| -|timeZone|string|||the timeZone to use| +|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|`'300px'`||the width of the calendar component| diff --git a/components/calendar/API.md b/components/calendar/API.md index 30848fa16..7ff62fe3f 100644 --- a/components/calendar/API.md +++ b/components/calendar/API.md @@ -49,11 +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| -|timeZone|string|||the timeZone to use| +|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|`'300px'`||the width of the calendar component| From 1b99350549373fa9d5e6aa4e7f69594f4fcab351 Mon Sep 17 00:00:00 2001 From: alaa-yahia Date: Thu, 26 Sep 2024 22:51:24 +0300 Subject: [PATCH 5/5] fix: linter issues --- .../stories/calendar-input.prod.stories.js | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/components/calendar/src/stories/calendar-input.prod.stories.js b/components/calendar/src/stories/calendar-input.prod.stories.js index 96baa5d36..19b8c0377 100644 --- a/components/calendar/src/stories/calendar-input.prod.stories.js +++ b/components/calendar/src/stories/calendar-input.prod.stories.js @@ -25,18 +25,19 @@ export default { const buildCalendar = ({ date, locale, calendar }) => - () => ( - {}} - /> - ) + () => + ( + {}} + /> + ) export const EthiopicWithAmharic = buildCalendar({ calendar: 'ethiopic',