feat(select): Add multi-select styles to select component (#172)

* feat(select): Add multi-select styles to select component

demos/select.html

@@ -98,6 +98,27 @@ <h2>CSS Only</h2>
           <option value="fats">Fats, Oils, and Sweets</option>
         </select>
       </section>
+
+      <section>
+        <h2>Select Multiple - CSS Only</h2>
+        <select multiple size="8" class="mdc-multi-select mdc-list">
+
+          <optgroup class="mdc-list-group" label="Fats, Oils, & Sweets">
+            <option class="mdc-list-item">Olive Oil</option>
+            <option class="mdc-list-item">Brown Sugar</option>
+            <option class="mdc-list-item">Ice Cream</option>
+          </optgroup>
+          <option class="mdc-list-divider" role="presentation" disabled />
+
+          <optgroup class="mdc-list-group"label="Dairy">
+            <option class="mdc-list-item">Milk</option>
+            <option class="mdc-list-item">Cheese</option>
+            <option class="mdc-list-item">More Cheese</option>
+          </optgroup>
+
+        </select>
+      </section>
+
       <section>
         <h2>Custom Menu + Native Menu on mobile</h2>
         <em>

packages/mdc-select/README.md

@@ -135,16 +135,42 @@ on a mobile device. It does not require any javascript, nor any CSS for `mdc-men
 
 ```html
 <select class="mdc-select">
-  <option value="" default selected>Pick a food group</option>
+  <option value="" default selected>Pick a food</option>
   <option value="grains">Bread, Cereal, Rice, and Pasta</option>
   <option value="vegetables">Vegetables</option>
-  <option value="fruit">Fruit</option>
+  <optgroup label="Fruits">
+    <option value="apple">Apple</option>
+    <option value="oranges">Orange</option>
+    <option value="banana">Banana</option>
+  </optgroup>
   <option value="dairy">Milk, Yogurt, and Cheese</option>
   <option value="meat">Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts</option>
   <option value="fats">Fats, Oils, and Sweets</option>
 </select>
 ```
 
+Select elements take a `size` attribute to determine the height of the select box.
+
+If you'd like to maintain the width or height outside of the attribute, you'll need to set it in your styles:
+
+```css
+.my-select-container .mdc-select {
+  width: 300px;
+  height: 550px;
+}
+```
+
+#### Classes
+
+| Class                    | Description                                     |
+| ------------------------ | ----------------------------------------------- |
+| `mdc-select`             | A pure css `select` element                     |
+| `mdc-list-group`         | A group of options.                             |
+| `mdc-list-item`          | A list item.                                    |
+| `mdc-list-divider`       | A divider.                                      |
+
+It is advised that dividers also set `role="presentation"` to disable selection and not cloud accessibility.
+
 ### MDC Select Component API
 
 The MDC Select component API is modeled after a subset of the `HTMLSelectElement` functionality, and
@@ -358,3 +384,23 @@ selects.native.addEventListener('change', changeHandler);
 ```
 
 We are looking into building this functionality into `MDCSelect` in the future.
+
+## Multi Select
+MDC-Web implements multi-select on top of the <select multiple> element.
+
+```html
+<select multiple size="6" class="mdc-multi-select mdl-list" >
+  <optgroup class="mdc-list-group" label="Starches">
+    <option class="mdc-list-item">
+      Potato 
+    </option>
+    <option class="mdc-list-item">
+      Cereal 
+    </option>
+  </optgroup>
+  <option class="mdc-list-divider" role="presentation" disabled />
+  <option>
+    misc... 
+  </option>
+</select>
+```

packages/mdc-select/mdc-select.scss

@@ -175,3 +175,97 @@
     }
   }
 }
+
+// postcss-bem-linter: define multi-select
+.mdc-multi-select {
+  appearance: none;
+  width: 250px;
+  padding: 0;
+  border: 1px solid;
+
+  @include mdc-theme-prop(border-color, text-hint-on-light);
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(border-color, text-hint-on-dark);
+  }
+
+  outline: none;
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-list-group {
+    margin: 16px 0 0;
+    padding: 0 0 0 16px;
+
+    @include mdc-theme-prop(color, text-hint-on-light);
+
+    @include mdc-theme-dark {
+      @include mdc-theme-prop(color, text-hint-on-dark);
+    }
+
+    font-weight: normal;
+
+    &:last-child {
+      margin-bottom: 16px;
+    }
+
+    .mdc-list-divider {
+      margin-left: -16px;
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-list-item {
+    margin: 0 0 0 -16px;
+    padding: 0 16px;
+
+    @include mdc-theme-prop(color, text-primary-on-light);
+
+    @include mdc-theme-dark {
+      @include mdc-theme-prop(color, text-primary-on-dark);
+    }
+
+    &:first-child {
+      margin-top: 12px;
+    }
+
+    &:last-child {
+      margin-bottom: 8px;
+    }
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+
+  // stylelint-disable plugin/selector-bem-pattern
+  .mdc-list-item:checked {
+    background-color: rgba(black, .12);
+
+    @include mdc-theme-prop(background-color, background);
+
+    @include mdc-theme-dark {
+      @include mdc-theme-prop(background-color, text-primary-on-dark);
+    }
+
+  }
+  // stylelint-enable plugin/selector-bem-pattern
+}
+
+.mdc-multi-select:focus .mdc-list-item:checked {
+  @include mdc-theme-prop(background-color, primary);
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(background-color, text-primary-on-dark);
+  }
+}
+
+// height for option elements cannot be controlled
+// with CSS. Use the font-size rule instead.
+
+// stylelint-disable plugin/selector-bem-pattern
+.mdc-list-divider {
+  margin-bottom: 8px;
+  padding-top: 8px;
+  font-size: 0;
+}
+// stylelint-enable plugin/selector-bem-pattern
+
+// postcss-bem-linter: end