This default behavior was causing lots of troubles when using modals.
For instance the Select value were centered, it was also the case for
most of consumer's component inside modals, forcing the users to
set text-align:left on their side, resulting in additionnal work.
Now we use another approach by using a specific div for the content
we want centered.
Having the position fixed and at the same time overflow auto on the same
element was causing absolute children to be cropped. We need to set those
two attribute on two different parent for these children to not be cropped.
Yes this is weird, this is CSS.
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.
In some apps this is mostly needed, for instance: when the
CunninghamProvider is nested in the DOM, we want the modal to still
be displayed on top of anything else, then in those cases we will be
able to define a node directly in the body and tell cunningham to
render modals inside it.
We encoutered an issue where stacked modal backdrop were not rendered
above the modal below. It was caused by the dialog element that is
natively rendered on the top layer regardless where it is create in
the DOM. So we decided to use react modal that provides hand crafted
dialog, and implementing a11y features.
Closes#314
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.
We encountered the case were a user reported that the column were
making cursor pointer but clicking on it was doing nothing. It was
caused by the fact that onSortModelChange was not provided. So in
this case we trigger a warning only if enableSorting is true on one
column at least.
Previously sorting on custom cells was not possible because they were
considered as "display cells" by React-Table, which is made for actions
columns, which aren't sortable.
Closes#296#100
The generated sass from tokens containing commas, like font families was
not valid due to the way maps are made in sass. So we wrap those value
in quotes.
This animate function is not supported by some testing environments,
to prevent any crashes on consumers side we need to first make sure
this function is defined.
Fixes#281
Resolved a width conflict in the date range picker where the field width
conflicted with the component's min-width. This caused content
overflow in the field container, resulting in layout issues.
This way triggering thousands of warnings in the console and during tests.
Removing it works because it seems that having item.disabled set allows
to not having to use isItemDisabled.
This form was not using multi select, adding it provides a way to
easily interact with all the form component in a single form making
sure they all work.
As the default type of button is "submit", when including a DatePicker
inside a form, clicking on any of its button was triggering form
submission.
Fixes#245
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.
