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
When clicking on the checkmark it was trigerring two onChange on parent
elements, thus causing double toggling ( which means revert to the initial
value ) in some controlled way approaches ( see the added test ).
Fixes#175
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.
With Windows the order of the imports was not the same as with Linux,
this was causing the linter to fail with CI.
We force the import starting with ":" to the internal group to fix this
issue.
The fullWidth was buggy for those components, the label was floating
in the middle of the empty space where it feels correct to keep it
aligned on the left.
During our last meeting regarding the QA the designer told us to remove
the arrows on the number input. We can still change the value with the
keyboard arrows, so it does not cause a11y issues.
Previously, having the icon file coming after the design system styles
was causing issues: we were not able to set fs-* classes to material-icons
because the priority of the selector was too low.
Based on the last QA it appears that we were using wrong button size
and icon size ratio. By using the newly created nano size we can make
the code much simpler.
Previously we had to hack the button in order to display small clickable
icons, like the clear button in the DatePicker. By introducing a new
nano button we can natively achieve that. Also make more homegenous
font size and icon sizes in existing button sizes.
Based on QA feedback the keyboard focus of the DatePicker was using
the browser default outline ( when navigating with tab key ), this
ensure a consistent style accross different focus modes.
The design-system guidelines tell that actions button must be aligned
on the right. To make this behavior effortless this feature adds a
special class to actions column to apply the correct css style in order
to achieve that.
