Previously the generator was only handling hard-defined design tokens
preventing to make custom tokens to appear in the scss generated file.
This new way of generating the file handles custom tokens in a more
generic way.
Refactor tests to enhance simplicity and clarity by introducing
expected string values. This improvement is particularly relevant
for focused months and focused year scenarios. Consequently, the
tests no longer depend on the user's locale.
Resolve development warning in `CalendarAux` component caused
by recent updates to react-aria dependencies. Update props for next
and previous calendar buttons, removing `onFocusChange` before
passing to the Button component.
If we had more than 1 columns with custom cells, we would get a warning
about duplicate keys, because every columns got the key `actions`.
We add the column index to the key to make it unique.
Show international capabilities of the `DatePicker` component using the
`locale` props and the Cunningham provider. Dates would
be automatically displayed in the appropriate calendar system.
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.
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.
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.
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.
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.
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.
We do this in order to have homogenous border accross the entire
library, before we had DataGrid with 1px border and inputs with 2px
borders, which was not really nice to the eye.
Based on recent feedbacks this feature was needed. It is important for
the label to still be accessible to screen readers, that's why we
introduced the offscreen class.
Resolve#60
Even if this is not the default behavior of the native checkbox, based on
recent feedbacks and by comparing what other components libraries do, it
appears that setting a custom cursor on checkbox hover is the most
intuitive thing to do.
Resolve#59
At first we wanted to only support ESM. But as we want to share types
and export design tokens from the react package to the outside world
in order to allow local cunningham.ts files to import them, we are
forced to also build the library for CJS too. Why? Because local
cunningham.ts files are loaded as CJS, so they can only import CJS
module. Why loading cunningham.ts as CJS? Because the tokens package's
binary is built for CJS, then it's seamless to make it load CJS, where
making it load ESM was buggy. And why not migrate the tokens package to
ESM so? Because it implies to rewrite every imports with .js extensions,
makes us loose the possibility to use __dirname kind of variables. And
also Jest use for testing is not compliant at all when it comes to execute
ESM code. Well, the ecosystem is not ready for that at the moment, sadly.
Storybook was emitting warnings errors about the fact that ArgsTable
is deprecated, and also I rewrote imports as those are not the one
used in the doc anymore, this will prevent breaking changes in the
upcoming upgrades.
Due to the recent upgrade to Storybook 7, the source blocks of Canvases
were broken, they were only showing args. This was mainly due to the fact
that as of Storybook 7 the meta tags of the MDX files have changed, thus
causing the issue. These are now based on imports. We also needed to rename
index.stories.mdx files to index.mdx because Storybook was throwing errors,
maybe due to a conflicts with index.stories.tsx files and new imports.
Anyway this way of naming MDX files seems to be the recommend one based on
the official documentation.
