feat(checkbox): Added mixin to customize checkbox touch dimension.

.travis.yml

@@ -12,6 +12,7 @@ branches:
   # This prevents excessive resource usage and CI slowness.
   only:
     - master
+    - develop
 
 before_install:
   # Source the scripts to export their env vars. See https://superuser.com/a/176788/62792

packages/mdc-checkbox/README.md

@@ -122,6 +122,7 @@ Mixin | Description
 `mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox
 `mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons
 `mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator
+`mdc-checkbox-touch-dimension($touch-dimension)` | Sets the touch dimension of the checkbox.
 
 The ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.
 

packages/mdc-checkbox/_mixins.scss

@@ -186,6 +186,7 @@
     @include mdc-ripple-surface($query);
     @include mdc-states($mdc-checkbox-baseline-theme-color, $query: $query);
     @include mdc-ripple-radius-unbounded($query: $query);
+    @include mdc-checkbox-touch-dimension($mdc-checkbox-touch-area);
   }
 
   .mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {
@@ -195,6 +196,25 @@
   }
 }
 
+@mixin mdc-checkbox-touch-dimension($touch-dimension) {
+  $checkbox-padding: ($touch-dimension - $mdc-checkbox-size) / 2;
+
+  padding: $checkbox-padding;
+
+  .mdc-checkbox__background {
+    @include mdc-rtl-reflexive-position(left, $checkbox-padding, ".mdc-checkbox");
+
+    top: $checkbox-padding;
+  }
+
+  .mdc-checkbox__background::before {
+    top: -$mdc-checkbox-border-width - $checkbox-padding;
+    left: -$mdc-checkbox-border-width - $checkbox-padding;
+    width: $touch-dimension;
+    height: $touch-dimension;
+  }
+}
+
 @mixin mdc-checkbox-container-colors(
   $unmarked-stroke-color: $mdc-checkbox-border-color,
   $unmarked-fill-color: transparent,
@@ -298,7 +318,6 @@
   box-sizing: content-box;
   width: $mdc-checkbox-size;
   height: $mdc-checkbox-size;
-  padding: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
   line-height: 0;
   white-space: nowrap;
   cursor: pointer;
@@ -321,14 +340,6 @@
   pointer-events: none;
 }
 
-@mixin mdc-checkbox__child--cover-parent_ {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
 @mixin mdc-checkbox__child--upgraded_ {
   // Due to the myriad of selector combos used to properly style a CSS-only checkbox, all of
   // which have varying selector precedence and make use of transitions, it is cleaner and more
@@ -455,17 +466,13 @@
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-feature-targets($feat-structure) {
-    @include mdc-rtl-reflexive-position(left, ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2, ".mdc-checkbox");
-
     display: inline-flex;
     position: absolute;
-    top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
-    bottom: 0;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    width: $mdc-checkbox-ui-pct;
-    height: $mdc-checkbox-ui-pct;
+    width: $mdc-checkbox-size;
+    height: $mdc-checkbox-size;
     // border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin
     border: $mdc-checkbox-border-width solid currentColor;
     border-radius: 2px;
@@ -494,10 +501,7 @@
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-feature-targets($feat-structure) {
-    @include mdc-checkbox__child--cover-parent_;
-
-    width: 100%;
-    height: 100%;
+    position: absolute;
     transform: scale(0, 0);
     border-radius: 50%;
     opacity: 0;
@@ -518,7 +522,7 @@
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-feature-targets($feat-structure) {
-    transform: scale(2.75, 2.75);
+    transform: scale(1);
     opacity: $mdc-checkbox-focus-indicator-opacity;
   }
 
@@ -550,8 +554,11 @@
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-feature-targets($feat-structure) {
-    @include mdc-checkbox__child--cover-parent_;
-
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     width: 100%;
     opacity: 0;
   }

packages/mdc-checkbox/_variables.scss

@@ -30,7 +30,6 @@ $mdc-checkbox-baseline-theme-color: secondary !default;
 
 $mdc-checkbox-touch-area: 40px !default;
 $mdc-checkbox-size: 18px !default;
-$mdc-checkbox-ui-pct: percentage($mdc-checkbox-size / $mdc-checkbox-touch-area) !default;
 $mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size !default;
 $mdc-checkbox-border-width: 2px !default;
 $mdc-checkbox-transition-duration: 90ms !default;

packages/mdc-chips/README.md

@@ -41,9 +41,9 @@ npm install @material/chips
 
 ```html
 <div class="mdc-chip-set">
-  <div class="mdc-chip" tabindex="0">
-    <div class="mdc-chip__text">Chip content</div>
-  </div>
+  <button class="mdc-chip">
+    <span class="mdc-chip__text">Chip content</span>
+  </button>
   ...
 </div>
 ```
@@ -83,21 +83,21 @@ However, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any
 #### Leading icon
 
 ```html
-<div class="mdc-chip">
+<button class="mdc-chip">
   <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">event</i>
-  <div class="mdc-chip__text">Add to calendar</div>
-</div>
+  <span class="mdc-chip__text">Add to calendar</span>
+</button>
 ```
 
 #### Trailing icon
 
 A trailing icon comes with the functionality to remove the chip from the set. If you're adding a trailing icon, also set `tabindex="0"` and `role="button"` to make it accessible by keyboard and screenreader. Trailing icons should only be added to [input chips](#input-chips).
 
 ```html
-<div class="mdc-chip">
-  <div class="mdc-chip__text">Jane Smith</div>
+<button class="mdc-chip">
+  <span class="mdc-chip__text">Jane Smith</span>
   <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>
-</div>
+</button>
 ```
 
 ### Choice Chips
@@ -116,15 +116,15 @@ Filter chips are a variant of chips which allow multiple selection from a set of
 
 ```html
 <div class="mdc-chip-set mdc-chip-set--filter">
-  <div class="mdc-chip">
-    <div class="mdc-chip__checkmark" >
+  <button class="mdc-chip">
+    <span class="mdc-chip__checkmark" >
       <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
         <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
               d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
       </svg>
-    </div>
-    <div class="mdc-chip__text">Filterable content</div>
-  </div>
+    </span>
+    <span class="mdc-chip__text">Filterable content</span>
+  </button>
   ...
 </div>
 ```
@@ -133,16 +133,16 @@ To use a leading icon in a filter chip, put the `mdc-chip__icon--leading` elemen
 
 ```html
 <div class="mdc-chip-set mdc-chip-set--filter">
-  <div class="mdc-chip">
+  <button class="mdc-chip">
     <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
-    <div class="mdc-chip__checkmark" >
+    <span class="mdc-chip__checkmark" >
       <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
         <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
               d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
       </svg>
-    </div>
-    <div class="mdc-chip__text">Filterable content</div>
-  </div>
+    </span>
+    <span class="mdc-chip__text">Filterable content</span>
+  </button>
   ...
 </div>
 ```
@@ -194,24 +194,24 @@ chipSet.listen('MDCChip:removal', function(event) {
 To display a pre-selected filter or choice chip, add the class `mdc-chip--selected` to the root chip element.
 
 ```html
-<div class="mdc-chip mdc-chip--selected">
-  <div class="mdc-chip__text">Add to calendar</div>
-</div>
+<button class="mdc-chip mdc-chip--selected">
+  <span class="mdc-chip__text">Add to calendar</span>
+</button>
 ```
 
 To pre-select filter chips that have a leading icon, also add the class `mdc-chip__icon--leading-hidden` to the `mdc-chip__icon--leading` element. This will ensure that the checkmark displaces the leading icon.
 
 ```html
-<div class="mdc-chip mdc-chip--selected">
+<button class="mdc-chip mdc-chip--selected">
   <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
-  <div class="mdc-chip__checkmark">
+  <span class="mdc-chip__checkmark">
     <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
       <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
             d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
     </svg>
-  </div>
-  <div class="mdc-chip__text">Filterable content</div>
-</div>
+  </span>
+  <span class="mdc-chip__text">Filterable content</span>
+</button>
 ```
 
 ## Style Customization
@@ -257,8 +257,8 @@ Mixin | Description
 `mdc-chip-trailing-icon-color($color, $opacity, $hover-opacity, $focus-opacity)` | Customizes the color of a trailing icon in a chip, optionally customizes regular/hover/focus opacities
 `mdc-chip-leading-icon-size($size)` | Customizes the size of a leading icon in a chip
 `mdc-chip-trailing-icon-size($size)` | Customizes the size of a trailing icon in a chip
-`mdc-chip-leading-icon-margin($top, $right, $bottom, $left)` | Customizes the margin of a leading icon in a chip
-`mdc-chip-trailing-icon-margin($top, $right, $bottom, $left)` | Customizes the margin of a trailing icon in a chip
+`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
 
 > _NOTE_: `mdc-chip-set-spacing` also sets the amount of space between a chip and the edge of the set it's contained in.

packages/mdc-chips/_mixins.scss

@@ -100,14 +100,15 @@
 @mixin mdc-chip-outline-width($width, $horizontal-padding: $mdc-chip-horizontal-padding) {
   // Note: Adjust padding to maintain consistent width with non-outlined chips
   $horizontal-padding-value: max($horizontal-padding - $width, 0);
-  $vertical-padding-value: max($mdc-chip-vertical-padding - $width, 0);
 
-  padding: $vertical-padding-value $horizontal-padding-value;
+  padding-right: $horizontal-padding-value;
+  padding-left: $horizontal-padding-value;
   border-width: $width;
 }
 
 @mixin mdc-chip-horizontal-padding($padding) {
-  padding: $mdc-chip-vertical-padding $padding;
+  padding-right: $padding;
+  padding-left: $padding;
 }
 
 @mixin mdc-chip-height($height) {
@@ -169,26 +170,20 @@
 }
 
 @mixin mdc-chip-leading-icon-margin(
-  $top: $mdc-chip-leading-icon-margin-top,
-  $right: $mdc-chip-leading-icon-margin-right,
-  $bottom: $mdc-chip-leading-icon-margin-bottom,
-  $left: $mdc-chip-leading-icon-margin-left) {
+  $left-margin: $mdc-chip-leading-icon-margin-left,
+  $right-margin: $mdc-chip-leading-icon-margin-right) {
   &.mdc-chip--selected .mdc-chip__checkmark,
   .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
-    @include mdc-rtl-reflexive-property(margin, $left, $right);
-
-    margin-top: $top;
-    margin-bottom: $bottom;
+    @include mdc-rtl-reflexive-property(margin, $left-margin, $right-margin);
   }
 }
 
 @mixin mdc-chip-trailing-icon-margin(
-  $top: $mdc-chip-trailing-icon-margin-top,
-  $right: $mdc-chip-trailing-icon-margin-right,
-  $bottom: $mdc-chip-trailing-icon-margin-bottom,
-  $left: $mdc-chip-trailing-icon-margin-left) {
+  $left-margin: $mdc-chip-trailing-icon-margin-left,
+  $right-margin: $mdc-chip-trailing-icon-margin-right) {
   .mdc-chip__icon--trailing {
-    margin: $top $right $bottom $left;
+    margin-right: $right-margin;
+    margin-left: $left-margin;
   }
 }
 

packages/mdc-chips/_variables.scss

@@ -26,7 +26,6 @@
 $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-vertical-padding: 7px !default;
 $mdc-chip-height-default: 32px !default;
 
 $mdc-chip-icon-color: mdc-theme-prop-value(on-surface) !default;
@@ -44,14 +43,10 @@ $mdc-chip-checkmark-animation-duration: 150ms !default;
 $mdc-chip-width-animation-duration: 150ms !default;
 $mdc-chip-opacity-animation-duration: 75ms !default;
 
-$mdc-chip-leading-icon-margin-top: -4px !default;
 $mdc-chip-leading-icon-margin-right: 4px !default;
-$mdc-chip-leading-icon-margin-bottom: -4px !default;
 $mdc-chip-leading-icon-margin-left: -4px !default;
 
-$mdc-chip-trailing-icon-margin-top: 0 !default;
 $mdc-chip-trailing-icon-margin-right: -4px !default;
-$mdc-chip-trailing-icon-margin-bottom: 0 !default;
 $mdc-chip-trailing-icon-margin-left: 4px !default;
 
 $mdc-chip-exit-transition:

packages/mdc-chips/chip/mdc-chip.scss

@@ -43,12 +43,18 @@
   display: inline-flex;
   position: relative;
   align-items: center;
-  box-sizing: border-box;
-  padding: $mdc-chip-vertical-padding $mdc-chip-horizontal-padding;
+  padding: 0 $mdc-chip-horizontal-padding;
+  border-width: 0;
   outline: none;
   cursor: pointer;
+  -webkit-appearance: none;
   overflow: hidden;
 
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
   &:hover {
     @include mdc-theme-prop(color, on-surface);
   }

packages/mdc-dialog/README.md

@@ -400,16 +400,18 @@ Method Signature | Description
 `setScrimClickAction(action: string)` | Sets the action reflected when the scrim is clicked. Setting to `''` disables closing the dialog via scrim click.
 `getAutoStackButtons() => boolean` | Returns whether stacked/unstacked action button layout is automatically handled during layout logic.
 `setAutoStackButtons(autoStack: boolean) => void` | Sets whether stacked/unstacked action button layout is automatically handled during layout logic.
-`handleInteraction(event: Event)` | Handles `click` and `keydown` events on or within the dialog's root element
-`handleDocumentKeydown(event: Event)` | Handles `keydown` events on or within the document while the dialog is open
+`handleClick(event: MouseEvent)` | Handles `click` events on or within the dialog's root element.
+`handleKeydown(event: KeyboardEvent)` | Handles `keydown` events on or within the dialog's root element.
+`handleDocumentKeydown(event: Event)` | Handles `keydown` events on or within the document while the dialog is open.
 
 #### Event Handlers
 
 When wrapping the Dialog foundation, the following events must be bound to the indicated foundation methods:
 
 Event | Target | Foundation Handler | Register | Deregister
 --- | --- | --- | --- | ---
-`click` | `.mdc-dialog` (root) | `handleInteraction` | During initialization | During destruction
+`click` | `.mdc-dialog` (root) | `handleClick` | During initialization | During destruction
+`keydown` | `.mdc-dialog` (root) | `handleKeydown` | During initialization | During destruction
 `keydown` | `document` | `handleDocumentKeydown` | On `MDCDialog:opening` | On `MDCDialog:closing`
 `resize` | `window` | `layout` | On `MDCDialog:opening` | On `MDCDialog:closing`
 `orientationchange` | `window` | `layout` | On `MDCDialog:opening` | On `MDCDialog:closing`