From f4241a42a49d130fcf5b5a9df2239276628a85f1 Mon Sep 17 00:00:00 2001 From: Allan Chen Date: Wed, 11 Aug 2021 09:53:19 -0700 Subject: [PATCH 001/618] feat(button): add static-styles-without-ripple for MWC consumption PiperOrigin-RevId: 390155446 --- packages/mdc-button/_button-base.scss | 2 -- packages/mdc-button/_button-filled.scss | 6 ++++++ packages/mdc-button/_button-outlined.scss | 5 +++++ packages/mdc-button/_button-protected.scss | 6 ++++++ packages/mdc-button/_button-text.scss | 6 ++++++ packages/mdc-button/_button.scss | 21 +++++++++++++-------- 6 files changed, 36 insertions(+), 10 deletions(-) diff --git a/packages/mdc-button/_button-base.scss b/packages/mdc-button/_button-base.scss index 256d9ab866d..cfcc7a45b89 100644 --- a/packages/mdc-button/_button-base.scss +++ b/packages/mdc-button/_button-base.scss @@ -29,13 +29,11 @@ @use '@material/rtl/rtl'; @use '@material/touch-target/touch-target'; @use '@material/typography/typography'; -@use './button-ripple'; @use './button-shared-theme'; @mixin static-styles($query: feature-targeting.all()) { @include _static-styles-base($query: $query); @include _typography-styles($query: $query); - @include button-ripple.static-styles($query: $query); } @mixin _static-styles-base($query: feature-targeting.all()) { diff --git a/packages/mdc-button/_button-filled.scss b/packages/mdc-button/_button-filled.scss index ba289e64351..8f4c9aa8847 100644 --- a/packages/mdc-button/_button-filled.scss +++ b/packages/mdc-button/_button-filled.scss @@ -27,6 +27,7 @@ @use '@material/tokens/resolvers'; @use './button-base'; @use './button-filled-theme'; +@use './button-ripple'; @use './button-shared-theme'; @mixin styles( @@ -46,6 +47,11 @@ } @mixin static-styles($query: feature-targeting.all()) { + @include static-styles-without-ripple($query: $query); + @include button-ripple.static-styles($query: $query); +} + +@mixin static-styles-without-ripple($query: feature-targeting.all()) { .mdc-button--unelevated { // TODO(b/179402677): move into theme config @include button-shared-theme.horizontal-padding( diff --git a/packages/mdc-button/_button-outlined.scss b/packages/mdc-button/_button-outlined.scss index a519985dc6c..91e8c96395e 100644 --- a/packages/mdc-button/_button-outlined.scss +++ b/packages/mdc-button/_button-outlined.scss @@ -43,6 +43,11 @@ } @mixin static-styles($query: feature-targeting.all()) { + @include static-styles-without-ripple($query: $query); + @include button-ripple.static-styles($query: $query); +} + +@mixin static-styles-without-ripple($query: feature-targeting.all()) { .mdc-button--outlined { @include _static-styles($query: $query); } diff --git a/packages/mdc-button/_button-protected.scss b/packages/mdc-button/_button-protected.scss index 0e74d785304..045026a0a8f 100644 --- a/packages/mdc-button/_button-protected.scss +++ b/packages/mdc-button/_button-protected.scss @@ -27,6 +27,7 @@ @use '@material/feature-targeting/feature-targeting'; @use './button-base'; @use './button-protected-theme'; +@use './button-ripple'; @use './button-shared-theme'; @mixin styles( @@ -46,6 +47,11 @@ } @mixin static-styles($query: feature-targeting.all()) { + @include static-styles-without-ripple($query: $query); + @include button-ripple.static-styles($query: $query); +} + +@mixin static-styles-without-ripple($query: feature-targeting.all()) { .mdc-button--raised { @include _raised-transition($query); // TODO(b/179402677): move into theme config diff --git a/packages/mdc-button/_button-text.scss b/packages/mdc-button/_button-text.scss index ab04822c147..7b44c5cb537 100644 --- a/packages/mdc-button/_button-text.scss +++ b/packages/mdc-button/_button-text.scss @@ -25,6 +25,7 @@ @use '@material/feature-targeting/feature-targeting'; @use '@material/tokens/resolvers'; +@use './button-ripple'; @use './button-shared-theme'; @use './button-text-theme'; @@ -41,6 +42,11 @@ } @mixin static-styles($query: feature-targeting.all()) { + @include static-styles-without-ripple($query: $query); + @include button-ripple.static-styles($query: $query); +} + +@mixin static-styles-without-ripple($query: feature-targeting.all()) { .mdc-button { // TODO(b/179402677): move this into theme config @include button-shared-theme.horizontal-padding( diff --git a/packages/mdc-button/_button.scss b/packages/mdc-button/_button.scss index 5b6bf983d56..ad8cce9a28a 100644 --- a/packages/mdc-button/_button.scss +++ b/packages/mdc-button/_button.scss @@ -76,21 +76,26 @@ } @mixin static-styles($query: feature-targeting.all()) { + @include static-styles-without-ripple($query: $query); + @include button-ripple.static-styles($query: $query); +} + +@mixin static-styles-without-ripple($query: feature-targeting.all()) { @include button-base.static-styles($query: $query); - @include button-text.static-styles($query: $query); - @include button-filled.static-styles($query: $query); - @include button-protected.static-styles($query: $query); - @include button-outlined.static-styles($query: $query); + @include button-text.static-styles-without-ripple($query: $query); + @include button-filled.static-styles-without-ripple($query: $query); + @include button-protected.static-styles-without-ripple($query: $query); + @include button-outlined.static-styles-without-ripple($query: $query); } // Legacy mixins @mixin without-ripple($query: feature-targeting.all()) { @include button-base.deprecated-static-styles-without-ripple($query: $query); - @include button-text.static-styles($query: $query); - @include button-filled.static-styles($query: $query); - @include button-protected.static-styles($query: $query); - @include button-outlined.static-styles($query: $query); + @include button-text.static-styles-without-ripple($query: $query); + @include button-filled.static-styles-without-ripple($query: $query); + @include button-protected.static-styles-without-ripple($query: $query); + @include button-outlined.static-styles-without-ripple($query: $query); @include _theme-styles-without-ripple($query: $query); } From 3e9646df3711cc241bbcf12ede24b688a17d17d2 Mon Sep 17 00:00:00 2001 From: Brandon Diamond Date: Wed, 11 Aug 2021 10:08:54 -0700 Subject: [PATCH 002/618] docs: Describe deprecated list and migration plan. PiperOrigin-RevId: 390159796 --- packages/mdc-list/README.md | 402 +++++++++++++++++++----------------- 1 file changed, 209 insertions(+), 193 deletions(-) diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md index 2aeb4cce870..e44c1a6a488 100644 --- a/packages/mdc-list/README.md +++ b/packages/mdc-list/README.md @@ -18,6 +18,22 @@ There are three list types: ![Composite image of the three list types](images/lists-types.png) +## List is being updated + +List is currently being updated to better match the Material spec. As a result, +there are two versions of List available: the deprecated old version +(documented below) and the new, future-proof version (documented [here](https://github.com/material-components/material-components-web/files/6955906/New.List.Public.Documentation.PUBLIC.DRAFT.pdf)). + +Components that require a List (e.g., Menu, Select, Navigation Drawer) still use +the deprecated version. Otherwise, we encourage you to use the new version in +your projects. + +Note that both new and old versions share the same JavaScript component and +imports. *However, there are differences in class names and DOM structure:* the +old version uses class names with a `mdc-deprecated-list` prefix (e.g., +`mdc-deprecated-list-item`) whereas the new version uses the typical `mdc-list` +prefix (e.g., `mdc-list-item`). + ## Using lists ### Installation @@ -31,7 +47,7 @@ npm install @material/list ```scss @use "@material/list"; -@include list.core-styles; +@include list.deprecated-core-styles; ``` ### JavaScript @@ -41,7 +57,7 @@ MDC List includes an optional JavaScript component which can be used for keyboar ```js import {MDCList} from '@material/list'; -const list = new MDCList(document.querySelector('.mdc-list')); +const list = new MDCList(document.querySelector('.mdc-deprecated-list')); ``` > See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript. @@ -98,18 +114,18 @@ Single-line list items contain a maximum of one line of text. ### Single-line list example ```html -