feat(chips): Create mixin to customize chip margins (#2277)

Author: bonniezhou

packages/mdc-chips/README.md

@@ -94,6 +94,7 @@ To customize the colors of any part of the chip, use the following mixins.
 
 Mixin | Description
 --- | ---
+`mdc-chip-set-spacing($gap-size)` | Customizes the amount of space between each chip in the set
 `mdc-chip-corner-radius($radius)` | Customizes the corner radius for a chip
 `mdc-chip-fill-color-accessible($color)` | Customizes the background fill color for a chip, and updates the chip's ink and ripple color to meet accessibility standards
 `mdc-chip-fill-color($color)` | Customizes the background fill color for a chip
@@ -104,6 +105,8 @@ Mixin | Description
 `mdc-chip-stroke-style($style)` | Customizes the border stroke style for a chip
 `mdc-chip-stroke-color($color)` | Customizes the border stroke color 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.
+
 > _NOTE_: `mdc-chip-ink-color` also updates the chip's text ink color for _hover_ and _activated_ states, and updates the ripple opacity of the chip in the _activated_ state.
 
 ### `MDCChip` and `MDCChipSet`

packages/mdc-chips/_mixins.scss

@@ -87,3 +87,11 @@
   padding-left: $horizontal-padding-value;
   border-width: $width;
 }
+
+@mixin mdc-chip-set-spacing($gap-size) {
+  padding: $gap-size / 2;
+
+  .mdc-chip {
+    margin: $gap-size / 2;
+  }
+}

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

@@ -0,0 +1,25 @@
+//
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "../mixins";
+
+.mdc-chip-set {
+  @include mdc-chip-set-spacing(8px);
+
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+}

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

@@ -32,7 +32,6 @@
   display: inline-flex;
   position: relative;
   align-items: center;
-  margin: 4px;
   padding: $mdc-chip-vertical-padding $mdc-chip-horizontal-padding;
   cursor: pointer;
   outline: none;

packages/mdc-chips/mdc-chips.scss

@@ -16,3 +16,4 @@
 //
 
 @import "./chip/mdc-chip";
+@import "./chip-set/mdc-chip-set";