From 971b829ccf14bd4c7ae6549dcd39c46cdc6d80f2 Mon Sep 17 00:00:00 2001
From: Nicholas Shahan <nshahan@google.com>
Date: Tue, 28 Nov 2017 15:16:59 -0800
Subject: [PATCH] Add Material Menu examples (#49)

* Update type to avoid warning in Material Auto Suggest example.
* Update dependencies.
* Allow travis failures on stable SDK
* Ignore screenshot file created when running tests
* Add sanity check test for Material Menu.
---
 .gitignore                                    |   2 +
 .travis.yml                                   |   3 +-
 lib/app_component.dart                        |   2 +
 lib/app_component.html                        |  20 ++
 .../material_auto_suggest_input_demo.dart     |   4 +-
 .../material_menu_demo.dart                   | 278 ++++++++++++++++++
 .../material_menu_demo.html                   |  43 +++
 .../material_menu_demo.scss                   |   5 +
 pubspec.lock                                  |  62 ++--
 pubspec.yaml                                  |  11 +-
 tool/sanity_check.dart                        |  65 ++++
 11 files changed, 465 insertions(+), 30 deletions(-)
 create mode 100644 lib/src/material_menu_demo/material_menu_demo.dart
 create mode 100644 lib/src/material_menu_demo/material_menu_demo.html
 create mode 100644 lib/src/material_menu_demo/material_menu_demo.scss

diff --git a/.gitignore b/.gitignore
index f71f1ac..614e979 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,5 @@
 .packages
 .pub/
 build/
+
+screenshot.png
diff --git a/.travis.yml b/.travis.yml
index a6ca522..d214f01 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -11,5 +11,4 @@ cache:
     - $HOME/.pub-cache
 matrix:
   allow_failures:
-  - dart: dev
-    dart_task: dartfmt
+  - dart: stable
diff --git a/lib/app_component.dart b/lib/app_component.dart
index 03face2..56c0c1d 100644
--- a/lib/app_component.dart
+++ b/lib/app_component.dart
@@ -16,6 +16,7 @@ import 'src/material_expansionpanel_demo/material_expansionpanel_demo.dart';
 import 'src/material_icon_demo/material_icon_demo.dart';
 import 'src/material_input_demo/material_input_demo.dart';
 import 'src/material_list_demo/material_list_demo.dart';
+import 'src/material_menu_demo/material_menu_demo.dart';
 import 'src/material_popup_demo/material_popup_demo.dart';
 import 'src/material_progress_demo/material_progress_demo.dart';
 import 'src/material_radio_demo/material_radio_demo.dart';
@@ -45,6 +46,7 @@ import 'src/scorecard_demo/scorecard_demo.dart';
     MaterialIconDemoComponent,
     MaterialInputDemoComponent,
     MaterialListDemoComponent,
+    MaterialMenuDemoComponent,
     MaterialPopupDemoComponent,
     MaterialProgressDemoComponent,
     MaterialRadioDemoComponent,
diff --git a/lib/app_component.html b/lib/app_component.html
index d3b5af0..39dbc49 100644
--- a/lib/app_component.html
+++ b/lib/app_component.html
@@ -24,6 +24,7 @@
     <li><a href="#Scorecards">Scorecards</a></li>
     <li><a href="#Popups">Popups</a></li>
     <li><a href="#Dialogs">Modal Dialogs</a></li>
+    <li><a href="#Menus">Menus</a></li>
     <li><a href="#Tooltips">Tooltips</a></li>
     <li><a href="#Lists">Lists</a></li>
     <li><a href="#Selects">Selects</a></li>
@@ -388,6 +389,25 @@ <h2>Modal Dialogs</h2>
 <material-dialog-demo></material-dialog-demo>
 <hr>
 
+<a name="Menus"></a>
+<h2>Menus</h2>
+<ul class="source-links">
+  <li>
+    <a href="https://github.com/dart-lang/angular_components/tree/master/lib/material_menu"
+       target="_blank">
+      Component Source
+    </a>
+  </li>
+  <li>
+    <a href="https://github.com/dart-lang/angular_components_example/tree/master/lib/src/material_menu_demo"
+       target="_blank">
+      Example Source
+    </a>
+  </li>
+</ul>
+<material-menu-demo></material-menu-demo>
+<hr>
+
 <a name="Tooltips"></a>
 <h2>Tooltips</h2>
 <ul class="source-links">
diff --git a/lib/src/material_auto_suggest_input_demo/material_auto_suggest_input_demo.dart b/lib/src/material_auto_suggest_input_demo/material_auto_suggest_input_demo.dart
index 07e4702..c32de5a 100644
--- a/lib/src/material_auto_suggest_input_demo/material_auto_suggest_input_demo.dart
+++ b/lib/src/material_auto_suggest_input_demo/material_auto_suggest_input_demo.dart
@@ -88,7 +88,7 @@ class MaterialAutoSuggestInputDemoComponent {
   final ExampleSelectionOptions suggestionOptions =
       new ExampleSelectionOptions.withOptionGroups(_optionGroups);
   final ExampleSelectionOptions suggestionOptionsWithItemRenderer =
-      new ExampleSelectionOptions.withOptionGroups(_optionGroups,
+      new ExampleSelectionOptions<List<int>>.withOptionGroups(_optionGroups,
           toFilterableString: _numberNameRenderer);
 
   final emptySuggestionOptions =
@@ -126,7 +126,7 @@ class MaterialAutoSuggestInputDemoComponent {
 
   SelectionOptions get options => suggestionOptionsWithItemRenderer;
 
-  ItemRenderer get itemRenderer => _numberNameRenderer;
+  ItemRenderer<List<int>> get itemRenderer => _numberNameRenderer;
 
   ComponentRenderer get componentRenderer =>
       useComponentRenderer ? (_) => ExampleRendererComponent : null;
diff --git a/lib/src/material_menu_demo/material_menu_demo.dart b/lib/src/material_menu_demo/material_menu_demo.dart
new file mode 100644
index 0000000..2fa6c63
--- /dev/null
+++ b/lib/src/material_menu_demo/material_menu_demo.dart
@@ -0,0 +1,278 @@
+import 'dart:html';
+
+import 'package:angular/angular.dart';
+import 'package:observable/observable.dart';
+import 'package:angular_components/laminate/overlay/zindexer.dart';
+import 'package:angular_components/laminate/popup/module.dart';
+import 'package:angular_components/material_menu/dropdown_menu.dart';
+import 'package:angular_components/material_menu/material_fab_menu.dart';
+import 'package:angular_components/material_menu/material_menu.dart';
+import 'package:angular_components/model/menu/menu.dart';
+import 'package:angular_components/model/menu/selectable_menu.dart';
+import 'package:angular_components/model/selection/select.dart';
+import 'package:angular_components/model/selection/selection_model.dart';
+import 'package:angular_components/model/ui/icon.dart';
+import 'package:angular_components/utils/disposer/disposer.dart';
+
+@Component(
+  selector: 'material-menu-demo',
+  providers: const [
+    popupBindings,
+    const Provider(ZIndexer, useClass: ZIndexer)
+  ],
+  directives: const [
+    MaterialMenuComponent,
+    MaterialFabMenuComponent,
+    DropdownMenuComponent
+  ],
+  templateUrl: 'material_menu_demo.html',
+  styleUrls: const ['material_menu_demo.css'],
+)
+class MaterialMenuDemoComponent implements OnDestroy {
+  /// Stores the selected color, in an observable manner.
+  final SelectionModel<String> colorSelection;
+
+  /// Simple menu with some colors.
+  final MenuModel<MenuItem> menuModel;
+
+  /// The same as [menuModel], but with an icon.
+  final MenuModel<MenuItem> menuModelWithIcon;
+
+  /// Demonstrates the use of sub menus.
+  final MenuModel<MenuItem> nestedMenuModel;
+
+  /// Demonstrates the use of selectable sub menus.
+  final MenuModel<MenuItem> selectableMenuModel;
+
+  /// Demonstrates menu items with multiple suffixes.
+  final MenuModel<MenuItem> menuModelWithAffixes;
+
+  final Disposer _disposer;
+
+  final MenuItem menuItem = new MenuItem('your label',
+      icon: new Icon('add'),
+      subMenu: new MenuModel([
+        new MenuItemGroup([
+          new MenuItem('item1-1', tooltip: 'your tooltip'),
+          new MenuItem('item1-2', tooltip: 'your second tooltip')
+        ], 'group1'),
+        new MenuItemGroup(
+            [new MenuItem('item2-1'), new MenuItem('item2-2')], 'group2'),
+      ]));
+
+  MaterialMenuDemoComponent._(
+      this._disposer,
+      this.colorSelection,
+      this.menuModel,
+      this.menuModelWithIcon,
+      this.nestedMenuModel,
+      this.selectableMenuModel,
+      this.menuModelWithAffixes);
+
+  factory MaterialMenuDemoComponent() {
+    var colorSelection = new SelectionModel<String>.withList();
+    var makeColorMenuItem = (String color, {MenuModel<MenuItem> subMenu}) =>
+        new ColorMenuItem(color, colorSelection, subMenu: subMenu);
+    var menuModel = new MenuModel<ColorMenuItem>([
+      new MenuItemGroup<ColorMenuItem>([
+        makeColorMenuItem('red'),
+        makeColorMenuItem('green'),
+        makeColorMenuItem('yellow'),
+        makeColorMenuItem('black'),
+      ])
+    ]);
+
+    var menuModelWithIcon =
+        new MenuModel<MenuItem>(menuModel.itemGroups, icon: new Icon('menu'));
+    var nestedMenuModel = new MenuModel<MenuItem>([
+      new MenuItemGroup<MenuItem>([
+        new MenuItem('Basic Colors', subMenu: menuModel),
+        new MenuItem<ColorMenuItem>('Lights',
+            subMenu: new MenuModel<ColorMenuItem>([
+              new MenuItemGroup<ColorMenuItem>([
+                makeColorMenuItem('Blue',
+                    subMenu: new MenuModel<ColorMenuItem>([
+                      new MenuItemGroup<ColorMenuItem>([
+                        makeColorMenuItem('lightsteelblue'),
+                        makeColorMenuItem('lightblue'),
+                        makeColorMenuItem('lightskyblue'),
+                      ])
+                    ])),
+                makeColorMenuItem('lightgreen'),
+                makeColorMenuItem('lightsalmon'),
+                makeColorMenuItem('lightyellow'),
+              ])
+            ])),
+        new MenuItem('Darks',
+            subMenu: new MenuModel<ColorMenuItem>([
+              new MenuItemGroup<ColorMenuItem>([
+                makeColorMenuItem('darkblue'),
+                makeColorMenuItem('darkmagenta'),
+                makeColorMenuItem('darkkhaki'),
+                makeColorMenuItem('darkolivegreen'),
+              ])
+            ])),
+      ])
+    ]);
+
+    final disposer = new Disposer.oneShot();
+
+    final metalSelection =
+        new SelectionModel<String>.withList(selectedValues: ['O1']);
+    final typeSelection = new SelectionModel<String>.withList(allowMulti: true);
+    final planeSelection =
+        new SelectionModel<String>.withList(allowMulti: true);
+    final toolSelection = new SelectionModel<String>.withList(allowMulti: true);
+
+    final chiselItem = new SelectableMenuItem<String>(
+        value: 'Chisels',
+        subMenu: new MenuModel<MenuItem>([
+          new MenuItemGroupWithSelection<String>(items: [
+            new SelectableMenuItem<String>(value: 'PMV-11'),
+            new SelectableMenuItem<String>(value: 'A2'),
+            new SelectableMenuItem<String>(value: 'O1'),
+          ], selectionModel: metalSelection, label: 'Steel'),
+          new MenuItemGroupWithSelection<String>(items: [
+            new SelectableMenuItem<String>(value: 'Mortise'),
+            new SelectableMenuItem<String>(value: 'Bench'),
+            new SelectableMenuItem<String>(value: 'Paring'),
+          ], selectionModel: typeSelection, label: 'Function'),
+          new MenuItemGroup<MenuItem>([
+            new MenuItem('Help',
+                itemSuffixes: new ObservableList.from([
+                  new IconAffix(
+                      icon: new Icon('help_outline'),
+                      visibility: IconVisibility.hover)
+                ]),
+                action: () => window.alert('halp!')),
+          ]),
+        ]));
+
+    final planeItem = new SelectableMenuItem<String>(
+        value: 'Planes',
+        subMenu: new MenuModel<MenuItem>([
+          new MenuItemGroupWithSelection<String>(items: [
+            new SelectableMenuItem<String>(
+                value: 'Bench', selectableState: SelectableOption.Disabled),
+            new SelectableMenuItem<String>(value: 'Smoothing'),
+            new SelectableMenuItem<String>(value: 'Chisel'),
+            new SelectableMenuItem<String>(value: 'Block'),
+            new SelectableMenuItem<String>(
+                value: 'Shoulder', selectableState: SelectableOption.Disabled),
+          ], selectionModel: planeSelection),
+        ]));
+
+    disposer.addStreamSubscription(typeSelection.changes.listen((_) {
+      if (typeSelection.isNotEmpty) {
+        toolSelection.select('Chisels');
+      } else {
+        toolSelection.deselect('Chisels');
+      }
+    }));
+
+    disposer.addStreamSubscription(planeSelection.changes.listen((_) {
+      if (planeSelection.isNotEmpty) {
+        toolSelection.select('Planes');
+      } else {
+        toolSelection.deselect('Planes');
+      }
+    }));
+
+    var selectableMenuModel = new MenuModel<MenuItem>([
+      new MenuItemGroupWithSelection<String>(items: [
+        chiselItem,
+        planeItem,
+        new SelectableMenuItem<String>(
+            value: 'Hidden item', selectableState: SelectableOption.Hidden),
+        new SelectableMenuItem<String>(
+            value: 'Sandpaper',
+            selectableState: SelectableOption.Disabled,
+            subMenu: new MenuModel<MenuItem>([
+              new MenuItemGroup<MenuItem>([
+                new SelectableMenuItem<String>(value: '320'),
+                new SelectableMenuItem<String>(value: '150'),
+              ]),
+            ])),
+      ], selectionModel: toolSelection, label: 'Tools'),
+      new MenuItemGroup<MenuItem>([
+        new MenuItem('Buy',
+            subMenu: new MenuModel<MenuItem>([
+              new MenuItemGroup<MenuItem>([
+                new MenuItem('Almost new',
+                    enabled: false, action: () => window.alert('almost new!')),
+                new MenuItem('Used', action: () => window.alert('used!')),
+                new MenuItem('New', action: () => window.alert('new!')),
+              ])
+            ])),
+        new MenuItem('Advertise',
+            subMenu: new MenuModel<MenuItem>([
+              new MenuItemGroup<MenuItem>([
+                new MenuItem('Google',
+                    enabled: false, action: () => window.alert('google!')),
+                new MenuItem('Facebook',
+                    enabled: false, action: () => window.alert('facebook!')),
+                new MenuItem('Craigslist',
+                    enabled: false, action: () => window.alert('craigslist!')),
+              ])
+            ])),
+        new MenuItem('Sell'),
+      ], 'Unselectable group'),
+    ]);
+
+    final menuModelWithAffixes = new MenuModel<MenuItem>([
+      new MenuItemGroup<MenuItem>([
+        new MenuItem('With no suffixes', action: () => window.alert('1')),
+        new MenuItem('With an icon suffix',
+            action: () => window.alert('2'),
+            itemSuffixes: new ObservableList.from([
+              new IconAffix(
+                  icon: new IconWithAction(
+                      'delete', () => window.alert('action'), 'ariaLabel', null,
+                      shouldCloseMenuOnTrigger: true))
+            ])),
+        new MenuItem('With text suffix',
+            action: () => window.alert('3'),
+            itemSuffixes:
+                new ObservableList.from([new CaptionAffix(text: 'Ctrl + V')])),
+        new MenuItem('With multiple suffixes',
+            action: () => window.alert('4'),
+            itemSuffixes: new ObservableList.from([
+              new IconAffix(
+                  icon: new IconWithAction('delete',
+                      () => window.alert('action 1'), 'ariaLabel', null)),
+              new IconAffix(icon: new Icon('accessible')),
+              new CaptionAffix(text: 'some text'),
+              new IconAffix(icon: new Icon('autorenew')),
+            ])),
+      ]),
+    ]);
+
+    return new MaterialMenuDemoComponent._(
+        disposer,
+        colorSelection,
+        menuModel,
+        menuModelWithIcon,
+        nestedMenuModel,
+        selectableMenuModel,
+        menuModelWithAffixes);
+  }
+
+  @override
+  void ngOnDestroy() {
+    _disposer.dispose();
+  }
+
+  String get selectedColor => colorSelection.selectedValues.isEmpty
+      ? 'red'
+      : colorSelection.selectedValues.first;
+}
+
+class ColorMenuItem extends MenuItem<ColorMenuItem> {
+  ColorMenuItem(String label, SelectionModel selection,
+      {Icon icon, MenuModel<MenuItem> subMenu})
+      : super(label, icon: icon, subMenu: subMenu) {
+    this.action = () {
+      selection.select(label);
+    };
+  }
+}
diff --git a/lib/src/material_menu_demo/material_menu_demo.html b/lib/src/material_menu_demo/material_menu_demo.html
new file mode 100644
index 0000000..fad2e55
--- /dev/null
+++ b/lib/src/material_menu_demo/material_menu_demo.html
@@ -0,0 +1,43 @@
+<section>
+  <h3>Material Menu Component</h3>
+  <span class="menu-colorchanger"
+        [style.color]="selectedColor">Use the menu to change color</span>
+  <material-menu [menu]="menuModel" buttonText="OPEN">
+  </material-menu>
+  <material-menu [menu]="menuModelWithIcon">
+  </material-menu>
+</section>
+
+<section>
+  <h3>Nested Material Menu</h3>
+  <material-menu [menu]="nestedMenuModel" buttonText="OPEN">
+  </material-menu>
+  <h4>With dropdown style</h4>
+  <dropdown-menu
+      [menu]="nestedMenuModel"
+      buttonText="Open">
+  </dropdown-menu>
+
+  <h4>With dropdown style (nounderline)</h4>
+  <dropdown-menu
+      [menu]="nestedMenuModel"
+      buttonText="Open"
+      class="nounderline">
+  </dropdown-menu>
+
+  <h4>With single- and multi-select menu groups</h4>
+  <dropdown-menu
+      [menu]="selectableMenuModel"
+      buttonText="Open">
+  </dropdown-menu>
+
+  <h4>With menu item affixes</h4>
+  <dropdown-menu
+      [menu]="menuModelWithAffixes"
+      buttonText="Open">
+  </dropdown-menu>
+
+  <h3>Material FAB Menu</h3>
+  <material-fab-menu [menuItem]="menuItem">
+  </material-fab-menu>
+</section>
diff --git a/lib/src/material_menu_demo/material_menu_demo.scss b/lib/src/material_menu_demo/material_menu_demo.scss
new file mode 100644
index 0000000..2e3b6d0
--- /dev/null
+++ b/lib/src/material_menu_demo/material_menu_demo.scss
@@ -0,0 +1,5 @@
+@import 'package:angular_components/material_menu/mixins';
+
+.nounderline {
+  @include dropdown-menu-nounderline;
+}
\ No newline at end of file
diff --git a/pubspec.lock b/pubspec.lock
index caf70df..49eaedd 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -6,31 +6,37 @@ packages:
       name: analyzer
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.30.0+4"
+    version: "0.31.0-alpha.2"
   angular:
     description:
       name: angular
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "5.0.0-alpha"
+    version: "5.0.0-alpha+1"
+  angular_ast:
+    description:
+      name: angular_ast
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.4.0-alpha+2"
   angular_compiler:
     description:
       name: angular_compiler
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.0-alpha"
+    version: "0.4.0-alpha+1"
   angular_components:
     description:
       name: angular_components
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.9.0-alpha"
+    version: "0.9.0-alpha+1"
   angular_forms:
     description:
       name: angular_forms
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.1-alpha"
+    version: "1.0.1-alpha+1"
   archive:
     description:
       name: archive
@@ -79,6 +85,18 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.5.0"
+  built_collection:
+    description:
+      name: built_collection
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.6.2"
+  built_value:
+    description:
+      name: built_value
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.3.3"
   charcode:
     description:
       name: charcode
@@ -91,6 +109,12 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.1.2+1"
+  code_builder:
+    description:
+      name: code_builder
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.3.0"
   code_transformers:
     description:
       name: code_transformers
@@ -144,13 +168,7 @@ packages:
       name: front_end
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.0-alpha.4.1"
-  func:
-    description:
-      name: func
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.0.0"
+    version: "0.1.0-alpha.7"
   glob:
     description:
       name: glob
@@ -180,7 +198,7 @@ packages:
       name: intl
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.15.1"
+    version: "0.15.2"
   isolate:
     description:
       name: isolate
@@ -198,7 +216,7 @@ packages:
       name: kernel
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.3.0-alpha.1.1"
+    version: "0.3.0-alpha.4"
   logging:
     description:
       name: logging
@@ -222,7 +240,7 @@ packages:
       name: mime
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.9.3"
+    version: "0.9.4"
   observable:
     description:
       name: observable
@@ -246,7 +264,7 @@ packages:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.4.2"
+    version: "1.5.1"
   perf_api:
     description:
       name: perf_api
@@ -282,7 +300,7 @@ packages:
       name: sass
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.0-beta.2"
+    version: "1.0.0-beta.3"
   sass_builder:
     description:
       name: sass_builder
@@ -294,19 +312,19 @@ packages:
       name: scratch_space
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.0.1+1"
+    version: "0.0.1+2"
   shelf:
     description:
       name: shelf
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.7.0"
+    version: "0.7.1"
   source_gen:
     description:
       name: source_gen
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.7.2"
+    version: "0.7.2+1"
   source_maps:
     description:
       name: source_maps
@@ -324,7 +342,7 @@ packages:
       name: stack_trace
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.2"
+    version: "1.9.1"
   stream_channel:
     description:
       name: stream_channel
@@ -392,4 +410,4 @@ packages:
     source: hosted
     version: "2.1.13"
 sdks:
-  dart: ">=1.24.0 <2.0.0-dev.infinity"
+  dart: ">=2.0.0-dev.3.0 <=2.0.0-dev.8.0"
diff --git a/pubspec.yaml b/pubspec.yaml
index 0e5c454..a6e849b 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,14 +1,17 @@
 name: angular_components_example
 description: An example app using the angular_components package.
 environment:
-  sdk: '>=1.24.0 <2.0.0'
+  sdk: '>=2.0.0-dev.3.0 <2.0.0'
 dependencies:
-  angular: 5.0.0-alpha
-  angular_components: 0.9.0-alpha
-  angular_forms: 1.0.1-alpha
+  angular: 5.0.0-alpha+1
+  angular_components: 0.9.0-alpha+1
+  angular_forms: 1.0.1-alpha+1
   browser: ^0.10.0
   dart_to_js_script_rewriter: ^1.0.1
   sass_builder: ^1.0.0
+dependency_overrides:
+  # Necessary with angular: 5.0.0-alpha+1 dependency.
+  analyzer: ^0.31.0-alpha.1
 dev_dependencies:
   webdriver: ^1.2.1
 transformers:
diff --git a/tool/sanity_check.dart b/tool/sanity_check.dart
index 162c1c8..c661c5b 100644
--- a/tool/sanity_check.dart
+++ b/tool/sanity_check.dart
@@ -92,6 +92,8 @@ Future main(List<String> args) async {
     await testMaxCharInput(driver);
     await testAutoSuggest(ensureBodyContains, ensureBodyDoesNotContain, driver);
     await testDialog(ensureDialogVisible, ensureDialogNotVisible, driver);
+    await testMenu(ensureElementColor, ensureBodyContains,
+        ensureBodyDoesNotContain, driver);
     await testPopup(ensureBodyContains, ensureBodyDoesNotContain, driver);
     await testTooltip(ensureBodyContains, ensureBodyDoesNotContain, driver);
     await testList(ensureElementColor, driver);
@@ -306,6 +308,69 @@ Future testPopup(
   await ensureBodyDoesNotContain(popupText);
 }
 
+Future testMenu(
+    Future<Null> ensureElementColor(WebElement element, String color),
+    Future<Null> ensureBodyContains(String text),
+    Future<Null> ensureBodyDoesNotContain(String text),
+    WebDriver driver) async {
+  print("Testing menu.");
+
+  final colorOption = "lightsalmon";
+  final subMenu = "Lights";
+  final colorInitial = "rgba(255, 0, 0, 1)";
+  final colorAfterClick = "rgba(255, 160, 122, 1)";
+
+  final colorText =
+      await driver.findElements(const By.className("menu-colorchanger")).first;
+  await ensureElementColor(colorText, colorInitial);
+
+  final menus =
+      await driver.findElements(const By.tagName("dropdown-menu")).toList();
+
+  await ensureBodyDoesNotContain(colorOption);
+  await ensureBodyDoesNotContain(subMenu);
+  await menus.first.click();
+
+  // TODO(google) Remove sleep once PageObject testing classes are available
+  // Wait for the menu animation to complete
+  sleep(new Duration(milliseconds: 250));
+
+  await ensureBodyContains(subMenu);
+
+  var listItems = await driver
+      .findElements(const By.tagName("material-select-item"))
+      .toList();
+  for (var listItem in listItems) {
+    if ((await listItem.text).contains(subMenu)) {
+      await listItem.click();
+      break;
+    }
+  }
+
+  // TODO(google) Remove sleep once PageObject testing classes are available
+  // Wait for the menu animation to complete
+  sleep(new Duration(milliseconds: 250));
+
+  await ensureBodyContains(colorOption);
+
+  listItems = await driver
+      .findElements(const By.tagName("material-select-item"))
+      .toList();
+  for (var listItem in listItems) {
+    if ((await listItem.text).contains(colorOption)) {
+      await listItem.click();
+      break;
+    }
+  }
+  // TODO(google) Remove sleep once PageObject testing classes are available
+  // Wait for the menu animation to complete
+  sleep(new Duration(milliseconds: 250));
+
+  await ensureBodyDoesNotContain(colorOption);
+  await ensureBodyDoesNotContain(subMenu);
+  await ensureElementColor(colorText, colorAfterClick);
+}
+
 Future testTooltip(
     Future<Null> ensureBodyContains(String text),
     Future<Null> ensureBodyDoesNotContain(String text),