Commit Graph

69 Commits

Author SHA1 Message Date
jbpenrath
86815cf95b 🔧(react) migrate to vite 6
With the new major version of vite, some path resolution did not work so
we update our vite config to resolve properly paths starting by 'src'.
Furthermore there were some deprecation warning about the use of cjs
files as vite configuration so we use 'mts' extension for all vite
config files in react package to allow vite to detect them as
ES Modules.
2025-01-08 11:02:50 +01:00
Nathan Vasse
06c5c9dff3 ♻️(react) use react aria for select menu
The way the menu of the select was made was causing it to be cropped
inside modals, it was due to the fact the menu was nested inside a
position relative parent. Now we use react aria to position in full
absolute the menu, making it to be correctly displayed inside modals.
2024-05-16 14:43:17 +02:00
jbpenrath
a70f8129eb (react) remove warnings during tests
Numerous warnings was raised during tests. We remove most of them. Some
needs to be discussed before fix.
2024-04-29 15:38:22 +02:00
Nathan Vasse
91c8935a8a 🐛(react) fix Select mono selected item update label
When we were updating the label from the options array of the selected
item, the field was still showing this old value.

Fixes #316
2024-04-24 17:23:26 +02:00
Nathan Vasse
9c614953b8 ♻️(react) remove faker usage from stories
Random data in stories was causing Chromatic to detect changes during
each build.
2024-03-25 15:40:27 +01:00
Nathan Vasse
c63aff4861 📝(react) upgrade stories for Storybook 8
The old way of using Canvas is deprecated, we need to migrate all the
stories to the new standard.
2024-03-21 17:00:04 +01:00
Nathan Vasse
20f5bb703b ♻️(react) make className standard across components
The className prop was sometimes set onto the nested element and
sometimes on the container element, which was not consistent. Now
we always set the className onto the upmost element.
2024-03-19 14:15:35 +01:00
Nathan Vasse
8e7300b92c 💄(react) add border-radius transition
This transition was not working, now this provides are smoother effect.

Closes #112
2024-03-13 15:53:59 +01:00
Nathan Vasse
04ab3306e2 (react) add onSearchInputChange callback to searchable select
We want to be able to notify an event when the search term of the
searchable select gets updated.
2024-03-04 14:40:40 +01:00
Nathan Vasse
f16eed9a6d 🐛(react) fix Select submit button
As the default type of button is "submit", when including a Select
inside a form, clicking on any of its button was triggering form
submission.
2024-02-12 11:46:09 +01:00
Nathan Vasse
a32bac75db 🐛(react) fix missing selected option of Select
In some cases, when the options were newly built object, due to the
fact that we were using object equality to check for the current selected
item, it was not working in those cases.
2024-02-06 11:24:12 +01:00
Nathan Vasse
7649366006 💄(react) update select pills remove button
The button was still using the old tertiary buttons which resulted
in a odd background color, we want this button to have a transparent
background.
2024-02-05 17:54:29 +01:00
Nathan Vasse
d61ab65d82 🐛(react) fix multi select menu opening
At first we had a simple bug were it was not possible to open the
menu by clicking on the label. This fix is a rework to consider
the select wrapper as the toggle button itself, which is what we
do on the mono version. This change caused various tests to fail.
2024-02-05 17:54:29 +01:00
Nathan Vasse
5c5964cf9d 🐛(react) change most tertiary buttons to tertiary-text
Since the addition of tertiary-text variant, the original tertiary
variant has seen its background color changing from transparent to
greyscale-100, the change has impacted lots of components making
them look odd. So that's why I updated most of old tertiary to
tertiary-text.

Fixes #223
2024-01-08 15:26:37 +01:00
Nathan Vasse
7ddcfeb4bc 🐛(react) fix closing of menu via toggle button
Previously it was not possible to close the menu when clicking on
the toggle button on search select. It was caused by a conflicting
state update.
1. Downshift triggers closing the menu from getToggleButtonProps
2. wrapperProps was calling downshiftReturn.openMenu()
2023-11-30 10:40:13 +01:00
Nathan Vasse
94b32be5d3 (react) add monoline props to multi select
We want to enable a mode that prevent the pills the wrap on multiple
lines in order to control any height overflowing. In monoline mode the
selected items are displayed as text to allow text ellipsis, and the
menu renders the list items with checkboxes.
2023-11-24 11:01:41 +01:00
Nathan Vasse
7c13badeb2 ♻️(react) delete duplicated SelectMultiProps
During dev I realized that we had a duplicated SelectMultiProps which
was really misleanding.
2023-11-24 11:01:41 +01:00
Lebaud Antoine
d5fcf500b7 ♻️(react) merge duplicated scss classes related to accessibility
'offscreen' and 'c__offscreen' were duplicated, merge these two classes
in a dedicated utils file.
2023-10-24 20:32:42 +02:00
Lebaud Antoine
430f893645 🩹(react) update stylesheet to use modern SASS
Replaced deprecated '@import' with '@use' to align with best practices.
Refactored stylesheet to behave as a partial, enhancing SASS compilation
efficiency.
2023-10-24 20:32:42 +02:00
Nathan Vasse
b86ba5cc8e (react) add select multi options custom render
We want to be able to render the options in a customized manner.
2023-10-19 11:35:19 +02:00
Nathan Vasse
48e4e56a44 (react) add select mono option custom render
We want to be able to render the options in a customized manner.
2023-10-19 11:35:19 +02:00
Nathan Vasse
d39d33d02c 🐛(react) fix inputs overflowing placeholder
The oveflowing labels were spreading on two lines. I had to wrap a
span inside a label in order to be able to deal with the text-oveflow
plus the absolute positionning.
2023-10-16 12:01:35 +02:00
Nathan Vasse
b5c91d429d 🏷️(react) move SelectProps to index.tsx
It makes more sense for this type to be next to the Select component.
2023-10-04 16:02:06 +02:00
Nathan Vasse
1c7a114b6e (react) add ref to Select
We encountered a use-case where we needed to blur the select programatically
but the component wasn't offering any way to do that.
2023-10-04 16:02:06 +02:00
Nathan Vasse
d647a77c58 🐛(react) fix multi select focus
The multi select non searchable was not displaying its blue accent
color when opening the menu by not clicking on the toggle button.
2023-10-04 16:02:06 +02:00
Nathan Vasse
b0d68becfe ♻️(react) update stories for themes
The stories do not need CunninghamProvider anymore since it is
handled by the configuration for the themes support. Some stories
were also using wrong colors that didn't handle multiple themes.
2023-10-04 15:18:00 +02:00
Nathan Vasse
e2c0d3259b ♻️(react) update token.ts to handles themes
Some components were using wrong design tokens and this was noticed
only when changing themes, like using hard-coded "white" instead of
"greyscale-000".
2023-10-04 15:18:00 +02:00
Nathan Vasse
a46d28f00a 💄(react) make multi select height homogeneous
Some discussion appeared about the fact the multi select was changing
height when pill were selected, making this input having a bigger
height than others making it looks weird in a form comparing to the
others. Modifying the padding and font size make the input keep the
same height.

See #114
2023-10-03 11:18:56 +02:00
Nathan Vasse
e15586da9b 🐛(react) fix missing mono-simple useEffect dep
A recent rebased cause one the dep to be removed.
2023-09-28 15:43:24 +02:00
Romain Le Cellier
859a75cebe 🩹(frontend) fix react userEffect
in Select/mono-simple

The whole downshiftProps object change every time a update is made on it.
By observing only initialSelectedItem prop, we reduce the amount of call
of this useEffect.
2023-09-27 15:38:48 +02:00
Romain Le Cellier
3a6028f0ba 🐛(rect) fix rhf select example
clearing the select trigger a infinit loop
2023-09-27 15:38:48 +02:00
Anthony Le Courric
3fc464bb8c 🐛(react) fix some edge cases with searchable Select
- rerender mutated options when the menu is opened
- keep the filter value when the menu is opened and rerender
by a mutated options
2023-09-25 16:10:39 +02:00
Nathan Vasse
4e1d0f0bc7 (react) rework the behavior of the Select component
We decided to change a bit the behavior of the Select:
- Do not trigger onChange on first render if value is defined
- Show all options on searchable select menu  opening even if there is an
  existing value.
- Clear the input field if no choice are selected
- Clear the added text to the input field when a value is already selected
2023-09-22 14:18:01 +02:00
Nathan Vasse
732183420d 🐛(react) fix select pills submiting form
We found out that clicking on the delete button of the pill in example
forms were triggering form submit.
2023-09-22 12:07:00 +02:00
Nathan Vasse
8470126b1f 🐛(react) fix failing selection of last removed item
Previsouly when selecting item A and then removing it, it was impossible
to select it again. This was caused by the internal memory of useSelect
that only provides undefined selectedItem inside the onStateChange callback
when the item has not changed. So by forcing it everytime to null it is
now providing it everytime.
2023-09-18 17:01:21 +02:00
Nathan Vasse
111bb677c4 ♻️(react) improve select element keys
It was considered as a bad practice to include array indexes in list
elements keys even though it was made this way in the documentation. We
removed them and also decided to drop the use of options value in the
keys too to the profit of optionToValue which can never be undefined or null.
This changes caused test crashing due to the fact that it made the useSelect
onStateChange trigger a onBlur event that was causing the first option of the
list to be selected automatically, which was a really weird behavior. Before
it was not happening because newSelectedItem was not defined, using the
new keys made it defined, we don't 100% understand why yet.
2023-09-18 17:01:21 +02:00
Nathan Vasse
fd988c03e1 🐛(react) fix controlled searchable select
Changing the controlled value was setting triggering immediately an
onChange event with undefined value. This was due to the fact that when
the controlled value was changed SelectMonoAux was searching only in
options displayed, where it should in reality be searching accross all
options.

fixes #162
2023-09-15 15:11:43 +02:00
Nathan Vasse
4616ad9ffb (react) add select menu empty placeholder
Previously if the menu was opened and no there were no options to be
displayed it was just showing a tiny empty menu, this commit adds an
empty placeholder in order to make it clearer that the list is empty.
2023-09-13 17:28:58 +02:00
Nathan Vasse
9de9a9735d 💄(react) improve Select actions ui
The button were too big compared to the sketches. So we re-adjust their
sizes and positions.
2023-09-11 12:07:49 +02:00
Nathan Vasse
cf542e4fa9 💄(react) fix DatePicker, Select, Input success colors
This is based on recent QA report.
2023-09-11 12:07:49 +02:00
Nathan Vasse
9a349c1556 💄(react) fix Select and Input error colors
This was a feedback from the QA.
2023-09-11 12:07:49 +02:00
Nathan Vasse
1c45b93a85 💄(react) homogenize form fields colors
Based on the QA feedbacks we figured out that form fields were not all
using the exact same greyscale colors.
2023-09-11 12:07:49 +02:00
Nathan Vasse
051c79fd6f ♻️(react) improve props propagation
Before we had to edit input components using Field when adding new props
to the latter.
2023-09-05 11:48:04 +02:00
Nathan Vasse
b530e966ae (react) add textItems to Field
This allow to add bullet points lists below inputs, the best example
is when we want to list multiple errors from form validation.

Fixes #147
2023-09-05 11:48:04 +02:00
Nathan Vasse
468c8161eb 📝(react) add RHF examples
Rework a bit the recent work made on RHF example to make some component
more generic, such as RhfSelect and RhfDatepicker, which is based on a
design using RHF context hooks to provide a seamless integration.

Fixes #144
2023-09-05 11:15:51 +02:00
Nathan Vasse
a88aa1a23d 🐛(react) fix isActive console warning
Previously when interacting with a select, the list items
were triggering a warning.
2023-09-05 11:15:51 +02:00
Nathan Vasse
66c25bcdbd 🏷️(react) export more types
Based on recent developers feedbacks that needed to use props types
in order to wrap the lib's component they were stuck because we were
not exporting all of them.

Fixes #143
2023-08-29 16:26:40 +02:00
Romain Le Cellier
e3563f85d1 (react) react-hook-form Select example
Our form elements needs to be usable with react-hook-form
2023-08-07 16:25:00 +02:00
Nathan Vasse
40f2eb2b06 ♻️(react) upgrade code for Downshift 8
This new major version broke our components, including the way the menu
gets opened, how to determine the disabled options and some other semantic
types changes.
2023-07-18 16:59:39 +02:00
Nathan Vasse
d85f9edac8 🚨(lint) update file for prettier 3.0.0
Prettier 3.0.0 comes with new standards so we need to upgrade our files
to comply with it.
2023-07-18 16:59:39 +02:00