12/11/2023 (305 days ago)
05/09/2023 (521 days ago)
05/06/2022 (889 days ago)
DEFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES
(2d20a2e)04/02/2022 (923 days ago)
useIsomorphicLayoutEffect
to hide SSR warning (aa0d3cd)BadgedButton
documentation (b147a88)03/31/2022 (925 days ago)
03/18/2022 (938 days ago)
AppBarTitle
now applies flex: 1 1 auto
(4a47c92)List
(2b5fb23)useTooltip
supports new disabled option (a934ae9)eslint
rules (88eb2b2)Grid
(3ac42ef)useTooltip
when it is conditionally applied
(cfca184)useTooltip
disabled option (f318ecf)stylelint
plugins to latest (2bb6429)01/30/2022 (985 days ago)
Check out the v4 to v5 Migration Guide for more information around updating code to this major version.
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.
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.
Here's a quick example of migrating to the new DropdownMenu
API:
import type { ReactElement } from "react";
-import { DropdownMenu, DropdownMenuItem } from "@react-md/menu";
+import { DropdownMenu, MenuItem } from "@react-md/menu";
export default function Example(): ReactElement (
- <DropdownMenu
- id="example-dropdown-menu"
- items={[
- { onClick: () => console.log("Clicked Item 1"), children: "Item 1" },
- { onClick: () => console.log("Clicked Item 2"), children: "Item 2" },
- { onClick: () => console.log("Clicked Item 3"), children: "Item 3" },
- <DropdownMenuItem
- id="nested-dropdown-menu"
- items={["Subitem 1", "Subitem 2", "Subitem 3"]}
- >
- Submenu
- </DropdownMenuItem>,
- ]}
- >
- Dropdown
+ <DropdownMenu id="example-dropdown-menu" buttonChildren="Dropdown">
+ <MenuItem onClick={() => console.log("Clicked Item 1")}>Item 1</MenuItem>
+ <MenuItem onClick={() => console.log("Clicked Item 2")}>Item 2</MenuItem>
+ <MenuItem onClick={() => console.log("Clicked Item 3")}>Item 3</MenuItem>
+ <DropdownMenu
+ id="nested-dropdown-menu"
+ buttonChildren="Submenu"
+ >
+ <MenuItem>Subitem 1</MenuItem>
+ <MenuItem>Subitem 2</MenuItem>
+ <MenuItem>Subitem 3</MenuItem>
+ </DropdownMenu>
</DropdownMenu>
);
On top of the new API, two major new features have been integrated into this release:
Menus can now act like a browser's bookmark folder behavior where the user must
click one of the dropdowns before all other menus become immediately visible on
hover by using the new MenuBar
component. This also implements some new
keyboard movement behavior matching the
menubar spec.
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.
Check out the Hoverable Menus demo for more information.
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:
menuConfiguration={{ renderAsSheet: "phone" }}
on the Configuration
component from @react-md/layout
DropdownMenu
in the MenuConfigurationProvider
and adding a prop
renderAsSheet="phone"
DropdownMenu
with the renderAsSheet="phone"
propThe 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.
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.
Check out the Mobile Action Sheets demo for more information.
TextArea
applies custom height style when
resize="none"
(e77d939)disableEnterClick
in ListItem
(b5e8b69)useRefCache
returns non-mutable object (b696b72)overlayProps
to configure the dialog's overlay
(cfc30f0)useVerticalDividerHeight
to support any
HTMLElement (edd9287)TextFieldContainer
to optionally fill all space
in flex containers (2c8e68c)FileInput
snapshots for new icon (f5e43fe)MenuBar
visibility for touch devices (1288be7)enableScrollLock
and disableScrollLock
utils
(6a95734)useScrollListener
no longer accepts an element or
options (74a0274)next
from 12.0.7 to 12.0.9 (04749c6)create-react-app
examples to use v5.0.0 (f7850b8)react-md
major versions (78b7396)TextArea
(5361825)DEFAULT_HOVER_MODE_STICKY_EXIT_TIME
has been renamed to
DEFAULT_HOVER_MODE_EXIT_TIME
.ArrowUp
or ArrowDown
keys.DropdownMenu
component no longer accepts a list of items
and instead
the children
should be the MenuItem
components.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.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 DropdownMenu
s.DropdownMenuItem
component is no longer required for nested dropdown
menus and is an "internal" component instead that shouldn't really be used.exitVisibilityDelay
always defaults to DEFAULT_HOVER_MODE_EXIT_TIME
.MenuItemSeparator
now renders as an <li>
instead of an <hr>
or
<div>
.useContextMenu
now returns an object instead of an ordered list.useHoverMode
hook no longer accepts an HTMLElement
generic and instead
the event handlers will automatically infer the HTMLElement
based on usage.useHoverMode
hook no longer returns stickyHandlers
and instead returns
hoverHandlers
that only include onMouseEnter
and onMouseLeave
. The
handlers
that are returned now include onClick
, onMouseEnter
, and
onMouseLeave
. This was kind of what the stickyHandlers
was before. In
addition, clicking an element no longer disabled the hover mode behavior.HoverModeOnlyOptions
,
HoverModeOnlyReturnValue
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.12/31/2021 (1015 days ago)
FileInput
default icon changed from file_download
to
file_upload
(174d1c1), closes #1325useIsUserInteractionMode
get mode via context
(b5f93ae), closes #1322create-react-app
README to use correct start command
(37acdc3)11/29/2021 (1047 days ago)
11/26/2021 (1050 days ago)
getPercentage
to optionally not throw errors
(ff8a1d6)11/24/2021 (1052 days ago)
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.
DropdownMenu
and Menu
portal by default (98a6a9f),
closes #1264eslint
(8111cd3)ConditionalPortal
supports ReactNode children
(c83d578)Typography
(30cf056)sass
resolutions in package.json
(db22cde), closes #1261react-marked-renderer
for markdown stuffs (93ebaa4)prettier
(9632d82)react-router-dom
v6 (e012ef9)sass
files (98ffe40)sassdoc
to not through uncaught exceptions
(8bdf532)prettier
after upgrading to v2.4.0 (06110af)enable
strict mode by default for nextjs-typescript (83e4c44)create-react-app
example to use react-router-dom
v6
(3c4d1ea)react-router-dom
v6 (ae469ef)stylelint
(22d1598)DropdownMenu
and Menu
components portal by
default. This should really only affect snapshot testslib.d.ts
prop-types
package.09/11/2021 (1126 days ago)
TabsManager
tabs prop
(45d9458)09/10/2021 (1127 days ago)
DialogFooter
align prop applies correct classes
(644971d)TooManyFilesError
is only used if all the other
validation has passed (6ed3f54)useFileUpload
extensions (9238140)useDropzone
fix around onDragLeave behavior (fdff9f2)isValidFileName
option to useFileUpload
(dbd0375)sassdoc
for new module system (4746d26)yarn format
to include new files (48d3d7f)next
(b50d745)sassdoc
hot-reloading (9d58e09)sassdoc
examples to be linkable (9ed096e)08/14/2021 (1154 days ago)
08/13/2021 (1155 days ago)
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, (958f34f), or #1214 for more in-depth examples.
$rmd-theme-dark-elevation
now defaults to true
instead of false
node-sass
is no longer supported and users must switch to sass
InteractionModeListener
since it was an alias
for UserInteractionModeListener
ResizeObserver
component and
useResizeObserverV1
implementationTooltipHoverModeConfig
component$rmd-card-dark-elevation-bordered-background-color
variableTooltipped
componentuseIndeterminateChecked
is now
an object of optionssass
since it's deprecated (126fb5a)defaults
to true (b371337)sass
usage with: @use 'react-md';
(787bfb5)@use
(68e8c6b)react-md/dist/_everything.scss
(c7177e6)sassdoc
and variables to use
everything.scss (a0f0699)sass
(5376be1)useIndeterminateChecked
(6b7871f)Tooltipped
component
(6dca9b1)typedoc
API in navigation
tree (c388ba6)@use
imports (958f34f)defaults
(b2269ff)sass
instead of node-sass
(d8ddf51)react-md
(c0f25f7)07/26/2021 (1173 days ago)
07/17/2021 (1182 days ago)
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:
FileInput
correctly center the icon when children aren't
provided (3a6ab33)useLayoutNavigation
possible perf fix (3d65e4e)FileInput
automatically swaps button type to text if
children exist (e5585e1)FormMessageCounter
component added to public API
(1508812)useFileUpload
hook to upload files to the
browser (efb3f2f), closes #1159useDropzone
hook (bc07a1f)useFileUpload
(49ce4d9)useFileUpload
(8f9002e)eslint
error after updating prettier
(75a9b0f)Select
Options Demo
(367cc0d)07/03/2021 (1196 days ago)
MenuItemCheckbox
added missing indeterminate state
(aa2c552), closes #1186useIndeterminateChecked
correctly uses readonly prefix
(7f69a71)useIndeterminateChecked
supports MenuItemCheckbox
with
new option (9ab67bf)MenuItemCheckbox
, MenuItemRadio
, and MenuItemSwitch
styles on light themes (fc4dcd9)useIndeterminateChecked
(8646c28)06/10/2021 (1219 days ago)
Switch
components
(8c65df6), closes #1175omit
uses readonly prefix for key list (d3e1ee8)next
and build deps to fix font loading issues
(e528617)05/17/2021 (1243 days ago)
useLayoutConfig
(14e6587)Menu
in Dense
Mode (abbe9a9)AppBar
mini layouts (84313fc), closes #1101classnames
dependency (a7a2012), closes
#1155AppBar
layouts (d217ac1)typedoc
(84739af)react-md
(a69359b)typedoc
(cf54c35)typedoc
source links when deployed through vercel
(a4eed1b)useLayoutNavigation
hook example in creating a new
app (1cde856)typedoc
WIP (a7d7429)04/22/2021 (1268 days ago)
04/22/2021 (1268 days ago)
04/22/2021 (1268 days ago)
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.
FixedDialog
applies style
prop (bb4ad2f)focusElementsWithin
correctly focuses container element
as a fallback (cff46c4)useFixedPositioning
to merge style objects
(1ab84d7)useFixedPositioning
to support fixedTo ref
(ced550a)isFocusable
util (1d92472)typescript
version to v4.2.3 (b094b36)HoverModeProvider
documentation (f42c65c)SwitchTrack
and InputToggleIcon
components
(d9278b3)MenuItemRadio
usage to be wrapped in a group for
a11y (01caa0b)SliderValue
to use non-portalled tooltip for
existing test (b41136f)Configuration
to use new HoverModeProvider
(357f2bf)useTooltip
code (0a6aed9)Tooltip
to use new Hover Mode (386f47b)@types/react-transitition-group
from v4.2.4
to v4.4.1 (f3f5c7b)useOnUnmount
(c758982)@types/classnames
(32f6f0f)03/22/2021 (1299 days ago)
Select
correctly respects the readOnly
prop (d9a0262),
closes #1089Select
correctly updates for the dense
spec (2930595),
closes #1089next
(1861731)02/28/2021 (1321 days ago)
RadioGroup
widget for the radiogroup
role (76d6d27)tryToSubmitRelatedForm
util to help with
additional a11y (0566e14)loop
util to allow for a specific min value
(51bcf92)02/12/2021 (1337 days ago)
SkipToMainContent
(3f6e866)01/29/2021 (1351 days ago)
classnames
dependency (8c34790)01/26/2021 (1354 days ago)
01/12/2021 (1368 days ago)
01/11/2021 (1369 days ago)
12/16/2020 (1395 days ago)
12/15/2020 (1396 days ago)
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:
useTextField
#1009useNumberField
#1014Slider
component #1016useTextField
hook to validate the
TextField
and TextArea
values (578257c)PasswordWithMessage
component to be used with
useTextField
Hook (f6d84f2)TextAreaWithMessage
component to be used with
useTextField
Hook (e358799)TextFieldWithMessage
component to be used with
useTextField
Hook (f2d7e5d)useNumberField
hook to control number field
values (c705f2c)IconProvider
Component and
useIcon
Hook (4dfd50a)flexReverse
prop to TextIconSpacing
(c4ee05b)withinRange
util for number validation
(e8fb252)@include
order for easier overrides
(4705b09)useNumberField
(8b927ab)FormMessage
counter prop-type validation (9ece3e1)messageProps
error from react when
disableMessage
is enabled (e452aff)TextField
PropTypes
to allow for search input
type (23d92dd)GridCell
now correctly uses largeDesktop
when desktop is also
provided (fd26b8b)11/13/2020 (1428 days ago)
ListItem
disabled colors to optionally include
addons (a40b6b3), closes #997ListItem
no longer focusable by default when disabled
(06e91ca), closes #997react-scripts@4.0.0
(be003a9)react-scripts@4.0.0
(8b7122b)10/23/2020 (1449 days ago)
10/17/2020 (1455 days ago)
Republished the v2.4.0 release to ensure that all 2300 themes are available through CDNs after upgrading my build script.
10/17/2020 (1455 days ago)
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
09/14/2020 (1488 days ago)
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.
09/10/2020 (1492 days ago)
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 ResizeObserver
s 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 ref
s, but is still backwards
compatible. Due to this change, the ResizeObserver
component has been
deprecated in favor of the useResizeObserver
hook implementation.
Otherwise, there were a few new features added to the @react-md/button, @react-md/progress, and @react-md/tree packages that you can reference below.
@react-md/form
package to show how to use
react-hook-form with react-md
for form
validation. Check out the new example
here.usePressedStates
to pass onClick
like other
state hooks (82cd676)CircularProgress
(c6c616b)TextArea
to use the new useResizeObserver
API
(2c2dd27)small
state to the CircularProgress
(6884a3a)defaultTreeItemRenderer
for class names
(3c61f3c), closes #920LabelRequiredForA11y
type definition (b7aa4fa)Dir
component to help determine current writing
direction (a929e04)useGridList
hook (56ecc19)useIsomorphicLayoutEffect
from react-redux
(deacf1c)useResizeObserver
implementation
(dc3f4df)useAppSize
usage error message (2c81982)cloneStyles
prop so grid styles can be
applied to any child (ca913e7)09/02/2020 (1500 days ago)
09/02/2020 (1500 days ago)
This release was just a re-publish of v2.2.0
to try fixing a publishing error.
08/11/2020 (1522 days ago)
Listbox
render 0
as a valid display value
(d02b7a9)<img>
(11848ee), closes
#908Checkbox
and Radio
input element
(b6d2318)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.
See $rmd-toggle-inactive-color and $rmd-toggle-active-color.
08/01/2020 (1532 days ago)
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.
07/28/2020 (1536 days ago)
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 use
curl 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:
npm install
# or with yarn
yarn
Next, initialize the git repository and add the first commit:
git init
git add .
git commit -m "Initial commit"
Finally, follow any instructions in the README.md
about how to run the
specific example.
07/21/2020 (1543 days ago)
07/11/2020 (1553 days ago)
This release added a new and improved dark mode that can be used by enabling a
new $rmd-theme-dark-mode-elevation
variable.
AppBar
text color now defaults to
rmd-theme-var(text-primary-on-background)
(2c3ea5e)07/10/2020 (1554 days ago)
This is a very small release that just fixed adding @react-md/form as a dependency to @react-md/layout (e83b296)
07/07/2020 (1557 days ago)
This release fixed a few styling issues for the @react-md/form package and correctly
passing the disabled
prop to the TextField
's <input>
element:
06/30/2020 (1564 days ago)
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:
06/17/2020 (1577 days ago)
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.
react-md will now be available as these bundles:
ReactMD
library:
https://unpkg.com/react-md@2.0.1/dist/umd/react-md.production.min.jsReactMD
with *FontIcon
components:
https://unpkg.com/react-md@2.0.1/dist/umd/react-md-with-font-icons.production.min.jsReactMD
with *SVGIcon
components:
https://unpkg.com/react-md@2.0.1/dist/umd/react-md-with-svg-icons.production.min.jsThe advanced installation guide and the library size notes have been updated for this information.
06/15/2020 (1579 days ago)
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.
The 2.0.0 release of react-md features: