From e8c3d59e602c5cb80a4cf57c1d36dbc5dec80ea0 Mon Sep 17 00:00:00 2001
From: Mats Pfeiffer <mats.pfeiffer@googlemail.com>
Date: Tue, 6 Feb 2018 19:52:44 +0100
Subject: [PATCH] feat(select): Synchronise with mdc-web v0.30.0

---
 components/Select/README.md  | 15 ++++++++-------
 components/Select/Select.vue | 13 ++++++++++++-
 demo/views/SelectView.vue    | 18 +++++++++++++++++-
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/components/Select/README.md b/components/Select/README.md
index dc9527947..c806f6efa 100644
--- a/components/Select/README.md
+++ b/components/Select/README.md
@@ -27,16 +27,17 @@ data() {
 
 ### Props
 
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| disabled | Boolean | - | false | whether the select should be disabled |
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| disabled | Boolean | false | whether the select should be disabled |
+| box | Boolean | false | renders a select box |
 
 ### Slots
 
-| Slot | Prop dependencies | Description |
-|------|-------------------|-------------|
-| default | - | select label |
-| menu | - | select menu |
+| Slot | Description |
+|------|-------------|
+| default | select label |
+| menu | select menu |
 
 ### Reference
 
diff --git a/components/Select/Select.vue b/components/Select/Select.vue
index d80669fbe..c649930f2 100644
--- a/components/Select/Select.vue
+++ b/components/Select/Select.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="mdc-select"
+    :class="classes"
     tabindex="0"
     :aria-disabled="disabled"
     role="listbox"
@@ -29,7 +30,10 @@ export default {
   props: {
     disabled: {
       type: Boolean,
-      required: false,
+      default: false
+    },
+    box: {
+      type: Boolean,
       default: false
     }
   },
@@ -38,6 +42,13 @@ export default {
       mdcSelect: null
     }
   },
+  computed: {
+    classes () {
+      return {
+        'mdc-select--box': this.box
+      }
+    }
+  },
   mounted () {
     if (this.$slots.menu) {
       this.$slots.menu[0].elm.classList.add('mdc-select__menu')
diff --git a/demo/views/SelectView.vue b/demo/views/SelectView.vue
index 94466a3ae..bcdc6bec6 100644
--- a/demo/views/SelectView.vue
+++ b/demo/views/SelectView.vue
@@ -8,7 +8,7 @@
         </a>
       </m-typo-body>
     </m-layout-grid-cell>
-    <m-layout-grid-cell :span="12">
+    <m-layout-grid-cell :span="2">
       <m-select>
         Select
         <m-menu slot="menu">
@@ -24,5 +24,21 @@
         </m-menu>
       </m-select>
     </m-layout-grid-cell>
+    <m-layout-grid-cell :span="2">
+      <m-select box>
+        Select
+        <m-menu slot="menu">
+          <m-list>
+            <m-list-item>
+              Entry 1
+            </m-list-item>
+            <m-list-divider />
+            <m-list-item>
+              Entry 2
+            </m-list-item>
+          </m-list>
+        </m-menu>
+      </m-select>
+    </m-layout-grid-cell>
   </m-layout-grid-inner>
 </template>