@react-md/utils
This package is for providing reusable accessibility hooks, components, and
utilities, a base css reset and other utility mixins, as well as general layout
and app size components and hooks. This package will be used by every other
scoped package within react-md
, and has an extremely useful mixin for only
generating styles for packages that have been installed.
Check out the usage section below for more details.
Installation
npm install --save @react-md/utils
Documentation
You should check out the
full documentation for live
examples and more customization information, but an example usage is shown
below.
Usage
The main export for this package will mainly be the exposed mixins which can be
included with the following import:
@import "@react-md/utils/dist/mixins";
@include rmd-utils-base;
.custom-class {
@include rmd-utils-rtl {
margin-left: auto;
margin-right: 1rem;
}
margin-left: 1rem;
}
.button {
@include rmd-utils-hide-focus-outline;
}
Usage with other packages
One of the great things about this package is that there is a mixin that will
automatically include all the react-md styles for packages you have included in
this file.
@import "@react-md/app-bar/dist/mixins";
@import "@react-md/avatar/dist/mixins";
@import "@react-md/button/dist/mixins";
@import "@react-md/elevation/dist/mixins";
@import "@react-md/utils/dist/mixins";
@include react-md-utils;
The example above will automatically include the styles for the app-bar
,
avatar
, and button
packages as well as the base styles utils styles.
3.0.0 (2021-08-13)
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 to true
instead of false
- sass:
node-sass
is no longer supported and users must switch to sass
- @react-md/utils: Removed
InteractionModeListener
since it was an alias for UserInteractionModeListener
- @react-md/utils: Removed
ResizeObserver
component and useResizeObserverV1
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)