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()
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.
Replaced deprecated '@import' with '@use' to align with best practices.
Refactored stylesheet to behave as a partial, enhancing SASS compilation
efficiency.
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.
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.
Some components were using wrong design tokens and this was noticed
only when changing themes, like using hard-coded "white" instead of
"greyscale-000".
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
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.
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
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.
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.
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
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.
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
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
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.
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.
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.
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.
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
