feat(chip): Add density mixin to chip. (#5109)

Author: joyzhong

packages/mdc-button/_mixins.scss

@@ -43,7 +43,7 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
 
 @mixin mdc-button-theme-baseline($query: mdc-feature-all()) {
   .mdc-button {
-    @include mdc-button-density($mdc-button-density-default-scale, $query: $query);
+    @include mdc-button-density($mdc-button-density-scale, $query: $query);
   }
 }
 
@@ -255,7 +255,7 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
 
 @mixin mdc-button-shape-radius($radius,
 $rtl-reflexive: false,
-$density-scale: $mdc-button-density-default-scale,
+$density-scale: $mdc-button-density-scale,
 $query: mdc-feature-all()) {
 
   $height: mdc-density-prop-value(

packages/mdc-button/_variables.scss

@@ -29,7 +29,7 @@ $mdc-button-contained-horizontal-padding: 16px !default;
 
 $mdc-button-minimum-height: 24px !default;
 $mdc-button-maximum-height: $mdc-button-height !default;
-$mdc-button-density-default-scale: $mdc-density-default-scale !default;
+$mdc-button-density-scale: $mdc-density-default-scale !default;
 $mdc-button-density-config: (
   height: (
     default: $mdc-button-height,

packages/mdc-chips/README.md

@@ -291,6 +291,7 @@ CSS Class | Description
 `mdc-chip__checkmark` | Optional. Indicates the checkmark in a filter chip.
 `mdc-chip__checkmark-svg` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG element in a filter chip.
 `mdc-chip__checkmark-path` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG path in a filter chip.
+`mdc-chip-density($density-scale)` | Sets density scale for chip. Supported density scales  are `-2`, `-1` and `0` (default).
 
 > _NOTE_: Every element that has an `mdc-chip__icon` class must also have either the `mdc-chip__icon--leading` or `mdc-chip__icon--trailing` class.
 

packages/mdc-chips/_mixins.scss

@@ -25,6 +25,7 @@
 @import "@material/checkbox/functions";
 @import "@material/checkbox/variables";
 @import "@material/elevation/mixins";
+@import "@material/density/functions";
 @import "@material/feature-targeting/functions";
 @import "@material/feature-targeting/mixins";
 @import "@material/ripple/mixins";
@@ -60,7 +61,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
     @include mdc-chip-fill-color($mdc-chip-fill-color-default, $query: $query);
     @include mdc-chip-ink-color-without-ripple_($mdc-chip-ink-color-default, $query: $query);
     @include mdc-typography(body2, $query: $query);
-    @include mdc-chip-height($mdc-chip-height-default, $query: $query);
+    @include mdc-chip-density($density-scale: 0, $query: $query);
     @include mdc-chip-leading-icon-margin($query: $query);
 
     @include mdc-feature-targets($feat-structure) {
@@ -323,15 +324,26 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
   }
 }
 
-@mixin mdc-chip-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
+@mixin mdc-chip-shape-radius(
+  $radius,
+  $rtl-reflexive: false,
+  $density-scale: $mdc-chip-density-scale,
+  $query: mdc-feature-all()) {
+
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-chip-density-config,
+    $density-scale: $density-scale,
+    $property-name: height,
+  );
+
   @include mdc-shape-radius(
-    mdc-shape-resolve-percentage-radius($mdc-chip-height-default, $radius),
+    mdc-shape-resolve-percentage-radius($height, $radius),
     $rtl-reflexive,
     $query: $query);
 
   #{$mdc-chip-ripple-target} {
     @include mdc-shape-radius(
-      mdc-shape-resolve-percentage-radius($mdc-chip-height-default, $radius),
+      mdc-shape-resolve-percentage-radius($height, $radius),
       $rtl-reflexive,
       $query: $query
     );
@@ -502,7 +514,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
 
   .mdc-chip--touch {
     @include mdc-touch-target-component(
-      $component-height: $mdc-chip-height-default, $query: $query);
+      $component-height: $mdc-chip-height, $query: $query);
   }
 }
 
@@ -611,3 +623,19 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
     }
   }
 }
+
+///
+/// Sets the density scale for chips.
+///
+/// @param {Number | String} $density-scale - Density scale value for component.
+///     Supported density scale values are `-2`, `-1`, `0`.
+///
+@mixin mdc-chip-density($density-scale, $query: mdc-feature-all()) {
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-chip-density-config,
+    $density-scale: $density-scale,
+    $property-name: height,
+  );
+
+  @include mdc-chip-height($height, $query: $query);
+}

packages/mdc-chips/_variables.scss

@@ -21,12 +21,24 @@
 //
 
 @import "@material/animation/variables";
+@import "@material/density/variables";
 @import "@material/theme/variables";
 
 $mdc-chip-fill-color-default: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !default;
 $mdc-chip-ink-color-default: rgba(mdc-theme-prop-value(on-surface), .87) !default;
 $mdc-chip-horizontal-padding: 12px !default;
-$mdc-chip-height-default: 32px !default;
+$mdc-chip-height: 32px !default;
+
+$mdc-chip-minimum-height: 24px !default;
+$mdc-chip-maximum-height: $mdc-chip-height !default;
+$mdc-chip-density-scale: $mdc-density-default-scale !default;
+$mdc-chip-density-config: (
+  height: (
+    default: $mdc-chip-height,
+    maximum: $mdc-chip-maximum-height,
+    minimum: $mdc-chip-minimum-height,
+  ),
+) !default;
 
 $mdc-chip-icon-color: mdc-theme-prop-value(on-surface) !default;
 $mdc-chip-icon-opacity: .54 !default;

test/screenshot/golden.json

@@ -215,6 +215,14 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_35_21_026/spec/mdc-chips/mixins/chip-set-spacing.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-chips/mixins/density.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/19/17_59_21_146/spec/mdc-chips/mixins/density.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/19/17_59_21_146/spec/mdc-chips/mixins/density.html.windows_chrome_76.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/19/17_59_21_146/spec/mdc-chips/mixins/density.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/19/17_59_21_146/spec/mdc-chips/mixins/density.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-chips/mixins/fill-color-accessible.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/15_45_24_303/spec/mdc-chips/mixins/fill-color-accessible.html?utm_source=golden_json",
     "screenshots": {

test/screenshot/spec/mdc-chips/fixture.scss

@@ -73,6 +73,15 @@ $custom-chip-ink-color: $material-color-blue-500;
   @include mdc-chip-height(40px);
 }
 
+.custom-chip--density {
+  @include mdc-chip-density($density-scale: -1);
+}
+
+.custom-chip--density-radius {
+  @include mdc-chip-density($density-scale: -2);
+  @include mdc-chip-shape-radius(10%, $density-scale: -2);
+}
+
 .custom-chip--leading-icon-color {
   @include mdc-chip-leading-icon-color($custom-chip-fill-color, .5);
 }

test/screenshot/spec/mdc-chips/mixins/density.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2018 Google Inc.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Density Chips Mixin - MDC Web Screenshot Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.chips.css">
+    <link rel="stylesheet" href="../../../out/spec/fixture.css">
+    <link rel="stylesheet" href="../../../out/spec/mdc-chips/fixture.css">
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-118996389-2');
+    </script>
+  </head>
+
+  <body class="test-container">
+    <main class="test-viewport test-viewport--mobile">
+      <div class="test-layout">
+        <div class="test-cell test-cell--chip">
+          <div class="mdc-chip-set">
+            <button class="mdc-chip custom-chip--density">
+              <div class="mdc-chip__ripple"></div>
+              <span class="mdc-chip__text">Chip One</span>
+            </button>
+            <button class="mdc-chip custom-chip--density">
+              <div class="mdc-chip__ripple"></div>
+              <span class="mdc-chip__text">Chip Two</span>
+            </button>
+            <button class="mdc-chip custom-chip--density">
+              <div class="mdc-chip__ripple"></div>
+              <span class="mdc-chip__text">Chip Three</span>
+            </button>
+            <button class="mdc-chip custom-chip--density">
+              <div class="mdc-chip__ripple"></div>
+              <span class="mdc-chip__text">Chip Four</span>
+            </button>
+          </div>
+        </div>
+
+        <div class="test-cell test-cell--chip">
+          <div class="mdc-chip-set">
+            <button class="mdc-chip custom-chip--density-radius">
+              <div class="mdc-chip__ripple"></div>
+              <span class="mdc-chip__text">Chip One</span>
+            </button>
+            <button class="mdc-chip custom-chip--density-radius">
+              <div class="mdc-chip__ripple"></div>
+              <span class="mdc-chip__text">Chip Two</span>
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </main>
+
+    <!-- Automatically provides/replaces `Promise` if missing or broken. -->
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
+    <script src="../../../out/material-components-web.js"></script>
+    <script src="../../../out/spec/fixture.js"></script>
+    <script src="../../../out/spec/mdc-chips/fixture.js"></script>
+  </body>
+</html>

test/scss/_feature-targeting-test.scss

@@ -69,6 +69,7 @@
     // Chips
     @include mdc-chip-core-styles($query: $query);
     @include mdc-chip-elevation-transition($query: $query);
+    @include mdc-chip-density(0, $query: $query);
     @include mdc-chip-fill-color(red, $query: $query);
     @include mdc-chip-fill-color-accessible(red, $query: $query);
     @include mdc-chip-height(0, $query: $query);