feature/material theme (#19)

* material theme implementation * added material theme demo * added tests for the label changed method * improved label and placeholder styles behavior * implemented floating label styles * added floating label demo
gatanaso · Apr 7, 2019 · b5fc097 · b5fc097
1 parent 24d2c3c
commit b5fc097
Show file tree

Hide file tree

Showing 12 changed files with 594 additions and 10 deletions.
diff --git a/bower.json b/bower.json
@@ -10,7 +10,8 @@
     "vaadin-text-field": "vaadin/vaadin-text-field#^2.3.4",
     "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.4.4",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.3",
-    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.4.1"
+    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.4.1",
+    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.2"
   },
   "devDependencies": {
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",

diff --git a/demo/index.html b/demo/index.html
@@ -43,8 +43,7 @@ <h3>Basic multiselect-combo-box</h3>
               ];
               basicMultiselectComboBox.selectedItems = [
                 'Helium',
-                'Lithium',
-                'Beryllium'
+                'Lithium'
               ];
             });
           </script>
@@ -82,8 +81,7 @@ <h3>Multiselect-combo-box with object items</h3>
               ];
               itemMultiselectComboBox.selectedItems = [
                 {'id': 3, 'name': 'Lithium'},
-                {'id': 5, 'name': 'Boron'},
-                {'id': 7, 'name': 'Nitrogen'}
+                {'id': 5, 'name': 'Boron'}
               ];
             });
           </script>

diff --git a/demo/material/index.html b/demo/material/index.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>multiselect-combo-box demo</title>
+
+    <script src="../../../webcomponentsjs/webcomponents-loader.js"></script>
+
+    <link rel="import" href="../../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../../theme/material/multiselect-combo-box.html">
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>
+  </head>
+
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>Basic multiselect-combo-box</h3>
+      <demo-snippet>
+        <template>
+
+          <multiselect-combo-box
+            id="basicDemo"
+            label="Multiselect field"
+            placeholder="Add">
+          </multiselect-combo-box>
+
+          <script>
+            window.addEventListener('WebComponentsReady', () => {
+              const basicMultiselectComboBox = document.querySelector('#basicDemo');
+              basicMultiselectComboBox.items = [
+                'Hydrogen', 'Helium', 'Lithium', 'Beryllium', 'Boron',
+                'Carbon', 'Nitrogen', 'Oxygen', 'Fluorine', 'Neon',
+                'Sodium', 'Magnesium', 'Aluminum', 'Silicon', 'Phosphorus',
+                'Sulfur', 'Chlorine', 'Argon', 'Potassium', 'Calcium',
+                'Scandium', 'Titanium', 'Vanadium', 'Chromium', 'Manganese',
+                'Iron', 'Cobalt', 'Nickel', 'Copper', 'Zinc'
+              ];
+              basicMultiselectComboBox.selectedItems = [
+                'Helium',
+                'Lithium'
+              ];
+            });
+          </script>
+        </template>
+      </demo-snippet>
+    </div>
+
+    <div class="vertical-section-container centered">
+      <h3>Multiselect-combo-box with floating label</h3>
+      <demo-snippet>
+        <template>
+
+          <multiselect-combo-box
+            id="floatingLabelDemo"
+            label="Multiselect field"
+            placeholder="Add"
+            theme="always-float-label">
+          </multiselect-combo-box>
+
+          <script>
+            window.addEventListener('WebComponentsReady', () => {
+              const floatingLabelMultiselectComboBox = document.querySelector('#floatingLabelDemo');
+              floatingLabelMultiselectComboBox.items = [
+                'Hydrogen', 'Helium', 'Lithium', 'Beryllium', 'Boron',
+                'Carbon', 'Nitrogen', 'Oxygen', 'Fluorine', 'Neon',
+                'Sodium', 'Magnesium', 'Aluminum', 'Silicon', 'Phosphorus',
+                'Sulfur', 'Chlorine', 'Argon', 'Potassium', 'Calcium',
+                'Scandium', 'Titanium', 'Vanadium', 'Chromium', 'Manganese',
+                'Iron', 'Cobalt', 'Nickel', 'Copper', 'Zinc'
+              ];
+            });
+          </script>
+        </template>
+      </demo-snippet>
+    </div>
+
+    <div class="vertical-section-container centered">
+      <h3>Multiselect-combo-box with object items</h3>
+      <demo-snippet>
+        <template>
+
+          <multiselect-combo-box
+            id="itemDemo"
+            label="Multiselect field"
+            placeholder="Add"
+            item-id-path="id"
+            item-value-path="id"
+            item-label-path="name">
+          </multiselect-combo-box>
+
+          <script>
+            window.addEventListener('WebComponentsReady', () => {
+              const itemMultiselectComboBox = document.querySelector('#itemDemo');
+              itemMultiselectComboBox.items = [
+                {'id': 1, 'name': 'Hydrogen'},
+                {'id': 2, 'name': 'Helium'},
+                {'id': 3, 'name': 'Lithium'},
+                {'id': 4, 'name': 'Beryllium'},
+                {'id': 5, 'name': 'Boron'},
+                {'id': 6, 'name': 'Carbon'},
+                {'id': 7, 'name': 'Nitrogen'},
+                {'id': 8, 'name': 'Oxygen'},
+                {'id': 9, 'name': 'Fluorine'}
+              ];
+              itemMultiselectComboBox.selectedItems = [
+                {'id': 3, 'name': 'Lithium'},
+                {'id': 5, 'name': 'Boron'}
+              ];
+            });
+          </script>
+        </template>
+      </demo-snippet>
+    </div>
+
+    <div class="vertical-section-container centered">
+      <h3>Required multiselect-combo-box</h3>
+      <demo-snippet>
+        <template>
+
+          <multiselect-combo-box
+            id="requiredDemo"
+            label="Multiselect field"
+            placeholder="Add"
+            item-value-path="id"
+            item-label-path="name"
+            error-message="Please select at least one value."
+            required>
+          </multiselect-combo-box>
+
+          <script>
+            window.addEventListener('WebComponentsReady', () => {
+              const requiredMultiselectComboBox = document.querySelector('#requiredDemo');
+              requiredMultiselectComboBox.items = [
+                {'id': 1, 'name': 'Hydrogen'},
+                {'id': 2, 'name': 'Helium'},
+                {'id': 3, 'name': 'Lithium'},
+                {'id': 4, 'name': 'Beryllium'},
+                {'id': 5, 'name': 'Boron'},
+                {'id': 6, 'name': 'Carbon'},
+                {'id': 7, 'name': 'Nitrogen'},
+                {'id': 8, 'name': 'Oxygen'},
+                {'id': 9, 'name': 'Fluorine'}
+              ];
+            });
+          </script>
+        </template>
+      </demo-snippet>
+    </div>
+
+    <div class="vertical-section-container centered">
+        <h3>Readonly multiselect-combo-box</h3>
+        <demo-snippet>
+          <template>
+
+            <multiselect-combo-box
+              id="readonlyDemo"
+              label="Readonly multiselect field"
+              placeholder="Add"
+              readonly>
+            </multiselect-combo-box>
+
+            <script>
+              window.addEventListener('WebComponentsReady', () => {
+                const readonlyMultiselectComboBox = document.querySelector('#readonlyDemo');
+                readonlyMultiselectComboBox.items = [
+                  'Hydrogen', 'Helium', 'Lithium', 'Beryllium', 'Boron',
+                  'Carbon', 'Nitrogen', 'Oxygen', 'Fluorine', 'Neon',
+                  'Sodium', 'Magnesium', 'Aluminum', 'Silicon', 'Phosphorus',
+                  'Sulfur', 'Chlorine', 'Argon', 'Potassium', 'Calcium',
+                  'Scandium', 'Titanium', 'Vanadium', 'Chromium', 'Manganese',
+                  'Iron', 'Cobalt', 'Nickel', 'Copper', 'Zinc'
+                ];
+                readonlyMultiselectComboBox.selectedItems = [
+                  'Argon',
+                  'Scandium',
+                  'Nickel',
+                  'Copper',
+                  'Zinc',
+                  'Sodium'
+                ];
+              });
+            </script>
+          </template>
+        </demo-snippet>
+    </div>
+  </body>
+</html>
diff --git a/src/multiselect-combo-box-input.html b/src/multiselect-combo-box-input.html
@@ -20,7 +20,10 @@
         part="input-field"
         value="{{value}}"
         placeholder="[[placeholder]]"
-        on-keydown="_onKeyDown">
+        on-keydown="_onKeyDown"
+        multiselect-has-value$="[[hasValue]]"
+        multiselect-has-label$="[[hasLabel]]"
+        theme$="[[theme]]">
 
         <div id="clearButton" part="clear-button" slot="suffix" role="button" on-click="_removeAll"></div>
         <div id="toggleButton" part="toggle-button" slot="suffix" role="button"></div>

diff --git a/src/multiselect-combo-box-mixin.html b/src/multiselect-combo-box-mixin.html
@@ -29,6 +29,15 @@
           reflectToAttribute: true
         },
 
+        /**
+          * This attribute indicates that the component has a label.
+          */
+        hasLabel: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true
+        },
+
         /**
          * The item property to be used as the `label` in combo-box.
          */
@@ -44,7 +53,14 @@
          * the `itemIdPath` is used to compare and identify the same item
          * in `selectedItem`.
          */
-        itemIdPath: String
+        itemIdPath: String,
+
+        /**
+         * The theme name attribute.
+         * Used to communicate theme information to
+         * component internals (currently used for the material theme).
+         */
+        theme: String,
       };
     }
 

diff --git a/src/multiselect-combo-box.html b/src/multiselect-combo-box.html
@@ -31,9 +31,11 @@
         placeholder="[[placeholder]]"
         item-label-path="[[itemLabelPath]]"
         items="[[selectedItems]]"
-        has-value="[[hasValue]]"
         on-item-removed="_handleItemRemoved"
-        on-remove-all-items="_handleRemoveAllItems">
+        on-remove-all-items="_handleRemoveAllItems"
+        has-value="[[hasValue]]"
+        has-label="[[hasLabel]]"
+        theme$="[[theme]]">
       </multiselect-combo-box-input>
     </vaadin-combo-box-light>
 
@@ -70,7 +72,20 @@
             /**
              * The component label.
              */
-            label: String,
+            label: {
+              type: String,
+              value: '',
+              observer: '_labelChanged'
+            },
+
+            /**
+              * This attribute indicates that the component has a label.
+              */
+            hasLabel: {
+              type: Boolean,
+              value: false,
+              reflectToAttribute: true
+            },
 
             /**
              * The title attribute.
@@ -254,6 +269,14 @@
             element.removeAttribute('selected');
           }
         }
+
+        _labelChanged(label) {
+          if (label !== '' && label != null) {
+            this.set('hasLabel', true);
+          } else {
+            this.set('hasLabel', false);
+          }
+        }
       }
 
       window.customElements.define(MultiselectComboBox.is, MultiselectComboBox);

diff --git a/test/multiselect-combo-box_test.html b/test/multiselect-combo-box_test.html
@@ -419,6 +419,30 @@
             expect(div.hasAttribute('selected')).to.be.false;
           });
         });
+
+        describe('_labelChanged', () => {
+          it('should set the has-label attribute', () => {
+            // given
+            const label = 'label';
+
+            // when
+            multiselectComboBox._labelChanged(label);
+
+            // then
+            expect(multiselectComboBox.hasAttribute('has-label')).to.be.true;
+          });
+
+          it('should set the has-label attribute', () => {
+            // given
+            const label = '';
+
+            // when
+            multiselectComboBox._labelChanged(label);
+
+            // then
+            expect(multiselectComboBox.hasAttribute('has-label')).to.be.false;
+          });
+        });
       });
     </script>