chore(menu): Rename SimpleMenu to Menu (#2061)

BREAKING CHANGE: Renames MDCSimpleMenu to MDCMenu. Renames all mdc-simple-menu classes to mdc-menu. JS and SASS file paths for the menu have changed.
material-components · Jan 24, 2018 · 26c9aec · 26c9aec
1 parent dd41b60
commit 26c9aec
Show file tree

Hide file tree

Showing 24 changed files with 445 additions and 476 deletions.
diff --git a/demos/index.html b/demos/index.html
@@ -128,6 +128,13 @@
             </span>
           </a>
 
+          <a href="menu.html" role="listitem" class="mdc-list-item">
+            <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_menu_24px.svg" /></span>
+            <span class="mdc-list-item__text">
+              Menu
+              <span class="mdc-list-item__secondary-text">Pop over menus</span>
+            </span>
+          </a>
 
           <a href="radio.html" role="listitem" class="mdc-list-item">
             <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_radio_button_24px.svg" /></span>
@@ -153,14 +160,6 @@
             </span>
           </a>
 
-          <a href="simple-menu.html" role="listitem" class="mdc-list-item">
-            <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/ic_menu_24px.svg" /></span>
-            <span class="mdc-list-item__text">
-              Simple Menu
-              <span class="mdc-list-item__secondary-text">Pop over menus</span>
-            </span>
-          </a>
-
           <a href="slider.html" role="listitem" class="mdc-list-item">
             <span class="demo-catalog-list-icon mdc-list-item__graphic"><img src="/images/slider.svg" /></span>
             <span class="mdc-list-item__text">

diff --git a/demos/simple-menu.html → demos/menu.html b/demos/simple-menu.html → demos/menu.html
@@ -17,10 +17,10 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Simple Menu - Material Components Catalog</title>
+    <title>Menu - Material Components Catalog</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
-    <link rel="stylesheet" href="/assets/simple-menu.css">
+    <link rel="stylesheet" href="/assets/menu.css">
     <script src="/ready.js"></script>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
@@ -33,7 +33,7 @@
         flex-direction: column;
       }
 
-      .hero .mdc-simple-menu {
+      .hero .mdc-menu {
         z-index: initial;
       }
 
@@ -108,16 +108,16 @@
           <span class="catalog-back">
             <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
           </span>
-          <span class="mdc-toolbar__title catalog-title">Simple Menu</span>
+          <span class="mdc-toolbar__title catalog-title">Menu</span>
         </section>
       </div>
     </header>
 
     <main>
       <div class="mdc-toolbar-fixed-adjust"></div>
       <section class="hero">
-        <div class="mdc-simple-menu mdc-simple-menu--open">
-          <ul class="mdc-simple-menu__items mdc-list">
+        <div class="mdc-menu mdc-menu--open">
+          <ul class="mdc-menu__items mdc-list">
             <li class="mdc-list-item" role="menuitem">Back</li>
             <li class="mdc-list-item" role="menuitem">Forward</li>
             <li class="mdc-list-item" role="menuitem">Reload</li>
@@ -134,8 +134,8 @@
               Show<span class="demo-button__normal-text"> Menu</span><span class="demo-button__long-text"> From Here Now!</span>
             </button>
 
-            <div class="mdc-simple-menu" style="position: absolute;" tabindex="-1" id="demo-menu">
-              <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
+            <div class="mdc-menu" style="position: absolute;" tabindex="-1" id="demo-menu">
+              <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
                 <li class="mdc-list-item" role="menuitem" tabindex="0">Back</li>
                 <li class="mdc-list-item" role="menuitem" tabindex="0">Forward</li>
                 <li class="mdc-list-item" role="menuitem" tabindex="0">Reload</li>
@@ -259,7 +259,7 @@
     <script>
       demoReady(function() {
         var menuEl = document.querySelector('#demo-menu');
-        var menu = new mdc.menu.MDCSimpleMenu(menuEl);
+        var menu = new mdc.menu.MDCMenu(menuEl);
         var menuButtonEl = document.querySelector('#menu-button');
         menuButtonEl.addEventListener('click', function() {
           menu.open = !menu.open;
@@ -270,10 +270,10 @@
           var contentEl = document.querySelector('.demo-content');
           if (evt.target.checked) {
             contentEl.classList.add('mdc-theme--dark');
-            menuEl.classList.add('mdc-simple-menu--theme-dark');
+            menuEl.classList.add('mdc-menu--theme-dark');
           } else {
             contentEl.classList.remove('mdc-theme--dark');
-            menuEl.classList.remove('mdc-simple-menu--theme-dark');
+            menuEl.classList.remove('mdc-menu--theme-dark');
           }
         });
 
@@ -310,16 +310,16 @@
             if (evt.target.checked) {
               switch (evt.target.value) {
                 case "top start":
-                  menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.TOP_START);
+                  menu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.TOP_START);
                   break;
                 case "bottom start":
-                  menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.BOTTOM_START);
+                  menu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
                   break;
                 case "top end":
-                  menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.TOP_END);
+                  menu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.TOP_END);
                   break;
                 case "bottom end":
-                  menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.BOTTOM_END);
+                  menu.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_END);
                   break;
               }
             }
@@ -397,7 +397,7 @@
         }
 
         var lastSelected = document.getElementById('last-selected');
-        menuEl.addEventListener('MDCSimpleMenu:selected', function(evt) {
+        menuEl.addEventListener('MDCMenu:selected', function(evt) {
           var detail = evt.detail;
           lastSelected.textContent = '"' + detail.item.textContent.trim() +
             '" at index ' + detail.index;

diff --git a/demos/simple-menu.scss → demos/menu.scss b/demos/simple-menu.scss → demos/menu.scss
diff --git a/demos/select.html b/demos/select.html
@@ -72,8 +72,8 @@
             <div class="mdc-select__selected-text"></div>
             <div class="mdc-select__bottom-line"></div>
           </div>
-          <div class="mdc-simple-menu mdc-select__menu">
-            <ul class="mdc-list mdc-simple-menu__items">
+          <div class="mdc-menu mdc-select__menu">
+            <ul class="mdc-list mdc-menu__items">
               <li class="mdc-list-item" role="option" tabindex="0">
                 Bread, Cereal, Rice, and Pasta
               </li>
@@ -106,8 +106,8 @@ <h2 class="mdc-typography--title">Fully-Featured Component</h2>
               <div class="mdc-select__selected-text"></div>
               <div class="mdc-select__bottom-line"></div>
             </div>
-            <div class="mdc-simple-menu mdc-select__menu">
-              <ul class="mdc-list mdc-simple-menu__items">
+            <div class="mdc-menu mdc-select__menu">
+              <ul class="mdc-list mdc-menu__items">
                 <li class="mdc-list-item" role="option" id="fruit-roll-ups" tabindex="0">
                   Fruit Roll Ups
                 </li>

diff --git a/demos/theme/index.html b/demos/theme/index.html
@@ -44,8 +44,8 @@
                 <span class="demo-theme-color-radio__inner"></span>
               </i>
             </button>
-            <div class="mdc-simple-menu demo-theme-menu" style="position: absolute;" tabindex="-1" id="theme-color-menu">
-              <ul class="mdc-simple-menu__items mdc-list demo-theme-list"
+            <div class="mdc-menu demo-theme-menu" style="position: absolute;" tabindex="-1" id="theme-color-menu">
+              <ul class="mdc-menu__items mdc-list demo-theme-list"
                   role="menu"
                   aria-hidden="true"
                   style="list-style-type: none"><!-- Inline style needed to fix IE 11 rendering bug (see https://stackoverflow.com/a/23717689/467582) -->
@@ -687,8 +687,8 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
             <div class="mdc-select__selected-text"></div>
             <div class="mdc-select__bottom-line"></div>
           </div>
-          <div class="mdc-simple-menu mdc-select__menu">
-            <ul class="mdc-list mdc-simple-menu__items">
+          <div class="mdc-menu mdc-select__menu">
+            <ul class="mdc-list mdc-menu__items">
               <li class="mdc-list-item" role="option" id="none" aria-disabled="true">
                 Pick a food group
               </li>

diff --git a/demos/theme/index.js b/demos/theme/index.js
@@ -39,7 +39,7 @@ const ids = {
 };
 
 const events = {
-  MDC_SIMPLE_MENU_SELECTED: 'MDCSimpleMenu:selected',
+  MDC_MENU_SELECTED: 'MDCMenu:selected',
 };
 
 class Permalinker extends InteractivityProvider {
@@ -132,14 +132,14 @@ class ThemePicker extends InteractivityProvider {
 
   /** @private */
   registerThemeMenuOpenHandler_() {
-    const menu = new mdc.menu.MDCSimpleMenu(this.themeMenuEl_);
+    const menu = new mdc.menu.MDCMenu(this.themeMenuEl_);
     const actionEl = this.root_.getElementById(ids.THEME_COLOR_MENU_ACTION);
     actionEl.addEventListener('click', () => menu.open = !menu.open);
   }
 
   /** @private */
   registerThemeMenuChangeHandler_() {
-    this.themeMenuEl_.addEventListener(events.MDC_SIMPLE_MENU_SELECTED, (evt) => {
+    this.themeMenuEl_.addEventListener(events.MDC_MENU_SELECTED, (evt) => {
       const safeNewTheme = getSafeDemoTheme(evt.detail.item.getAttribute(attributes.THEME_NAME));
       this.swapTheme_(safeNewTheme);
       this.pushHistoryState_(safeNewTheme);

diff --git a/demos/toolbar/menu-toolbar.html b/demos/toolbar/menu-toolbar.html
@@ -43,8 +43,8 @@
           <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page" alt="Print this page">print</a>
           <a href="#" class="material-icons mdc-toolbar__icon toggle" aria-label="More" alt="More">more_vert</a>
           <div class="mdc-menu-anchor">
-            <div class="mdc-simple-menu" tabindex="-1" id="demo-menu">
-              <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
+            <div class="mdc-menu" tabindex="-1" id="demo-menu">
+              <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
                 <li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.069s;">Back</li>
                 <li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.124s;">Forward</li>
                 <li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.179s;">Reload</li>
@@ -75,7 +75,7 @@
     <script>
       demoReady(function() {
         var menuEl = document.querySelector('#demo-menu');
-        var menu = new mdc.menu.MDCSimpleMenu(menuEl);
+        var menu = new mdc.menu.MDCMenu(menuEl);
         var toggle = document.querySelector('.toggle');
         toggle.addEventListener('click', function() {
           menu.open = !menu.open;

diff --git a/docs/integrating-into-frameworks.md b/docs/integrating-into-frameworks.md
@@ -63,8 +63,8 @@ case.
 
 Every component comes with a complementary foundation class, which is usually called
 `MDCComponentFoundation`, where `MDCComponent` is the name of a component. For example, we have an
-[MDCSimpleMenuFoundation](../packages/mdc-menu/simple/foundation.js) that is used by our
-[MDCSimpleMenu](../packages/mdc-menu/simple/index.js) component, and which are both exported
+[MDCMenuFoundation](../packages/mdc-menu/foundation.js) that is used by our
+[MDCMenu](../packages/mdc-menu/index.js) component, and which are both exported
 publicly.
 
 In order to implement a component via a foundation, take the following steps:

diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js
@@ -49,7 +49,7 @@ autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
 autoInit.register('MDCTab', tabs.MDCTab);
 autoInit.register('MDCTabBar', tabs.MDCTabBar);
 autoInit.register('MDCTextField', textField.MDCTextField);
-autoInit.register('MDCSimpleMenu', menu.MDCSimpleMenu);
+autoInit.register('MDCMenu', menu.MDCMenu);
 autoInit.register('MDCSelect', select.MDCSelect);
 autoInit.register('MDCSlider', slider.MDCSlider);
 autoInit.register('MDCToolbar', toolbar.MDCToolbar);