From ca2cd56bd1b668904c6aea2b4d18602e773e1c9f Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 6 Sep 2023 11:21:49 -0700 Subject: [PATCH] fix(list): remove font shorthand tokens BREAKING CHANGE: replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight` PiperOrigin-RevId: 563162539 --- .../figures/list/theming-avatar.html | 2 +- .../components/figures/list/theming-list.html | 8 +-- docs/components/list.md | 16 +++--- list/internal/listitem/_list-item.scss | 20 +++++-- list/list-item_test.ts | 17 ++++++ tokens/_md-comp-list-item.scss | 55 ++++++------------- 6 files changed, 64 insertions(+), 54 deletions(-) create mode 100644 list/list-item_test.ts diff --git a/docs/components/figures/list/theming-avatar.html b/docs/components/figures/list/theming-avatar.html index 30729d431..bb9672aa5 100644 --- a/docs/components/figures/list/theming-avatar.html +++ b/docs/components/figures/list/theming-avatar.html @@ -10,7 +10,7 @@ --md-list-item-container-color: transparent; --md-list-item-leading-avatar-color: #9cf1f0; --md-list-item-leading-avatar-label-color: #002020; - --md-list-item-leading-avatar-label-type: system-ui; + --md-list-item-leading-avatar-label-font: system-ui; --md-list-item-leading-avatar-shape: 0; --md-list-item-leading-avatar-size: 36px; } diff --git a/docs/components/figures/list/theming-list.html b/docs/components/figures/list/theming-list.html index b0b1998ec..9a356acbb 100644 --- a/docs/components/figures/list/theming-list.html +++ b/docs/components/figures/list/theming-list.html @@ -16,9 +16,9 @@ --md-list-item-label-text-color: #161d1d; --md-list-item-supporting-text-color: #3f4948; --md-list-item-trailing-supporting-text-color: #3f4948; - --md-list-item-label-text-type: system-ui; - --md-list-item-supporting-text-type: system-ui; - --md-list-item-trailing-supporting-text-type: system-ui; + --md-list-item-label-text-font: system-ui; + --md-list-item-supporting-text-font: system-ui; + --md-list-item-trailing-supporting-text-font: system-ui; } @@ -39,4 +39,4 @@ - \ No newline at end of file + diff --git a/docs/components/list.md b/docs/components/list.md index 900a99a38..5d28b426a 100644 --- a/docs/components/list.md +++ b/docs/components/list.md @@ -295,9 +295,9 @@ Token | Default value `--md-list-item-label-text-color` | `--md-sys-color-on-surface` `--md-list-item-supporting-text-color` | `--md-sys-color-on-surface-variant` `--md-list-item-trailing-supporting-text-color` | `--md-sys-color-on-surface-variant` -`--md-list-item-label-text-type` | `400 1rem/1.5rem Roboto` -`--md-list-item-supporting-text-type` | `400 0.875rem/1.25rem Roboto` -`--md-list-item-trailing-supporting-text-type` | `500 0.688rem/1rem Roboto` +`--md-list-item-label-text-font` | `--md-sys-typescale-label-large-font` +`--md-list-item-supporting-text-font` | `--md-sys-typescale-body-medium-font` +`--md-list-item-trailing-supporting-text-font` | `--md-sys-typescale-label-small-font` * [All List tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-list.scss) @@ -323,9 +323,9 @@ a different theme applied](images/list/theming-list.webp) --md-list-item-label-text-color: #161d1d; --md-list-item-supporting-text-color: #3f4948; --md-list-item-trailing-supporting-text-color: #3f4948; - --md-list-item-label-text-type: system-ui; - --md-list-item-supporting-text-type: system-ui; - --md-list-item-trailing-supporting-text-type: system-ui; + --md-list-item-label-text-font: system-ui; + --md-list-item-supporting-text-font: system-ui; + --md-list-item-trailing-supporting-text-font: system-ui; } @@ -405,7 +405,7 @@ applied](images/list/theming-icon.webp) Token | Default value ------------------------------------------- | ------------- `--md-list-item-leading-avatar-label-color` | `--md-sys-color-on-primary-container` -`--md-list-item-leading-avatar-label-type` | `500 1rem/1.5rem Roboto` +`--md-list-item-leading-avatar-label-font` | `--md-sys-typescale-title-medium-font` `--md-list-item-leading-avatar-color` | `--md-sys-color-primary-container` `--md-list-item-leading-avatar-size` | `40px` `--md-list-item-leading-avatar-shape` | `9999px` @@ -430,7 +430,7 @@ Token | Default value --md-list-item-container-color: transparent; --md-list-item-leading-avatar-color: #9cf1f0; --md-list-item-leading-avatar-label-color: #002020; - --md-list-item-leading-avatar-label-type: system-ui; + --md-list-item-leading-avatar-label-font: system-ui; --md-list-item-leading-avatar-shape: 0; --md-list-item-leading-avatar-size: 36px; } diff --git a/list/internal/listitem/_list-item.scss b/list/internal/listitem/_list-item.scss index f8f717420..50f3ba47c 100644 --- a/list/internal/listitem/_list-item.scss +++ b/list/internal/listitem/_list-item.scss @@ -169,7 +169,10 @@ overflow-x: hidden; white-space: nowrap; color: var(--_label-text-color); - font: var(--_label-text-type); + font-family: var(--_label-text-font); + font-size: var(--_label-text-size); + line-height: var(--_label-text-line-height); + font-weight: var(--_label-text-weight); :hover & { color: var(--_hover-label-text-color); @@ -195,7 +198,10 @@ overflow: hidden; width: 100%; color: var(--_supporting-text-color); - font: var(--_supporting-text-type); + font-family: var(--_supporting-text-font); + font-size: var(--_supporting-text-size); + line-height: var(--_supporting-text-line-height); + font-weight: var(--_supporting-text-weight); // Box is supposed to be deprecated, but line-clamp is not. It's still on // standards track and can only be applied with display: -webkit-box and @@ -216,7 +222,10 @@ } .trailing-supporting-text { - font: var(--_trailing-supporting-text-type); + font-family: var(--_trailing-supporting-text-font); + font-size: var(--_trailing-supporting-text-size); + line-height: var(--_trailing-supporting-text-line-height); + font-weight: var(--_trailing-supporting-text-weight); .list-item:not(.disabled) & { color: var(--_trailing-supporting-text-color); @@ -347,7 +356,10 @@ width: var(--_leading-avatar-size); border-radius: var(--_leading-avatar-shape); color: var(--_leading-avatar-label-color); - font: var(--_leading-avatar-label-type); + font-family: var(--_leading-avatar-label-font); + font-size: var(--_leading-avatar-label-size); + line-height: var(--_leading-avatar-label-line-height); + font-weight: var(--_leading-avatar-label-weight); } } diff --git a/list/list-item_test.ts b/list/list-item_test.ts new file mode 100644 index 000000000..5108e65e5 --- /dev/null +++ b/list/list-item_test.ts @@ -0,0 +1,17 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +// import 'jasmine'; (google3-only) + +import {createTokenTests} from '../testing/tokens.js'; + +import {MdListItem} from './list-item.js'; + +describe('', () => { + describe('.styles', () => { + createTokenTests(MdListItem.styles); + }); +}); diff --git a/tokens/_md-comp-list-item.scss b/tokens/_md-comp-list-item.scss index 321c4ac06..03767974a 100644 --- a/tokens/_md-comp-list-item.scss +++ b/tokens/_md-comp-list-item.scss @@ -37,12 +37,17 @@ $supported-tokens: ( 'hover-state-layer-opacity', 'hover-trailing-icon-icon-color', 'label-text-color', + 'label-text-font', 'label-text-line-height', - 'label-text-type', + 'label-text-size', + 'label-text-weight', 'large-leading-video-height', 'leading-avatar-color', 'leading-avatar-label-color', - 'leading-avatar-label-type', + 'leading-avatar-label-font', + 'leading-avatar-label-line-height', + 'leading-avatar-label-size', + 'leading-avatar-label-weight', 'leading-avatar-shape', 'leading-avatar-size', 'leading-element-leading-space', @@ -63,15 +68,20 @@ $supported-tokens: ( 'pressed-trailing-icon-icon-color', 'small-leading-video-height', 'supporting-text-color', - 'supporting-text-type', + 'supporting-text-font', + 'supporting-text-line-height', + 'supporting-text-size', + 'supporting-text-weight', 'three-line-container-height', 'trailing-element-headline-trailing-element-space', 'trailing-icon-color', 'trailing-icon-size', 'trailing-space', 'trailing-supporting-text-color', + 'trailing-supporting-text-font', 'trailing-supporting-text-line-height', - 'trailing-supporting-text-type', + 'trailing-supporting-text-size', + 'trailing-supporting-text-weight', 'two-line-container-height', // go/keep-sorted end ); @@ -89,15 +99,10 @@ $unsupported-tokens: ( 'dragged-trailing-icon-icon-color', 'focus-state-layer-color', 'focus-state-layer-opacity', - 'label-text-font', - 'label-text-size', 'label-text-tracking', - 'label-text-weight', - 'leading-avatar-label-font', - 'leading-avatar-label-line-height', - 'leading-avatar-label-size', + 'label-text-type', 'leading-avatar-label-tracking', - 'leading-avatar-label-weight', + 'leading-avatar-label-type', 'overline-color', 'overline-font', 'overline-line-height', @@ -106,15 +111,10 @@ $unsupported-tokens: ( 'overline-type', 'overline-weight', 'selected-trailing-icon-color', - 'supporting-text-font', - 'supporting-text-line-height', - 'supporting-text-size', 'supporting-text-tracking', - 'supporting-text-weight', - 'trailing-supporting-text-font', - 'trailing-supporting-text-size', + 'supporting-text-type', 'trailing-supporting-text-tracking', - 'trailing-supporting-text-weight', + 'trailing-supporting-text-type', 'unselected-trailing-icon-color', // go/keep-sorted end ); @@ -129,7 +129,6 @@ $_default: ( @function values($deps: $_default, $exclude-hardcoded-values: false) { $original-tokens: md-comp-list.values($deps, $exclude-hardcoded-values); - $original-tokens: map.merge($original-tokens, _get-override-tokens($deps)); $tokens: values.validate( $original-tokens, @@ -173,21 +172,3 @@ $_default: ( // go/keep-sorted end ); } - -@function _get-override-tokens($deps) { - // TODO(b/271876162): remove when tokens compiler emits typescale tokens - @return ( - // go/keep-sorted start - 'list-item-label-text-type': - map.get($deps, 'md-sys-typescale', 'body-large'), - 'list-item-leading-avatar-label-type': - map.get($deps, 'md-sys-typescale', 'title-medium'), - // unsupported token - // 'list-item-overline-type': map.get($deps, 'md-sys-typescale', 'label-small'), - 'list-item-supporting-text-type': - map.get($deps, 'md-sys-typescale', 'body-medium'), - 'list-item-trailing-supporting-text-type': - map.get($deps, 'md-sys-typescale', 'label-small'), - // go/keep-sorted end - ); -}