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: Prevent close button protruding in left position
Fixes an issue where the close button could protrude from a Drawer.
This was only visible when setting position to left and between a small range of screen widths — above 660px (small content width) and below 768px (tablet breakpoint).
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: Darken backdrop in dark mode
Increase the weight of the backdrop in dark mode to ensure the content is suffiently obscured.
Drawer: Fix entrance animation from left position
Apply the entrance animation correctly for a Drawer using the left position.
Also reduced the horizontal overshoot for the transition for a smoother feel.
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); }} />
Drawer: Increase space between title and description on tablet
Drawer: Align horizontal gutters with PageBlock
Given a Drawer is full width on a mobile device, applying the same horizontal gutter rules as PageBlock makes sense.
This ensures content on a mobile will have the same available space whether its in the page, or inside a Drawer.
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.
Drawer: Support positioning on the left
A Drawer can now enter from and be positioned on the left. The default remains unchanged and will enter from and be docked to the right.
EXAMPLE USAGE:
<Drawer ... position="left" />
Dialog, Drawer: Support long, unbroken title text
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" />
Add Drawer component
You can now open a modal panel on the right-hand side of the screen, following the WAI Aria Dialog (Modal) Pattern.
See the documentation for more details and interactive examples.