From 8e6734e0e4c124d8d571c245c95b72c3dbccb5aa Mon Sep 17 00:00:00 2001
From: Jiajun Chen <tychenjiajun@live.cn>
Date: Fri, 16 Aug 2019 10:01:32 +0800
Subject: [PATCH] feat(menu): update to mdc-web v3.1.0 (#388)

* feat(menu): update to mdc-web v3.1.0

* test(menu): add snapshots
---
 components/list/ListItem.vue                  |   3 -
 components/menu/Menu.vue                      | 111 ++++++++------
 components/menu/MenuSelectionGroup.vue        |  40 +++++
 components/menu/MenuSurface.vue               |  76 +++++++---
 components/menu/README.md                     | 137 +++++++++++++++++-
 components/menu/__test__/Menu.spec.js         |  76 ++++++++++
 .../__test__/__snapshots__/Menu.spec.js.snap  |  13 ++
 components/menu/index.js                      |   2 +
 docs/.vuepress/components/CardMediaDemo.vue   |   3 +-
 docs/.vuepress/components/MenuDemo.vue        |  30 +++-
 docs/.vuepress/components/MenuSurfaceDemo.vue |   8 +-
 docs/components/README.md                     |   8 +-
 12 files changed, 419 insertions(+), 88 deletions(-)
 create mode 100644 components/menu/MenuSelectionGroup.vue
 create mode 100644 components/menu/__test__/Menu.spec.js
 create mode 100644 components/menu/__test__/__snapshots__/Menu.spec.js.snap

diff --git a/components/list/ListItem.vue b/components/list/ListItem.vue
index 2fd34fae1..5e31c28db 100644
--- a/components/list/ListItem.vue
+++ b/components/list/ListItem.vue
@@ -133,9 +133,6 @@ export default {
       if (this.$slots.graphic) {
         this.$slots.graphic.map(n => {
           n.elm.classList.add('mdc-list-item__graphic')
-          if (this.$el.getAttribute('role') === 'menuitem') {
-            n.elm.classList.add('mdc-menu__selection-group-icon')
-          }
         })
       }
       if (this.$slots.meta) {
diff --git a/components/menu/Menu.vue b/components/menu/Menu.vue
index 03b038db9..858ee387f 100644
--- a/components/menu/Menu.vue
+++ b/components/menu/Menu.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    :tabindex="tabIndex"
     class="mdc-menu mdc-menu-surface"
     @MDCMenu:selected="onSelect"
   >
@@ -30,8 +29,8 @@ export default {
       default: false
     },
     anchorCorner: {
-      type: String,
-      default: ''
+      type: [Number, String],
+      default: 0
     },
     absolutePositionX: {
       type: Number,
@@ -55,7 +54,15 @@ export default {
     },
     defaultFocusState: {
       type: [Number, String],
-      default: null
+      default: 1
+    },
+    selectedIndex: {
+      type: Number,
+      default: -1
+    },
+    isHoisted: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -77,27 +84,31 @@ export default {
       if (!this.defaultFocusState) return null
 
       const upperCaseFocusState = String(this.defaultFocusState).toUpperCase()
-      if (isNaN(this.defaultFocusState) &&
-        DefaultFocusState.hasOwnProperty(upperCaseFocusState)
-      ) {
+      if (isNaN(this.defaultFocusState)) {
         return DefaultFocusState[upperCaseFocusState]
       }
 
       const numberFocusState = Number(this.defaultFocusState)
-      if (!isNaN(this.defaultFocusState) &&
-        DefaultFocusState.hasOwnProperty(numberFocusState)
-      ) {
+      if (!isNaN(this.defaultFocusState)) {
         return numberFocusState
       }
 
       return null
     },
-    tabIndex () {
-      if (this.$slots.default[0].componentOptions.tag.toLowerCase() === 'm-list') {
-        return -1
+    _anchorCorner () {
+      if (!this.anchorCorner) return null
+
+      const upperCaseFocusState = String(this.anchorCorner).toUpperCase()
+      if (isNaN(this.anchorCorner)) {
+        return Corner[upperCaseFocusState]
       }
 
-      return this.mdcMenu ? (this.mdcMenu.open ? 0 : -1) : (this.open ? 0 : -1)
+      const numberFocusState = Number(this.anchorCorner)
+      if (!isNaN(this.anchorCorner)) {
+        return numberFocusState
+      }
+
+      return null
     }
   },
   watch: {
@@ -112,14 +123,15 @@ export default {
         this.mdcMenu.hoistMenuToBody()
       }
     },
+    isHoisted () {
+      this.mdcMenu.setIsHoisted(this.isHoisted)
+    },
     fixed () {
       this.mdcMenu.setFixedPosition(this.fixed)
     },
     anchorCorner () {
-      if (this.anchorCorner !== '') {
-        this.mdcMenu.setAnchorCorner(Corner[this.anchorCorner.toUpperCase()])
-      } else {
-        this.mdcMenu.setAnchorCorner(Corner.TOP_START)
+      if (this._anchorCorner !== null) {
+        this.mdcMenu.setAnchorCorner(this.anchorCorner)
       }
     },
     absolutePositionX () {
@@ -142,31 +154,39 @@ export default {
     },
     'mdcMenu.open' () {
       this.model = this.mdcMenu.open
+    },
+    selectedIndex () {
+      if (this.selectedIndex >= 0) this.mdcMenu.setSelectedIndex(this.selectedIndex)
     }
   },
   mounted () {
-    this.updateSlot()
-    this.slotObserver = new MutationObserver(() => this.updateSlot())
-    this.slotObserver.observe(this.$el, {
-      childList: true,
-      subtree: true
-    })
-    this.mdcMenu = MDCMenu.attachTo(this.$el)
-    if (this.hoistToBody) {
-      this.mdcMenu.hoistMenuToBody()
-    }
-    this.mdcMenu.setFixedPosition(this.fixed)
-    if (this.anchorCorner !== '') {
-      this.mdcMenu.setAnchorCorner(Corner[this.anchorCorner.toUpperCase()])
-    }
-    if (this.absolutePositionX !== null || this.absolutePositionY !== null) {
-      this.mdcMenu.setAbsolutePosition(this.absolutePositionX, this.absolutePositionY)
-    }
-    this.mdcMenu.wrapFocus = this.wrapFocus
+    this.$nextTick(() => {
+      this.updateSlot()
+      this.slotObserver = new MutationObserver(() => this.updateSlot())
+      this.slotObserver.observe(this.$el, {
+        childList: true,
+        subtree: true
+      })
+      this.mdcMenu = MDCMenu.attachTo(this.$el)
+      if (this.hoistToBody) {
+        this.mdcMenu.hoistMenuToBody()
+      }
+      this.mdcMenu.setFixedPosition(this.fixed)
+      if (this._anchorCorner) {
+        this.mdcMenu.setAnchorCorner(this._anchorCorner)
+      }
+      if (this.absolutePositionX !== null || this.absolutePositionY !== null) {
+        this.mdcMenu.setAbsolutePosition(this.absolutePositionX, this.absolutePositionY)
+      }
+      this.mdcMenu.wrapFocus = this.wrapFocus
 
-    if (this.focusState !== null) {
-      this.mdcMenu.setDefaultFocusState(this.focusState)
-    }
+      if (this.focusState !== null) {
+        this.mdcMenu.setDefaultFocusState(this.focusState)
+      }
+      this.mdcMenu.setIsHoisted(this.isHoisted)
+
+      if (this.selectedIndex >= 0) this.mdcMenu.setSelectedIndex(this.selectedIndex)
+    })
   },
   beforeDestroy () {
     this.slotObserver.disconnect()
@@ -176,15 +196,20 @@ export default {
     updateSlot () {
       if (this.$slots.default) {
         this.$slots.default.map(n => {
-          n.componentInstance.$el.setAttribute('role', 'menu')
-          n.componentInstance.$el.setAttribute('aria-hidden', 'true')
-          n.componentInstance.$el.setAttribute('aria-orientation', 'vertical')
+          if (n.elm) {
+            n.elm.setAttribute('role', 'menu')
+            n.elm.setAttribute('aria-hidden', 'true')
+            n.elm.setAttribute('aria-orientation', 'vertical')
+            n.elm.querySelectorAll('.mdc-list-item').forEach(i => {
+              i.setAttribute('role', 'menuitem')
+            })
+          }
         })
       }
     },
     onSelect (event) {
       this.model = false
-      this.$emit('select', event.detail)
+      this.$emit('selected', event.detail)
     }
   }
 }
diff --git a/components/menu/MenuSelectionGroup.vue b/components/menu/MenuSelectionGroup.vue
new file mode 100644
index 000000000..52cb4a105
--- /dev/null
+++ b/components/menu/MenuSelectionGroup.vue
@@ -0,0 +1,40 @@
+<template>
+  <ul class="mdc-menu__selection-group">
+    <slot />
+  </ul>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      slotObserver: undefined
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.updateSlot()
+      this.slotObserver = new MutationObserver(() => this.updateSlot())
+      this.slotObserver.observe(this.$el, {
+        childList: true,
+        subtree: true
+      })
+    })
+  },
+  methods: {
+    updateSlot () {
+      if (this.$slots.default) {
+        this.$slots.default.forEach(n => {
+          if (n.elm instanceof Element && n.elm.classList.contains('mdc-list-item')) {
+            n.elm.querySelector('.mdc-list-item__graphic').classList.add('mdc-menu__selection-group-icon')
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/components/menu/MenuSurface.vue b/components/menu/MenuSurface.vue
index c085e6772..cac006a94 100644
--- a/components/menu/MenuSurface.vue
+++ b/components/menu/MenuSurface.vue
@@ -12,7 +12,6 @@
 import { Corner, MDCMenuSurface } from '@material/menu-surface'
 
 export default {
-  name: 'MenuSurface',
   model: {
     prop: 'open',
     event: 'change'
@@ -31,16 +30,24 @@ export default {
       default: false
     },
     anchorCorner: {
-      type: String,
-      default: ''
+      type: [Number, String],
+      default: 0
     },
     absolutePositionX: {
       type: Number,
-      default: -1
+      default: null
     },
     absolutePositionY: {
       type: Number,
-      default: -1
+      default: null
+    },
+    hoistToBody: {
+      type: Boolean,
+      default: false
+    },
+    isHoisted: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -56,45 +63,74 @@ export default {
       set (value) {
         this.$emit('change', value)
       }
+    },
+    _anchorCorner () {
+      if (!this.anchorCorner) return null
+
+      const upperCaseFocusState = String(this.anchorCorner).toUpperCase()
+      if (isNaN(this.anchorCorner)) {
+        return Corner[upperCaseFocusState]
+      }
+
+      const numberFocusState = Number(this.anchorCorner)
+      if (!isNaN(this.anchorCorner)) {
+        return numberFocusState
+      }
+
+      return null
     }
   },
   watch: {
     open () {
-      this.mdcMenuSurface.open = this.open
+      this.open ? this.mdcMenuSurface.getDefaultFoundation().open() : this.mdcMenuSurface.getDefaultFoundation().close()
     },
     quickOpen () {
       this.mdcMenuSurface.quickOpen = this.quickOpen
     },
+    hoistToBody () {
+      if (this.hoistToBody) {
+        this.mdcMenuSurface.hoistMenuToBody()
+      }
+    },
+    isHoisted () {
+      this.mdcMenuSurface.setIsHoisted(this.isHoisted)
+    },
     fixed () {
       this.mdcMenuSurface.setFixedPosition(this.fixed)
     },
     anchorCorner () {
-      if (this.anchorCorner !== '') {
-        this.mdcMenuSurface.setAnchorCorner(Corner[this.anchorCorner.toUpperCase()])
-      } else {
-        this.mdcMenuSurface.setAnchorCorner(Corner.TOP_START)
+      if (this._anchorCorner !== null) {
+        this.mdcMenuSurface.setAnchorCorner(this.anchorCorner)
       }
     },
     absolutePositionX () {
-      if (this.absolutePositionX > -1 && this.absolutePositionY > -1) {
+      if (this.absolutePositionX !== null) {
         this.mdcMenuSurface.setAbsolutePosition(this.absolutePositionX, this.absolutePositionY)
       }
     },
     absolutePositionY () {
-      if (this.absolutePositionX > -1 && this.absolutePositionY > -1) {
+      if (this.absolutePositionY !== null) {
         this.mdcMenuSurface.setAbsolutePosition(this.absolutePositionX, this.absolutePositionY)
       }
     }
   },
   mounted () {
-    this.mdcMenuSurface = MDCMenuSurface.attachTo(this.$el)
-    this.mdcMenuSurface.setFixedPosition(this.fixed)
-    if (this.anchorCorner !== '') {
-      this.mdcMenuSurface.setAnchorCorner(Corner[this.anchorCorner.toUpperCase()])
-    }
-    if (this.absolutePositionX > -1 && this.absolutePositionY > -1) {
-      this.mdcMenuSurface.setAbsolutePosition(this.absolutePositionX, this.absolutePositionY)
-    }
+    this.$nextTick(() => {
+      this.mdcMenuSurface = MDCMenuSurface.attachTo(this.$el)
+      this.mdcMenuSurface.setFixedPosition(this.fixed)
+      if (this._anchorCorner) {
+        this.mdcMenuSurface.setAnchorCorner(this._anchorCorner)
+      }
+      if (this.absolutePositionX !== null || this.absolutePositionY !== null) {
+        this.mdcMenuSurface.setAbsolutePosition(this.absolutePositionX, this.absolutePositionY)
+      }
+      if (this.hoistToBody) {
+        this.mdcMenuSurface.hoistMenuToBody()
+      }
+      this.mdcMenuSurface.setIsHoisted(this.isHoisted)
+
+      this.open ? this.mdcMenuSurface.getDefaultFoundation().open() : this.mdcMenuSurface.getDefaultFoundation().close()
+    })
   },
   beforeDestroy () {
     this.mdcMenuSurface.destroy()
diff --git a/components/menu/README.md b/components/menu/README.md
index b7bb787a0..25db14c39 100644
--- a/components/menu/README.md
+++ b/components/menu/README.md
@@ -15,6 +15,41 @@
 </m-menu-anchor>
 ```
 
+#### Selection Group Menu
+
+```html
+<m-menu>
+  <m-list>
+    <li>
+      <m-menu-selection-group>
+        <m-list-item>
+          <m-icon slot="graphic" icon="refresh"></m-icon>
+          <template slot="text">Refresh</template>
+        </m-list-item>
+        <m-list-item>
+          <m-icon slot="graphic" icon="favorite"></m-icon>
+          <template slot="text">Favorite</template>
+        </m-list-item>
+      </m-menu-selection-group>
+    </li>
+    <m-list-divider></m-list-divider>
+    <m-list-item><!-- some other list items --></m-list-item>
+  </m-list>
+</m-menu>
+```
+
+#### Disabled Menu Items
+
+Disabled menu items will be excluded from keyboard navigation.
+
+```html
+<m-menu>
+  <m-list>
+    <m-list-item disabled></m-list-item>
+  </m-list>
+</m-menu>
+```
+
 ### Script
 
 ```javascript
@@ -32,20 +67,21 @@ data() {
 |------|------|---------|-------------|
 | quickOpen | Boolean | false | Deactivates menu animation. |
 | open | Boolean | false | Open the menu (could be v-modeled). |
-| anchorCorner | String | `TOP_START` | Sets the corner that the menu surface will be anchored to. Can be one of the following: `TOP_LEFT`, `TOP_RIGHT`, `BOTTOM_LEFT`, `BOTTOM_RIGHT`, `TOP_START`, `TOP_END`, `BOTTOM_START`, `BOTTOM_END` |
+| anchorCorner | [Number, String] | `TOP_LEFT` | Sets the corner that the menu surface will be anchored to. Can be one of the following: `TOP_LEFT`, `TOP_RIGHT`, `BOTTOM_LEFT`, `BOTTOM_RIGHT`, `TOP_START`, `TOP_END`, `BOTTOM_START`, `BOTTOM_END` |
 | absolutePositionX | Number | null | Sets the absolute x position of the menu. Should only be used when the menu is hoisted or using fixed positioning. |
 | absolutePositionY | Number | null | Sets the absolute y position of the menu. Should only be used when the menu is hoisted or using fixed positioning. |
 | hoistToBody | Boolean | false | Removes the menu-surface element from the DOM and appends it to the body element. Should be used to overcome overflow: hidden issues. |
 | fixed | Boolean | false | Sets whether the menu surface is using fixed positioning. |
-| wrapFocus| Boolean| true | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa. |
-| defaultFocusState | [Number, String] | null | Sets default focus state where the menu should focus every time when menu is opened. Focuses the list root (`LIST_ROOT`) element by default. Can be one of the following: `NONE`, `LIST_ROOT`, `FIRST_ITEM`, `LAST_ITEM` |
-
+| wrapFocus | Boolean | true | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa. |
+| defaultFocusState | [Number, String] | `LIST_ROOT` | Sets default focus state where the menu should focus every time when menu is opened. Focuses the list root (`LIST_ROOT`) element by default. Can be one of the following: `NONE`, `LIST_ROOT`, `FIRST_ITEM`, `LAST_ITEM` |
+| selectedIndex | Number | -1 | Sets the list item to the selected state at the specified index. Do nothing when value is lower than 0. |
+| isHoisted | Boolean | false | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor. |
+ 
 ### Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| select | { index: Number, item: HTMLElement } | emitted when menu item is selected |
-| cancel | - | emitted when menu interaction is cancelled |
+| selected | { index: Number, item: HTMLElement } | emitted when menu item is selected |
 
 ### Slots
 
@@ -53,7 +89,7 @@ data() {
 |------|--------------|
 | default | menu content (list) |
 
-## MenuAnchor
+## Menu Anchor
 
 ### Slots
 
@@ -61,6 +97,91 @@ data() {
 |------|-------------|
 | default | should be the menu |
 
+## Menu Surface 
+
+### Markup
+
+```html
+<m-menu-surface>
+ ...
+</m-menu-surface>
+```
+
+#### Anchor To Parent
+
+```html
+<div id="toolbar" class="toolbar mdc-menu-surface--anchor">
+  <m-menu-surface>
+  ...
+  </m-menu-surface>
+</div>
+```
+
+#### Anchor To Element Within Wrapper
+
+```html
+<m-menu-anchor>
+  <button id="menu-surface-button" @click="open=true">Open Menu Surface</button>
+  <m-menu-surface v-model="open">
+  ...
+  </m-menu-surface>
+</m-menu-anchor>
+```
+
+```javascript
+data() {
+    return {
+        open: false
+    }
+}
+```
+
+#### Fixed Position
+
+```html
+<m-menu-surface fixed></m-menu-surface>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| quickOpen | Boolean | false | Sets whether the menu surface should open and close without animation. |
+| open | Boolean | false | Opens the menu surface (could be v-modeled). |
+| anchorCorner | [Number, String] | `TOP_LEFT` | Sets the corner that the menu surface will be anchored to. Can be one of the following: `TOP_LEFT`, `TOP_RIGHT`, `BOTTOM_LEFT`, `BOTTOM_RIGHT`, `TOP_START`, `TOP_END`, `BOTTOM_START`, `BOTTOM_END` |
+| absolutePositionX | Number | null | Sets the absolute x position of the menu surface. Should only be used when the menu is hoisted or using fixed positioning. |
+| absolutePositionY | Number | null | Sets the absolute y position of the menu surface. Should only be used when the menu is hoisted or using fixed positioning. |
+| hoistToBody | Boolean | false | Removes the menu-surface element from the DOM and appends it to the body element. Should be used to overcome `overflow: hidden` issues. |
+| fixed | Boolean | false | Sets whether the menu surface is using fixed positioning. |
+| isHoisted | Boolean | false | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor. |
+ 
+ ### Slots
+ 
+| Slot | Description |
+|------|-------------|
+| default | content in the menu surface |
+
+## Menu Selection Group
+
+Used to wrap a group of `<m-list-item>` that will represent a selection group.
+
+```html
+<m-list>
+  <li>
+    <m-menu-selection-group>
+      <m-list-item></m-list-item>
+    </m-menu-selection-group>
+  </li>
+</m-list>
+```
+
+### Slots
+
+| Slot | Description |
+|------|-------------|
+| default | a group of `<m-list-item>` that will represent a selection group |
+
+
 ### Reference
 
-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu
+- https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu
\ No newline at end of file
diff --git a/components/menu/__test__/Menu.spec.js b/components/menu/__test__/Menu.spec.js
new file mode 100644
index 000000000..7f81e2ba9
--- /dev/null
+++ b/components/menu/__test__/Menu.spec.js
@@ -0,0 +1,76 @@
+import { mount } from '@vue/test-utils'
+import Menu from '../Menu.vue'
+import MenuAnchor from '../MenuAnchor.vue'
+import MenuSurface from '../MenuSurface'
+import MenuSelectionGroup from '../MenuSelectionGroup'
+
+describe('Menu', () => {
+  it('should mount', () => {
+    const wrapper = mount(Menu)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+  it('should render with no prop', () => {
+    const wrapper = mount(Menu)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-menu')
+    expect(wrapper.classes()).toContain('mdc-menu-surface')
+  })
+
+  it('should render as fixed', () => {
+    const wrapper = mount(Menu, {
+      propsData: {
+        fixed: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+  })
+})
+
+describe('MenuSurface', () => {
+  it('should mount', () => {
+    const wrapper = mount(MenuSurface)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+  it('should render with no prop', () => {
+    const wrapper = mount(MenuSurface)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-menu-surface')
+  })
+
+  it('should render as fixed', () => {
+    const wrapper = mount(MenuSurface, {
+      propsData: {
+        fixed: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+  })
+})
+
+describe('MenuAnchor', () => {
+  it('should mount', () => {
+    const wrapper = mount(MenuAnchor)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+  it('should render with no prop', () => {
+    const wrapper = mount(MenuAnchor)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-menu-surface--anchor')
+  })
+})
+
+describe('MenuSelectionGroup', () => {
+  it('should mount', () => {
+    const wrapper = mount(MenuSelectionGroup)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+  it('should render with no prop', () => {
+    const wrapper = mount(MenuSelectionGroup)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-menu__selection-group')
+  })
+})
diff --git a/components/menu/__test__/__snapshots__/Menu.spec.js.snap b/components/menu/__test__/__snapshots__/Menu.spec.js.snap
new file mode 100644
index 000000000..0c6245263
--- /dev/null
+++ b/components/menu/__test__/__snapshots__/Menu.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Menu should render as fixed 1`] = `<div class="mdc-menu mdc-menu-surface"></div>`;
+
+exports[`Menu should render with no prop 1`] = `<div class="mdc-menu mdc-menu-surface"></div>`;
+
+exports[`MenuAnchor should render with no prop 1`] = `<div class="mdc-menu-surface--anchor"></div>`;
+
+exports[`MenuSelectionGroup should render with no prop 1`] = `<ul class="mdc-menu__selection-group"></ul>`;
+
+exports[`MenuSurface should render as fixed 1`] = `<div class="mdc-menu-surface"></div>`;
+
+exports[`MenuSurface should render with no prop 1`] = `<div class="mdc-menu-surface"></div>`;
diff --git a/components/menu/index.js b/components/menu/index.js
index 16802256c..c23dfdead 100644
--- a/components/menu/index.js
+++ b/components/menu/index.js
@@ -1,6 +1,7 @@
 import Menu from './Menu.vue'
 import MenuAnchor from './MenuAnchor.vue'
 import MenuSurface from './MenuSurface.vue'
+import MenuSelectionGroup from './MenuSelectionGroup'
 import './styles.scss'
 
 import { initPlugin } from '../'
@@ -10,6 +11,7 @@ const plugin = {
     vm.component('m-menu', Menu)
     vm.component('m-menu-anchor', MenuAnchor)
     vm.component('m-menu-surface', MenuSurface)
+    vm.component('m-menu-selection-group', MenuSelectionGroup)
   }
 }
 export default plugin
diff --git a/docs/.vuepress/components/CardMediaDemo.vue b/docs/.vuepress/components/CardMediaDemo.vue
index 039cf0f5a..e6db00d94 100644
--- a/docs/.vuepress/components/CardMediaDemo.vue
+++ b/docs/.vuepress/components/CardMediaDemo.vue
@@ -34,7 +34,8 @@ export default {
       radioProps: [
         { prop: 'square', value: false },
         { prop: 'sixteenNine', value: true }
-      ]
+      ],
+      checkboxProps: []
     }
   } 
 }
diff --git a/docs/.vuepress/components/MenuDemo.vue b/docs/.vuepress/components/MenuDemo.vue
index 5b5f69138..6ed009bdd 100644
--- a/docs/.vuepress/components/MenuDemo.vue
+++ b/docs/.vuepress/components/MenuDemo.vue
@@ -3,17 +3,23 @@
   <ComponentSection>
     <m-menu-anchor>
       <m-button raised @click="isMenuOpen=!isMenuOpen">open</m-button>
-      <m-menu v-model="isMenuOpen">
+      <m-menu v-model="isMenuOpen" :fixed="this.checkboxProps[0].value" :default-focus-state="defaultFocusState"
+              :quickOpen="this.checkboxProps[1].value" :is-hoisted="this.checkboxProps[2].value">
           <m-list>
-              <m-list-item role="menuitem">
+          <li>
+              <m-menu-selection-group>
+              <m-list-item>
                  <m-icon slot="graphic" icon="refresh"></m-icon>
                   <template slot="text">Refresh</template>
               </m-list-item>
-              <m-list-divider></m-list-divider>
-              <m-list-item role="menuitem">
+              <m-list-item>
                  <m-icon slot="graphic" icon="favorite"></m-icon>
                   <template slot="text">Favorite</template>
               </m-list-item>
+              </m-menu-selection-group>
+          </li>
+          <m-list-divider></m-list-divider>
+          <m-list-item>Add space before paragraph</m-list-item>
           </m-list>
       </m-menu>
     </m-menu-anchor>
@@ -30,10 +36,26 @@ export default {
     return {
       isMenuOpen: false,
       radioProps: [
+        { prop: 'defaultFocusState: NONE', value: false },
+        { prop: 'defaultFocusState: LIST_ROOT', value: true },
+        { prop: 'defaultFocusState: FIRST_ITEM', value: false },
+        { prop: 'defaultFocusState: LAST_ITEM', value: false }
       ],
       checkboxProps: [
+        { prop: 'fixed', value: false },
+        { prop: 'quickOpen', value: false },
+        { prop: 'isHoisted', value: false }
       ]
     }
+  },
+  computed: {
+    defaultFocusState () {
+      for (let i in this.radioProps) {
+        if (this.radioProps[i].value) {
+          return this.radioProps[i].prop.substr(19)
+        }
+      }
+    }
   }
 }
 </script>
diff --git a/docs/.vuepress/components/MenuSurfaceDemo.vue b/docs/.vuepress/components/MenuSurfaceDemo.vue
index 52658ca3f..bd7b18fed 100644
--- a/docs/.vuepress/components/MenuSurfaceDemo.vue
+++ b/docs/.vuepress/components/MenuSurfaceDemo.vue
@@ -4,7 +4,7 @@
             <m-menu-anchor>
                 <m-button @click="open = !open" id="menu-surface-button" raised>Open Menu Surface</m-button>
                 <m-menu-surface :anchor-corner="anchorCorner" :fixed="this.checkboxProps[0].value"
-                                :quickOpen="this.checkboxProps[1].value" v-model="open">
+                                :quickOpen="this.checkboxProps[1].value" v-model="open" :is-hoisted="this.checkboxProps[2].value">
                     <div class="demo">
                         Menu Surface
                     </div>
@@ -24,8 +24,7 @@
       return {
         open: false,
         radioProps: [
-          { prop: 'anchorCorner: null', value: true },
-          { prop: 'anchorCorner: TOP_LEFT', value: false },
+          { prop: 'anchorCorner: TOP_LEFT', value: true },
           { prop: 'anchorCorner: TOP_RIGHT', value: false },
           { prop: 'anchorCorner: BOTTOM_LEFT', value: false },
           { prop: 'anchorCorner: BOTTOM_RIGHT', value: false },
@@ -33,17 +32,16 @@
           { prop: 'anchorCorner: TOP_END', value: false },
           { prop: 'anchorCorner: BOTTOM_START', value: false },
           { prop: 'anchorCorner: BOTTOM_END', value: false }
-
         ],
         checkboxProps: [
           { prop: 'fixed', value: false },
           { prop: 'quickOpen', value: false },
+          { prop: 'isHoisted', value: false }
         ]
       }
     },
     computed: {
       anchorCorner () {
-        if (this.radioProps[0].value) return ''
         for (let i in this.radioProps) {
           if (this.radioProps[i].value) {
             return this.radioProps[i].prop.substr(14)
diff --git a/docs/components/README.md b/docs/components/README.md
index 3716ba6e8..a529030b4 100644
--- a/docs/components/README.md
+++ b/docs/components/README.md
@@ -60,6 +60,10 @@ The demonstration in this page is a work in progress..
 
 <MenuDemo/>
 
+## Menu Surface
+
+<MenuSurfaceDemo/>
+
 ## Dialog
 
 <DialogDemo/>
@@ -140,10 +144,6 @@ The demonstration in this page is a work in progress..
 
 <ListWithTrailingCheckboxDemo/>
 
-## Menu Surface
-
-<MenuSurfaceDemo/>
-
 ## Ripple
 
 <RippleDemo/>