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:
This release was mostly targeted around exposing the tooltip's "Hover Mode API"
as well as the other tooltip behavior. See #1113 and the new demos for more
information:
The @react-md/form package was also updated to include new components for rendering
checkbox, radio, and switch components within menus. See #1123 and
Menus with Form Controls Example
for more information.
Finally, react-md was updated to support typescript@4.2.3 by removing the
resize-observer-polyfill dependency since it has conflicting types with the
now provided type definitions around resize observers. If you are a typescript
user, see #1099 for more information around this change.
This release was mainly focused on the form package and added a lot of new
features. I highly recommend checking out the following PRs for more
information:
Simple form validation using the Constraint API with useTextField#1009
This release implemented better default behavior to ensure that the "better"
contrast ratio is chosen instead of choosing the first color that meets the
minimal contrast ratio. This is enabled by default going forward, but can be
disabled by setting $rmd-theme-better-contrast-ratios: false
Bug Fixes
@react-md/table: table border color uses hex values to fix chrome colSpan
rendering issue #982 (2138284)
Features
@react-md/theme: Better Contrast Colors by Default and dev-utils refactor
#955 (519b128)
Documentation
the documentation site now allows for code examples and sandboxes to
conditionally use JavaScript instead of TypeScript
I released v1.18.0 today but didn't realize that npm uses --tag while
lerna uses --dist-tag so v1.18.0 was released under latest instead of
previous. This release is only to ensure that v2 is set to latest and has
no other changes.
This release is kind of a breaking change since the base react-md package no
longer has a dist/css folder for all the pre-compiled themes due to CDNs and
package managers rejecting this package for being too big. All the pre-compiled
themes will now be available through jsDelivr
instead. Check out the CDN Links for more info.
This release also changed the ResizeObserver to use a subscription model to
slightly increase performance when multiple ResizeObservers are used on a
single page as well as fix some errors related to the
ResizeObserver loop has been exceeded. The useResizeObserver has been
updated to use the new API which requires refs, but is still backwards
compatible. Due to this change, the ResizeObserver component has been
deprecated in favor of the useResizeObserver hook implementation.
created a new example for the @react-md/form package to show how to use
react-hook-form with react-md for form
validation. Check out the new example
here.
updated sandboxes to use new CDN for pre-compiled themes (e83f47e)
This release was a re-publish of v2.2.0 attempting to fix a publishing error.
Unfortunately, the base react-md package had to drop support for the
pre-compiled themes and now need use jsDelivr
instead.
@react-md/form:Listbox render 0 as a valid display value
(d02b7a9)
Features
@react-md/avatar: Added ability to pass props to <img> (11848ee), closes
#908
@react-md/form: Added props to style Checkbox and Radio input element
(b6d2318)
@react-md/form: Updated toggle inactive and active colors to be
configurable (49319e6)
Note: The Checkbox and Radio components have updated their default inactive
color to be the rmd-theme-var(text-secondary-on-background) instead of
rmd-theme-var(secondary) to better match the v1 styles.
This release was mostly internal changes and documentation updates including a
new Writing Tests guide, but also fixed the Layout
component to allow for the useCrossFade hook to transition the <main>
content on pathname changes.
Bug Fixes
@react-md/transition: useCSSTransition now correctly forwards refs
(36f832f)
The GitHub repo has been updated to now include an
examples folder to show how you can use
react-md along with other build tools such as
Create React App,
Next.js, Gatsby, and others.
These examples can be used to spin up boilerplate projects by following the
following steps:
First download the specific example:
# replace EXAMPLE_NAME with the specific example you want to usecurl https://codeload.github.com/mlaursen/react-md/tar.gz/main |tar -xz --strip=2 react-md-main/examples/EXAMPLE_NAME
cd EXAMPLE_NAME
Next, install any dependencies:
npminstall# or with yarnyarn
Next, initialize the git repository and add the first commit:
git init
gitadd.git commit -m "Initial commit"
Finally, follow any instructions in the README.md about how to run the
specific example.
This release focused on fixing bundle sizes with webpack as well as increasing
build performance with the sideEffects field for each package.json. For more
information, check out the v2.0.2 release PR #877 which goes into details about
build time and sizing changes.
This release also includes the following changes:
LICENSE: Removed the time range from license since it was incorrect
(50c9021)
Added unpkg url for base react-md package (d0efc59)
This is technically a breaking change for the UMD bundle since this splits the
material-icon component wrappers into separate bundles to minimize the library's
size. I'm going with a patch bump though since it's only been two days since the
v2 release and it's highly doubtful that consumers of the library have fully
upgraded to v2 or even using the UMD bundle to begin with.
The v2 release is a complete re-write of react-md to address the majority of
problems encountered while using v1. Unfortunately, this took a lot longer
than I had hoped since I ended up using this project to learn
Typescript as well as the new
React hooks API. Even though there
are some missing components from v1, I think the new functionality outweighs it
and the components are scoped for a later release.