Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

chore(menu): Rename SimpleMenu to Menu #2061

Merged
merged 2 commits into from
Jan 24, 2018
Merged

chore(menu): Rename SimpleMenu to Menu #2061

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
906877d
chore(menu): Rename SimpleMenu to Menu
williamernest Jan 23, 2018
91c8016
Merge branch 'master' into chore/menu/rename-simple-menu
williamernest Jan 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
32 changes: 16 additions & 16 deletions demos/simple-menu.html → demos/menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -33,7 +33,7 @@
flex-direction: column;
}

.hero .mdc-simple-menu {
.hero .mdc-menu {
z-index: initial;
}

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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;
Expand All @@ -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');
}
});

Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand Down
0 demos/simple-menu.scss → demos/menu.scss
View file
Open in desktop
File renamed without changes.
8 changes: 4 additions & 4 deletions demos/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions demos/theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) -->
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions demos/theme/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const ids = {
};

const events = {
MDC_SIMPLE_MENU_SELECTED: 'MDCSimpleMenu:selected',
MDC_MENU_SELECTED: 'MDCMenu:selected',
};

class Permalinker extends InteractivityProvider {
Expand Down Expand Up @@ -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);
Expand Down
6 changes: 3 additions & 3 deletions demos/toolbar/menu-toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions docs/integrating-into-frameworks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion packages/material-components-web/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Loading