Dialog, Drawer: Ensure page elements are not interactive during close animation
Dialog, Drawer: Refactor layout, ensure content area is the full height
This change allows you to spread content to the bottom of a Drawer, for example with a vertical direction Spread.
Migrate from custom focus ring visibility to native :focus-visible behaviour.
Previously Braid would change the presentation of focus ring outlines based on the user input, i.e. mouse or keyboard,
to prevent showing focus rings on click.
With the updated Browser Support Policy, we can now leverage the native :focus-visible pseudo class instead.
Dialog, Drawer: Ensure the focus outline is correctly applied to the title.
Fix issue where focus outline would not be long enough to wrap the entire title text in certain situations.
Dialog, Drawer: Ensure that only elements outside the Dialog or Drawer are aria-hidden when open
Fixes an issue where the close button inside the Dialog or Drawer was incorrectly inside an aria-hidden region.
Change id prop from required to optional, allowing simplified usage.
Remove the uuid dependency which was previously used to generate fallback IDs in Playroom.
EXAMPLE USAGE:
- <AccordionItem id="item-1" ... /> + <AccordionItem ... />
Dialog, Drawer: Ensure MenuRenderer with top placement is positioned correctly
Ensures the menu is correctly positioned when using a MenuRenderer with top placement inside of a Dialog or Drawer.
Ensure content is left aligned by default
Applies left alignment to content, to ensure consistent alignment even when inside centered layout containers.
Move secondary ButtonIcon tone to icons
Following the deprecation of the secondary tone of ButtonIcon, this updates all internal usages to apply the secondary tone directly to the icon.
Add exit animation to Dialog which mirrors the existing entrance animation.
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.