All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @react-md/dialog
overlayProps to configure the dialog's overlay
(cfc30f0)Note: Version bump only for package @react-md/dialog
eslint
(8111cd3)Typography
(30cf056)lib.d.tsprop-types package.DialogFooter align prop applies correct classes
(644971d)yarn format to include new files
(48d3d7f)Note: Version bump only for package @react-md/dialog
Note: Version bump only for package @react-md/dialog
prettier after upgrading to v2.3.0
(3ce236a)typedoc
(cf54c35)Note: Version bump only for package @react-md/dialog
FixedDialog applies style prop
(bb4ad2f)Note: Version bump only for package @react-md/dialog
Note: Version bump only for package @react-md/dialog
Note: Version bump only for package @react-md/dialog
Note: Version bump only for package @react-md/dialog
Note: Version bump only for package @react-md/dialog
Note: Version bump only for package @react-md/dialog
LabelRequiredForA11y type definition
(b7aa4fa)Note: Version bump only for package @react-md/dialog
LabelRequiredForA11y type definition
(b7aa4fa)Note: Version bump only for package @react-md/dialog
Note: Version bump only for package @react-md/dialog
Note: Version bump only for package @react-md/dialog
Note: Version bump only for package @react-md/dialog
Note: Version bump only for package @react-md/dialog
sideEffects field to package.json
(31820b9)sideEffects formatting
(78a7b6b)No changes.
The Dialog component was completely re-written in this release and each part
of the dialog has been exported for additional customization. Since the goal of
react-md@v2 is to be an extension of HTML Elements with additional styling,
all refs will be forwarded on to the component's element instead so you have
access to the DOM nodes.
Dialog, DialogHeader, DialogTitle, DialogContent, and
DialogFooterFixedDialog which can be used to attach a Dialog to another
element in the pageAppBars within a dialog instead of using the
DialogHeaderNestedDialogContextProviderBasically everything. The DialogContainer component no longer exists and all
the old props to generate a dialog were removed. Instead, there are additional
helper components to help structure your dialog for more customization.
DialogContainer component no longer exists and is kind of the new Dialog
componentDialog component no longer exists and is kind of the new
FixedDialog componentDialogFooter no longer has the ability to automatically check if the
actions should be stackedmodal prop no longer prevents closing the dialog with the escape
key. You must use the new disableEscapeClose prop instead along with the
modal propfullPage, pageX and pageY were removed in favor of the new type proponHide was renamed to onRequestCloseonShow was removedactions and stackedActions were removed in favor of using the
DialogFooter and Button componentstitle was removed in favor of using the DialogHeader and DialogTitle
componentsdialogStyle and dialogClassName were removed and now are the style and
className propstitleStyle and titleClassName were removed since you'll be using the
DialogHeader and DialogTitle components insteadfooterStyle and footerClassName were removed since you'll be using the
DialogFooter component insteadcontentStyle, contentClassName, contentComponent, contentProps,
paddedContent, autopadContent, and autosizeContent were removed since
you'll be using the DialogContent component insteadcomponent was removed. The dialog will always be rendered as a divadditionalFocusKeys was removed as it no longer exists on the
FocusContainerinitialFocus was renamed to defaultFocus for consistent naming conventionsfocusOnMount was renamed to disableFocusOnMounttransitionEnterTimeout and transitionLeaveTimeout were removed and changed
to the new timeout propcloseOnEscape was renamed to disableEscapeCloserenderNode and lastChild were removed with the new portal APIdefaultVisibleTransitionable was removeddisableScrollLocking was renamed to disableScrollLockactiveElementFocus was renamed to disableFocusOnUnmountheight and width props were removed since it is preferred to use styles
insteadcontainerX, containerY, zDepth, onOpen, onLeave, and centered
props were removedisOpen, transitionName, transitionEnter, transitionLeave,
actionLeft, actionRight, and close props were removed since they were
deprecated to begin with$rmd-dialog-elevation: 16 !default - the elevation (box-shadow) to use for
dialogs$rmd-dialog-min-width: 17.5rem !default - hhe min width for a centered
dialog$rmd-dialog-header-padding: 1.5rem !default - the padding to apply to the
DialogHeader component$rmd-dialog-content-padding: 1.5rem !default - the padding to apply to the
DialogContent component$rmd-dialog-footer-padding: 0.5rem !default - the padding to apply to the
DialogFooter component@function rmd-dialog-theme - gets one of the theme values and validates that
the theme name is valid@function rmd-dialog-theme-var - gets one of the theme values as a css
variable with a fallback value and validates that the theme name is valid@mixin rmd-dialog-theme - applies one of the theme values to a css property
as a css variable@mixin rmd-dialog-theme-update-var - updates one of the theme values as a
css variable$md-dialog-overlay-z-index to $rmd-dialog-z-index for better
clarity and changed the default value from 20 to $rmd-overlay-z-index + 10$md-dialog-transition-time to $rmd-dialog-enter-duration and
$rmd-dalog-leave-duration and changed the default value from .3s to 0.2s
and 0.15s respectively$md-dialog-translate-distance to $rmd-dialog-transition-distance
and changed the default value from -30px to 1.875rem$md-dialog-vertical-keyline to $rmd-dialog-vertical-margin for
clarity and changed the default value from 24px to 1.5rem$md-dialog-horizontal-keyline to $rmd-dialog-horizontal-margin for
clarity and changed the default value from 40px to 2.5rem$md-dialog-title-padding-bottom to
$rmd-dialog-header-padding-bottom and changed the default value from 20px
to 1.25rem$md-dialog-use-flex-positioning since this is now required$md-dialog-full-page-z-index since it is no longer used and caused
z-index problems when multiple dialogs were rendered at the same time$md-dialog-btn-height, $md-dialog-btn-min-width, and
$md-dialog-btn-padding since buttons no longer change size within dialogs$md-dialog-padding since it is now separated into three padding
variables@mixin react-md-dialog-width since it was pretty worthlessAfter using the dialogs for awhile and needing additional customization, I learned that following the material design guidelines strictly was a bad way to go. Instead, all the different parts of the dialog will be exported so you can pick and choose what's needed to be rendered. This also allows you to create your own dialog components with common layouts and structures yourself.
The main wrapper will be the Dialog component which interacts almost the
same as the DialogContainer before. This will no longer generate headers,
content, and footers for you so you can use the DialogHeader, DialogContent,
and DialogFooter components instead.
The Dialog component was updated a bit to now display: flex; and
flex-direction: column to work with the components listed above. There were
some sizing issues before with dynamic dialog content and this new structure
will make it a bit easier to have fixed headers and footers. The DialogHeader
and DialogFooter components will now have flex-shrink: 0 while the
DialogContent will have flex-grow: 1 and flex-shrink: 1 so that it will
fill up all remaining space within the dialog and keep the header and footer
fixed to the top and bottom respectively. Since the DialogHeader is just a
simple flex wrapper, you'll also want to use the DialogTitle component if your
dialog should have a dialog styled title.
With this new layout, this also means that you can swap out the DialogHeader
for an AppBar for easy full page modals or reusing some of the existing style
of the AppBar and other components.
What if you don't want to have fixed headers and footers but still reuse the
styles from these components? Easy! Just use the DialogContent component as
the only children for the Dialog and use the DialogHeader and DialogFooter
within. The whole dialog will now be scrollable.
import { Button } from "@react-md/button";
import {
Dialog,
DialogHeader,
DialogTitle,
DialogContent,
DialogFooter,
} from "@react-md/dialog";
import { Typography } from "@react-md/typography";
const App = () => (
<Dialog {...props}>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
</DialogHeader>
<Typography>Here is some text that should go in the dialog.</Typography>
<DialogFooter>
<Button id="close-dialog">Close</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);Dialogs now have a new prop: type which allows the dialog to be rendered
full-page, centered, or custom. Just like the previous versions, the
default dialog will be centered within the page and cover the reset of the
content with an overlay. Once the type is set to "full-page", it'll cover the
entire screen instead without any overlay.
The new "custom" type allows you to position the dialog manually with styles
that couldn't be done with the "centered" and "full-page" variants. A great
example of this usage is the new FixedDialog component which can be read
below.
You can also use the forceContainer prop to force wrap the dialog in the
.rmd-dialog-container element which is generally just used for centering
within the page.
This release also introduces a new component: FixedDialog which allows you to
"fix" a dialog to another element within the page (like a popover).
There are some new props to allow additional customization for the overlay
created once a dialog becomes visible. The default behavior is to show an
Overlay when the type is centered or custom, but can be fully controlled
by using the overlay prop.
There is now a way to handle nested dialogs automatically through react-md so
that the overlays do not stack and the escape key will only close the top-most
dialog instead of all of them. To use this new feature, just use the
NestedDialogContext component near the root of your app.
With the new changes behind the scenes for accessibility, the Dialog component
will now be a bit better at re-focusing elements once closed that were in
"temporary" elements (such as Menus). If the dialog became visible due to a menu
item, the dialog will fallback to focusing the menu's button instead.
The dialog was also updated to include the aria-modal flag to help screen
readers know that the dialog should be the main focus. In addition, the dialog
now supports the alertdialog role.