feat(switch): Add density support for switch component. (#5124)

Fixes #5124 and #5104: * Add mdc-switch-density, mdc-switch-ripple-size mixins * Rename $mdc-switch-tap-target-size => $mdc-switch-ripple-size, to be consistent with e.g. checkbox BREAKING CHANGE: Renames switch variables $mdc-switch-tap-target-size => $mdc-switch-ripple-size, removes $mdc-switch-tap-target-initial-position and $mdc-switch-native-control-width.
material-components · Sep 25, 2019 · 2c793b4 · 2c793b4
1 parent b6d213c
commit 2c793b4
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 26 deletions.
diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md
@@ -291,7 +291,6 @@ 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.
 
@@ -322,6 +321,7 @@ Mixin | Description
 `mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip
 `mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip
 `mdc-chip-elevation-transition()` | Adds a MDC elevation transition to the chip. This should be used instead of setting transition with `mdc-elevation-transition-value()` directly when a box shadow transition is desired for a chip
+`mdc-chip-density($density-scale)` | Sets density scale for chip. Supported density scales  are `-2`, `-1` and `0` (default).
 
 > _NOTE_: `mdc-chip-set-spacing` also sets the amount of space between a chip and the edge of the set it's contained in.
 

diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss
@@ -640,7 +640,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
   @include mdc-chip-height($height, $query: $query);
 
   @if $density-scale != 0 {
-    @include mdc-chip-touch-target-reset_;
+    @include mdc-chip-touch-target-reset_($query: $query);
   }
 }
 

diff --git a/packages/mdc-switch/README.md b/packages/mdc-switch/README.md
@@ -132,6 +132,8 @@ Mixin | Description
 `mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.
 `mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.
 `mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.
+`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.
+`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales  are `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).
 
 ## `MDCSwitch` Properties and Methods
 

diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss
@@ -20,12 +20,13 @@
 // THE SOFTWARE.
 //
 
-@import "@material/theme/mixins";
-@import "@material/ripple/mixins";
-@import "@material/rtl/mixins";
+@import "@material/density/functions";
 @import "@material/elevation/mixins";
 @import "@material/feature-targeting/functions";
 @import "@material/feature-targeting/mixins";
+@import "@material/ripple/mixins";
+@import "@material/rtl/mixins";
+@import "@material/theme/mixins";
 @import "./functions";
 @import "./variables";
 
@@ -46,6 +47,8 @@
   $feat-animation: mdc-feature-create-target($query, animation);
   $feat-structure: mdc-feature-create-target($query, structure);
 
+  @include mdc-switch-density($mdc-switch-density-scale, $query: $query);
+
   .mdc-switch {
     @include mdc-feature-targets($feat-structure) {
       @include mdc-switch-base_;
@@ -192,6 +195,55 @@
   }
 }
 
+///
+/// Sets density scale for switch.
+///
+/// @param {Number | String} $density-scale - Density scale value for component.
+///     Supported density scale values are `-6`, `-5`, `-4`, `-3`, `-2`, `-1`,
+///     `0` (default).
+///
+@mixin mdc-switch-density($density-scale, $query: mdc-feature-all()) {
+  $size: mdc-density-prop-value(
+    $density-config: $mdc-switch-density-config,
+    $density-scale: $density-scale,
+    $property-name: size,
+  );
+
+  @include mdc-switch-ripple-size($size, $query: $query);
+}
+
+@mixin mdc-switch-ripple-size($ripple-size, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  // Position for the tap target that contains the thumb to align the thumb
+  // correctly offset from the track.
+  $tap-target-initial-position:
+    -$ripple-size / 2 + $mdc-switch-thumb-diameter / 2 - $mdc-switch-thumb-offset;
+  // Value to cover the whole switch area (including the ripple) with the
+  // native control.
+  $native-control-width:
+    $mdc-switch-track-width +
+    ($ripple-size - $mdc-switch-thumb-diameter) + $mdc-switch-thumb-offset * 2;
+
+  .mdc-switch__thumb-underlay {
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(left, $tap-target-initial-position);
+
+      // Ensures the knob is centered on the track.
+      top: -(($ripple-size - $mdc-switch-track-height) / 2);
+      width: $ripple-size;
+      height: $ripple-size;
+    }
+  }
+
+  .mdc-switch__native-control {
+    @include mdc-feature-targets($feat-structure) {
+      width: $native-control-width;
+      height: $ripple-size;
+    }
+  }
+}
+
 //
 // Private
 //
@@ -231,16 +283,10 @@
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-feature-targets($feat-structure) {
-    @include mdc-rtl-reflexive-position(left, $mdc-switch-tap-target-initial-position);
-
     display: flex;
     position: absolute;
-    // Ensures the knob is centered on the track.
-    top: -(($mdc-switch-tap-target-size - $mdc-switch-track-height) / 2);
     align-items: center;
     justify-content: center;
-    width: $mdc-switch-tap-target-size;
-    height: $mdc-switch-tap-target-size;
     transform: translateX(0);
   }
 
@@ -257,8 +303,6 @@
 
   position: absolute;
   top: 0;
-  width: $mdc-switch-native-control-width;
-  height: $mdc-switch-tap-target-size;
   margin: 0;
   opacity: 0;
   cursor: pointer;

diff --git a/packages/mdc-switch/_variables.scss b/packages/mdc-switch/_variables.scss
@@ -20,27 +20,28 @@
 // THE SOFTWARE.
 //
 
+@import "@material/density/variables";
 @import "@material/theme/variables";
 
 $mdc-switch-track-width: 32px !default;
 $mdc-switch-track-height: 14px !default;
 $mdc-switch-thumb-diameter: 20px !default;
-$mdc-switch-tap-target-size: 48px !default;
+$mdc-switch-ripple-size: 48px !default;
+
+$mdc-switch-minimum-size: 24px !default;
+$mdc-switch-maximum-size: $mdc-switch-ripple-size !default;
+$mdc-switch-density-scale: $mdc-density-default-scale !default;
+$mdc-switch-density-config: (
+  size: (
+    minimum: $mdc-switch-minimum-size,
+    default: $mdc-switch-maximum-size,
+    maximum: $mdc-switch-maximum-size,
+  ),
+) !default;
 
 // Amount the edge of the thumb should be offset from the edge of the track.
 $mdc-switch-thumb-offset: 4px !default;
 
-// Position for the tap target that contains the thumb to align the thumb correctly offset from the track.
-$mdc-switch-tap-target-initial-position:
-  -$mdc-switch-tap-target-size / 2 + $mdc-switch-thumb-diameter / 2 -
-  $mdc-switch-thumb-offset !default;
-
-// Value to cover the whole switch area (including the ripple) with the native control.
-$mdc-switch-native-control-width:
-  $mdc-switch-track-width +
-  ($mdc-switch-tap-target-size - $mdc-switch-thumb-diameter) +
-  $mdc-switch-thumb-offset * 2 !default;
-
 $mdc-switch-thumb-active-margin:
   $mdc-switch-track-width - $mdc-switch-thumb-diameter + $mdc-switch-thumb-offset * 2 !default;
 

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -1311,6 +1311,14 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/03/21_25_57_424/spec/mdc-switch/classes/baseline.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-switch/mixins/density.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/24/18_29_48_641/spec/mdc-switch/mixins/density.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/24/18_29_48_641/spec/mdc-switch/mixins/density.html.windows_chrome_76.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/24/18_29_48_641/spec/mdc-switch/mixins/density.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/24/18_29_48_641/spec/mdc-switch/mixins/density.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-switch/mixins/thumb-color.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/10/17_42_51_602/spec/mdc-switch/mixins/thumb-color.html?utm_source=golden_json",
     "screenshots": {

diff --git a/test/screenshot/spec/mdc-switch/fixture.js b/test/screenshot/spec/mdc-switch/fixture.js
@@ -24,6 +24,10 @@
 window.mdc.testFixture.fontsLoaded.then(() => {
   [].forEach.call(document.querySelectorAll('.mdc-switch'), (el) => {
     mdc.switchControl.MDCSwitch.attachTo(el);
+    const autoFocusEl = el.querySelector('input[data-autofocus]');
+    if (autoFocusEl) {
+      autoFocusEl.focus();
+    }
   });
 
   window.mdc.testFixture.notifyDomReady();

diff --git a/test/screenshot/spec/mdc-switch/fixture.scss b/test/screenshot/spec/mdc-switch/fixture.scss
@@ -60,3 +60,11 @@ $custom-switch-color: $material-color-red-500;
   @include mdc-switch-toggled-on-track-color($custom-switch-color);
   @include mdc-switch-toggled-off-track-color($custom-switch-color);
 }
+
+.custom-switch--density-5 {
+  @include mdc-switch-density(-5);
+}
+
+.custom-switch--density-2 {
+  @include mdc-switch-density(-2);
+}
diff --git a/test/screenshot/spec/mdc-switch/mixins/density.html b/test/screenshot/spec/mdc-switch/mixins/density.html
@@ -0,0 +1,82 @@
+<!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 Switch Mixin - MDC Web Screenshot Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.switch.css">
+    <link rel="stylesheet" href="../../../out/spec/fixture.css">
+    <link rel="stylesheet" href="../../../out/spec/mdc-switch/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--switch">
+          <div class="mdc-switch custom-switch--density-5">
+            <div class="mdc-switch__track"></div>
+            <div class="mdc-switch__thumb-underlay">
+              <div class="mdc-switch__thumb">
+                <input type="checkbox" id="basic-switch-1" class="mdc-switch__native-control" role="switch"
+                    data-autofocus>
+              </div>
+            </div>
+          </div>
+          <label class="test-switch-label" for="basic-switch-1">Density -5</label>
+        </div>
+
+        <div class="test-cell test-cell--switch">
+          <div class="mdc-switch custom-switch--density-2">
+            <div class="mdc-switch__track"></div>
+            <div class="mdc-switch__thumb-underlay">
+              <div class="mdc-switch__thumb">
+                <input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch">
+              </div>
+            </div>
+          </div>
+          <label class="test-switch-label" for="basic-switch-2">Density -2</label>
+        </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-switch/fixture.js"></script>
+  </body>
+</html>
diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
@@ -69,7 +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-density(-1, $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);
@@ -271,6 +271,7 @@
 
     // Switch
     @include mdc-switch-core-styles($query: $query);
+    @include mdc-switch-density(-1, $query: $query);
     @include mdc-switch-toggled-on-color(on-surface, $query: $query);
     @include mdc-switch-toggled-off-color(on-surface, $query: $query);
     @include mdc-switch-toggled-on-ripple-color(on-surface, $query: $query);
@@ -280,6 +281,7 @@
     @include mdc-switch-toggled-off-track-color(on-surface, $query: $query);
     @include mdc-switch-toggled-off-thumb-color(on-surface, $query: $query);
     @include mdc-switch-ripple($query: $query);
+    @include mdc-switch-ripple-size(0, $query: $query);
     @include mdc-switch-without-ripple($query: $query);
 
     // Tabs