Releases: mlaursen/react-md
v4.0.0
This release focused on updating the @react-md/transition
package to no longer log errors in React.StrictMode
because react-ransition-group
was using ReactDOM.findDOMNode
to handle transitions. All react-md
packages will no longer use react-transition-group
since all that functionality has been built into @react-md/transition
with a slightly different API.
This release has also included my first attempt at automating upgrading to new major releases by introducing a new @react-md/codemod package that is similar to the react-codemod package. You can automate some of this release by running:
npx @react-md/codemod v3-to-v4/preset
Since I am still learning how to use jscodeshift, it will not be able to migrate everything but should still help with most changes.
You can check out the v4.0.0 and @react-md/codemod PRs for some additional information around these changes.
Bug Fixes
- @react-md/menu:
DropdownMenu
andMenu
portal by default (98a6a9f), closes #1264 - @react-md/tooltip: cancel timer when element is clicked (5416554)
- sass: Do not use legacy global functions (6159e16)
Features
- Update to use new JSX Transform and latest
eslint
(8111cd3) - @react-md/portal:
ConditionalPortal
supports ReactNode children (c83d578) - @react-md/transition: No longer use findDOMNode for transitions (cb952da)
- @react-md/typography: Renamed Text to
Typography
(30cf056) - @react-md/utils: Export additional positioning types (b50a04c)
- codemod: Created a new @react-md/codemod package to help with new releases (41c1fa6)
Documentation
- Hackily fix codesandbox.io not using
sass
resolutions in package.json (db22cde), closes #1261 - @react-md/form: Updated hook overrides so documentation appears correctly (436fbff)
- react-md.dev: Enable rust compiler by removing custom babelrc (796efd0)
- react-md.dev: Fallback code language to markup instead of none (0efaf9b)
- react-md.dev: Fix alert sandboxes (8f19297)
- react-md.dev: Removed SwipeableTabs demo since it didn't really work (2d79f93)
- react-md.dev: Separate Code and CodeBlock into separate folders (4c492b3)
- react-md.dev: Try to allow custom Code/CodeBlock in sandboxes (5d494bf)
- react-md.dev: update code components to use css modules (9bdf6ba)
- react-md.dev: Use
react-marked-renderer
for markdown stuffs (93ebaa4)
Other Internal Changes
- always skip lib check (229cef1)
- Re-ran
prettier
(9632d82) - update workflows to include node 16 (f756b92)
- updated branches for build, lint, and test (b5eeae9)
- Updated remaining docs and tests for
react-router-dom
v6 (e012ef9) - @react-md/dev-utils: Added error message for combining styles (aa5ecfd)
- @react-md/dev-utils: match quotation marks for
sass
files (98ffe40) - @react-md/dev-utils: Update
sassdoc
to not through uncaught exceptions (8bdf532) - @react-md/dev-utils: Update release for new major versions and legacy docs (86c5c02)
- @react-md/format: ran
prettier
after upgrading to v2.4.0 (06110af) - codemod: Added comment about ignoring CodeQL alert (631d56c)
- examples:
enable
strict mode by default for nextjs-typescript (83e4c44) - examples: added lint command to nextjs examples (788a8b8)
- examples: bump nextjs examples from v11.1.2 to v12.0.2 (be45277)
- examples: fixed prefers-color-scheme in examples (f799d3a)
- examples: Updated
create-react-app
example to usereact-router-dom
v6 (3c4d1ea) - examples: Updated create-react-app-typescript example to use
react-router-dom
v6 (ae469ef) - examples: Updated examples to no longer import React (c0b8cb5)
- react-md: Remove prop-types package and usage (2637a6f)
- react-md.dev: Enable React.StrictMode (219937e)
- react-md.dev: Updated some transition documentation (44bfa20)
- stylelint: Updated to use
stylelint
(22d1598) - test: Update coverage for watch mode (74cee51)
- typescript: Stopped using deprecated HTMLTable(Data|Header)CellElement (23ba342)
Breaking Changes
- Minimum React version is now 16.14 instead of 16.8
- @react-md/menu: The
DropdownMenu
andMenu
components portal by
default. This should really only affect snapshot tests - @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
theprop-types
package.
Library Size Changes
yarn dev-utils libsize
The gzipped UMD bundle sizes are:
- dist/umd/react-md.production.min.js 85.92 kB (- 83 B)
- dist/umd/react-md-with-font-icons.production.min.js 111.04 kB (+ 1 B)
- dist/umd/react-md-with-svg-icons.production.min.js 178.53 kB (+ 170 B)
The min and max gzipped CSS bundle sizes are:
- themes/react-md.grey-red-700-light.min.css 18.01 kB (+ 38 B)
- themes/react-md.lime-teal-200-dark.min.css 18.08 kB (+ 38 B)
v3.1.1
Bug Fixes
- typescript: added missing readonly prefix to
TabsManager
tabs prop (45d9458)
Library Size Changes
yarn dev-utils libsize
The gzipped UMD bundle sizes are:
- dist/umd/react-md.production.min.js 86.75 KB
- dist/umd/react-md-with-font-icons.production.min.js 111.03 KB
- dist/umd/react-md-with-svg-icons.production.min.js 176.83 KB
The min and max gzipped CSS bundle sizes are:
- themes/react-md.grey-red-700-light.min.css 17.63 KB
- themes/react-md.lime-teal-200-dark.min.css 17.7 KB
v3.1.0
Bug Fixes
- @react-md/dialog:
DialogFooter
align prop applies correct classes (644971d) - @react-md/form:
TooManyFilesError
is only used if all the other validation has passed (6ed3f54) - @react-md/form: ensure file names end with a period for
useFileUpload
extensions (9238140) - @react-md/form: prevent infinite rerenders when calling useFileUpload's reset in useEffect (b2875b1)
- @react-md/utils:
useDropzone
fix around onDragLeave behavior (fdff9f2) - typescript: updated all array types to be readonly (8f71bcb)
Features
- @react-md/form: add
isValidFileName
option touseFileUpload
(dbd0375) - @react-md/typography: override default typography without globals (ce89374), closes #1239
Documentation
- react-md.dev: updated
sassdoc
for new module system (4746d26) - react-md.dev: updated SortableColumns example to import SortOrder type (b629e3e)
Other Internal Changes
- ran
yarn format
to include new files (48d3d7f) - Simplifying format and covering json and yml files (#1227) (045ba5e)
- @react-md/dev-utils: fixed spelling of gzipped (baad174)
- examples: updated nextjs examples to latest version of
next
(b50d745) - react-md.dev: added
sassdoc
hot-reloading (9d58e09) - react-md.dev: updated
sassdoc
examples to be linkable (9ed096e) - react-md.dev: Updated fonts for latest nextjs build optimizations (ca9ecbd)
- typescript: support [email protected] (5a9dd72)
Library Size Changes
yarn dev-utils libsize
The gzipped UMD bundle sizes are:
- dist/umd/react-md.production.min.js 86.75 KB (+ 34 B)
- dist/umd/react-md-with-font-icons.production.min.js 111.03 KB (+ 35 B)
- dist/umd/react-md-with-svg-icons.production.min.js 176.83 KB (+ 37 B)
The min and max gzipped CSS bundle sizes are:
- themes/react-md.grey-red-700-light.min.css 17.63 KB
- themes/react-md.lime-teal-200-dark.min.css 17.7 KB
v3.0.1
Bug Fixes
Other Internal Changes
- Fixed link to v3.0.0 PR (ff221cc)
Library Size Changes
yarn dev-utils libsize
The gizipped UMD bundle sizes are:
- dist/umd/react-md.production.min.js 86.41 KB
- dist/umd/react-md-with-font-icons.production.min.js 110.68 KB
- dist/umd/react-md-with-svg-icons.production.min.js 176.46 KB
The min and max gzipped CSS bundle sizes are:
- themes/react-md.grey-red-700-light.min.css 17.63 KB
- themes/react-md.lime-teal-200-dark.min.css 17.7 KB
v3.0.0
This release should be relatively simple for most consumers of this library since the main breaking change is dropping support for node-sass
and requiring sass
since node sass has been deprecated as well as removing deprecated variables, hooks, and components. Most users should be able to run the following commands to upgrade to v3.0.0:
npm update react-md
npm uninstall node-sass
npm install sass
or with yarn
yarn add react-md
yarn remove node-sass
yarn add sass
In addition, there is now partial support for the new Sass module system with the react-md
package which also simplifies the import usage and has a slight build performance improvement for large projects. To start using the new module system, update all the @import
statements as shown below:
-@import '~@react-md/theme/dist/mixins';
-@import '~@react-md/utils/dist/mixins';
-// other react-md imports
+@use 'react-md' as *;
// No other changes required!
If you override variables within react-md
:
-@import '~@react-md/theme/dist/color-palette';
-$rmd-theme-light: false;
-$rmd-theme-primary: $rmd-purple-500;
-$rmd-theme-secondary: $rmd-pink-a-200;
-
-@import '~react-md/dist/styles';
+@use '@react-md/theme/dist/color-palette' as color;
+@use 'react-md' as * with (
+ $rmd-theme-light: false,
+ $rmd-theme-primary: color.$rmd-theme-purple-500,
+ $rmd-theme-secondary: color.$rmd-theme-pink-a-200,
+);
+
+@include react-md-utils;
Check out the updated customizing your theme documentation, #1214, or 958f34f for more in-depth examples.
BREAKING CHANGES
- @react-md/theme:
$rmd-theme-dark-elevation
now defaults totrue
instead offalse
- sass:
node-sass
is no longer supported and users must switch tosass
- @react-md/utils: Removed
InteractionModeListener
since it was an alias forUserInteractionModeListener
- @react-md/utils: Removed
ResizeObserver
component anduseResizeObserverV1
implementation - @react-md/tooltip: Removed
TooltipHoverModeConfig
component - @react-md/card: Removed deprecated
$rmd-card-dark-elevation-bordered-background-color
variable - @react-md/tooltip: Removed deprecated props from
Tooltipped
component - @react-md/form: The second argument for
useIndeterminateChecked
is now an object of options
Bug Fixes
- sass: drop node-sass in favor of
sass
since it's deprecated (126fb5a) - sass: use math.div instead of division since it's deprecated (d8c3f12)
Features
- @react-md/theme: $rmd-theme-dark-elevation
defaults
to true (b371337) - react-md: Simplify
sass
usage with:@use 'react-md';
(787bfb5)
Documentation
- react-md.dev: removed documentation around pre-compiling styles (29b5d74)
- react-md.dev: Update Sass Documentation for
@use
(68e8c6b) - react-md.dev: Updated sandboxes for new Sass module system (095ae97)
Other Internal Changes
- Added additional tests to bump test coverage (4d0371c)
- @react-md/card: removed deprecated $rmd-card-dark-elevation-bordered-background-color variable (01c9350)
- @react-md/dev-utils: Added simple sass-migrator command (a8e8df3)
- @react-md/dev-utils: autoConfirm flag passed to initBlog (dec09b8)
- @react-md/dev-utils: Combine all scss files into
react-md/dist/_everything.scss
(c7177e6) - @react-md/dev-utils: Update release script to hopefully work with prereleases (e0ef881)
- @react-md/dev-utils: updated
sassdoc
and variables to use everything.scss (a0f0699) - @react-md/dev-utils: updated variables command to work with
sass
(5376be1) - @react-md/form: removed deprecated implementation in
useIndeterminateChecked
(6b7871f) - @react-md/tooltip: removed deprecated props from
Tooltipped
component (6dca9b1) - @react-md/tooltip: removed TooltipHoverModeConfig component (664ec30)
- @react-md/utils: remove ResizeObserver component and useResizeObserverV1 implementation (6a6b109)
- @react-md/utils: removed InteractionModeListener alias (216c8ef)
- examples: updated examples to latest dependencies (f2eb07a)
- react-md.dev: Each package includes a link to
typedoc
API in navigation tree (c388ba6) - react-md.dev: ran migrator for deprecated division (98d2c58)
- react-md.dev: removed tilde from imports (6081e14)
- react-md.dev: update all scss files for
@use
imports (958f34f) - react-md.dev: update all styles to use react-md/dist/everything (2da5033)
- react-md.dev: Update links for previous versions (2d0a0e6)
- react-md.dev: updated docs for new rmd-theme-dark-elevation
defaults
(b2269ff) - react-md.dev: updated examples to work with
sass
instead of node-sass (d8ddf51) - react-md.dev: updated sandboxes to use root
react-md
(c0f25f7)
Library Size Changes
yarn dev-utils libsize
The gizipped UMD bundle sizes are:
- dist/umd/react-md.production.min.js 86.41 KB (- 57 B)
- dist/umd/react-md-with-font-icons.production.min.js 110.68 KB (- 58 B)
- dist/umd/react-md-with-svg-icons.production.min.js 176.46 KB (- 58 B)
The min and max gzipped CSS bundle sizes are:
- themes/react-md.grey-red-700-light.min.css 17.63 KB (+ 6 B)
- themes/react-md.lime-teal-200-dark.min.css 17.7 KB (+ 7 B)
v3.0.0-alpha.0
Breaking Changes
- @react-md/theme:
$rmd-theme-dark-elevation
now defaults totrue
instead offalse
- sass:
node-sass
is no longer supported and users must switch tosass
- @react-md/utils: Removed
InteractionModeListener
since it was an alias forUserInteractionModeListener
- @react-md/utils: Removed
ResizeObserver
component anduseResizeObserverV1
implementation - @react-md/tooltip: Removed
TooltipHoverModeConfig
component - @react-md/card: Removed deprecated
$rmd-card-dark-elevation-bordered-background-color
variable - @react-md/tooltip: Removed deprecated props from
Tooltipped
component - @react-md/form: The second argument for
useIndeterminateChecked
is now an object of options
Bug Fixes
- sass: drop
node-sass
in favor ofsass
since it's deprecated (1f2a1b0) - sass: use
math.div
instead of division since it's deprecated (f88aca2)
Features
- @react-md/theme:
$rmd-theme-dark-elevation
defaults totrue
(709d34c) - react-md: Simplify
sass
usage with:@use 'react-md';
(8603d7f)
Other Internal Changes
- Added additional tests to bump test coverage (e78f668)
- @react-md/card: removed deprecated $rmd-card-dark-elevation-bordered-background-color variable (a99df44)
- @react-md/dev-utils: Added simple sass-migrator command (68cd615)
- @react-md/dev-utils: autoConfirm flag passed to initBlog (dec09b8)
- @react-md/dev-utils: Combine all scss files into
react-md/dist/_everything.scss
(1ec6b3e) - @react-md/dev-utils: Examples correctly override variables (67ac5fb)
- @react-md/dev-utils: fixed
eslint
error (ec30900) - @react-md/dev-utils: Update release script to hopefully work with prereleases (07d837e)
- @react-md/dev-utils: updated
sassdoc
and variables to use everything.scss (4fbb9c8) - @react-md/dev-utils: updated variables command to work with
sass
(d95f55a) - @react-md/form: removed deprecated implementation in
useIndeterminateChecked
(5853b13) - @react-md/tooltip: removed deprecated props from
Tooltipped
component (9083171) - @react-md/tooltip: removed TooltipHoverModeConfig component (2ee53da)
- @react-md/typography: fixed invalid font-family at compile time (3ef77a1)
- @react-md/utils: remove ResizeObserver component and useResizeObserverV1 implementation (ce55dbc)
- @react-md/utils: removed InteractionModeListener alias (5528589)
- react-md.dev: ignore documentation for
sass-lint
(02ebd43) - react-md.dev: Each package includes a link to
typedoc
API in navigation tree (c388ba6) - react-md.dev: ran migrator for deprecated division (acb90a7)
- react-md.dev: removed tilde from imports (f0e5dee)
- react-md.dev: update all scss files for
@use
imports (3b66cfa) - react-md.dev: update all styles to use react-md/dist/everything (d7c7bbf)
- react-md.dev: updated creating-a-new-app (d9b6819)
- react-md.dev: updated docs for new rmd-theme-dark-elevation
defaults
(45ffc9d) - react-md.dev: updated examples to work with
sass
instead of node-sass (b2857b0) - react-md.dev: updated sandboxes to use root
react-md
(78a81a5)
v2.9.1
Bug Fixes
- @react-md/layout: Do not unmount children when swapping to non-fixed appbar mini layouts (64103c8), closes #1207
- @react-md/utils:
useMediaQuery
uses addEventListener/removeEventListener (b889a9e)
Other Internal Changes
- fixed sass-lint error (58f614b)
- install: slighly reduce install size by excluding tests in publish (9d01a44)
- react-md.dev: fix links to form demos in blog (b1626b5)
Library Size Changes
yarn dev-utils libsize
The gizipped UMD bundle sizes are:
- dist/umd/react-md.production.min.js 86.98 KB (+ 6 B)
- dist/umd/react-md-with-font-icons.production.min.js 111.26 KB (+ 5 B)
- dist/umd/react-md-with-svg-icons.production.min.js 177.04 KB (+ 5 B)
The min and max gzipped CSS bundle sizes are:
- themes/react-md.grey-red-700-light.min.css 17.57 KB
- themes/react-md.lime-teal-200-dark.min.css 17.63 KB
v2.9.0
This release is focused around the FileInput
component in the @react-md/form
package and implementing a useFileUpload
hook to handle uploading/previewing files in the browser. However, there is a notable change in this release for the form documentation since the demos have been split into the following pages:
- Text Field Demos
- Select Field Demos
- Selection Control Demos
- File Input Demos
- Slider Demos
- Validation Demos
Bug Fixes
- @react-md/form:
FileInput
correctly center the icon when children aren't provided (3a6ab33) - @react-md/layout:
useLayoutNavigation
possible perf fix (3d65e4e)
Features
- @react-md/form:
FileInput
automatically swaps button type to text if children exist (e5585e1) - @react-md/form:
FormMessageCounter
component added to public API (1508812) - @react-md/form: Added a
useFileUpload
hook to upload files to the browser (efb3f2f), closes #1159 - @react-md/utils: added
useDropzone
hook (bc07a1f)
Other Internal Changes
- Added CodeQL Workflow for code analysis (9b4a279)
- @react-md/form: Added tests for
useFileUpload
(49ce4d9) - @react-md/layout: Added additional test coverage (7c123ef)
- react-md.dev: Added an endpoint for uploading files that acts like a /dev/null (9663ae8)
- react-md.dev: Added examples for
useFileUpload
(8f9002e) - react-md.dev: fix
eslint
error after updatingprettier
(75a9b0f) - react-md.dev: Fixed rightAddon for Customizing
Select
Options Demo (367cc0d) - react-md.dev: Split form demos into separate pages (8594930)
- react-md.dev: Use temporary layout on desktop in dev mode to get more screen space (53b20c4)
Library Size Changes
yarn dev-utils libsize
The gizipped UMD bundle sizes are:
- dist/umd/react-md.production.min.js 86.92 KB (+ 268 B)
- dist/umd/react-md-with-font-icons.production.min.js 111.21 KB (+ 273 B)
- dist/umd/react-md-with-svg-icons.production.min.js 176.99 KB (+ 265 B)
The min and max gzipped CSS bundle sizes are:
- themes/react-md.grey-red-700-light.min.css 17.57 KB
- themes/react-md.lime-teal-200-dark.min.css 17.63 KB
v2.8.5
Bug Fixes
- @react-md/form:
MenuItemCheckbox
added missing indeterminate state (aa2c552), closes #1186 - @react-md/form:
useIndeterminateChecked
correctly uses readonly prefix (7f69a71) - @react-md/form:
useIndeterminateChecked
supportsMenuItemCheckbox
with new option (9ab67bf) - @react-md/form:
MenuItemCheckbox
,MenuItemRadio
, andMenuItemSwitch
styles on light themes (fc4dcd9)
Documentation
- @react-md/form: Updated documentation for
useIndeterminateChecked
(8646c28)
Other Internal Changes
- @react-md/dev-utils: Updated release script to allow custom CHANGELOG updates (dde151b)
- @react-md/form: Added tests for
useIndeterminateChecked
(cc2a422) - react-md.dev: Updated
MenuWithFormControls
example for indeterminate checkboxes (2d20848)
Library Size Changes
yarn dev-utils libsize
The gizipped UMD bundle sizes are:
- dist/umd/react-md.production.min.js 84.24 KB (+ 12 B)
- dist/umd/react-md-with-font-icons.production.min.js 108.48 KB (+ 12 B)
- dist/umd/react-md-with-svg-icons.production.min.js 174.34 KB (+ 13 B)
The min and max gzipped CSS bundle sizes are:
- themes/react-md.grey-red-700-light.min.css 17.57 KB (+ 1 B)
- themes/react-md.lime-teal-200-dark.min.css 17.63 KB
v2.8.4
Bug Fixes
- @react-md/form: Pass checked prop to component (bffae6f)
- @react-md/form: Fixed controlled behavior for
Switch
components (8c65df6), closes #1175 - @react-md/utils:
omit
uses readonly prefix for key list (d3e1ee8) - @react-md/utils: Slightly better tooltip behavior after clicking somewhere on the page (4d3fc16)
Documentation
- react-md.dev: Updated general documentation (9bc8a0d)
- react-md.dev: Update
next
and build deps to fix font loading issues (e528617)
Other Internal Changes
- updated doc tsconfig for better autocompletion (7fb8b94)
- Renamed contrast check function (97c1ad7)
- add website alias to changelog config (d98bf51)
- ran
prettier
after upgrading to v2.3.0 (3ce236a)
Library Size Changes
yarn dev-utils libsize
The gizipped UMD bundle sizes are:
- dist/umd/react-md.production.min.js 84.12 KB (+ 111 B)
- dist/umd/react-md-with-font-icons.production.min.js 108.36 KB (+ 115 B)
- dist/umd/react-md-with-svg-icons.production.min.js 174.21 KB (+ 109 B)
The min and max gzipped CSS bundle sizes are:
- themes/react-md.grey-red-700-light.min.css 17.56 KB
- themes/react-md.lime-teal-200-dark.min.css 17.63 KB