Merge pull request #64 from vaadin/fix/icons

Replace <iron-icon> with theme font icons
vaadin · Jul 25, 2018 · bf0305b · bf0305b
2 parents a07c222 + e08327f
commit bf0305b
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 5 deletions.
diff --git a/bower.json b/bower.json
@@ -29,9 +29,9 @@
     "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.0",
     "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^1.1.0",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0",
+    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.0-alpha2",
     "vaadin-text-field": "vaadin/vaadin-text-field#^2.1.0",
     "vaadin-combo-box": "vaadin/vaadin-combo-box#^4.1.0",
-    "vaadin-icons": "vaadin/vaadin-icons#^4.2.0",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.0"
   },
   "devDependencies": {

diff --git a/src/vaadin-time-picker.html b/src/vaadin-time-picker.html
@@ -9,7 +9,6 @@
 <link rel="import" href="../../vaadin-element-mixin/vaadin-element-mixin.html">
 <link rel="import" href="../../vaadin-combo-box/src/vaadin-combo-box-light.html">
 <link rel="import" href="../../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
-<link rel="import" href="../../vaadin-lumo-styles/icons.html">
 <link rel="import" href="vaadin-time-picker-text-field.html">
 
 <dom-module id="vaadin-time-picker">
@@ -48,8 +47,7 @@
           role="application"
           aria-live="assertive"
           aria-label$=[[label]]>
-        <iron-icon slot="suffix" role="button" icon="lumo:clock" part="toggle-button" class="toggle-button"
-            aria-label$="[[i18n.selector]]"></iron-icon>
+        <span slot="suffix" part="toggle-button" role="button" aria-label$="[[i18n.selector]]"></span>
       </vaadin-time-picker-text-field>
     </vaadin-combo-box-light>
   </template>

diff --git a/test/input-test.html b/test/input-test.html
@@ -169,7 +169,7 @@
           });
 
           it('clock:icon should have the `aria-label` attribute', () => {
-            const icon = timePicker.shadowRoot.querySelector('iron-icon');
+            const icon = timePicker.shadowRoot.querySelector('[part="toggle-button"]');
             expect(icon.getAttribute('aria-label')).to.be.equal(timePicker.i18n.selector);
           });
         });

diff --git a/test/visual/screens/vaadin-time-picker/default-tests/default/chrome.png b/test/visual/screens/vaadin-time-picker/default-tests/default/chrome.png
diff --git a/test/visual/screens/vaadin-time-picker/dropdown/default/chrome.png b/test/visual/screens/vaadin-time-picker/dropdown/default/chrome.png
diff --git a/test/visual/screens/vaadin-time-picker/dropdown/selected-value/chrome.png b/test/visual/screens/vaadin-time-picker/dropdown/selected-value/chrome.png
diff --git a/test/visual/screens/vaadin-time-picker/dropdown/step/chrome.png b/test/visual/screens/vaadin-time-picker/dropdown/step/chrome.png
diff --git a/theme/lumo/vaadin-time-picker-styles.html b/theme/lumo/vaadin-time-picker-styles.html
@@ -1,2 +1,14 @@
 <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">
+<link rel="import" href="../../../vaadin-lumo-styles/mixins/field-button.html">
+<link rel="import" href="../../../vaadin-lumo-styles/font-icons.html">
+
+<dom-module id="lumo-time-picker" theme-for="vaadin-time-picker">
+  <template>
+    <style include="lumo-field-button">
+      [part~="toggle-button"]::before {
+        content: var(--lumo-icons-clock);
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/theme/material/vaadin-time-picker-styles.html b/theme/material/vaadin-time-picker-styles.html
@@ -3,3 +3,15 @@
 <link rel="import" href="../../../vaadin-combo-box/theme/material/vaadin-combo-box-item-styles.html">
 <link rel="import" href="../../../vaadin-combo-box/src/vaadin-combo-box-light.html">
 <link rel="import" href="../../../vaadin-text-field/theme/material/vaadin-text-field.html">
+<link rel="import" href="../../../vaadin-material-styles/mixins/field-button.html">
+<link rel="import" href="../../../vaadin-material-styles/font-icons.html">
+
+<dom-module id="material-time-picker" theme-for="vaadin-time-picker">
+  <template>
+    <style include="material-field-button">
+      [part~="toggle-button"]::before {
+        content: var(--material-icons-clock);
+      }
+    </style>
+  </template>
+</dom-module>