Dialog, Drawer: Adapt max height to available viewport space
Make use of the new dynamic viewport units for applying a max height to modal elements such as Dialog and Drawer. These new units take into account dynamic browser toolbars that expand and contract as the user scrolls, ensuring the browser interface never obscures the web site content.
Fix also incorporates fallback for older browsers to use regular viewport units.
Drawer, Dialog: Increase gutter around close button
Fix for a regression where the gutter around the close button was reduced — resulting in visually clashing with the content when scrolling.
Drawer, Dialog: Support validation blocking closure of modal
To prevent a Dialog or Drawer from closing, e.g. due to validation, the onClose function can now return false.
EXAMPLE USAGE:
<Drawer open={open} onClose={() => { const valid = runValidation(); if (!valid) { return false; } setOpen(false); }} />
Dialog, Drawer: Reduce space between title and description
Reducing the space between title and description to small to improve association of the header block content
Support data attribute boolean values
The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.
EXAMPLE USAGE:
<Component data={{ 'custom-attribute': true, }} /> // => <div data-custom-attribute="true" />
Dialog, Drawer: Prevent sticky close button container from blocking content
Fix regression introduced when migrating the close action to use ButtonIcon. The close action container was blocking the content of the Dialog/Drawer, and when scrolling could prevent a user from interacting with the content as it went behind the container.
Additionally, re-introduced the surface coloured background behind the button to prevent the button from visually colliding with content when scrolling.
Autosuggest, Dialog, Drawer, OverflowMenu, Tag, TextField, useToast: Migrate to use ButtonIcon
Adopt new ButtonIcon for clear/close actions in favour of custom internal buttons.
Dialog, Drawer: Support long, unbroken title text
Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast: Increase border radius using updated borderRadius scale
Dialog, Drawer: Support nested Dialogs & Drawers
Remove restriction preventing the nesting of modal components, e.g. Dialog and Drawer. While it is still discouraged to keep experiences simple, there is no longer a technical guard against it.
Add support for data attribute maps on all components.
EXAMPLE USAGE:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />
Dialog: Fix close button to the corner of the dialog when scrolling
Autosuggest, Dialog: Lighten backdrop opacity from 0.7 to 0.4
Add Dialog component
Follows the WAI Aria Dialog (Modal) Pattern.
EXAMPLE USAGE:
<Fragment> <Actions> <Button onClick={() => setOpen(true)}>Open dialog</Button> </Actions> <Dialog title="Dialog Example" id={id} open={open} onClose={setOpen} > <Placeholder height={100} width="100%" /> </Dialog> </Fragment>
See the documentation for an exhaustive list of features.