Skip to content

Commit 6106751

Browse files
committed
chore: Updated the v5.0.0 release notes
1 parent a67e871 commit 6106751

File tree

2 files changed

+36
-28
lines changed

2 files changed

+36
-28
lines changed

CHANGELOG.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
77

88
> Check out the [v4 to v5 Migration Guide](https://react-md.dev/migration-guides/v4-to-v5) for more information around updating code to this major version.
99
10-
This release focused on creating a new `Menu` API that should hopefully make menus easier to use along with some other new features.
11-
The main difference is that the `DropdownMenu` no longer accepts a list of `items` that get converted to `<MenuItem>`s behind the scenes. Instead, the `children` of the `DropdownMenu` should be all the `MenuItem` components that should be used inside the menu. The main reason for this change is to make it easier to create reusable components for different actions within your app and no longer needed to disable the React `eslint` rule around missing `key`s.
10+
This release focused on creating a new `Menu` API that should hopefully make menus easier to use along with some other new features. The main difference is that the `DropdownMenu` no longer accepts a list of `items` that get converted to `MenuItem`s behind the scenes. Instead, the `children` of the `DropdownMenu` should be all the `MenuItem` components that should be used inside the menu. The main reason for this change is to make it easier to create reusable components for different actions within your app and no longer needed to disable the React `eslint` rule around missing `key`s.
1211

1312
Another notable change is that nested dropdown menus no longer require the `DropdownMenuItem` component and instead the `DropdownMenu` automatically renders as a `<li>` if it appears as a child of another `Menu` component.
1413

@@ -59,18 +58,21 @@ Menus can now act like a browser's bookmark folder behavior where the user must
5958

6059
If the first-click behavior is undesired, the `MenuBar` also accepts a `hoverTimeout` prop which can be set to `0` to make the menus appear immediately on hover or another time in milliseconds to wait before the "hover mode" behavior should begin.
6160

62-
#### Conditionally Rendering Menus within a `Sheet`
61+
> Check out the [Hoverable Menus demo](https://react-md.dev/packages/menu/demos/#hoverable-menus) for more information.
62+
63+
#### Conditionally Rendering Menus within a Sheet
6364

6465
Since menus aren't always ideal for small viewports, the `DropdownMenu` has been updated to conditionally rendering the `Menu` within a `Sheet` instead of being positioned relative to the `Button` element. This feature is **opt-in** by either:
6566

6667
- Adding `menuConfiguration={{ renderAsSheet: "phone" }}` on the `Configuration` component from `@react-md/layout`
6768
- Wrapping a `DropdownMenu` in the `MenuConfigurationProvider` and adding a prop `renderAsSheet="phone"`
6869
- Directly on a `DropdownMenu` with the `renderAsSheet="phone"` prop
6970

70-
The sheet will default to rendering at the bottom of the viewport and have a max height that should allow the user to close the menu by clicking the overlay behind the sheet. These defaults can be configured with the `sheetPosition` and `sheetVerticalSize` props.
71+
The `Sheet` will default to rendering at the bottom of the viewport and have a max height that should allow the user to close the menu by clicking the overlay behind the sheet. These defaults can be configured with the `sheetPosition` and `sheetVerticalSize` props.
7172

7273
The `Sheet` can also be configured to have an optional header and footer using the `sheetHeader` and `sheetFooter` props. If all else fails, the `DropdownMenu` accepts `sheetProps` which will be passed to the `Sheet` component.
7374

75+
> Check out the [Mobile Action Sheets demo](https://react-md.dev/packages/menu/demos#mobile-action-sheet) for more information.
7476
7577

7678
### Bug Fixes
@@ -91,9 +93,11 @@ The `Sheet` can also be configured to have an optional header and footer using t
9193
* **@react-md/divider:** Update divider styles for non-hr elements ([7ccd0a6](https://github.com/mlaursen/react-md/commit/7ccd0a6cf61bbcbf01b7f92645bf74dda0d2f6bf))
9294
* **@react-md/form:** Update `TextFieldContainer` to optionally fill all space in flex containers ([2c8e68c](https://github.com/mlaursen/react-md/commit/2c8e68ccb004c9a36da773fd8cd3873df7b4184b))
9395
* **@react-md/list:** Created rmd-list-unstyled utility class from the mixin ([6c9b7f4](https://github.com/mlaursen/react-md/commit/6c9b7f45960888790c32840d2228fdb8bf0220ef))
96+
* **@react-md/menu:** Implemented new Menu API ([c27bf55](https://github.com/mlaursen/react-md/commit/c27bf558a950bf2938811a98b2b168efca4055cc))
9497
* **@react-md/menu:** Better floating action button default behavior ([0cdeff7](https://github.com/mlaursen/react-md/commit/0cdeff72ac8c6b2f2808714299774fab0d490222))
9598
* **@react-md/utils:** export focusable query constants ([f9f7955](https://github.com/mlaursen/react-md/commit/f9f7955d7fecb0d96893d2c5db40f753e7f4953f))
9699
* **@react-md/utils:** Implemented new keyboard focus behavior ([77f0d01](https://github.com/mlaursen/react-md/commit/77f0d012e06b6a00f1b7ee64ef91d43683a703b6))
100+
* **@react-md/utils:** Updated the HoverMode API ([ac60bdb](https://github.com/mlaursen/react-md/commit/ac60bdb0cd8dc3ba55c8ea080f4ad3886b579033))
97101

98102

99103
### Documentation
@@ -108,25 +112,23 @@ The `Sheet` can also be configured to have an optional header and footer using t
108112

109113
### Other Internal Changes
110114

111-
* chore!(utils): Remove touch utils and passive events checks ([3597d32](https://github.com/mlaursen/react-md/commit/3597d3289cb4e4f225e978e8134def11ec4ce2bb))
112-
* chore!(utils): useScrollListener no longer accepts an element or options ([74a0274](https://github.com/mlaursen/react-md/commit/74a02744f3b7d5070b3f5c0d7b308842026bec72))
113-
* feat!(menu): Implemented new Menu API ([c27bf55](https://github.com/mlaursen/react-md/commit/c27bf558a950bf2938811a98b2b168efca4055cc))
114-
* feat!(utils): Updated the HoverMode API ([ac60bdb](https://github.com/mlaursen/react-md/commit/ac60bdb0cd8dc3ba55c8ea080f4ad3886b579033))
115-
* chore!(icon): Renamed the download icon to upload ([2752a98](https://github.com/mlaursen/react-md/commit/2752a981fe4021636de66f8576fdd8842a7e90af))
116115
* Removed commitizen since I never use it ([3e738b4](https://github.com/mlaursen/react-md/commit/3e738b4ab14fd7b4aab4f104b0d4120d226b7747))
117116
* **@react-md/form:** Updated `FileInput` snapshots for new icon ([f5e43fe](https://github.com/mlaursen/react-md/commit/f5e43fe4bf7ccc7f0387d66ae183a2190ad294cb))
117+
* **@react-md/icon:** Renamed the download icon to upload ([2752a98](https://github.com/mlaursen/react-md/commit/2752a981fe4021636de66f8576fdd8842a7e90af))
118118
* **@react-md/icon:** Updated docs and examples to use ConfiguredIcons type ([bbfebed](https://github.com/mlaursen/react-md/commit/bbfebedc7902b5f28fca202ba7189b3c1b540f2d))
119119
* **@react-md/menu:** Added tests for the new menu API and fixed a few issues ([7202dd0](https://github.com/mlaursen/react-md/commit/7202dd00a2e734dd1a58d29142b551d8a9411b5a))
120120
* **@react-md/menu:** Fixed `MenuBar` visibility for touch devices ([1288be7](https://github.com/mlaursen/react-md/commit/1288be768766b885c16f370b90291922be334696))
121121
* **@react-md/menu:** Fixed keyboard movement in MenuBars with visible menus ([5b2494a](https://github.com/mlaursen/react-md/commit/5b2494a2b2a34f1a53be97d07b1fc959eba8f6c1))
122122
* **@react-md/utils:** Export `enableScrollLock` and `disableScrollLock` utils ([6a95734](https://github.com/mlaursen/react-md/commit/6a9573474b493fb9bf634063ee19389d1b05c0a9))
123+
* **@react-md/utils:** Remove touch utils and passive events checks ([3597d32](https://github.com/mlaursen/react-md/commit/3597d3289cb4e4f225e978e8134def11ec4ce2bb))
124+
* **@react-md/utils:** useScrollListener no longer accepts an element or options ([74a0274](https://github.com/mlaursen/react-md/commit/74a02744f3b7d5070b3f5c0d7b308842026bec72))
123125
* **examples:** bump `next` from 12.0.7 to 12.0.9 ([04749c6](https://github.com/mlaursen/react-md/commit/04749c6744a5e244e89bb06baf331cc7e7cf9383))
124126
* **examples:** Updated `create-react-app` examples to use v5.0.0 ([f7850b8](https://github.com/mlaursen/react-md/commit/f7850b87919edbdedb04e70702d5f2c4fa1ec71f))
125127
* **examples:** Updated gatsby examples to v4.4.0 ([8a12699](https://github.com/mlaursen/react-md/commit/8a12699a279b8a6db39ff2ed4e6fdea5009a2533))
126128
* **react-md.dev:** Add migration guides for `react-md` major versions ([78b7396](https://github.com/mlaursen/react-md/commit/78b73969916da433f4a64290a13d1888af3b8302))
127129
* **react-md.dev:** Add word-break to headings for markdown pages ([03b1301](https://github.com/mlaursen/react-md/commit/03b13015c5840f7d0964cfe31cb169bd6c4e2208))
128130
* **react-md.dev:** Fixed ids for emulated phones ([10984f5](https://github.com/mlaursen/react-md/commit/10984f55f152642b97c4795e77c4171fbdb13b36))
129-
* **react-md.dev:** Supress hydration for markdown ([8bb4d51](https://github.com/mlaursen/react-md/commit/8bb4d51b954715a600bc28ffa76a43dd8213259a))
131+
* **react-md.dev:** Suppress hydration for markdown ([8bb4d51](https://github.com/mlaursen/react-md/commit/8bb4d51b954715a600bc28ffa76a43dd8213259a))
130132
* **react-md.dev:** Update HoverableMenus example to not use `TextArea` ([5361825](https://github.com/mlaursen/react-md/commit/536182512924b014e5459b8cb81ce7133a1ee5b5))
131133
* **react-md.dev:** Updated a few menu demos ([c43cd31](https://github.com/mlaursen/react-md/commit/c43cd31b8599a360f9811d03ac1c79587504e54e))
132134

packages/documentation/src/blogs/index.md

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@ Date: 01/30/2022
44

55
Summary:
66

7-
> Check out the
8-
> [v4 to v5 Migration Guide](https://react-md.dev/migration-guides/v4-to-v5) for
9-
> more information around updating code to this major version.
7+
> Check out the [v4 to v5 Migration Guide](/migration-guides/v4-to-v5) for more
8+
> information around updating code to this major version.
109
1110
This release focused on creating a new `Menu` API that should hopefully make
1211
menus easier to use along with some other new features. The main difference is
1312
that the `DropdownMenu` no longer accepts a list of `items` that get converted
14-
to `<MenuItem>`s behind the scenes. Instead, the `children` of the
15-
`DropdownMenu` should be all the `MenuItem` components that should be used
16-
inside the menu. The main reason for this change is to make it easier to create
17-
reusable components for different actions within your app and no longer needed
18-
to disable the React `eslint` rule around missing `key`s.
13+
to `MenuItem`s behind the scenes. Instead, the `children` of the `DropdownMenu`
14+
should be all the `MenuItem` components that should be used inside the menu. The
15+
main reason for this change is to make it easier to create reusable components
16+
for different actions within your app and no longer needed to disable the React
17+
`eslint` rule around missing `key`s.
1918

2019
Another notable change is that nested dropdown menus no longer require the
2120
`DropdownMenuItem` component and instead the `DropdownMenu` automatically
@@ -76,7 +75,10 @@ If the first-click behavior is undesired, the `MenuBar` also accepts a
7675
on hover or another time in milliseconds to wait before the "hover mode"
7776
behavior should begin.
7877

79-
#### Conditionally Rendering Menus within a `Sheet`
78+
> Check out the [Hoverable Menus demo](/packages/menu/demos/#hoverable-menus)
79+
> for more information.
80+
81+
#### Conditionally Rendering Menus within a Sheet
8082

8183
Since menus aren't always ideal for small viewports, the `DropdownMenu` has been
8284
updated to conditionally rendering the `Menu` within a `Sheet` instead of being
@@ -89,15 +91,19 @@ either:
8991
`renderAsSheet="phone"`
9092
- Directly on a `DropdownMenu` with the `renderAsSheet="phone"` prop
9193

92-
The sheet will default to rendering at the bottom of the viewport and have a max
93-
height that should allow the user to close the menu by clicking the overlay
94+
The `Sheet` will default to rendering at the bottom of the viewport and have a
95+
max height that should allow the user to close the menu by clicking the overlay
9496
behind the sheet. These defaults can be configured with the `sheetPosition` and
9597
`sheetVerticalSize` props.
9698

9799
The `Sheet` can also be configured to have an optional header and footer using
98100
the `sheetHeader` and `sheetFooter` props. If all else fails, the `DropdownMenu`
99101
accepts `sheetProps` which will be passed to the `Sheet` component.
100102

103+
> Check out the
104+
> [Mobile Action Sheets demo](/packages/menu/demos#mobile-action-sheet) for more
105+
> information.
106+
101107
##### Bug Fixes<!-- no-margin -->
102108

103109
- **@react-md/form:** `TextArea` applies custom height style when
@@ -121,9 +127,11 @@ accepts `sheetProps` which will be passed to the `Sheet` component.
121127
in flex containers (2c8e68c)
122128
- **@react-md/list:** Created rmd-list-unstyled utility class from the mixin
123129
(6c9b7f4)
130+
- **@react-md/menu:** Implemented new Menu API (c27bf55)
124131
- **@react-md/menu:** Better floating action button default behavior (0cdeff7)
125132
- **@react-md/utils:** export focusable query constants (f9f7955)
126133
- **@react-md/utils:** Implemented new keyboard focus behavior (77f0d01)
134+
- **@react-md/utils:** Updated the HoverMode API (ac60bdb)
127135

128136
##### Documentation<!-- no-margin -->
129137

@@ -137,14 +145,9 @@ accepts `sheetProps` which will be passed to the `Sheet` component.
137145

138146
##### Other Internal Changes<!-- no-margin -->
139147

140-
- chore!(utils): Remove touch utils and passive events checks (3597d32)
141-
- chore!(utils): useScrollListener no longer accepts an element or options
142-
(74a0274)
143-
- feat!(menu): Implemented new Menu API (c27bf55)
144-
- feat!(utils): Updated the HoverMode API (ac60bdb)
145-
- chore!(icon): Renamed the download icon to upload (2752a98)
146148
- Removed commitizen since I never use it (3e738b4)
147149
- **@react-md/form:** Updated `FileInput` snapshots for new icon (f5e43fe)
150+
- **@react-md/icon:** Renamed the download icon to upload (2752a98)
148151
- **@react-md/icon:** Updated docs and examples to use ConfiguredIcons type
149152
(bbfebed)
150153
- **@react-md/menu:** Added tests for the new menu API and fixed a few issues
@@ -154,13 +157,16 @@ accepts `sheetProps` which will be passed to the `Sheet` component.
154157
(5b2494a)
155158
- **@react-md/utils:** Export `enableScrollLock` and `disableScrollLock` utils
156159
(6a95734)
160+
- **@react-md/utils:** Remove touch utils and passive events checks (3597d32)
161+
- **@react-md/utils:** `useScrollListener` no longer accepts an element or
162+
options (74a0274)
157163
- **examples:** bump `next` from 12.0.7 to 12.0.9 (04749c6)
158164
- **examples:** Updated `create-react-app` examples to use v5.0.0 (f7850b8)
159165
- **examples:** Updated gatsby examples to v4.4.0 (8a12699)
160166
- **react-md.dev:** Add migration guides for `react-md` major versions (78b7396)
161167
- **react-md.dev:** Add word-break to headings for markdown pages (03b1301)
162168
- **react-md.dev:** Fixed ids for emulated phones (10984f5)
163-
- **react-md.dev:** Supress hydration for markdown (8bb4d51)
169+
- **react-md.dev:** Suppress hydration for markdown (8bb4d51)
164170
- **react-md.dev:** Update HoverableMenus example to not use `TextArea`
165171
(5361825)
166172
- **react-md.dev:** Updated a few menu demos (c43cd31)

0 commit comments

Comments
 (0)