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.
For a variety of reasons, such as accessibility or integration with
external react-router deps style we needed to be able to provide the
ability to render the Button component as link in order to be able
to provide link-specific attribute for rendering such as href.
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.
In some cases we need the props of a component to be exported,
to be able to use them in other components. This commit exports
the props of the Button component.
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
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.
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.
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 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.
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
