chore(menu): update menu position attributes to be camelCase (#3515)

Author: kara

src/demo-app/menu/menu-demo.html

@@ -38,7 +38,7 @@
       </button>
     </md-toolbar>
 
-    <md-menu x-position="before" #posXMenu="mdMenu" class="before">
+    <md-menu xPosition="before" #posXMenu="mdMenu" class="before">
       <button md-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
         <md-icon>{{ item.icon }}</md-icon>
         {{ item.text }}
@@ -55,7 +55,7 @@
       </button>
     </md-toolbar>
 
-    <md-menu y-position="above" #posYMenu="mdMenu">
+    <md-menu yPosition="above" #posYMenu="mdMenu">
       <button md-menu-item *ngFor="let item of items" [disabled]="item.disabled">
         {{ item.text }}
       </button>
@@ -89,7 +89,7 @@
       </button>
     </md-toolbar>
 
-    <md-menu x-position="before" [overlapTrigger]="false" #posXMenuOverlay="mdMenu" class="before">
+    <md-menu xPosition="before" [overlapTrigger]="false" #posXMenuOverlay="mdMenu" class="before">
       <button md-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
         <md-icon>{{ item.icon }}</md-icon>
         {{ item.text }}
@@ -106,7 +106,7 @@
       </button>
     </md-toolbar>
 
-    <md-menu y-position="above" [overlapTrigger]="false" #posYMenuOverlay="mdMenu">
+    <md-menu yPosition="above" [overlapTrigger]="false" #posYMenuOverlay="mdMenu">
       <button md-menu-item *ngFor="let item of items" [disabled]="item.disabled">
         {{ item.text }}
       </button>

src/e2e-app/menu/menu-e2e.html

@@ -5,7 +5,7 @@
     <button [mdMenuTriggerFor]="menu" id="trigger">TRIGGER</button>
     <button [mdMenuTriggerFor]="menu" id="trigger-two">TRIGGER 2</button>
 
-    <md-menu #menu="mdMenu" y-position="below" class="custom">
+    <md-menu #menu="mdMenu" yPosition="below" class="custom">
       <button md-menu-item (click)="selected='one'">One</button>
       <button md-menu-item (click)="selected='two'">Two</button>
       <button md-menu-item (click)="selected='three'" disabled>Three</button>
@@ -15,20 +15,20 @@
     <button [mdMenuTriggerFor]="beforeMenu" id="before-t">
       BEFORE
     </button>
-    <md-menu x-position="before" y-position="below" class="before" #beforeMenu="mdMenu">
+    <md-menu xPosition="before" yPosition="below" class="before" #beforeMenu="mdMenu">
       <button md-menu-item>Item</button>
     </md-menu>
 
     <div class="bottom-row">
       <button [mdMenuTriggerFor]="aboveMenu" id="above-t">ABOVE</button>
-      <md-menu y-position="above" class="above" #aboveMenu="mdMenu">
+      <md-menu yPosition="above" class="above" #aboveMenu="mdMenu">
         <button md-menu-item>Item</button>
       </md-menu>
 
       <button [mdMenuTriggerFor]="combined" id="combined-t">
         BOTH
       </button>
-      <md-menu x-position="before" y-position="above" class="combined" #combined="mdMenu">
+      <md-menu xPosition="before" yPosition="above" class="combined" #combined="mdMenu">
         <button md-menu-item>Item</button>
       </md-menu>
 

src/lib/menu/menu-directive.ts

@@ -54,8 +54,15 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
   @ContentChildren(MdMenuItem) items: QueryList<MdMenuItem>;
   @Input() overlapTrigger = true;
 
-  constructor(@Attribute('x-position') posX: MenuPositionX,
-              @Attribute('y-position') posY: MenuPositionY) {
+  constructor(@Attribute('xPosition') posX: MenuPositionX,
+              @Attribute('yPosition') posY: MenuPositionY,
+              @Attribute('x-position') deprecatedPosX: MenuPositionX,
+              @Attribute('y-position') deprecatedPosY: MenuPositionY) {
+
+    // TODO(kara): Remove kebab-case attributes after next release
+    if (deprecatedPosX) { this._setPositionX(deprecatedPosX); }
+    if (deprecatedPosY) { this._setPositionY(deprecatedPosY); }
+
     if (posX) { this._setPositionX(posX); }
     if (posY) { this._setPositionY(posY); }
     this.setPositionClasses(this.positionX, this.positionY);

src/lib/menu/menu.md

@@ -4,7 +4,7 @@
 
 By itself, the `<md-menu>` element does not render anything. The menu is attached to and opened 
 via application of the `mdMenuTriggerFor` directive:
-```ts
+```html
 <md-menu #appMenu="mdMenu">
   <button md-menu-item> Settings </button>
   <button md-menu-item> Help </button>
@@ -53,9 +53,20 @@ Menus support displaying `md-icon` elements before the menu item text.
 ### Customizing menu position
 
 By default, the menu will display below (y-axis), after (x-axis), and overlapping its trigger.  The position can be changed
-using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes.
+using the `xPosition` (`before | after`) and `yPosition` (`above | below`) attributes.
 The menu can be be forced to not overlap the trigger using `[overlapTrigger]="false"` attribute.
 
+```html
+<md-menu #appMenu="mdMenu" yPosition="above">
+  <button md-menu-item> Settings </button>
+  <button md-menu-item> Help </button>
+</md-menu>
+
+<button md-icon-button [mdMenuTriggerFor]="appMenu">
+   <md-icon>more_vert</md-icon>
+</button>
+```
+
 
 ### Keyboard interaction
 - <kbd>DOWN_ARROW</kbd>: Focuses the next menu item