-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(material-experimental/mdc-list): no longer use deprecated st…
…yles (#22530) We recently switched the MDC list to deprecated styles as the MDC team started reworking the MDC list and our usage is not compatible. With this change, we start using the standard non-deprecated MDC list styles. This allows us to simplify a few custom CSS overrides due the new MDC list API being more aligned with the API we want to support for backwards comaptibility with the non-MDC list (e.g. per list-item icons and avatars instead of it being a per-list setting).
- Loading branch information
1 parent
0029097
commit 3aa65ba
Showing
25 changed files
with
389 additions
and
1,004 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 7 additions & 21 deletions
28
src/material-experimental/mdc-list/_list-option-theme.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
src/material-experimental/mdc-list/_list-option-trailing-avatar-compat.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| @use '@material/typography/typography'; | ||
| @use '@material/feature-targeting/feature-targeting'; | ||
| @use '@material/density/functions' as density-functions; | ||
| @use '@material/list/evolution-mixins' as mdc-list; | ||
| @use '@material/list/evolution-variables' as mdc-list-variables; | ||
|
|
||
| // For compatibility with the non-MDC selection list, we support avatars that are | ||
| // shown at the end of the list option. This is not supported by the MDC list as the | ||
| // spec only defines avatars at the beginning of a list item. For selection list options, | ||
| // we support changing the checkbox position to `before`. This results in the avatar from | ||
| // the list start being moved to the end. Similar to MDC's `--trailing-icon` class, we | ||
| // implement a `--trailing-avatar` class that is based on the original `--leading-avatar` | ||
| // implementation. See: https://github.com/material-components/material-components-web/blob/3f342c3f4715fd3587f327ce4ea6b5dd314c5c55/packages/mdc-list/_evolution-mixins.scss#L198-L217 | ||
|
|
||
| @mixin core-styles($query) { | ||
| $feat-structure: feature-targeting.create-target($query, structure); | ||
|
|
||
| .mat-mdc-list-option-with-trailing-avatar { | ||
| @include mdc-list.item-end-spacing(16px, $query: $query); | ||
| @include mdc-list.item-end-size(40px, $query: $query); | ||
|
|
||
| &.mdc-list-item--with-two-lines { | ||
| .mdc-list-item__primary-text { | ||
| @include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query); | ||
| } | ||
| } | ||
|
|
||
| .mdc-list-item__end { | ||
| @include feature-targeting.targets($feat-structure) { | ||
| border-radius: 50%; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin density-styles($density-scale) { | ||
| $one-line-tall-height: density-functions.prop-value( | ||
| $density-config: mdc-list-variables.$one-line-item-tall-density-config, | ||
| $density-scale: $density-scale, | ||
| $property-name: height, | ||
| ); | ||
|
|
||
| $two-line-tall-height: density-functions.prop-value( | ||
| $density-config: mdc-list-variables.$two-line-item-tall-density-config, | ||
| $density-scale: $density-scale, | ||
| $property-name: height, | ||
| ); | ||
|
|
||
| .mat-mdc-list-option-with-trailing-avatar { | ||
| @include mdc-list.one-line-item-height($one-line-tall-height); | ||
| @include mdc-list.two-line-item-height($two-line-tall-height); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.