Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(127)

Unified Diff: third_party/polymer/v0_8/components/paper-menu/paper-menu.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/v0_8/components/paper-menu/paper-menu.html
diff --git a/third_party/polymer/v0_8/components/paper-menu/paper-menu.html b/third_party/polymer/v0_8/components/paper-menu/paper-menu.html
index a6a4929cdeaf960b4ac7762e1473b31d1daa1a1e..45ecd722c55336b6e078e59851868ea1a5af38e4 100644
--- a/third_party/polymer/v0_8/components/paper-menu/paper-menu.html
+++ b/third_party/polymer/v0_8/components/paper-menu/paper-menu.html
@@ -13,7 +13,47 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../paper-styles/paper-styles.html">
<!--
+`<paper-menu>` implements an accessible menu control with Material Design styling. The focused item
+is highlighted, and the selected item has bolded text.
+
+ <paper-menu>
+ <paper-item>Item 1</paper-item>
+ <paper-item>Item 2</paper-item>
+ </paper-menu>
+
+Make a multi-select menu with the `multi` attribute. Items in a multi-select menu can be deselected,
+and multiple item can be selected.
+
+ <paper-menu multi>
+ <paper-item>Item 1</paper-item>
+ <paper-item>Item 2</paper-item>
+ </paper-menu>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-menu-background-color` | Menu background color | `--primary-background-color`
+`-paper-menu-color` | Menu foreground color | `--primary-text-color`
+`--paper-menu-disabled-color` | Foreground color for a disabled item | `--disabled-text-color`
+`--paper-menu` | Mixin applied to the menu | `{}`
+`--paper-menu-selected-item` | Mixin applied to the selected item | `{}`
+`--paper-menu-focused-item` | Mixin applied to the focused item | `{}`
+`--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element for the focused item | `{}`
+
+### Accessibility
+
+`<paper-menu>` has `role="menu"` by default. A multi-select menu will also have
+`aria-multiselectable` set. It implements key bindings to navigate through the menu with the up and
+down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing the first letter
+of a menu item will also focus it.
+
+@group Paper Elements
@element paper-menu
+@hero hero.svg
+@demo demo/index.html
-->
<dom-module id="paper-menu">
@@ -24,42 +64,51 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
display: block;
padding: 8px 0;
- background: var(--primary-background-color);
- color: var(--primary-text-color);
+ background: var(--paper-menu-background-color, --primary-background-color);
+ color: var(--paper-menu-color, --primary-text-color);
- mixin(--paper-menu);
+ @apply(--paper-menu);
}
- :host > ::content > [disabled] {
- color: var(--disabled-text-color);
+ /* need a wrapper element to make this higher specificity than the :host rule in paper-item */
+ .content > ::content > .iron-selected {
+ font-weight: bold;
+
+ @apply(--paper-menu-selected-item);
}
- :host > ::content > .iron-selected {
- position: relative;
+ .content > ::content > [disabled] {
+ color: var(--paper-menu-disabled-color, --disabled-text-color);
}
- :host > ::content > .iron-selected::after {
- mixin(--layout-fit);
+ .content > ::content > *:focus {
+ position: relative;
+ outline: 0;
+
+ @apply(--paper-menu-colored-focused-item);
+ }
+ .content > ::content > *:focus:after {
+ @apply(--layout-fit);
background: currentColor;
/* FIXME move to paper-styles for next widget */
opacity: 0.12;
content: '';
- mixin(--paper-menu-selected-item);
+ @apply(--paper-menu-colored-focused-item-after);
}
- :host > ::content > .iron-selected[colored]::after {
+ .content > ::content > *[colored]:focus:after {
opacity: 0.26;
-
- mixin(--paper-menu-colored-selected-item);
}
</style>
<template>
- <content></content>
+ <div class="content">
+ <content></content>
+ </div>
</template>
@@ -73,8 +122,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
is: 'paper-menu',
- enableCustomStyleProperties: true,
-
behaviors: [
Polymer.IronMenuBehavior
]

Powered by Google App Engine
This is Rietveld 408576698