feat(menu): add md-menu standalone component

Author: jelbourn

package.json

@@ -22,7 +22,7 @@
     "deploy": "firebase deploy",
     "webdriver-manager": "webdriver-manager"
   },
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "license": "MIT",
   "engines": {
     "node": ">= 4.2.1 < 5"
@@ -43,6 +43,7 @@
     "zone.js": "0.6.12"
   },
   "devDependencies": {
+    "@angular/compiler-cli": "^0.4.1",
     "add-stream": "^1.0.0",
     "angular-cli": "^1.0.0-beta.9",
     "broccoli-autoprefixer": "^4.1.0",

scripts/release/enact-release.sh

@@ -1,5 +1,10 @@
 #!/usr/bin/env bash
 
+# Run this script after running `stage-release.sh` to publish the packages staged to deploy/
+# Optionally uses the first argument as the tag for the release (such as "next").
+# This script should be run from the root of the material2 repo.
+
+
 # `npm whoami` errors and dies if you're not logged in,
 # so we redirect the stderr output to /dev/null since we don't care.
 NPM_USER=$(npm whoami 2> /dev/null)
@@ -9,11 +14,15 @@ if [ "${NPM_USER}" != "angular2-material" ]; then
   exit
 fi
 
+NPM_TAG="latest"
+if [ "$1" ] ; then
+  NPM_TAG=${1}
+fi
+
 set -ex
 
-for package in ./deploy/*
-do
-  npm publish --access public ${package}
+for package in ./deploy/* ; do
+  npm publish --access public ${package} --tag ${NPM_TAG}
 done
 
 # Always log out of npm when publish is complete.

scripts/release/stage-release.sh

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-set -exu
+set -xu
 
 # Stages a release by putting everything that should be packaged and released
 # into the ./deploy folder. This script should be run from the root of the
@@ -12,19 +12,55 @@ set -exu
 rm -rf ./dist
 rm -rf ./deploy
 
-# Perform a build with the modified tsconfig.json.
+# deploy/ serves as a working directory to stage the release.
+mkdir deploy
+
+# Start off by building normally.
+ng build
+
+# We need to remove moduleId for the ngc build. We do this by simply commenting out with a
+# distinguishing marker and then undoing those lines after we've generated the .metadata.json files.
+grep -lr "moduleId:" ./src/ | xargs sed -i 's|moduleId:|//MODULE moduleId:|g'
+
+# Run tsc directly first so that the output directories match what ngc is expecting. This is
+# different from what the CLI will output for *demo-app*, but we don't care about the output for
+# demo-app when we're staging a release (only components/ and core/).
+tsc -p ./src/demo-app
+
+# Now run ngc to generate the .metadata.json files. Our tsconfig is configred with
+# skipTemplateCodegen, so only the metadata files are actually generated.
+./node_modules/.bin/ngc -p ./src/demo-app
+
+# Restore the moduleIds.
+grep -lr "//MODULE " ./src/ | xargs sed -i 's|//MODULE ||g'
+
+# At this point, we have all of our .metadata.json files, which is all we care about from ngc.
+# Temporarily copy them over to deploy/ so we can cut a clean build.
+# Use rsync since we want to preserve the directory structure and `cp --parents` won't work on OSX.
+find ./dist/{components,core} -iname "*.metadata.json" | xargs -i rsync -Rq {} ./deploy/
+
+# Wipe away dist and perform a clean build.
+rm -rf ./dist
 ng build
 
 # Inline the css and html into the component ts files.
 npm run inline-resources
 
-# deploy/ serves as a working directory to stage the release.
-mkdir deploy
+# Move the .metadata.json files back to where we want them.
+(cd ./deploy ; find ./ -iname "*.metadata.json" | xargs -i rsync -Rq {} ../)
+
+# Clear the deploy/ directory again now that we've pulled the metadata out of it.
+rm -rf ./deploy/*
 
 # Copy all components/ to deploy/
 cp -R ./dist/components/* ./deploy/
 
 # Copy the core/ directory directly into ./deploy
 cp -R ./dist/core/ ./deploy/core/
 
+# Remove test files from deploy/
+find ./deploy -iname "*.spec.d.ts" | xargs rm
+find ./deploy -iname "*.spec.js" | xargs rm
+find ./deploy -iname "*.spec.js.map" | xargs rm
+
 # To test the packages, simply `npm install` the package directories.

src/components/button/_button-base.scss

@@ -1,6 +1,7 @@
 
 @import 'variables';
 @import 'elevation';
+@import 'mixins';
 
 // TODO(jelbourn): This goes away.
 @import 'default-theme';
@@ -34,12 +35,7 @@ $md-mini-fab-padding: 8px !default;
   position: relative;
 
   // Reset browser <button> styles.
-  background: transparent;
-  text-align: center;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  border: none;
+  @include md-button-reset();
 
   // Make anchors render like buttons.
   display: inline-block;
@@ -52,6 +48,7 @@ $md-mini-fab-padding: 8px !default;
   font-family: $md-font-family;
   font-weight: 500;
   color: currentColor;
+  text-align: center;
 
   // Sizing.
   margin: $md-button-margin;

src/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/button",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material button",
   "main": "./button.js",
   "typings": "./button.d.ts",
@@ -23,6 +23,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6"
+    "@angular2-material/core": "2.0.0-alpha.6-2"
   }
 }

src/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/card",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material card",
   "main": "./card.js",
   "typings": "./card.d.ts",
@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6"
+    "@angular2-material/core": "2.0.0-alpha.6-2"
   }
 }

src/components/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/checkbox",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material checkbox",
   "main": "./checkbox.js",
   "typings": "./checkbox.d.ts",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6",
+    "@angular2-material/core": "2.0.0-alpha.6-2",
     "@angular/forms": "^0.1.0"
   }
 }

src/components/grid-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/grid-list",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material grid list",
   "main": "./grid-list.js",
   "typings": "./grid-list.d.ts",
@@ -23,6 +23,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6"
+    "@angular2-material/core": "2.0.0-alpha.6-2"
   }
 }

src/components/icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/icon",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material icon",
   "main": "./icon.js",
   "typings": "./icon.d.ts",
@@ -22,6 +22,6 @@
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
     "@angular/http": "2.0.0-rc.4",
-    "@angular2-material/core": "2.0.0-alpha.6"
+    "@angular2-material/core": "2.0.0-alpha.6-2"
   }
 }

src/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/input",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material input",
   "main": "./input.js",
   "typings": "./input.d.ts",
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6",
+    "@angular2-material/core": "2.0.0-alpha.6-2",
     "@angular/forms": "^0.1.0"
   }
 }

src/components/list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/list",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material list",
   "main": "./list.js",
   "typings": "./list.d.ts",
@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6"
+    "@angular2-material/core": "2.0.0-alpha.6-2"
   }
 }

src/components/menu/menu.html

@@ -0,0 +1,4 @@
+<div class="md-menu">
+  <ng-content></ng-content>
+</div>
+

src/components/menu/menu.scss

@@ -0,0 +1,47 @@
+// TODO(kara): update vars for desktop when MD team responds
+
+@import 'variables';
+@import 'elevation';
+@import 'default-theme';
+@import 'mixins';
+
+// menu width must be a multiple of 56px
+$md-menu-overlay-min-width: 112px !default;   // 56 * 2
+$md-menu-overlay-max-width: 280px !default;   // 56 * 5
+
+$md-menu-overlay-max-height: calc(100vh + $md-menu-item-height) !default;
+$md-menu-item-height: 48px !default;
+$md-menu-font-size: 16px !default;
+$md-menu-side-padding: 16px !default;
+
+.md-menu {
+  @include md-elevation(2);
+  min-width: $md-menu-overlay-min-width;
+  max-width: $md-menu-overlay-max-width;
+  max-height: $md-menu-overlay-max-height;
+
+  background: md-color($md-background, 'background');
+}
+
+[md-menu-item] {
+  @include md-button-reset();
+
+  display: block;
+  width: 100%;
+  height: $md-menu-item-height;
+  padding: 0 $md-menu-side-padding;
+
+  font-size: $md-menu-font-size;
+  font-family: $md-font-family;
+  text-align: start;
+  color: md-color($md-foreground, 'text');
+
+  &[disabled] {
+    color: md-color($md-foreground, 'disabled');
+  }
+
+  &:hover:not([disabled]) {
+    background: md-color($md-background, 'hover');
+  }
+}
+

src/components/menu/menu.ts

@@ -1,13 +1,21 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, Directive, ViewEncapsulation} from '@angular/core';
 
 @Component({
   moduleId: module.id,
   selector: 'md-menu',
+  host: {'role': 'menu'},
   templateUrl: 'menu.html',
   styleUrls: ['menu.css'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'mdMenu'
 })
 export class MdMenu {}
 
-export const MD_MENU_DIRECTIVES = [MdMenu];
+@Directive({
+  selector: '[md-menu-item]',
+  host: {'role': 'menuitem'}
+})
+export class MdMenuItem {}
+
+export const MD_MENU_DIRECTIVES = [MdMenu, MdMenuItem];
 

src/components/menu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/menu",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material menu",
   "main": "./menu.js",
   "typings": "./menu.d.ts",
@@ -21,6 +21,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6"
+    "@angular2-material/core": "2.0.0-alpha.6-2"
   }
 }

src/components/progress-bar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/progress-bar",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material progress-bar",
   "main": "./progress-bar.js",
   "typings": "./progress-bar.d.ts",
@@ -23,6 +23,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6"
+    "@angular2-material/core": "2.0.0-alpha.6-2"
   }
 }

src/components/progress-circle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/progress-circle",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material progress-circle",
   "main": "./progress-circle.js",
   "typings": "./progress-circle.d.ts",
@@ -22,6 +22,6 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6"
+    "@angular2-material/core": "2.0.0-alpha.6-2"
   }
 }

src/components/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular2-material/radio",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-alpha.6-2",
   "description": "Angular 2 Material radio",
   "main": "./radio.js",
   "typings": "./radio.d.ts",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/angular/material2#readme",
   "peerDependencies": {
-    "@angular2-material/core": "2.0.0-alpha.6",
+    "@angular2-material/core": "2.0.0-alpha.6-2",
     "@angular/forms": "^0.1.0"
   }
 }