Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 9, 2017
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions src/demo-app/menu/menu-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand All @@ -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>
Expand Down Expand Up @@ -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 }}
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/e2e-app/menu/menu-e2e.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>

Expand Down
11 changes: 9 additions & 2 deletions src/lib/menu/menu-directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
15 changes: 13 additions & 2 deletions src/lib/menu/menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down