core-dropdown -> core-dropdown-menu, implement with core-dropdown

googlearchive · Sep 4, 2014 · 9f1e160 · 9f1e160
1 parent 5722218
commit 9f1e160
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-core-dropdown
-=============
+core-dropdown-menu
+==================
 
 owner: @morethanreal
 
-See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-dropdown) for more information.
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-dropdown-menu) for more information.
diff --git a/bower.json b/bower.json
@@ -3,9 +3,10 @@
     "private": false,
     "dependencies": {
         "polymer": "Polymer/polymer#master",
+        "core-dropdown": "Polymer/core-dropdown#master",
         "core-icon": "Polymer/core-icon#master",
         "core-icons": "Polymer/core-icons#master",
         "core-item": "Polymer/core-item#master",
-        "core-popup-menu": "Polymer/core-popup-menu#master"
+        "core-menu": "Polymer/core-menu#master"
     }
 }
diff --git a/core-dropdown.css → core-dropdown-menu.css b/core-dropdown.css → core-dropdown-menu.css
@@ -30,6 +30,6 @@
   margin: 0 12px;
 }
 
-#menu {
-  padding: 0 12px;
+#dropdown {
+  min-width: 100%;
 }
diff --git a/core-dropdown.html → core-dropdown-menu.html b/core-dropdown.html → core-dropdown-menu.html
@@ -9,34 +9,34 @@
 
 <!--
 
-`core-dropdown` is a control where the user can choose from an array of options in a drop-down
+`core-dropdown-menu` is a control where the user can choose from an array of options in a drop-down
 menu. The currently selected option is displayed in the control.
 
 Example:
 
-    <core-dropdown selected="Financier" valueattr="label">
-        <core-item label="Croissant"></core-item>
-        <core-item label="Donut"></core-item>
-        <core-item label="Financier"></core-item>
-        <core-item label="Madeleine"></core-item>
-    </core-dropdown>
+    <core-dropdown-menu selected="Financier" valueattr="label">
+      <core-item label="Croissant"></core-item>
+      <core-item label="Donut"></core-item>
+      <core-item label="Financier"></core-item>
+      <core-item label="Madeleine"></core-item>
+    </core-dropdown-menu>
 
 This example renders a drop-down menu with 4 options, with the option `Financier` pre-selected.
 
 Theming
 -------
 
-Style the drop-down menu with the `core-dropdown::shadow #menu` selector.
+Style the drop-down menu with the `core-dropdown-menu::shadow #dropdown` selector.
 
 Example:
 
-    core-dropdown::shadow #menu {
+    core-dropdown-menu::shadow #dropdown {
         background-color: #eee;
         border: 1px solid #ccc;
     }
 
 @group Polymer Core Elements
-@element core-dropdown
+@element core-dropdown-menu
 @status beta
 @homepage github.io
 -->
@@ -55,21 +55,24 @@
 <link href="../core-icon/core-icon.html" rel="import">
 <link href="../core-icons/core-icons.html" rel="import">
 <link href="../core-item/core-item.html" rel="import">
-<link href="../core-popup-menu/core-popup-menu.html" rel="import">
+<link href="../core-menu/core-menu.html" rel="import">
+<link href="../core-dropdown/core-dropdown.html" rel="import">
 
-<polymer-element name="core-dropdown">
+<polymer-element name="core-dropdown-menu">
 <template>
 
-  <link href="core-dropdown.css" rel="stylesheet">
+  <link href="core-dropdown-menu.css" rel="stylesheet">
 
   <div id="control" layout horizontal center on-tap="{{toggle}}">
     <core-item flex src="{{selectedItem.src}}" icon="{{selectedItem.icon}}" label="{{selectedItem ? (selectedItem.label || selected) : label}}"></core-item>
     <core-icon id="arrow" icon="{{opened ? 'arrow-drop-up' : 'arrow-drop-down'}}"></core-icon>
   </div>
 
-  <core-popup-menu id="menu" relatedTarget="{{$.control}}" opened="{{opened}}" selected="{{selected}}" valueattr="{{valueattr}}" selectedItem="{{selectedItem}}" halign="{{halign}}" valign="{{valign}}">
-    <content></content>
-  </core-popup-menu>
+  <core-dropdown id="dropdown" relatedTarget="{{$.control}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}" margin="{{margin}}">
+    <core-menu selected="{{selected}}" valueattr="{{valueattr}}" selectedItem="{{selectedItem}}" on-core-select="{{selectAction}}">
+      <content></content>
+    </core-menu>
+  </core-dropdown>
 
 </template>
 <script>
@@ -156,20 +159,28 @@
 
       /**
        * Horizontally align the overlay with the control.
+       *
        * @attribute halign
-       * @type "left"|"right"
+       * @type "left" | "right"
        * @default "left"
        */
-      halign: {value: 'left', reflect: true},
+      halign: 'left',
 
       /**
        * Vertically align the dropdown menu with the control.
+       *
        * @attribute valign
-       * @type "top"|"bottom"
+       * @type "top" | "bottom"
        * @default "bottom"
        */
-      valign: {value: 'bottom', reflect: true}
+      valign: 'top',
+
+      margin: 12
+
+    },
 
+    selectAction: function() {
+      this.opened = false;
     },
 
     toggle: function() {

diff --git a/demo.html b/demo.html
@@ -11,11 +11,11 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
-  <title>core-dropdown</title>
+  <title>core-dropdown-menu</title>
 
   <script src="../platform/platform.js"></script>
 
-  <link href="core-dropdown.html" rel="import">
+  <link href="core-dropdown-menu.html" rel="import">
 
   <style shim-shadowdom>
     html, body {
@@ -30,15 +30,15 @@
       padding: 12px;
     }
 
-    body /deep/ core-dropdown {
+    body /deep/ core-dropdown-menu {
       background-color: #eee;
     }
 
-    body /deep/ core-dropdown.narrow {
+    body /deep/ core-dropdown-menu.narrow {
       max-width: 100px;
     }
 
-    body /deep/ core-dropdown::shadow #menu {
+    body /deep/ core-dropdown-menu::shadow #dropdown {
       background-color: #eee;
       border: 1px solid #ccc;
     }
@@ -52,41 +52,41 @@
     <section layout vertical fit>
       <section layout horizontal>
 
-        <core-dropdown>
+        <core-dropdown-menu>
           <template repeat="{{countries}}">
             <core-item label="{{name}}"></core-item>
           </template>
-        </core-dropdown>
+        </core-dropdown-menu>
 
         <div style="margin:0 12px;">
           narrow:
-          <core-dropdown class="narrow">
+          <core-dropdown-menu class="narrow">
             <template repeat="{{countries}}">
               <core-item label="{{name}}"></core-item>
             </template>
-          </core-dropdown>
+          </core-dropdown-menu>
         </div>
 
         <div flex></div>
 
-        <core-dropdown halign="right">
+        <core-dropdown-menu halign="right">
           <template repeat="{{countries}}">
             <core-item label="{{name}}"></core-item>
           </template>
-        </core-dropdown>
+        </core-dropdown-menu>
 
       </section>
 
       <div flex></div>
 
       <section>
         drop-up:
-        <core-dropdown valign="top" valueattr="label" selected="Donut">
+        <core-dropdown-menu valign="bottom" valueattr="label" selected="Donut">
           <core-item label="Croissant"></core-item>
           <core-item label="Donut"></core-item>
           <core-item label="Financier"></core-item>
           <core-item label="Madeleine"></core-item>
-        </core-dropdown>
+        </core-dropdown-menu>
       </section>
 
     </section>