Skip to content

Commit

Permalink
fix(text-field,select): remove font shorthand tokens
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: replace `*-type` font tokens with `-font`, `-size`, `-line-height`, and `-weight`

PiperOrigin-RevId: 563160975
  • Loading branch information
@asyncLiz @copybara-github
asyncLiz authored and copybara-github committed Sep 6, 2023
1 parent f77ee36 commit 0c5a2a2
Show file tree
Hide file tree
Showing 14 changed files with 177 additions and 100 deletions.
10 changes: 5 additions & 5 deletions docs/components/text-field.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,8 +357,8 @@ Token | Default value
`--md-filled-text-field-container-shape` | `4px 4px 0px 0px`
`--md-filled-text-field-container-color` | `--md-sys-color-surface-container-highest`
`--md-filled-text-field-focus-active-indicator-color` | `--md-sys-color-primary`
`--md-filled-text-field-input-text-type` | `--md-sys-typescale-body-large`
`--md-filled-text-field-label-text-type` | `--md-sys-typescale-body-large`
`--md-filled-text-field-input-text-font` | `--md-sys-typescale-body-large-font`
`--md-filled-text-field-label-text-font` | `--md-sys-typescale-body-large-font`

* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-text-field.scss)
<!-- {.external} -->
Expand Down Expand Up @@ -386,11 +386,11 @@ Token | Default value
### Outlined text field tokens

Token | Default value
---------------------------------------------- | -------------------------------
---------------------------------------------- | -------------
`--md-outlined-text-field-container-shape` | `4px`
`--md-outlined-text-field-focus-outline-color` | `--md-sys-color-primary`
`--md-outlined-text-field-input-text-type` | `--md-sys-typescale-body-large`
`--md-outlined-text-field-label-text-type` | `--md-sys-typescale-body-large`
`--md-outlined-text-field-input-text-font` | `--md-sys-typescale-body-large-font`
`--md-outlined-text-field-label-text-font` | `--md-sys-typescale-body-large-font`

* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-text-field.scss)
<!-- {.external} -->
Expand Down
5 changes: 4 additions & 1 deletion field/internal/_content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,10 @@ $_enter-delay: $_label-duration - $_visible-duration;
// Use `currentColor` to inherit the various state colors that are set
// below.
color: currentColor;
font: var(--_content-type);
font-family: var(--_content-font);
font-size: var(--_content-size);
line-height: var(--_content-line-height);
font-weight: var(--_content-weight);
width: 100%;
white-space: pre-wrap; // Needed for Firefox textarea with "all: unset"
}
Expand Down
5 changes: 4 additions & 1 deletion field/internal/_label.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@
text-overflow: ellipsis;
white-space: nowrap;
z-index: 1;
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);
width: min-content;
}

Expand Down
5 changes: 4 additions & 1 deletion field/internal/_supporting-text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
.supporting-text {
color: var(--_supporting-text-color);
display: flex;
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);
gap: 16px;
justify-content: space-between;
padding-inline-start: var(--_supporting-text-leading-space);
Expand Down
16 changes: 13 additions & 3 deletions select/internal/_filled-select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,10 @@
'container-shape-start-start':
var(--_text-field-container-shape-start-start),
'content-color': var(--_text-field-input-text-color),
'content-type': var(--_text-field-input-text-type),
'content-font': var(--_text-field-input-text-font),
'content-line-height': var(--_text-field-input-text-line-height),
'content-size': var(--_text-field-input-text-size),
'content-weight': var(--_text-field-input-text-weight),
'disabled-active-indicator-color':
var(--_text-field-disabled-active-indicator-color),
'disabled-active-indicator-height':
Expand Down Expand Up @@ -193,14 +196,21 @@
'hover-trailing-content-color':
var(--_text-field-hover-trailing-icon-color),
'label-text-color': var(--_text-field-label-text-color),
'label-text-font': var(--_text-field-label-text-font),
'label-text-line-height': var(--_text-field-label-text-line-height),
'label-text-populated-line-height':
var(--_text-field-label-text-populated-line-height),
'label-text-populated-size':
var(--_text-field-label-text-populated-size),
'label-text-type': var(--_text-field-label-text-type),
'label-text-size': var(--_text-field-label-text-size),
'label-text-weight': var(--_text-field-label-text-weight),
'leading-content-color': var(--_text-field-leading-icon-color),
'supporting-text-color': var(--_text-field-supporting-text-color),
'supporting-text-type': var(--_text-field-supporting-text-type),
'supporting-text-font': var(--_text-field-supporting-text-font),
'supporting-text-line-height':
var(--_text-field-supporting-text-line-height),
'supporting-text-size': var(--_text-field-supporting-text-size),
'supporting-text-weight': var(--_text-field-supporting-text-weight),
'trailing-content-color': var(--_text-field-trailing-icon-color),
// go/keep-sorted end
)
Expand Down
16 changes: 13 additions & 3 deletions select/internal/_outlined-select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,10 @@
'container-shape-start-start':
var(--_text-field-container-shape-start-start),
'content-color': var(--_text-field-input-text-color),
'content-type': var(--_text-field-input-text-type),
'content-font': var(--_text-field-input-text-font),
'content-line-height': var(--_text-field-input-text-line-height),
'content-size': var(--_text-field-input-text-size),
'content-weight': var(--_text-field-input-text-weight),
'disabled-content-color': var(--_text-field-disabled-input-text-color),
'disabled-content-opacity':
var(--_text-field-disabled-input-text-opacity),
Expand Down Expand Up @@ -149,16 +152,23 @@
'hover-trailing-content-color':
var(--_text-field-hover-trailing-icon-color),
'label-text-color': var(--_text-field-label-text-color),
'label-text-font': var(--_text-field-label-text-font),
'label-text-line-height': var(--_text-field-label-text-line-height),
'label-text-populated-line-height':
var(--_text-field-label-text-populated-line-height),
'label-text-populated-size':
var(--_text-field-label-text-populated-size),
'label-text-type': var(--_text-field-label-text-type),
'label-text-size': var(--_text-field-label-text-size),
'label-text-weight': var(--_text-field-label-text-weight),
'leading-content-color': var(--_text-field-leading-icon-color),
'outline-color': var(--_text-field-outline-color),
'outline-width': var(--_text-field-outline-width),
'supporting-text-color': var(--_text-field-supporting-text-color),
'supporting-text-type': var(--_text-field-supporting-text-type),
'supporting-text-font': var(--_text-field-supporting-text-font),
'supporting-text-line-height':
var(--_text-field-supporting-text-line-height),
'supporting-text-size': var(--_text-field-supporting-text-size),
'supporting-text-weight': var(--_text-field-supporting-text-weight),
'trailing-content-color': var(--_text-field-trailing-icon-color),
// go/keep-sorted end
)
Expand Down
15 changes: 12 additions & 3 deletions textfield/internal/_filled-text-field.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,10 @@
'container-shape-start-end': var(--_container-shape-start-end),
'container-shape-start-start': var(--_container-shape-start-start),
'content-color': var(--_input-text-color),
'content-type': var(--_input-text-type),
'content-font': var(--_input-text-font),
'content-line-height': var(--_input-text-line-height),
'content-size': var(--_input-text-size),
'content-weight': var(--_input-text-weight),
'disabled-active-indicator-color':
var(--_disabled-active-indicator-color),
'disabled-active-indicator-height':
Expand Down Expand Up @@ -174,14 +177,20 @@
'hover-supporting-text-color': var(--_hover-supporting-text-color),
'hover-trailing-content-color': var(--_hover-trailing-icon-color),
'label-text-color': var(--_label-text-color),
'label-text-font': var(--_label-text-font),
'label-text-line-height': var(--_label-text-line-height),
'label-text-populated-line-height':
var(--_label-text-populated-line-height),
'label-text-populated-size': var(--_label-text-populated-size),
'label-text-type': var(--_label-text-type),
'label-text-size': var(--_label-text-size),
'label-text-weight': var(--_label-text-weight),
'leading-content-color': var(--_leading-icon-color),
'leading-space': var(--_leading-space),
'supporting-text-color': var(--_supporting-text-color),
'supporting-text-type': var(--_supporting-text-type),
'supporting-text-font': var(--_supporting-text-font),
'supporting-text-line-height': var(--_supporting-text-line-height),
'supporting-text-size': var(--_supporting-text-size),
'supporting-text-weight': var(--_supporting-text-weight),
'top-space': var(--_top-space),
'trailing-content-color': var(--_trailing-icon-color),
'trailing-space': var(--_trailing-space),
Expand Down
15 changes: 12 additions & 3 deletions textfield/internal/_outlined-text-field.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,10 @@
'container-shape-start-end': var(--_container-shape-start-end),
'container-shape-start-start': var(--_container-shape-start-start),
'content-color': var(--_input-text-color),
'content-type': var(--_input-text-type),
'content-font': var(--_input-text-font),
'content-line-height': var(--_input-text-line-height),
'content-size': var(--_input-text-size),
'content-weight': var(--_input-text-weight),
'disabled-content-color': var(--_disabled-input-text-color),
'disabled-content-opacity': var(--_disabled-input-text-opacity),
'disabled-label-text-color': var(--_disabled-label-text-color),
Expand Down Expand Up @@ -147,16 +150,22 @@
'hover-supporting-text-color': var(--_hover-supporting-text-color),
'hover-trailing-content-color': var(--_hover-trailing-icon-color),
'label-text-color': var(--_label-text-color),
'label-text-font': var(--_label-text-font),
'label-text-line-height': var(--_label-text-line-height),
'label-text-populated-line-height':
var(--_label-text-populated-line-height),
'label-text-populated-size': var(--_label-text-populated-size),
'label-text-type': var(--_label-text-type),
'label-text-size': var(--_label-text-size),
'label-text-weight': var(--_label-text-weight),
'leading-content-color': var(--_leading-icon-color),
'leading-space': var(--_leading-space),
'outline-color': var(--_outline-color),
'outline-width': var(--_outline-width),
'supporting-text-color': var(--_supporting-text-color),
'supporting-text-type': var(--_supporting-text-type),
'supporting-text-font': var(--_supporting-text-font),
'supporting-text-line-height': var(--_supporting-text-line-height),
'supporting-text-size': var(--_supporting-text-size),
'supporting-text-weight': var(--_supporting-text-weight),
'top-space': var(--_top-space),
'trailing-content-color': var(--_trailing-icon-color),
'trailing-space': var(--_trailing-space),
Expand Down
31 changes: 25 additions & 6 deletions tokens/_md-comp-filled-field.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ $supported-tokens: (
'container-color',
'container-shape',
'content-color',
'content-type',
'content-font',
'content-line-height',
'content-size',
'content-weight',
'disabled-active-indicator-color',
'disabled-active-indicator-height',
'disabled-active-indicator-opacity',
Expand Down Expand Up @@ -76,16 +79,22 @@ $supported-tokens: (
'hover-supporting-text-color',
'hover-trailing-content-color',
'label-text-color',
'label-text-font',
'label-text-line-height',
'label-text-populated-line-height',
'label-text-populated-size',
'label-text-type',
'label-text-size',
'label-text-weight',
'leading-content-color',
'leading-space',
'supporting-text-color',
'supporting-text-font',
'supporting-text-leading-space',
'supporting-text-line-height',
'supporting-text-size',
'supporting-text-top-space',
'supporting-text-trailing-space',
'supporting-text-type',
'supporting-text-weight',
'top-space',
'trailing-content-color',
'trailing-space',
Expand Down Expand Up @@ -115,7 +124,10 @@ $_default: (
'container-color': map.get($text-field, 'container-color'),
'container-shape': map.get($text-field, 'container-shape'),
'content-color': map.get($text-field, 'input-text-color'),
'content-type': map.get($text-field, 'input-text-type'),
'content-font': map.get($text-field, 'input-text-font'),
'content-line-height': map.get($text-field, 'input-text-line-height'),
'content-size': map.get($text-field, 'input-text-size'),
'content-weight': map.get($text-field, 'input-text-weight'),
'disabled-active-indicator-color':
map.get($text-field, 'disabled-active-indicator-color'),
'disabled-active-indicator-height':
Expand Down Expand Up @@ -210,18 +222,25 @@ $_default: (
'hover-trailing-content-color':
map.get($text-field, 'hover-trailing-icon-color'),
'label-text-color': map.get($text-field, 'label-text-color'),
'label-text-font': map.get($text-field, 'label-text-font'),
'label-text-line-height': map.get($text-field, 'label-text-line-height'),
'label-text-populated-line-height':
map.get($text-field, 'label-text-populated-line-height'),
'label-text-populated-size':
map.get($text-field, 'label-text-populated-size'),
'label-text-type': map.get($text-field, 'label-text-type'),
'label-text-size': map.get($text-field, 'label-text-size'),
'label-text-weight': map.get($text-field, 'label-text-weight'),
'leading-content-color': map.get($text-field, 'leading-icon-color'),
'leading-space': if($exclude-hardcoded-values, null, 16px),
'supporting-text-color': map.get($text-field, 'supporting-text-color'),
'supporting-text-font': map.get($text-field, 'supporting-text-font'),
'supporting-text-leading-space': if($exclude-hardcoded-values, null, 16px),
'supporting-text-line-height':
map.get($text-field, 'supporting-text-line-height'),
'supporting-text-size': map.get($text-field, 'supporting-text-size'),
'supporting-text-top-space': if($exclude-hardcoded-values, null, 4px),
'supporting-text-trailing-space': if($exclude-hardcoded-values, null, 16px),
'supporting-text-type': map.get($text-field, 'supporting-text-type'),
'supporting-text-weight': map.get($text-field, 'supporting-text-weight'),
'top-space': if($exclude-hardcoded-values, null, 16px),
'trailing-content-color': map.get($text-field, 'trailing-icon-color'),
'trailing-space': if($exclude-hardcoded-values, null, 16px),
Expand Down
30 changes: 15 additions & 15 deletions tokens/_md-comp-filled-select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,15 +74,24 @@ $supported-tokens: (
'text-field-hover-supporting-text-color',
'text-field-hover-trailing-icon-color',
'text-field-input-text-color',
'text-field-input-text-type',
'text-field-input-text-font',
'text-field-input-text-line-height',
'text-field-input-text-size',
'text-field-input-text-weight',
'text-field-label-text-color',
'text-field-label-text-font',
'text-field-label-text-line-height',
'text-field-label-text-populated-line-height',
'text-field-label-text-populated-size',
'text-field-label-text-type',
'text-field-label-text-size',
'text-field-label-text-weight',
'text-field-leading-icon-color',
'text-field-leading-icon-size',
'text-field-supporting-text-color',
'text-field-supporting-text-type',
'text-field-supporting-text-font',
'text-field-supporting-text-line-height',
'text-field-supporting-text-size',
'text-field-supporting-text-weight',
'text-field-trailing-icon-color',
'text-field-trailing-icon-size',
// go/keep-sorted end
Expand Down Expand Up @@ -111,21 +120,12 @@ $unsupported-tokens: (
'menu-list-item-with-leading-icon-leading-icon-size',
'menu-list-item-with-trailing-icon-trailing-icon-color',
'menu-list-item-with-trailing-icon-trailing-icon-size',
'text-field-input-text-font',
'text-field-input-text-line-height',
'text-field-input-text-size',
'text-field-input-text-tracking',
'text-field-input-text-weight',
'text-field-label-text-font',
'text-field-label-text-line-height',
'text-field-label-text-size',
'text-field-input-text-type',
'text-field-label-text-tracking',
'text-field-label-text-weight',
'text-field-supporting-text-font',
'text-field-supporting-text-line-height',
'text-field-supporting-text-size',
'text-field-label-text-type',
'text-field-supporting-text-tracking',
'text-field-supporting-text-weight',
'text-field-supporting-text-type',
// go/keep-sorted end
);

Expand Down
Loading

0 comments on commit 0c5a2a2

Please sign in to comment.