diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 2b8c4356975..01596de7a40 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -15,7 +15,7 @@ feature requests. If you'd like to work on a component, please ensure that you *submit an Engineering Outline before submitting a pull request*. You can read more about this in our [contributing docs](https://github.com/material-components/material-components-web/blob/master/CONTRIBUTING.md#building-components). -MDC-Web is still under active development. You can see our current progress on [master](https://github.com/material-components/material-components-web/tree/master) as well as an overview of the direction we're headed in our [developer guide](https://github.com/material-components/material-components-web/blob/master/docs/DEVELOPER.md). +MDC-Web is still under active development. You can see our current progress on [master](https://github.com/material-components/material-components-web/tree/master) as well as an overview of our [architecture and practices](https://github.com/material-components/material-components-web/blob/master/docs/code). If you're interested in information for a specific component, check out our [component issues](https://github.com/material-components/material-components-web/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3Av2-component) to see which milestone it's associated with and subscribe to updates to it. If an issue has the `in-tracker` label, you can also take a look at our [public Pivotal Tracker](https://www.pivotaltracker.com/n/projects/1664011) for a rough estimate of when we'll get to it. diff --git a/CHANGELOG.md b/CHANGELOG.md index 559833a0706..3170abe0adf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,45 @@ + +# [0.24.0](https://github.com/material-components/material-components-web/compare/v0.23.0...v0.24.0) (2017-10-30) + + +### Bug Fixes + +* **button:** Revise button minimum width ([#1487](https://github.com/material-components/material-components-web/issues/1487)) ([cb73283](https://github.com/material-components/material-components-web/commit/cb73283)) +* **layout-grid:** Import the variables in the mixin ([#1232](https://github.com/material-components/material-components-web/issues/1232)) ([924144b](https://github.com/material-components/material-components-web/commit/924144b)) +* **ripple:** Avoid duplicating common styles ([#1463](https://github.com/material-components/material-components-web/issues/1463)) ([756d8a6](https://github.com/material-components/material-components-web/commit/756d8a6)) +* **snackbar:** Explicitly use border-box ([#1453](https://github.com/material-components/material-components-web/issues/1453)) ([7455978](https://github.com/material-components/material-components-web/commit/7455978)) + + +### Features + +* **button:** Use new ripple mixins, and remove unnecessary mixin ([#1471](https://github.com/material-components/material-components-web/issues/1471)) ([510f356](https://github.com/material-components/material-components-web/commit/510f356)) +* **checkbox:** Use new ripple mixins, and remove unnecessary mixin ([#1472](https://github.com/material-components/material-components-web/issues/1472)) ([92b22eb](https://github.com/material-components/material-components-web/commit/92b22eb)) +* **fab:** Use new ripple mixins; remove unnecessary mixin/variable ([#1473](https://github.com/material-components/material-components-web/issues/1473)) ([fb798db](https://github.com/material-components/material-components-web/commit/fb798db)) +* **icon-toggle:** Add public API for MDCRipple in icon-toggle ([#1396](https://github.com/material-components/material-components-web/issues/1396)) ([f496581](https://github.com/material-components/material-components-web/commit/f496581)) +* **icon-toggle:** Use new ripple mixins ([#1474](https://github.com/material-components/material-components-web/issues/1474)) ([cbc3e1c](https://github.com/material-components/material-components-web/commit/cbc3e1c)) +* **list:** Use new ripple mixins ([#1475](https://github.com/material-components/material-components-web/issues/1475)) ([0647576](https://github.com/material-components/material-components-web/commit/0647576)) +* **radio:** Add theme color mixins and update default color to secondary ([#1410](https://github.com/material-components/material-components-web/issues/1410)) ([da9d48f](https://github.com/material-components/material-components-web/commit/da9d48f)), closes [#1149](https://github.com/material-components/material-components-web/issues/1149) +* **radio:** Use new ripple mixins, and remove unnecessary mixin ([#1476](https://github.com/material-components/material-components-web/issues/1476)) ([94a826d](https://github.com/material-components/material-components-web/commit/94a826d)) +* **ripple:** Add new simpler mixins and remove unused CSS vars ([#1452](https://github.com/material-components/material-components-web/issues/1452)) ([a983c01](https://github.com/material-components/material-components-web/commit/a983c01)) +* **ripple:** Remove old complex mixins ([#1496](https://github.com/material-components/material-components-web/issues/1496)) ([47c6859](https://github.com/material-components/material-components-web/commit/47c6859)) +* **switch:** Add color theme mixins and update default color to secondary ([#1411](https://github.com/material-components/material-components-web/issues/1411)) ([e4b4fa7](https://github.com/material-components/material-components-web/commit/e4b4fa7)), closes [#1144](https://github.com/material-components/material-components-web/issues/1144) +* **tabs:** Use new ripple mixins ([#1492](https://github.com/material-components/material-components-web/issues/1492)) ([253fba0](https://github.com/material-components/material-components-web/commit/253fba0)) +* **textfield:** Add mixin allowing customization of border radii ([#1446](https://github.com/material-components/material-components-web/issues/1446)) ([483e3d5](https://github.com/material-components/material-components-web/commit/483e3d5)) +* **textfield:** Use new ripple mixins and remove hover ripple styles ([#1477](https://github.com/material-components/material-components-web/issues/1477)) ([2a71ef7](https://github.com/material-components/material-components-web/commit/2a71ef7)) +* **theme:** rename all color_palette instances ([#1479](https://github.com/material-components/material-components-web/issues/1479)) ([375661d](https://github.com/material-components/material-components-web/commit/375661d)) + + +### BREAKING CHANGES + +* **ripple:** The existing MDC Ripple Sass mixins mdc-ripple-base, mdc-ripple-fg, and mdc-ripple-bg have been removed, replaced by the new easier-to-use mixins mdc-ripple-surface, mdc-ripple-color, and mdc-ripple-radius. +* **radio:** The mdc-radio-ripple mixin has been removed; use mdc-ripple-color directly. +* **fab:** The mdc-fab-ripple mixin and $mdc-fab-light-ripple-config variable have been removed; use MDC Ripple's mdc-ripple-color mixin and opacity variables directly. +* **checkbox:** The mdc-checkbox-ripple mixin has been removed; use mdc-ripple-color directly. +* **button:** The mdc-button-ripple mixin has been removed; use mdc-ripple-color directly. +* **theme:** _color_palette.scss has been renamed to _color-palette.scss in mdc-theme + + + # [0.23.0](https://github.com/material-components/material-components-web/compare/v0.22.0...v0.23.0) (2017-10-16) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a52372c4435..7af3e005ef3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -20,7 +20,7 @@ The Material Components contributing policies and procedures can be found in the ## Development Process -We strive to make developing Material Components Web as frictionless as possible, both for ourselves and for our community. This section should get you up and running working on the MDC-Web codebase. Before beginning development, you may want to read through our brief [developer guide](./docs/developer.md) to get a better understanding of our overall architecture. +We strive to make developing Material Components Web as frictionless as possible, both for ourselves and for our community. This section should get you up and running working on the MDC-Web codebase. Before beginning development, you may want to read through our overview on [architecture and best practices](./docs/code) to get a better understanding of our overall structure. ### Setting up your development environment diff --git a/demos/button.scss b/demos/button.scss index dac58c29716..a9e95ea401b 100644 --- a/demos/button.scss +++ b/demos/button.scss @@ -20,16 +20,16 @@ @import "../packages/mdc-button/variables"; @import "../packages/mdc-checkbox/mdc-checkbox"; @import "../packages/mdc-form-field/mdc-form-field"; +@import "../packages/mdc-ripple/mixins"; @import "../packages/mdc-typography/mdc-typography"; .mdc-button.secondary-text-button { @include mdc-button-ink-color($mdc-theme-secondary); - @include mdc-button-ripple((theme-style: secondary, opacity: $mdc-unfilled-button-ripple-opacity)); + @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity); @include mdc-theme-dark(".mdc-button") { - // TODO(yiranm): Revisit ripple initialization after ripple refactoring @include mdc-button-ink-color($mdc-theme-secondary); - @include mdc-button-ripple((theme-style: secondary, opacity: $mdc-unfilled-button-ripple-opacity)); + @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity); } } @@ -44,12 +44,12 @@ .mdc-button.secondary-stroked-button { @include mdc-button-ink-color($mdc-theme-secondary); @include mdc-button-stroke-color($mdc-theme-secondary); - @include mdc-button-ripple((theme-style: secondary, opacity: $mdc-unfilled-button-ripple-opacity)); + @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity); @include mdc-theme-dark(".mdc-button") { @include mdc-button-ink-color($mdc-theme-secondary); @include mdc-button-stroke-color($mdc-theme-secondary); - @include mdc-button-ripple((theme-style: secondary, opacity: $mdc-unfilled-button-ripple-opacity)); + @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity); } } diff --git a/demos/checkbox.scss b/demos/checkbox.scss index f5ec762a8e5..e3442ba312f 100644 --- a/demos/checkbox.scss +++ b/demos/checkbox.scss @@ -18,7 +18,8 @@ @import "../packages/mdc-button/mdc-button"; @import "../packages/mdc-checkbox/mdc-checkbox"; @import "../packages/mdc-form-field/mdc-form-field"; -@import "../packages/mdc-theme/color_palette"; +@import "../packages/mdc-ripple/mixins"; +@import "../packages/mdc-theme/color-palette"; @import "../packages/mdc-theme/mixins"; @import "../packages/mdc-typography/mdc-typography"; @@ -26,7 +27,7 @@ $color: $material-color-red-500; @include mdc-checkbox-focus-indicator-color($color); - @include mdc-checkbox-ripple((base-color: $color, opacity: $mdc-checkbox-ripple-opacity)); + @include mdc-ripple-color($color, $mdc-checkbox-ripple-opacity); @include mdc-checkbox-container-colors( $unmarked-stroke-color: $color, $unmarked-fill-color: rgba($color, .25), diff --git a/demos/common.scss b/demos/common.scss index 07ec7e24ef5..32e6edc93f9 100644 --- a/demos/common.scss +++ b/demos/common.scss @@ -18,15 +18,16 @@ @import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"); -@import "../packages/mdc-theme/color_palette"; +@import "../packages/mdc-theme/color-palette"; // Base style $mdc-theme-primary: $material-color-grey-900 !default; $mdc-theme-secondary: $material-color-light-green-a700 !default; -// Import button mixins to apply overrides for dark theme +// Import button and ripple mixins to apply overrides for dark theme // TODO(kfranqueiro): Pending further design discussion around how to manage dark theme @import "../packages/mdc-button/mixins"; +@import "../packages/mdc-ripple/mixins"; // All demo pages have a top toolbar, and most of them use theme variables. // Import these *after* setting theme colors to override defaults in mdc-theme. @import "../packages/mdc-theme/mdc-theme"; @@ -53,7 +54,7 @@ $dark-button-color: $material-color-light-green-a200; .mdc-button { @include mdc-theme-dark { @include mdc-button-ink-color($dark-button-color); - @include mdc-button-ripple((base-color: $dark-button-color, opacity: $mdc-unfilled-button-ripple-opacity)); + @include mdc-ripple-color($dark-button-color, $mdc-unfilled-button-ripple-opacity); } } diff --git a/demos/fab.scss b/demos/fab.scss index cab42587280..9fd0475626c 100644 --- a/demos/fab.scss +++ b/demos/fab.scss @@ -15,7 +15,7 @@ // @import "./common"; -@import "../packages/mdc-theme/color_palette"; +@import "../packages/mdc-theme/color-palette"; @import "../packages/mdc-fab/mdc-fab"; @import "../packages/mdc-fab/mixins"; diff --git a/demos/radio.scss b/demos/radio.scss index 6de5386fb32..7257429f861 100644 --- a/demos/radio.scss +++ b/demos/radio.scss @@ -17,7 +17,8 @@ @import "./common"; @import "../packages/mdc-form-field/mdc-form-field"; @import "../packages/mdc-radio/mdc-radio"; -@import "../packages/mdc-theme/color_palette"; +@import "../packages/mdc-ripple/mixins"; +@import "../packages/mdc-theme/color-palette"; @import "../packages/mdc-typography/mdc-typography"; .mdc-radio.demo-radio--custom { @@ -27,5 +28,5 @@ @include mdc-radio-checked-stroke-color($color); @include mdc-radio-ink-color($material-color-orange-500); @include mdc-radio-focus-indicator-color($color); - @include mdc-radio-ripple((base-color: $color)); + @include mdc-ripple-color($color, $mdc-radio-ripple-opacity); } diff --git a/demos/snackbar.html b/demos/snackbar.html index b5fb635c251..16cbc3679c4 100644 --- a/demos/snackbar.html +++ b/demos/snackbar.html @@ -136,12 +136,14 @@

Basic Example

+

+

diff --git a/demos/switch.scss b/demos/switch.scss index 8e733217343..9c67351dcba 100644 --- a/demos/switch.scss +++ b/demos/switch.scss @@ -16,7 +16,7 @@ @import "./common"; @import "../packages/mdc-switch/mdc-switch"; -@import "../packages/mdc-theme/color_palette"; +@import "../packages/mdc-theme/color-palette"; @import "../packages/mdc-typography/mdc-typography"; .demo-switch-wrapper { diff --git a/demos/textfield.html b/demos/textfield.html index 6ead9b105a1..97141fc3479 100644 --- a/demos/textfield.html +++ b/demos/textfield.html @@ -74,8 +74,7 @@
- +
@@ -91,8 +90,7 @@

Full Functionality JS Component (Floating Label, Validation)

- +
diff --git a/demos/theme/index.scss b/demos/theme/index.scss index 7ab10ecb636..908e66bcb7f 100644 --- a/demos/theme/index.scss +++ b/demos/theme/index.scss @@ -34,7 +34,7 @@ @import "../../packages/mdc-switch/mdc-switch"; @import "../../packages/mdc-tabs/mdc-tabs"; @import "../../packages/mdc-textfield/mdc-textfield"; -@import "../../packages/mdc-theme/color_palette"; +@import "../../packages/mdc-theme/color-palette"; @import "../../packages/mdc-theme/mixins"; @import "../../packages/mdc-theme/variables"; @import "../../packages/mdc-toolbar/variables"; @@ -136,11 +136,11 @@ figure { .mdc-button.secondary-text-button { @include mdc-button-ink-color($mdc-theme-secondary); - @include mdc-button-ripple((base-color: $mdc-theme-secondary, opacity: .16)); + @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity); @include mdc-theme-dark(".mdc-button") { @include mdc-button-ink-color($mdc-theme-secondary); - @include mdc-button-ripple((base-color: $mdc-theme-secondary, opacity: .16)); + @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity); } } @@ -155,12 +155,12 @@ figure { .mdc-button.secondary-stroked-button { @include mdc-button-ink-color($mdc-theme-secondary); @include mdc-button-stroke-color($mdc-theme-secondary); - @include mdc-button-ripple((base-color: $mdc-theme-secondary, opacity: .16)); + @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity); @include mdc-theme-dark(".mdc-button") { @include mdc-button-ink-color($mdc-theme-secondary); @include mdc-button-stroke-color($mdc-theme-secondary); - @include mdc-button-ripple((base-color: $mdc-theme-secondary, opacity: .16)); + @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity); } } @@ -401,33 +401,15 @@ figure { } .demo-ripple-surface--primary { - &::before, - &::after { - @include mdc-theme-prop(background-color, primary); - } - - @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .16)); - @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .16)); + @include mdc-ripple-color(primary, $mdc-ripple-pressed-dark-ink-opacity); } .demo-ripple-surface--secondary { - &::before, - &::after { - @include mdc-theme-prop(background-color, secondary); - } - - @include mdc-ripple-bg((pseudo: "::before", theme-style: secondary, opacity: .16)); - @include mdc-ripple-fg((pseudo: "::after", theme-style: secondary, opacity: .16)); + @include mdc-ripple-color(secondary, $mdc-ripple-pressed-dark-ink-opacity); } .demo-ripple-surface--custom { - &::before, - &::after { - @include mdc-theme-prop(background-color, $demo-custom-color); - } - - @include mdc-ripple-bg((pseudo: "::before", base-color: $demo-custom-color, opacity: .16)); - @include mdc-ripple-fg((pseudo: "::after", base-color: $demo-custom-color, opacity: .16)); + @include mdc-ripple-color($demo-custom-color, $mdc-ripple-pressed-dark-ink-opacity); } .mdc-ripple-surface[data-mdc-ripple-is-unbounded] { diff --git a/docs/code/README.md b/docs/code/README.md index 32fe0e72f13..32a69e50881 100644 --- a/docs/code/README.md +++ b/docs/code/README.md @@ -4,7 +4,7 @@ MDC Web has split each dynamic component's JavaScript into two pieces: Foundation and Adapter. This lets us reuse Foundation code across multiple web -platforms, e.g. Wiz and Angular, by re-implementing only the Adapter. For now +platforms, e.g. React and Angular, by re-implementing only the Adapter. For now we've only implemented a vanilla JavaScript version of the Adapter ## Architecture diff --git a/docs/code/architecture.md b/docs/code/architecture.md index d48de70f4ed..814e73e48d7 100644 --- a/docs/code/architecture.md +++ b/docs/code/architecture.md @@ -26,7 +26,7 @@ with the required HTML structure. MDC Web has split each dynamic component's JavaScript into two pieces: Foundation and Adapter. This lets us reuse Foundation code across multiple web -platforms, e.g. Wiz and Angular, by re-implementing only the Adapter. For now +platforms, e.g. React and Angular, by re-implementing only the Adapter. For now we've only implemented a vanilla JavaScript version of the Adapter. ### Foundation diff --git a/docs/getting-started.md b/docs/getting-started.md index adc2c173569..55e6e5e9795 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -15,7 +15,7 @@ your framework that wraps MDC-Web, check out our [framework integration guide](. ## MDC-Web quick start: building a simple greeting app The best way to learn any new technology is to get your hands dirty and build something with it, so -that is what we will do here! You will be building a simple greeting page which lets you enter a name and greets you as such. Here is the [finished example](https://plnkr.co/edit/ahd84pIgOF7OTKgavvPP?p=preview). +that is what we will do here! You will be building a simple greeting page which lets you enter a name and greets you as such. As you go through this guide, we encourage you to code along with it. By the end, you will have learned the fundamentals incorporating MDC-Web into simple sites, as well as worked with some of the @@ -115,6 +115,7 @@ Replace the contents of the `` tag in `index.html` with the following: +
@@ -124,6 +125,7 @@ Replace the contents of the `` tag in `index.html` with the following: +
diff --git a/docs/migrating-from-mdl.md b/docs/migrating-from-mdl.md index ad0fbc27202..a9dfc934a8b 100644 --- a/docs/migrating-from-mdl.md +++ b/docs/migrating-from-mdl.md @@ -93,6 +93,7 @@ MDC-Web:
+
``` @@ -118,6 +119,7 @@ element, with the component’s class name as the value. For example:
+
``` @@ -198,6 +200,7 @@ Like in MDL, styling components with CSS classes is simply a matter of applied t
+
``` diff --git a/docs/open_source/release.md b/docs/open_source/release.md index b818d6fd132..f0a49bb3b07 100644 --- a/docs/open_source/release.md +++ b/docs/open_source/release.md @@ -1,8 +1,12 @@ # Release Process +> **Note**: This process changed somewhat when we switched lerna to fixed mode +> for v0.23.0. Look at older versions for reference of how this worked in +> independent mode. + ### Setup Local Environment -> Employees are suppose to do this as part of onboarding, but we've put it here +> Employees are supposed to do this as part of onboarding, but we've put it here > as a reminder. `npm login` @@ -31,28 +35,25 @@ This will pull the latest of `master` onto your git clone. `./scripts/pre-release.sh` -This will print out a summary of all of the new versions that should be used -for changed components. The summary is printed out to both the console, as well -as a .new-versions.log file in the repo root. +This will ensure you can publish/tag, build all release files, ensure all tests +pass, and update our CHANGELOG prior to releasing (lerna will update the tag +for us in the next step). + +> Make sure that a CHANGELOG commit actually appears in your `git log`! ### Release `$(npm bin)/lerna publish -m "chore: Publish"` -When prompted for versions for each component, you should use the version info -output above. - -### Post-Release - -`./scripts/post-release.sh` - -This will update our CHANGELOG.md and generate a vX.Y.Z semver tag. +When prompted for version, you should pick Minor for typical releases, +or Patch for hotfix releases with no breaking changes. ### Push `git push && git push --tags` -This will push the CHANGELOG.md and tags to the remote git repository. +This will ensure the commits *and* tags are pushed to the remote git repository. +(This shouldn't be necessary; lerna should already do this in fixed mode.) ### Deploy Catalog Server diff --git a/lerna.json b/lerna.json index f36119237c0..17b9bb3a724 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "lerna": "2.0.0-beta.36", - "version": "0.23.0", + "version": "0.24.0", "commands": { "publish": { "ignore": [ diff --git a/package-lock.json b/package-lock.json index 3c6b6ef4076..05e6819310d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3715,14 +3715,14 @@ } }, "eslint": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.9.0.tgz", - "integrity": "sha1-doedJ0BoJhsZH+Dy9Wx0wvQgjos=", + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-4.10.0.tgz", + "integrity": "sha512-MMVl8P/dYUFZEvolL8PYt7qc5LNdS2lwheq9BYa5Y07FblhcZqFyaUqlS8TW5QITGex21tV4Lk0a3fK8lsJIkA==", "dev": true, "requires": { "ajv": "5.2.2", "babel-code-frame": "6.22.0", - "chalk": "2.1.0", + "chalk": "2.3.0", "concat-stream": "1.6.0", "cross-spawn": "5.1.0", "debug": "3.1.0", @@ -3738,7 +3738,7 @@ "globals": "9.17.0", "ignore": "3.3.3", "imurmurhash": "0.1.4", - "inquirer": "3.2.1", + "inquirer": "3.3.0", "is-resolvable": "1.0.0", "js-yaml": "3.10.0", "json-stable-stringify": "1.0.1", @@ -3752,7 +3752,7 @@ "pluralize": "7.0.0", "progress": "2.0.0", "require-uncached": "1.0.3", - "semver": "5.4.1", + "semver": "5.3.0", "strip-ansi": "4.0.0", "strip-json-comments": "2.0.1", "table": "4.0.1", @@ -3775,14 +3775,14 @@ } }, "chalk": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz", - "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz", + "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==", "dev": true, "requires": { "ansi-styles": "3.2.0", "escape-string-regexp": "1.0.5", - "supports-color": "4.4.0" + "supports-color": "4.5.0" } }, "debug": { @@ -3794,16 +3794,6 @@ "ms": "2.0.0" } }, - "espree": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.1.tgz", - "integrity": "sha1-DJiLirRttTEAoZVK5LqZXd0n2H4=", - "dev": true, - "requires": { - "acorn": "5.1.1", - "acorn-jsx": "3.0.1" - } - }, "esprima": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", @@ -3822,16 +3812,9 @@ "integrity": "sha512-O2v52ffjLa9VeM43J4XocZE//WT9N0IiwDa3KSHH7Tu8CtH+1qM8SIZvnsTh6v+4yFy5KUY3BHUVwjpfAWsjIA==", "dev": true, "requires": { - "argparse": "1.0.9", - "esprima": "4.0.0" + "color-convert": "1.9.0" } }, - "pluralize": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz", - "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==", - "dev": true - }, "progress": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.0.tgz", @@ -3848,9 +3831,9 @@ } }, "supports-color": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.4.0.tgz", - "integrity": "sha512-rKC3+DyXWgK0ZLKwmRsrkyHVZAjNkfzeehuFWdGGcqGDTZFH73+RH6S/RDAAxl9GusSjZSUWYLmT9N5pzXFOXQ==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz", + "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=", "dev": true, "requires": { "has-flag": "2.0.0" @@ -3865,20 +3848,24 @@ "dev": true }, "eslint-plugin-mocha": { - "version": "4.11.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-mocha/-/eslint-plugin-mocha-4.11.0.tgz", - "integrity": "sha1-kRk6L1XiCl41l0BUoAidMBmO5Xg=", + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-mocha/-/eslint-plugin-mocha-4.9.0.tgz", + "integrity": "sha1-kXqLSZq40MAdacbk+B02LuCZtv0=", "dev": true, "requires": { - "ramda": "0.24.1" - }, - "dependencies": { - "ramda": { - "version": "0.24.1", - "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz", - "integrity": "sha1-w7d1UZfzW43DUCIoJixMkd22uFc=", - "dev": true - } + "ramda": "0.23.0" + } + }, + "eslint-plugin-node": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-5.2.0.tgz", + "integrity": "sha512-N9FLFwknT5LhRhjz1lmHguNss/MCwkrLCS4CjqqTZZTJaUhLRfDNK3zxSHL/Il3Aa0Mw+xY3T1gtsJrUNoJy8Q==", + "dev": true, + "requires": { + "ignore": "3.3.3", + "minimatch": "3.0.4", + "resolve": "1.3.3", + "semver": "5.3.0" } }, "eslint-scope": { @@ -3891,6 +3878,16 @@ "estraverse": "4.2.0" } }, + "espree": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-3.5.1.tgz", + "integrity": "sha1-DJiLirRttTEAoZVK5LqZXd0n2H4=", + "dev": true, + "requires": { + "acorn": "5.1.1", + "acorn-jsx": "3.0.1" + } + }, "esprima": { "version": "2.7.3", "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", @@ -6052,13 +6049,13 @@ "dev": true }, "inquirer": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.2.1.tgz", - "integrity": "sha512-QgW3eiPN8gpj/K5vVpHADJJgrrF0ho/dZGylikGX7iqAdRgC9FVKYKWFLx6hZDBFcOLEoSqINYrVPeFAeG/PdA==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz", + "integrity": "sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==", "dev": true, "requires": { - "ansi-escapes": "2.0.0", - "chalk": "2.1.0", + "ansi-escapes": "3.0.0", + "chalk": "2.3.0", "cli-cursor": "2.1.0", "cli-width": "2.1.0", "external-editor": "2.0.4", @@ -6074,9 +6071,9 @@ }, "dependencies": { "ansi-escapes": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-2.0.0.tgz", - "integrity": "sha1-W65SvkJIeN2Xg+iRDj/Cki6DyBs=", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.0.0.tgz", + "integrity": "sha512-O/klc27mWNUigtv0F8NJWbLF00OcegQalkqKURWdosW08YZKi4m6CnSUSvIZG1otNJbTWhN01Hhz389DW7mvDQ==", "dev": true }, "ansi-regex": { @@ -6095,14 +6092,14 @@ } }, "chalk": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz", - "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz", + "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==", "dev": true, "requires": { "ansi-styles": "3.2.0", "escape-string-regexp": "1.0.5", - "supports-color": "4.2.1" + "supports-color": "4.5.0" } }, "has-flag": { @@ -6131,9 +6128,9 @@ } }, "supports-color": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.1.tgz", - "integrity": "sha512-qxzYsob3yv6U+xMzPrv170y8AwGP7i74g+pbixCfD6rgso8BscLT2qXIuz6TpOaiJZ3mFgT5O9lyT9nMU4LfaA==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz", + "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=", "dev": true, "requires": { "has-flag": "2.0.0" @@ -8677,6 +8674,12 @@ "irregular-plurals": "1.3.0" } }, + "pluralize": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz", + "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==", + "dev": true + }, "portfinder": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz", diff --git a/package.json b/package.json index 6f2fd5d5b80..e2b6330018f 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "cz-conventional-changelog": "^2.0.0", "del-cli": "^1.1.0", "dom-events": "^0.1.1", - "eslint": "^4.5.0", + "eslint": "^4.10.0", "eslint-config-google": "^0.8.1", "eslint-plugin-mocha": "^4.11.0", "extract-text-webpack-plugin": "^3.0.0", diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json index 0d073d1af36..22adc448508 100644 --- a/packages/material-components-web/package.json +++ b/packages/material-components-web/package.json @@ -1,7 +1,7 @@ { "name": "material-components-web", "description": "Modular and customizable Material Design UI components for the web", - "version": "0.23.0", + "version": "0.24.0", "license": "Apache-2.0", "keywords": [ "material components", @@ -14,34 +14,34 @@ }, "dependencies": { "@material/animation": "^0.4.1", - "@material/auto-init": "^0.2.0", - "@material/base": "^0.2.6", - "@material/button": "^0.23.0", - "@material/card": "^0.2.10", - "@material/checkbox": "^0.23.0", - "@material/dialog": "^0.23.0", - "@material/drawer": "^0.5.9", + "@material/auto-init": "^0.24.0", + "@material/base": "^0.24.0", + "@material/button": "^0.24.0", + "@material/card": "^0.24.0", + "@material/checkbox": "^0.24.0", + "@material/dialog": "^0.24.0", + "@material/drawer": "^0.24.0", "@material/elevation": "^0.1.13", - "@material/fab": "^0.23.0", - "@material/form-field": "^0.23.0", - "@material/grid-list": "^0.2.13", - "@material/icon-toggle": "^0.23.0", - "@material/layout-grid": "^0.23.0", - "@material/linear-progress": "^0.1.11", - "@material/list": "^0.23.0", - "@material/menu": "^0.23.0", - "@material/radio": "^0.23.0", - "@material/ripple": "^0.23.0", + "@material/fab": "^0.24.0", + "@material/form-field": "^0.24.0", + "@material/grid-list": "^0.24.0", + "@material/icon-toggle": "^0.24.0", + "@material/layout-grid": "^0.24.0", + "@material/linear-progress": "^0.24.0", + "@material/list": "^0.24.0", + "@material/menu": "^0.24.0", + "@material/radio": "^0.24.0", + "@material/ripple": "^0.24.0", "@material/rtl": "^0.1.8", - "@material/select": "^0.23.0", - "@material/selection-control": "^0.23.0", - "@material/slider": "^0.23.0", - "@material/snackbar": "^0.4.1", - "@material/switch": "^0.1.15", - "@material/tabs": "^0.23.0", - "@material/textfield": "^0.23.0", - "@material/theme": "^0.4.0", - "@material/toolbar": "^0.23.0", + "@material/select": "^0.24.0", + "@material/selection-control": "^0.24.0", + "@material/slider": "^0.24.0", + "@material/snackbar": "^0.24.0", + "@material/switch": "^0.24.0", + "@material/tabs": "^0.24.0", + "@material/textfield": "^0.24.0", + "@material/theme": "^0.24.0", + "@material/toolbar": "^0.24.0", "@material/typography": "^0.3.0" } } diff --git a/packages/mdc-auto-init/README.md b/packages/mdc-auto-init/README.md index 74f4bb7403d..66ec20fdd5e 100644 --- a/packages/mdc-auto-init/README.md +++ b/packages/mdc-auto-init/README.md @@ -33,6 +33,7 @@ writing the markup, simply insert a script tag that calls `mdc.autoInit()`. Make
+
@@ -52,6 +53,7 @@ using a property whose name is the value of `data-mdc-auto-init`. For example, g
+
``` diff --git a/packages/mdc-auto-init/package.json b/packages/mdc-auto-init/package.json index 79b183096fb..d458762b35d 100644 --- a/packages/mdc-auto-init/package.json +++ b/packages/mdc-auto-init/package.json @@ -1,7 +1,7 @@ { "name": "@material/auto-init", "description": "Declarative, easy-to-use auto-initialization for Material Components for the web", - "version": "0.2.0", + "version": "0.24.0", "main": "index.js", "license": "Apache-2.0", "repository": { diff --git a/packages/mdc-base/README.md b/packages/mdc-base/README.md index 192e7123562..647190f8daa 100644 --- a/packages/mdc-base/README.md +++ b/packages/mdc-base/README.md @@ -52,7 +52,7 @@ const MDCFoundation = mdc.base.MDCFoundation; ## Usage -mdc-base exposes two classes: `MDCComponent` (the default export) which all components extend from, and `MDCFoundation`, which all foundation classes extend from. To learn more about foundation classes vs. components, check out our [developer guide](https://github.com/material-components/material-components-web/blob/master/docs/DEVELOPER.md) (_WIP_). +mdc-base exposes two classes: `MDCComponent` (the default export) which all components extend from, and `MDCFoundation`, which all foundation classes extend from. To learn more about foundation classes vs. components, check out our overview on [architecture and best practices](../../docs/code). ### MDCFoundation diff --git a/packages/mdc-base/package.json b/packages/mdc-base/package.json index f139719944e..14ae098f11b 100644 --- a/packages/mdc-base/package.json +++ b/packages/mdc-base/package.json @@ -1,7 +1,7 @@ { "name": "@material/base", "description": "The set of base classes for Material Components for the web", - "version": "0.2.6", + "version": "0.24.0", "license": "Apache-2.0", "main": "index.js", "repository": { diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md index 86383f5c9d5..5a70b7b7a39 100644 --- a/packages/mdc-button/README.md +++ b/packages/mdc-button/README.md @@ -20,7 +20,7 @@ The MDC Button component is a spec-aligned button component adhering to the [Material Design button requirements](https://material.io/guidelines/components/buttons.html). It works without JavaScript with basic functionality for all states. You can enhance the button to have ripple effects by instantiating `MDCRipple` on -the `button` element. See [MDC Ripple](https://github.com/material-components/material-components-web/tree/master/packages/mdc-ripple) and [Demo](https://material-components-web.appspot.com/button.html) for details. +the `button` element. See [MDC Ripple](../mdc-ripple) and [Demo](https://material-components-web.appspot.com/button.html) for details. ## Design & API Documentation @@ -133,10 +133,11 @@ Mixin | Description `mdc-button-container-fill-color` | Sets the container color to the given color `mdc-button-ink-color` | Sets the ink color to the given color `mdc-button-stroke-color` | Sets the stroke color to the given color -`mdc-button-ripple` | Sets the ripple to the given [ripple configuration](https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/README.md) `mdc-button-corner-radius` | Sets the corner radius to the given number (defaults to 2px) `mdc-button-stroke-width` | Sets the stroke width to the given number (defaults to 2px) +The ripple effect for the Button component is styled using [MDC Ripple](../mdc-ripple) mixins. + #### Caveat: Edge and CSS Variables In browsers that fully support CSS variables, the above mixins will hook up styles using CSS variables if a theme property is passed. diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss index 33015b491f5..19c47cce4eb 100644 --- a/packages/mdc-button/_mixins.scss +++ b/packages/mdc-button/_mixins.scss @@ -28,10 +28,10 @@ @if ($light-or-dark == "light") { @include mdc-button-ink-color(text-primary-on-dark); - @include mdc-button-ripple((theme-style: text-primary-on-dark, opacity: $mdc-filled-button-ripple-opacity)); + @include mdc-ripple-color(text-primary-on-dark, $mdc-filled-button-ripple-opacity); } @else { @include mdc-button-ink-color(text-primary-on-light); - @include mdc-button-ripple((theme-style: text-primary-on-light, opacity: $mdc-filled-button-ripple-opacity)); + @include mdc-ripple-color(text-primary-on-light, $mdc-filled-button-ripple-opacity); } } @@ -55,14 +55,6 @@ } } -@mixin mdc-button-ripple($ripple-config) { - &:not(:disabled) { - @include mdc-ripple-base; - @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config)); - @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config)); - } -} - @mixin mdc-button-corner-radius($corner-radius) { border-radius: $corner-radius; } @@ -82,11 +74,13 @@ @mixin mdc-button-base_() { @include mdc-typography(button); + @include mdc-ripple-surface; + @include mdc-ripple-radius; display: inline-block; position: relative; box-sizing: border-box; - min-width: 88px; + min-width: 64px; height: $mdc-button-height; padding: 0 16px; border: none; diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss index b63f99e9d19..9c5f238cd70 100644 --- a/packages/mdc-button/mdc-button.scss +++ b/packages/mdc-button/mdc-button.scss @@ -14,6 +14,7 @@ // limitations under the License. // +@import "@material/ripple/mixins"; @import "@material/theme/mixins"; @import "./mixins"; @import "./variables"; @@ -24,7 +25,7 @@ @include mdc-button-corner-radius(2px); @include mdc-button-container-fill-color(transparent); @include mdc-button-ink-color(primary); - @include mdc-button-ripple((theme-style: primary, opacity: $mdc-unfilled-button-ripple-opacity)); + @include mdc-ripple-color(primary, $mdc-unfilled-button-ripple-opacity); } .mdc-button--raised, @@ -32,7 +33,7 @@ @include mdc-button--filled_; @include mdc-button-container-fill-color(primary); @include mdc-button-ink-color(text-primary-on-primary); - @include mdc-button-ripple((theme-style: text-primary-on-primary, opacity: $mdc-filled-button-ripple-opacity)); + @include mdc-ripple-color(text-primary-on-primary, $mdc-filled-button-ripple-opacity); } .mdc-button--raised { diff --git a/packages/mdc-button/package.json b/packages/mdc-button/package.json index b805b2dd9f4..ec0ba7ccf0e 100644 --- a/packages/mdc-button/package.json +++ b/packages/mdc-button/package.json @@ -1,7 +1,7 @@ { "name": "@material/button", "description": "The Material Components for the web button component", - "version": "0.23.0", + "version": "0.24.0", "license": "Apache 2.0", "keywords": [ "material components", @@ -14,8 +14,8 @@ }, "dependencies": { "@material/elevation": "^0.1.13", - "@material/ripple": "^0.23.0", - "@material/theme": "^0.4.0", + "@material/ripple": "^0.24.0", + "@material/theme": "^0.24.0", "@material/typography": "^0.3.0" } } diff --git a/packages/mdc-card/package.json b/packages/mdc-card/package.json index cffa8643b0b..042d7bc1da0 100644 --- a/packages/mdc-card/package.json +++ b/packages/mdc-card/package.json @@ -1,6 +1,6 @@ { "name": "@material/card", - "version": "0.2.10", + "version": "0.24.0", "description": "The Material Components for the web card component", "license": "Apache-2.0", "keywords": [ @@ -14,7 +14,7 @@ }, "dependencies": { "@material/elevation": "^0.1.13", - "@material/theme": "^0.4.0", + "@material/theme": "^0.24.0", "@material/typography": "^0.3.0", "@material/rtl": "^0.1.8" } diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md index 48fe5674ac3..3366d0a1ba2 100644 --- a/packages/mdc-checkbox/README.md +++ b/packages/mdc-checkbox/README.md @@ -266,9 +266,8 @@ Mixin | Description `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox `mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons `mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator -`mdc-checkbox-ripple($ripple-config)` | Sets the ripple to the given [ripple configuration][ripple-readme] -[ripple-readme]: https://github.com/material-components/material-components-web/blob/master/packages/mdc-ripple/README.md +The ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins. #### `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-fill-color, $generate-keyframes)` diff --git a/packages/mdc-checkbox/_mixins.scss b/packages/mdc-checkbox/_mixins.scss index 4e7c8515c28..1a3ac58600b 100644 --- a/packages/mdc-checkbox/_mixins.scss +++ b/packages/mdc-checkbox/_mixins.scss @@ -15,7 +15,6 @@ // @import "@material/animation/functions"; -@import "@material/ripple/mixins"; @import "@material/rtl/mixins"; @import "./functions"; @import "./keyframes"; @@ -87,13 +86,6 @@ } } -@mixin mdc-checkbox-ripple($ripple-config) { - $ripple-config: map-merge((opacity: $mdc-checkbox-ripple-opacity, radius: 50%), $ripple-config); - - @include mdc-ripple-bg(map-merge((pseudo: "::before"), $ripple-config)); - @include mdc-ripple-fg(map-merge((pseudo: "::after"), $ripple-config)); -} - // // Private // diff --git a/packages/mdc-checkbox/_variables.scss b/packages/mdc-checkbox/_variables.scss index cc405ef98d3..dac2b6af494 100644 --- a/packages/mdc-checkbox/_variables.scss +++ b/packages/mdc-checkbox/_variables.scss @@ -29,6 +29,7 @@ $mdc-checkbox-border-width: 2px; $mdc-checkbox-transition-duration: 90ms; $mdc-checkbox-item-spacing: 4px; $mdc-checkbox-ripple-opacity: .14; +$mdc-checkbox-ripple-radius: 50%; $mdc-checkbox-focus-indicator-opacity: .26; // Manual calculation done on SVG diff --git a/packages/mdc-checkbox/mdc-checkbox.scss b/packages/mdc-checkbox/mdc-checkbox.scss index 7d76372bbc4..b167e53a5be 100644 --- a/packages/mdc-checkbox/mdc-checkbox.scss +++ b/packages/mdc-checkbox/mdc-checkbox.scss @@ -14,6 +14,7 @@ // limitations under the License. // +@import "@material/ripple/mixins"; @import "@material/theme/mixins"; @import "./mixins"; @import "./variables"; @@ -22,10 +23,11 @@ .mdc-checkbox { @include mdc-checkbox-base_; - @include mdc-ripple-base; @include mdc-checkbox-ink-color($mdc-checkbox-mark-color); @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color); - @include mdc-checkbox-ripple((theme-style: $mdc-checkbox-baseline-theme-color, opacity: $mdc-checkbox-ripple-opacity)); + @include mdc-ripple-surface; + @include mdc-ripple-color($mdc-checkbox-baseline-theme-color, $mdc-checkbox-ripple-opacity); + @include mdc-ripple-radius($mdc-checkbox-ripple-radius); @include mdc-checkbox-container-colors(); @include mdc-theme-dark { diff --git a/packages/mdc-checkbox/package.json b/packages/mdc-checkbox/package.json index dffdbef773e..333675cfcec 100644 --- a/packages/mdc-checkbox/package.json +++ b/packages/mdc-checkbox/package.json @@ -1,7 +1,7 @@ { "name": "@material/checkbox", "description": "The Material Components for the web checkbox component", - "version": "0.23.0", + "version": "0.24.0", "license": "Apache-2.0", "keywords": [ "material components", @@ -15,10 +15,10 @@ }, "dependencies": { "@material/animation": "^0.4.1", - "@material/base": "^0.2.6", - "@material/ripple": "^0.23.0", - "@material/selection-control": "^0.23.0", + "@material/base": "^0.24.0", + "@material/ripple": "^0.24.0", + "@material/selection-control": "^0.24.0", "@material/rtl": "^0.1.8", - "@material/theme": "^0.4.0" + "@material/theme": "^0.24.0" } } diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md index c314824f778..e41983b557e 100644 --- a/packages/mdc-dialog/README.md +++ b/packages/mdc-dialog/README.md @@ -70,8 +70,13 @@ Dialogs inform users about a specific task and may contain critical information In the example above, we've created a dialog box in an `aside` element. Note that you can place content inside the dialog. There are two types: dialog & dialogs with scrollable content. These are declared using CSS classes. -Some dialogs will not be tall enough to accomodate everything you would like to display in them. For this there is a -`mdc-dialog__body--scrollable` modifier to allow scrolling in the dialog. +In most cases, dialog content should be able to fit without scrolling. However, certain special cases call for the +ability to scroll the dialog's contents (see "Scrollable content exception" under +[Behavior](https://material.io/guidelines/components/dialogs.html#dialogs-behavior)). For these special cases, there is +a `mdc-dialog__body--scrollable` modifier to allow scrolling in the dialog. + +> **Note**: The body of a scrollable dialog is styled with a default max-height; this can be overridden as necessary via +> the `.mdc-dialog__body--scrollable` selector. ```html