Commit Graph

11 Commits

Author SHA1 Message Date
Nathan Vasse
34d2fe0af3 (react) max width for multi select pills
In order to prevent a pill with a long text to stack below the actions
div we decided to introduce the concept of max-width for pills.
2023-06-19 15:04:05 +02:00
Nathan Vasse
29b58ed1a6 (react) use css float for multi select
Previously the pills were not stacking under the actions div, now we can
do it using the forgotten CSS float feature.
2023-06-19 15:04:05 +02:00
Nathan Vasse
c8afa105dd (react) add multi select
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.
2023-06-19 15:04:05 +02:00
Lebaud Antoine
10fa71e2a7 (react) add DatePicker component
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.
2023-06-12 18:57:20 +02:00
Lebaud Antoine
6f05995f24 🎨(react) make eof stylesheets consistent
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.
2023-06-12 17:08:01 +02:00
Lebaud Antoine
fe91471127 💄(react) improve DX when converting px to rem values
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.
2023-06-01 19:20:05 +02:00
Nathan Vasse
ef4ece39b4 🐛(react) fix label color on state disabled ( select, input )
When creating LabelledBox we introduced a bug than overrides the label
colors when inputs are disabled.
2023-05-24 16:49:49 +02:00
Nathan Vasse
75c6e2e482 💄(react) change label color when focused ( select, input )
We forgot to implement this behavior when coding these inputs.
2023-05-24 16:49:49 +02:00
Nathan Vasse
d79f01fd93 (react) add the possibility to hide select label
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
2023-05-24 15:58:07 +02:00
Nathan Vasse
c93c8d2a2f (react) add disable property to select option
Based on recent feedbacks, this feature was needed for consumer apps.

Resolve #60
2023-05-24 15:58:07 +02:00
Nathan Vasse
2ff5fc5d29 (react) add Select component
Finally our powerful Select component is available to make great forms!
2023-05-12 11:13:38 +02:00