Skip to main content
react-md
react-md - Layout - Changelog

Change Log

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

5.1.4 (2022-06-16)

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

5.1.3 (2022-05-07)

Bug Fixes

  • @react-md/layout: fix spelling of DEFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES (2d20a2e)

Documentation

  • fix typos throughout codebase (725d1a2)

Other Internal Changes

  • typos: fix additional typos throughout repo (ef20132)

5.1.2 (2022-04-02)

Other Internal Changes

  • @react-md/layout: Update snapshots after updating tree component (ec84800)

5.1.1 (2022-04-01)

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

5.1.0 (2022-03-18)

Other Internal Changes

  • run lint-scripts --fix for consistent-type-imports (42d839d)

5.0.0 (2022-01-31)

Other Internal Changes

  • feat!(menu): Implemented new Menu API (c27bf55)

Breaking Changes

  • Menu buttons will no longer open by pressing the ArrowUp or ArrowDown keys.
  • The DropdownMenu component no longer accepts a list of items and instead the children should be the MenuItem components.
  • The 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.
  • The 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 DropdownMenus.
  • The DropdownMenuItem component is no longer required for nested dropdown menus and is an "internal" component instead that shouldn't really be used.
  • The MenuItemSeparator now renders as an <li> instead of an <hr> or <div>.
  • The useContextMenu now returns an object instead of an ordered list.
  • Using any of the 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.

4.0.3 (2021-12-31)

Other Internal Changes

  • Update tests to use jest.mocked (4bb25fb)
  • Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.2 (2021-11-30)

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

4.0.1 (2021-11-27)

Bug Fixes

  • @react-md/layout: Added fixes required for Concurrent Rendering (c0b29a8)

Other Internal Changes

  • Updated imports to use import type when possible (ba96bb6)

4.0.0 (2021-11-24)

Features

  • Update to use new JSX Transform and latest eslint (8111cd3)
  • @react-md/transition: No longer use findDOMNode for transitions (cb952da)
  • @react-md/typography: Renamed Text to Typography (30cf056)

Other Internal Changes

  • always skip lib check (229cef1)
  • Updated remaining docs and tests for react-router-dom v6 (e012ef9)
  • react-md: Remove prop-types package and usage (2637a6f)

Breaking Changes

  • Minimum React version is now 16.14 instead of 16.8
  • @react-md/typography: The Text component has been renamed to Typography to help with auto-imports conflicting with the Text element that exists in lib.d.ts
  • react-md: There will no longer be run-time prop validation with the prop-types package.

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)

Other Internal Changes

  • @react-md/tooltip: removed TooltipHoverModeConfig component (664ec30)
  • @react-md/utils: removed InteractionModeListener alias (216c8ef)

Breaking Changes

  • @react-md/utils: Removed InteractionModeListener since it was an alias for UserInteractionModeListener
  • @react-md/tooltip: Removed TooltipHoverModeConfig component

2.9.1 (2021-07-27)

Bug Fixes

  • @react-md/layout: Do not unmount children when swapping to non-fixed appbar mini layouts (64103c8), closes #1207

Other Internal Changes

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

2.9.0 (2021-07-18)

Bug Fixes

  • @react-md/layout: useLayoutNavigation possible perf fix (3d65e4e)

Other Internal Changes

  • @react-md/layout: Added additional test coverage (7c123ef)

2.8.5 (2021-07-03)

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

2.8.4 (2021-06-10)

Other Internal Changes

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

2.8.3 (2021-05-18)

Bug Fixes

  • @react-md/layout: Added fixedAppBar flag into the useLayoutConfig (14e6587)
  • @react-md/layout: Mini Layouts Align Icons with Hamburger Menu in Dense Mode (abbe9a9)
  • @react-md/layout: non-fixed AppBar mini layouts (84313fc), closes #1101
  • @react-md/layout: Offset for temporary mini layouts (86e75bf)

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/layout

2.8.1 (2021-04-23)

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

2.8.0 (2021-04-22)

Other Internal Changes

  • @react-md/layout: Updated Configuration to use new HoverModeProvider (357f2bf)
  • 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)

Features

  • @react-md/layout: added support for mini layouts (36b3cbc)

Documentation

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

Other Internal Changes

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

2.6.0 (2021-02-13)

Bug Fixes

  • @react-md/layout: floating layout has correct color in dark theme (7fa6b0c)
  • @react-md/layout: toggleable layout title now aligns with persistent layouts (8b8efb2)

Features

  • @react-md/layout: added prop to control toggleable layouts default visibility (6e4a06d), closes #1066

Other Internal Changes

  • @react-md/utils: refactored UserInteractionMode hooks and components (af72791)

2.5.5 (2021-01-30)

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

2.5.4 (2021-01-27)

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

2.5.3 (2021-01-12)

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

2.5.2 (2021-01-12)

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

2.5.1 (2020-12-16)

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

2.5.0 (2020-12-15)

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

2.4.3 (2020-11-14)

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

2.4.2 (2020-10-23)

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

2.4.1 (2020-10-17)

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

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

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

2.3.0 (2020-09-10)

Features

2.2.2 (2020-09-02)

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

2.2.1 (2020-09-02)

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

2.2.0 (2020-08-11)

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

2.1.2 (2020-08-01)

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

2.1.1 (2020-07-21)

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

2.1.0 (2020-07-12)

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

2.0.4 (2020-07-10)

Bug Fixes

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

This package is kind of a replacement for the NavigationDrawer component that also now has a top-level Configuration provider for react-md.

New Behavior and Features

  • every part of the layout is now completely configurable by exporting multiple layout components along with a <name>Props configuration object
  • better built-in support for rendering navigation trees with the new useLayoutNavigation hook and LayoutTree component
  • when the persistent navigation panel toggles in and out of view, the title and main content will now correctly use the same animation timing as the panel
  • the layout will no longer animate while switching layout types due to resizing and instead will update instantly
  • a new useLayoutConfig hook that allows controlled the layout for additional customization
  • new exported utils for determining what the current layout type is being rendered as
  • keyboard focus behavior is now correctly maintained while toggling the temporary and persistent layout types
  • all the icon buttons now have a default aria-label for toggling the temporary and persistent layouts
  • the <main> element will now gain a focus box-shadow while being keyboard focused
  • the <main> element will only gain a tabIndex={-1} while in keyboard mode so that clicking anywhere in the <main> content will not re-focus the main element. This is super nice since it allows you to click somewhere within the <main> element and press tab to focus the closest focusable element

Breaking Changes

Everything is a really a breaking change since the components were re-written and the API has changed, but here are a few notable points:

  • this release does not have a mini variant for the temporary and persistent layout types. The mini variant will be added in a following release once I figure out a better way to handle these types along with keyboard movement
  • the Layout has no functionality for determining your current app size since it was moved to the @react-md/utils package as AppSizeListener and useAppSize
  • removed the static getCurrentMedia function from the component
  • removed the DrawerType and DrawerTypes static enums from the component
New SCSS Variables, Functions, and Mixins
  • $rmd-layout-enter-duration: $rmd-sheet-enter-duration !default - the duration when the toggleable navigation panel comes into view
  • $rmd-layout-leave-duration: $rmd-sheet-leave-duration !default - the duration when the toggleable navigation panel leaves the view
  • $rmd-layout-main-focus-shadow: $rmd-states-focus-shadow !default - the box-shadow to use when the <main> element has been keyboard focused
  • $rmd-layout-main-focus-z-index: 999 !default - the z-index for the <main> element when it has been keyboard focused
  • $rmd-layout-navigation-z-index: $rmd-dialog-z-index !default - the z-index for the navigation pane
  • $rmd-layout-navigation-width: $rmd-sheet-static-width !default - the width to use for the desktop persistent navigation panel
  • $rmd-layout-mini-navigation-width: 4.5rem !default - the width to use for the mini navigation tree. Note: currently not implemented
  • @function rmd-layout-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-layout-theme - applies one of the theme values to a css property as a css variable
  • @mixin rmd-layout-theme-update-var - updates one of the theme values as a css variable
Removed SCSS Variables Placeholders, and Mixins
  • removed $md-navigation-drawer-enforce-height since it is no longer used
  • removed $md-navigation-drawer-use-view-height since it lead to a lot of problems
  • removed $md-navigation-drawer-include-cross-fade, $md-cross-fade-transition-time, and $md-cross-fade-distance since this is now part of the @react-md/transition package
  • removed $md-navigation-drawer-title-offset since this is automatically calculated with CSS variables