Refactor the original DatePicker component to utilize the newly created shared
common DatePickerAux component. This modification enhances code consistency,
and promotes the reuse of the DatePickerAux across date inputs variants.
DateRangePicker and DatePicker would share quite a lot of
common logics. Make sure the code elements are factorised
easily reusable in each components.
Refactor the date field input to ensure the inclusion of two identical
and reusable date field inputs in the future DateRangePicker component.
By factoring out the common logic and structure, we can create a more efficient
and easily reusable component for selecting date ranges.
Extend the functionality of the DatePicker component to include support
for a range calendar. This enhancement allows users to select a date
range spanning multiple calendar cells, enabling more flexible date
selection.
iThe Button component is not utilizing the headless UI Button from react-aria.
When pressing ENTER on calendar grid cells, the onClick event handler is
being called twice. This issue remained unnoticed when the date picker only
selected a single date and closed. However, when selecting a range of dates,
this double triggering becomes problematic.
Integrate new styling classes for grid-cells to facilitate range selection
in the DatePicker component. This implementation improves the visual
representation and user experience of selecting a range. In addition,
outside-month cells are now hidden, to avoid having a range selection
that contains outside-month cells.
Revamp DatePicker component to enhance range functionalities by elevating
the clear button, resulting in the utilization of a single button across
multiple DateField inputs.
Previously we were not fully using CSS variables as values used in
CSS were hard-coded one. It wasn't keeping the variable references.
This was causing issues when customizing the theme, because editing
colors was not enough, it was needed to customize also the tokens
using these variables. Now by introducing ref() we can delegate how
to deal with these directly to the generators themselves.
Since our upgrade from Typescript 5.0.4 to 5.1.3 some errors started to
occur when running yarn build in .stories.tsx files. Please see the
related issue: https://github.com/storybookjs/storybook/issues/23249.
Adding this ignore clause partitions the storybook compilation and the
package compilation which represents how things really work together,
thus making the irrelevant errors to be removed.
Fixes#109
Due to the previous changes of LabelledBox that allows it to fit dynamic
height containers, we forgot to update the DatePicker resulting in a broken
CSS alignment.
Adding this new variant makes necessary to reorganize the files to keep
a clear separations of concerns. As of now Select/index.tsx is just an
entrypoint to render either the mono or multi variant of the select.
Previously we enforced the height of the LabelledBox div with height: 100%, but
if the parent container of LabelledBox had an auto height this wasn't working
anymore. Setting height: 100% to a child works only if its parent has a fixed
height. In our situation we needed the LabelledBox to work for the multi select
which has a auto growing height. To solve this issue we just have to force the
parent containers of LabelledBox to display flex in order for it to stretches
its children to take all of its height, including LabelledBox div.
This way initially added for the multi select but after some discussions
we decided to keep the label vertical even for the multi select. But this
could be useful in the future.
Make sure every date formatter has the same time zone by encapsulating
it in a factored custom hook. Reorganize component to gain
in readability and improve maintainability.
Select under the calendar component were not properly initialized,
leading to issues. Additionally, syncing the dropdowns with the calendar
state was causing unnecessary renders. Selects now update on user events
triggered by the toggle button, ensuring the selected item remains
up-to-date. The code has been refactored to eliminate duplication
and improve the component's readability and maintainability.
Based on the Figma DS design by Alex, a mono date-picker
component has been added. It uses react-aria headless ui
component capabilities, with downshift headless ui component.
React-aria was not supporting by default dropdown menus to
select months and years. We could not reuse Popover component
from react-aria because we are not using their headless ui
component for the button one. Clicking on the toggle calendar
button triggers both the button and the popover click outside
events. React-aria button uses a custom onPress props that is
disabled by their popover. Instead, I have implemented a simple
custom hook. This is the first acceptable version of the component.
Some minor user interaction are missing. This first component
doesn't support time selection.
A design system needs a popover mecanism.
In the select component, this logic is handled by downshift.
We introduce a new component, responsible to open an element in
a popin and close it when the user click outside of it.
A new utils function has been added that would allow
developpers to easily compute a range between two
number, with a step of one. This function is inspired
by the python range function.
Working on the date picker, we looked for an headless
UI components library. React-aria was chosen to support
the new form's component development. They developped a suite of
headless UI components that seemed quite easy to style.
Some older tools misbehave if the last line of data
in a text file is not terminated with a newline.
It makes sure the last line was properly terminated.
Design tokens documented in the Select docs should match the available tokens.
This modification offer an exhaustive and complete list of the design
tokens available to customize the select component.
Previously the type of the row parameter of renderCell was hardcoded as
Row. This wasn't ideal because the best case scenario we want it to enable
Typescript to use the type of rows props. Now that's the case.
Resolve#62
Align design tokens of input component with select component's
design tokens for consistent styling configuration. Having a
transparent background was causing a weird ux.
It can be tricky, while integrating the figma design file,
to map some small px values to their rem equivalent. Thus,
this PR proposes a new util function converting pixel to rem.
It would ensure that all size values can scale base on the
font-size base, while keeping a good developer experience.
