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/menu
Note: Version bump only for package @react-md/menu
List
(2b5fb23)MenuBar
visibility for touch devices
(1288be7)ArrowUp
or ArrowDown
keys.DropdownMenu
component no longer accepts a list of items
and instead
the children
should be the MenuItem
components.DropdownMenu
component no longer supports the menuRenderer
and
itemRenderer
props. Instead, there is built-in support for conditionally
rendering as a Sheet
component using the renderAsSheet
prop.DropdownMenu
component now requires a parent AppSizeListener
because
of the conditional Sheet
rendering functionality. This might require
updating your tests to either use the Configuration
component from
@react-md/layout
(recommended) or adding the AppSizeListener
to tests that
include DropdownMenu
s.DropdownMenuItem
component is no longer required for nested dropdown
menus and is an "internal" component instead that shouldn't really be used.MenuItemSeparator
now renders as an <li>
instead of an <hr>
or
<div>
.useContextMenu
now returns an object instead of an ordered list.MenuItem
components requires the
<MenuKeyboardFocusProvider>
to be mounted as a parent component which might
affect tests. This will not break anything if you are using the DropdownMenu
or Menu
components.import type
when possible
(ba96bb6)DropdownMenu
and Menu
portal by default
(98a6a9f),
closes #1264eslint
(8111cd3)DropdownMenu
and Menu
components portal by
default. This should really only affect snapshot testsprop-types
package.yarn format
to include new files
(48d3d7f)Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
prettier
after upgrading to v2.3.0
(3ce236a)typedoc
(cf54c35)Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
LabelRequiredForA11y
type definition
(b7aa4fa)Note: Version bump only for package @react-md/menu
LabelRequiredForA11y
type definition
(b7aa4fa)Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
sideEffects
field to package.json
(31820b9)sideEffects
formatting
(78a7b6b)No changes.
The menu package was completely re-written to fix all the accessibility issues and keyboard focus behavior.
The main exports starting in v2:
DropdownMenu
MenuItem
MenuItemLink
MenuItemSeparator
DropdownMenuItem
defaultMenuRenderer
defaultMenuItemRenderer
useContextMenu
useContextMenu
hookmenuItem
props and instead render the MenuItem
component
instead within the DropdownMenu
Layover
componentMenuButton
is no longer a combination of a Button
and a Menu
and
instead is an accessibility helper component$rmd-menu-background-color: rmd-theme-var(surface) !default
- The background
color to use in menus$rmd-menu-color: rmd-theme-var(on-surface) !default
- The text color to use
in menus$rmd-menu-elevation: 8 !default
- The elevation/box shadow to use for the
menu@function rmd-menu-theme
- gets one of the theme values and validates that
the theme name is valid@function rmd-menu-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-menu-theme
- applies one of the theme values to a css property as
a css variable@mixin rmd-menu-theme-update-var
- updates one of the theme values as a css
variable$md-menu-z-index
to $rmd-menu-z-index
and changed the default
value from null
(100
from Layover
) to 11
$md-menu-min-width
to $rmd-menu-min-width
and changed the default
value from 112px
to 7rem
$md-menu-include-cascading
, $md-menu-include-cascading-styles
,
$md-menu-cascading-font-size
, $md-menu-cascading-padding
,
$md-cascading-height
and $md-menu-cascading-list-padding
since the
cascading/nested menus was completely reworked and no longer needs additional
stylesThe accessibility props were moved from the surrounding <div>
and instead
applied correctly to the MenuButton
instead. This also changed the
aria-haspopup
attribute to be "menu"
instead of "true"
and removed the
aria-controls
since it doesn't really work as expected.
Additional keyboard behavior was also added to both the MenuButton
and Menu
components. When the MenuButton
is focused, the ArrowUp
key will open the
menu and focus the last MenuItem
while the ArrowDown
key will open the menu
and focus the first MenuItem
. The user can now also type while the menu is
open to focus specific items that start with the same letters.
The Menu
now also requires the aria-label
or aria-labelledby
props to help
screen readers out as well as applying role="menu"
and
aria-orentation="vertical"
(or "horizontal"
).