This commit modifies the Button component to switch the `variant` and
`color` props, ensuring consistency across various components that
utilize the Button. The changes include updates in the Alert, Modal,
Tooltip, and other components to reflect this new prop structure.
Additionally, several test and story files have been adjusted to
accommodate these changes, enhancing the overall component architecture.
When a ModalProvider is mounted, it renders a div with an id which is use as
container to render modals through portals. But currently, if developer use
several CunninghamProvider across its application, a container with the same
id will be rendered several times that is weird. To prevent this kind of id
collision, we decide to generate a unique Id for each ModalProvider.
Resolve#352
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.
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
