theming, style independent

selvinfehric · Sep 7, 2018 · 5f44521 · 5f44521
1 parent 06a1ed4
commit 5f44521
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,8 @@ If you want to save it in bower.json file, remember to add flag `--save`
   <template>
     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="import" href="multi-select-combo-box.html">
+    <link rel="import" href="../vaadin-combo-box/theme/lumo/vaadin-combo-box-light.html">
+    <link rel="import" href="../vaadin-text-field/theme/lumo/vaadin-text-field.html">
     <style>
         multi-select-combo-box {
           height: 200px;

diff --git a/bower.json b/bower.json
@@ -6,7 +6,9 @@
   "license": "MIT",
   "dependencies": {
     "polymer": "Polymer/polymer#^2.0.0",
-    "vaadin-combo-box": "vaadin/vaadin-combo-box#^4.1.0"
+    "vaadin-combo-box": "vaadin/vaadin-combo-box#^4.1.0",
+    "iron-icon": "^2.1.0",
+    "iron-icons": "^2.1.1"
   },
   "devDependencies": {
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",

diff --git a/demo/index.html b/demo/index.html
@@ -12,6 +12,8 @@
   <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="../multi-select-combo-box.html">
+  <link rel="import" href="../../vaadin-combo-box/theme/lumo/vaadin-combo-box-light.html">
+  <link rel="import" href="../../vaadin-text-field/theme/lumo/vaadin-text-field.html">
 
   <custom-style>
     <style is="custom-style" include="demo-pages-shared-styles">
@@ -24,24 +26,14 @@
     <h3>Basic multi-select-combo-box demo</h3>
     <demo-snippet>
       <template>
-        <multi-select-combo-box id="basic-demo"></multi-select-combo-box>
-        <script>
-          document.addEventListener('WebComponentsReady', () => {
-            document.querySelector('#basic-demo').items = ["List item 1", "List item 2", "List item 3", "List item 4", "List item 5"];
-          });
-        </script>
+        <multi-select-combo-box items='["List item 1", "List item 2", "List item 3", "List item 4", "List item 5"]'></multi-select-combo-box>
       </template>
     </demo-snippet>
 
     <h3>Objects multi-select-combo-box demo</h3>
     <demo-snippet>
       <template>
-        <multi-select-combo-box id="objects-demo" value-field="id" display-field="name"></multi-select-combo-box>
-        <script>
-          document.addEventListener('WebComponentsReady', () => {
-            document.querySelector('#objects-demo').items = [{ "id": 1, "name": "Name1" }, { "id": 2, "name": "Name2" }, { "id": 3, "name": "Name3" }, { "id": 4, "name": "Name4" }, { "id": 5, "name": "Name5" }];
-          });
-        </script>
+        <multi-select-combo-box items='[{ "id": 1, "name": "Name1" }, { "id": 2, "name": "Name2" }, { "id": 3, "name": "Name3" }, { "id": 4, "name": "Name4" }, { "id": 5, "name": "Name5" }]' value-field="id" display-field="name"></multi-select-combo-box>
       </template>
     </demo-snippet>
   </div>

diff --git a/multi-select-combo-box.html b/multi-select-combo-box.html
@@ -1,6 +1,8 @@
 <link rel="import" href="../polymer/polymer-element.html">
-<link rel="import" href="../vaadin-text-field/vaadin-text-field.html">
-<link rel="import" href="../vaadin-combo-box/vaadin-combo-box-light.html">
+<link rel="import" href="../vaadin-text-field/src/vaadin-text-field.html">
+<link rel="import" href="../vaadin-combo-box/src/vaadin-combo-box-light.html">
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-icons/iron-icons.html">
 
 <dom-module id="multi-select-combo-box">
   <template>
@@ -26,20 +28,19 @@
       }
 
       .token {
-        font-size: var(--lumo-font-size-s);
+        font-size: .875rem;
         display: flex;
-        padding: var(--lumo-space-xs);
-        border-radius: calc(var(--lumo-border-radius) / 2);
-        background-color: var(--lumo-contrast-20pct);
-        margin-right: var(--lumo-space-xs);
+        padding: 0.25rem;
+        border-radius: 0.125em;
+        background-color: hsla(214, 53%, 23%, 0.16);
+        margin-right: 0.25rem;
         cursor: pointer;
         white-space: nowrap;
       }
 
-      .token::after {
-        font-family: "lumo-icons";
-        content: var(--lumo-icons-cross);
-        font-size: var(--lumo-font-size-m);
+      iron-icon {
+        --iron-icon-width: .875rem;
+        --iron-icon-height: .875rem;
       }
     </style>
 
@@ -48,7 +49,9 @@
       <vaadin-text-field on-keydown="_onKeyDown" label="[[label]]" id="tf">
         <div slot="prefix" id="tokens">
           <template is="dom-repeat" items="[[selectedItems]]">
-            <div class="token" on-click="_onTokenClick">[[_getItemDisplayText(item)]]</div>
+            <div class="token" on-click="_onTokenClick">[[_getItemDisplayText(item)]]
+              <iron-icon icon="icons:close"></iron-icon>
+            </div>
           </template>
         </div>
       </vaadin-text-field>
@@ -108,7 +111,7 @@
         }
 
         this._cbValue = '';
-        
+
         // TODO: This shouldn't be needed!
         setTimeout(() => this.$.cb.$.overlay._selectedItem = '');
       }