chore(select): Remove multi-select from mdc-select. (#1917)

BREAKING CHANGE: Removes mdc-multi-select from the mdc-select package. Use lists to create components that allow multiple items to be selected.

Author: williamernest

demos/select.html

@@ -151,25 +151,25 @@ <h2 class="mdc-typography--title">CSS Only</h2>
         </div>
       </section>
 
-      <section class="example">
-        <h2>Select Multiple - CSS Only</h2>
-        <select multiple size="8" class="mdc-multi-select mdc-list">
-
-          <optgroup class="mdc-list-group" label="Fats, Oils, &amp; 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 class="example">-->
+        <!--<h2>Select Multiple - CSS Only</h2>-->
+        <!--<select multiple size="8" class="mdc-multi-select mdc-list">-->
+
+          <!--<optgroup class="mdc-list-group" label="Fats, Oils, &amp; 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>-->
 
     </main>
     <script src="/assets/material-components-web.js"></script>

packages/mdc-select/README.md

@@ -15,7 +15,7 @@ path: /catalog/input-controls/select-menus/
   </a>
 </div>-->
 
-MDC Select provides Material Design single-option and multi-option select menus. It functions analogously to the
+MDC Select provides Material Design single-option select menus. It functions analogously to the
 browser's native `<select>` element, and includes a gracefully degraded version that can be used
 in conjunction with the browser's native element. Both are fully accessible, and fully RTL-aware.
 
@@ -226,38 +226,6 @@ E.g.:
 </div>
 ```
 
-### Multi Select
-
-MDC-Web implements multi-select on top of the `<select multiple>` element.
-
-```html
-<select multiple size="6" class="mdc-multi-select mdc-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>
-```
-
-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                                     |

packages/mdc-select/mdc-select.scss

@@ -297,99 +297,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
   }
 }
 
-// postcss-bem-linter: define multi-select
-.mdc-multi-select {
-  @include mdc-theme-prop(border-color, text-hint-on-light);
-
-  width: 250px;
-  padding: 0;
-  border-width: 1px;
-  border-style: solid;
-  outline: none;
-  appearance: none;
-
-  @include mdc-theme-dark {
-    @include mdc-theme-prop(border-color, text-hint-on-dark);
-  }
-
-  // stylelint-disable plugin/selector-bem-pattern
-  .mdc-list-group {
-    @include mdc-theme-prop(color, text-hint-on-light);
-
-    margin: 16px 0 0;
-    padding: 0 0 0 16px;
-    font-weight: normal;
-
-    @include mdc-theme-dark {
-      @include mdc-theme-prop(color, text-hint-on-dark);
-    }
-
-    &: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 {
-    @include mdc-theme-prop(color, text-primary-on-light);
-
-    margin: 0 0 0 -16px;
-    padding: 0 16px;
-
-    @include mdc-theme-dark {
-      @include mdc-theme-prop(color, text-primary-on-dark);
-    }
-
-    &:first-child {
-      margin-top: 12px;
-    }
-
-    &:last-child {
-      margin-bottom: 8px;
-    }
-
-    // Browsers are inconsistent in what they allow us to override, and some (e.g. Chrome) don't allow overriding the
-    // OS-determined selection color, which states styles are not going to play well with.
-    // Additionally, Firefox seems to ignore position: relative on option elements, which causes the pseudo elements
-    // that we use for ripple/states to position and size themselves relative to the entire body instead.
-    // Disabling states-specific styles on multi-select options altogether is the most straightforward recourse.
-    &::before,
-    &::after {
-      content: none;
-    }
-  }
-  // stylelint-enable plugin/selector-bem-pattern
-
-  // stylelint-disable plugin/selector-bem-pattern
-  .mdc-list-item:checked {
-    @include mdc-theme-prop(background-color, background);
-
-    @include mdc-theme-dark {
-      @include mdc-theme-prop(background-color, text-primary-on-dark);
-    }
-  }
-
-  .mdc-list-divider {
-    margin-bottom: 8px;
-    padding-top: 8px;
-    font-size: 0;
-  }
-  // 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.