Internal issue 2996 - Calendar in the IcDatePicker component should made available without the IcDateInput

[ticket-sync[bot]]

In the IcDatePicker component, the calendar that appears in the drop-down is currently combined with the IcDateInput component.

It is currently not possible to use the calendar functionality without it being in an IcDateInput drop-down.

This calendar display and date selection functionality should be de-coupled so that it is possible to use it on its own, i.e. not as part of the IcDatePicker component.

This allows more flexibility in the building of date and time based components using ICDS and better conforms to Atomic Design principles.

One possible solution is to refactor this calendar out into a separate IcCalendar component and then to refactor the IcDatePicker to display the new IcCalendar component when the drop-down appears.

[MI6-255]

This ticket should not be marked as done until we have a v3 solution.

For now, we have agreed to merge the changes of this PR: https://github.com/mi6/ic-ui-kit/pull/3333 into v2 only. With the following conditions:

• Mark this prop as deprecated (like other props are in v2), so it is not used or relied on by any other teams
• Implement this prop into v2 only, do not merge any changes into v3. With the idea that we need to find a longer term fix of how we solve this in v3
• There will need to be some fix in the component regarding screen readers, you’ll notice how the “Selected date” is not read out, with the changes you’ve made here, making it inaccessible

In time for v3, we need to explore if we have time to break the Calendar into its own component, and how that even helps this request (if it does) as I assume it's still used under the hood if so, so I don't know how they then turn it off with the suggestion.

If we can't solve it for v3, we wouldn't want this work as it is in v3, due to many of the props not working e.g. disabled does disable the calendar, only the input. So our option would be for this team to upgrade all components to v3, and keep the v2 canary components until this is solved. It is also possible in npm to install both v2 and v3 canary components at the same time.

[dn55533]

The following branch has the initial work involved in splitting out the calendar functionality into a new IcCalendar component in the V2 codebase:

https://github.com/dn55533/ic-ui-kit/tree/feat/refactor-ic-date-picker-into-ic-calendar

[ad9242]

consider making the calendar component not in the shadowDom, in case of accessibility issues

[MI6-255]

Before proceeding with the fix, discuss the suggestion with the team

[MI6-255]

May need some guidance, depending on the outcome

[GCHQ-Developer-530]

Customer having some issues with the current v2 solution that might be able to be fixed by this ticket:

• Calendar is a tab trap
• When entering a date for the calendar, the calendar is defaulting to American MM/DD/YYYY even though dateFormat doesn't default to that
• The date picker only thinks that the date updates when the calendar is closed, so when using it on it's own they're having to simulate it opening and closing so it flickers