fix(fab): remove font shorthand tokens

BREAKING CHANGE: replace `label-text-type` tokens with `-font`, `-size`, `-line-height`, and `-weight` PiperOrigin-RevId: 563160852
material-components · Sep 6, 2023 · f77ee36 · f77ee36
1 parent 81e11e0
commit f77ee36
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 27 deletions.
diff --git a/docs/components/fab.md b/docs/components/fab.md
@@ -393,8 +393,8 @@ Token                            | Default value
 #### Extended FAB tokens
 
 Token                      | Default value
--------------------------- | -------------------------------
-`--md-fab-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
+-------------------------- | -------------------------------------
+`--md-fab-label-text-font` | `--md-sys-typescale-label-large-font`
 
 #### Extended FAB example
 
@@ -428,7 +428,7 @@ Token                              | Default value
 `--md-fab-branded-container-color` | `--md-sys-color-surface-container-high`
 `--md-fab-branded-container-shape` | `16px`
 `--md-fab-branded-icon-size`       | `36px`
-`--md-fab-branded-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
+`--md-fab-branded-label-text-font` | `--md-sys-typescale-label-large-font`
 
 *   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-fab-branded.scss)
     <!-- {.external} -->

diff --git a/docs/components/figures/fab/theming-branded.html b/docs/components/figures/fab/theming-branded.html
@@ -6,7 +6,7 @@
     <style>
       .styled-example.branded {
         --md-sys-color-on-surface: #161d1d;
-        --md-fab-branded-label-text-type: 500 0.875rem/1.25rem system-ui;
+        --md-fab-branded-label-text-font: system-ui;
         --md-fab-branded-icon-size: 48px;
         --md-fab-branded-container-shape: 0px;
       }

diff --git a/docs/components/figures/fab/theming-extended.html b/docs/components/figures/fab/theming-extended.html
@@ -5,7 +5,7 @@
       style="padding-block: 16px;">
     <style>
       .styled-example.extended {
-        --md-fab-label-text-type: 500 0.875rem/1.25rem system-ui;
+        --md-fab-label-text-font: system-ui;
         --md-fab-icon-size: 36px;
         --md-fab-container-shape: 0px;
       }
@@ -14,4 +14,4 @@
       <md-icon slot="icon">edit</md-icon>
     </md-fab>
   </figure>
-</div>
+</div>
diff --git a/fab/internal/_shared.scss b/fab/internal/_shared.scss
@@ -136,7 +136,10 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    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);
   }
 
   .fab.extended .icon ::slotted(*) {

diff --git a/tokens/_md-comp-fab-branded.scss b/tokens/_md-comp-fab-branded.scss
@@ -34,7 +34,10 @@ $supported-tokens: (
   'hover-state-layer-opacity',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'large-container-height',
   'large-container-shape',
   'large-container-width',
@@ -74,7 +77,11 @@ $unsupported-tokens: (
     'hover-label-text-color':
       map.get($extended-branded-tokens, 'hover-label-text-color'),
     'label-text-color': map.get($extended-branded-tokens, 'label-text-color'),
-    'label-text-type': map.get($extended-branded-tokens, 'label-text-type'),
+    'label-text-font': map.get($extended-branded-tokens, 'label-text-font'),
+    'label-text-size': map.get($extended-branded-tokens, 'label-text-size'),
+    'label-text-line-height':
+      map.get($extended-branded-tokens, 'label-text-line-height'),
+    'label-text-weight': map.get($extended-branded-tokens, 'label-text-weight'),
     'large-container-height': map.get($large-tokens, 'container-height'),
     'large-container-shape': map.get($large-tokens, 'container-shape'),
     'large-container-width': map.get($large-tokens, 'container-width'),
@@ -100,13 +107,5 @@ $_default: (
     $new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values)
   );
 
-  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
-  $tokens: map.merge(
-    $tokens,
-    (
-      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
-    )
-  );
-
   @return $tokens;
 }
diff --git a/tokens/_md-comp-fab.scss b/tokens/_md-comp-fab.scss
@@ -44,7 +44,10 @@ $supported-tokens: (
   'icon-color',
   'icon-size',
   'label-text-color',
-  'label-text-type',
+  'label-text-font',
+  'label-text-line-height',
+  'label-text-size',
+  'label-text-weight',
   'large-container-height',
   'large-container-shape',
   'large-container-width',
@@ -148,7 +151,11 @@ $unsupported-tokens: (
     'hover-label-text-color':
       map.get($extended-surface-tokens, 'hover-label-text-color'),
     'label-text-color': map.get($extended-surface-tokens, 'label-text-color'),
-    'label-text-type': map.get($extended-surface-tokens, 'label-text-type'),
+    'label-text-font': map.get($extended-surface-tokens, 'label-text-font'),
+    'label-text-line-height':
+      map.get($extended-surface-tokens, 'label-text-line-height'),
+    'label-text-size': map.get($extended-surface-tokens, 'label-text-size'),
+    'label-text-weight': map.get($extended-surface-tokens, 'label-text-weight'),
     'large-container-height': map.get($large-tokens, 'container-height'),
     'large-container-shape': map.get($large-tokens, 'container-shape'),
     'large-container-width': map.get($large-tokens, 'container-width'),
@@ -234,13 +241,5 @@ $_default: (
     $new-tokens: _get-new-tokens($deps, $exclude-hardcoded-values)
   );
 
-  // TODO(b/271876162): remove when tokens compiler emits typescale tokens
-  $tokens: map.merge(
-    $tokens,
-    (
-      'label-text-type': map.get($deps, 'md-sys-typescale', 'label-large'),
-    )
-  );
-
   @return $tokens;
 }