@react-md/elevation

@react-md/elevation

This is a small package for react-md that can create the elevation styles in the material design spec. Unlike the other react-md packages, this package only exports utility mixins and does not provide any React components or any default styles.

Installation

npm install --save @react-md/elevation

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

Material design has 24 different elevation types and the rmd-elevation mixin accepts a number between 0 and 24 to create that elevation.

@import "@react-md/elevation/dist/mixins";

.my-elevated-component {
  @include rmd-elevation(8);
}

This package also exports some box-shadow transition mixins to get some great performance when animating between different box shadows.

@import "@react-md/elevation/dist/mixins";

.my-box-shadow-component {
  // animate from 4 to 8 on hover
  @include rmd-elevation-transition(4, 8, "&:hover");
}

Changelog

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)