search

solid-design-system / solid

Monorepo for Union Investment's Solid Design System.
https://solid-design-system.fe.union-investment.de/x.x.x/storybook/
Other
17 stars 3 forks source link

feat: ✨ add sd-flatpickr style #273

Closed karlbaumhauer closed 2 months ago

karlbaumhauer commented 11 months ago

User Story

As a developer using the Solid Design System I want to be able to use a datepicker in the Style of Solid Design System.

Description

We're providing CSS styles containing a theme for https://flatpickr.js.org. We're providing ways to improve A11y (e. g. being able to tab into the date view while being able to type at the same time see https://github.com/solid-design-system/solid/issues/516#issuecomment-1814455256) either with a plugin we distribute (preferred) or with an example in a story.

We will provide a documentation in Design and Development when to use a datepicker like flatpickr and when it's fine to use just <sd-input type="date"> or even <sd-input type="text" pattern="xx.xx.xxxx" autosuggest="birthday">.

Hand-off

https://www.figma.com/file/9hJu09NkrkaPJKIe6eC5uk/sd-input%2Fsample-datepicker?type=design&node-id=18218-15792&mode=design&t=OcGUzlEnCVseAX4U-4

Additional Information

The idea is to integrate a custom package for the Flatpickr plugin in our monorepo and be published on npm:

Inside this package we will provide:

Please keep this task in mind: https://github.com/solid-design-system/solid/issues/516 and incorporate accessiblity considerations inside the plugin.js. We already have a branch from the task mentioned above (poc/flatpickr) which provides some details and helping information.

We should also provide an installation guide.

If the initial setup should be a blocker, please seek assistance from Mario.

Styles detailed requirements

DoR

DoD

yoezlem commented 9 months ago

We should check if we need all the date formats inside the current datepicker component: https://component-library.dev.fe.union-investment.de/integration/storybook/index.html?path=/story/components-datepicker--configurable&args=dateFormat:MM+yy&globals=backgrounds.value:!hex(F6F6F6)

yoezlem commented 9 months ago

It would make sense to compare the datepicker from component-library and also https://ant.design/components/date-picker to make it easy.

mariohamann commented 9 months ago

I fear this component a bit as it's super complex compared to the value we get from just inout type "date" or "time". Before we really provide this, I would love to hear, what users need here and how many unsers really need this component in its current complexity, especially having our footprint in mind.

I have the feeling that most people could just be happy with the original input – and if there are only one or two projects need this, they could provide it theirself.

We could even think about building a pattern showing how to integrate this with an external library but using our styles, and e.g. the dropdown component.

Therefore I would love to reduce the priority and question the approach here. What do you think, @yoezlem ?

karlbaumhauer commented 9 months ago

I fear this component a bit as it's super complex compared to the value we get from just inout type "date" or "time". Before we really provide this, I would love to hear, what users need here and how many unsers really need this component in its current complexity, especially having our footprint in mind.

I have the feeling that most people could just be happy with the original input – and if there are only one or two projects need this, they could provide it theirself.

We could even think about building a pattern showing how to integrate this with an external library but using our styles, and e.g. the dropdown component.

Therefore I would love to reduce the priority and question the approach here. What do you think, @yoezlem ?

I am sure that some kind of datepicker will be requested by many (internal) pages but also like the idea to first have some research about the actual need and even more about the functionality we will need to provide (if we provide the component)...

Maybe @EllaELSA and @coraliefeil you can check this with the UX craft to see if this was just a nice-to-have in the component library or this is actually something people really need. There was a design ticket but unfortunately no documentation in it.

karlbaumhauer commented 9 months ago

moved the ticket in "to be refined"

karlbaumhauer commented 9 months ago

@mariohamann pls define the best way to provide the date-picker as a new component/package. Criteria:

Until then, this ticket is blocked and the basic date-picker feature will be provided via the #255 type "date"

Possible Solutions:

mariohamann commented 8 months ago

Do we have a design for that? If not, I wouldn't refine this at the moment.

On top I see that Shoelace is working on a calendar component: I would strongly suggest to wait for that one first. https://github.com/shoelace-style/shoelace/commit/e518e1d566cd412cfe5beb497ad1767c4ff0fb93

Apparently it would even include a selection of dates.

karlbaumhauer commented 8 months ago

we will wait for shoelace to see what they provide => first preview will be provided in https://github.com/solid-design-system/solid/issues/567

karlbaumhauer commented 7 months ago

@mariohamann @coraliefeil @abudd1094 pls align in a meeting (after we have brand approval on Thursday) and define the scope of the "component" and refactor this ticket.

coraliefeil commented 7 months ago

https://codepen.io/pyxal/pen/wvyjMNg

maybe that helps ensuring A11y

coraliefeil commented 7 months ago

When using flatpickr - Is ist possible to not only select a date via the flyout calendar but also type a date into the input?

Like here: https://carbondesignsystem.com/components/date-picker/usage/#live-demo

Would this be possible by e.g. utilizing sd-input with type=date and style the native calender using flatpickr?

Vahid1919 commented 3 months ago

Here is a list of accessibility problems I have found with flatpickr:

Vahid1919 commented 2 months ago

On sd-datepicker

Towards the end of 2023, the SDS team began exploring ways to integrate a date picker component into the design system. We opted to adapt existing date picker solutions into our component library, with a focus on flatpicker.js, a lightweight and extensible date-time picker that has seen use in other popular component libraries such as IBM's Carbon Design System. With support for theming, this option will enable us to provide styles to incorporate the Solid design language.

Through extensive research by Alec Budd, we confirmed the significant advantages in utilising flatpickr, mainly its broad functionality that would save considerable development time. This included support for plugins, such as date range and month selectors. However, we encountered some new challenges. Firstly we would have to make some concessions on our design requirements due to flatpickr limitations. In addition that, and perhaps more importantly, Alec raised concerns about longstanding accessibility issues that were not addressed by flatpickr. This included the inability to reliably use the keyboard to change the month or year in the calendar (https://github.com/flatpickr/flatpickr/issues/2485).

Despite these hurdles, we persisted in our efforts to incorporate flatpickr due to the time-saving potential and we hoped to address accessibility concerns through the use of plugins.

Decision not to include flatpickr in SDS

Adding flatpickr into our component library had several drawbacks. These included the additional effort required to ensure compatibility with our existing framework and the burden of maintaining a large dependency. This was especially concerning as the flatpickr repository is not longer very active.

As a result the solution we intended to provide was a separate package, which would include a style theme and a plugin to cover our design, functionality & accessibility needs.

New-found challenges

Adapting flatpickr to the Solid Design System presented numerous new challenges, particularly in addressing accessibility issues, which seemed to multiply as we delved deeper. We examined various design systems for insights, finding that incorporating flatpickr was a more substantial undertaking than anticipated. Some solutions involved directly patching the flatpickr package.

Looking ahead

Given the escalating complexity of integrating flatpickr, the SDS has decided to pivot directions this pursuit. Rushing a date-time selector solution with current tools would compromise the quality of the product. It is important for the SDS that we do not deploy a half-baked product because it is a component that is expected at the moment.

We have gained valuable experience from this process that will help us moving forward. We have already identified promising alternatives, such as Cally, that only provides the foundational elements of a calendar. This enables us to build a date picker in-house on top of own Solid components. Meanwhile, ui-datepicker remains the recommended alternative for UI teams in their projects.