react-md
react-md - Menu - Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

3.1.0 (2021-09-10)

Bug Fixes

  • typescript: updated all array types to be readonly (8f71bcb)

Other Internal Changes

  • ran yarn format to include new files (48d3d7f)

3.0.1 (2021-08-15)

Bug Fixes

  • Updated peerDependencies to fix yarn berry peer requirements (250efcd), closes #1224

3.0.0 (2021-08-13)

Note: Version bump only for package @react-md/menu

2.9.1 (2021-07-27)

Other Internal Changes

  • install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Note: Version bump only for package @react-md/menu

2.8.5 (2021-07-03)

Note: Version bump only for package @react-md/menu

2.8.4 (2021-06-10)

Other Internal Changes

  • ran prettier after upgrading to v2.3.0 (3ce236a)

2.8.3 (2021-05-18)

Documentation

  • react-md.dev: updated tsdoc to work with typedoc (cf54c35)

2.8.2 (2021-04-23)

Note: Version bump only for package @react-md/menu

2.8.0 (2021-04-22)

Other Internal Changes

  • tsconfig: separate tsconfig by package instead of a single root (b278230)

2.7.1 (2021-03-23)

Other Internal Changes

  • ts: stopped using FC type (c5daa47)

2.7.0 (2021-02-28)

Bug Fixes

  • @react-md/menu: fixed menu color when dark theme elevation is enabled (52c752d), closes #1075

Documentation

  • tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
  • tsdoc: fixed some tsdoc annotations and styling (0449b86)

Other Internal Changes

  • updated test coverage to not include conditional component PropTypes (24e5df1)

2.6.0 (2021-02-13)

Note: Version bump only for package @react-md/menu

2.5.5 (2021-01-30)

Note: Version bump only for package @react-md/menu

2.5.4 (2021-01-27)

Note: Version bump only for package @react-md/menu

2.5.1 (2020-12-16)

Note: Version bump only for package @react-md/menu

2.5.0 (2020-12-15)

Note: Version bump only for package @react-md/menu

2.4.3 (2020-11-14)

Note: Version bump only for package @react-md/menu

2.4.2 (2020-10-23)

Bug Fixes

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/menu

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/menu

2.3.0 (2020-09-10)

Features

  • a11y: improved LabelRequiredForA11y type definition (b7aa4fa)

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/menu

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/menu

2.2.0 (2020-08-11)

Note: Version bump only for package @react-md/menu

2.1.2 (2020-08-01)

Note: Version bump only for package @react-md/menu

2.1.1 (2020-07-21)

Note: Version bump only for package @react-md/menu

2.1.0 (2020-07-12)

Features

  • Improved Dark Mode using Raising Elevation (547877c), closes #860

2.0.2 (2020-06-30)

Bug Fixes

  • LICENSE: Removed the time range from license since it was incorrect (50c9021)
  • Added sideEffects field to package.json (31820b9)
  • sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

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

New Features / Behavior

  • the menu will now automatically position itself within the viewport with fixed positioning
  • implemented custom context menus with a new useContextMenu hook
  • nested dropdown menus are fully supported along with keyboard movement and open/close behavior
  • no longer use the menuItem props and instead render the MenuItem component instead within the DropdownMenu
  • no longer uses the weird Layover component

Breaking Changes

  • the visibility for the menus can no longer be controlled externally. this functionality will come back in a later release
  • the menu no longer supports relative positioning
  • the MenuButton is no longer a combination of a Button and a Menu and instead is an accessibility helper component
New SCSS Variables, Functions, and Mixins
  • $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
Renamed SCSS Variables, Functions, and Mixins
  • renamed $md-menu-z-index to $rmd-menu-z-index and changed the default value from null (100 from Layover) to 11
  • renamed $md-menu-min-width to $rmd-menu-min-width and changed the default value from 112px to 7rem
Removed SCSS Variables and Mixins
  • removed $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 styles
  • removed all other SCSS variables relating to height and width
Accessibility Fixes

The 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").