Overide iron-icon styles for vaadin: icons to look better

Jira: BFF-634
vaadin · Feb 16, 2018 · c952c65 · c952c65
1 parent 14d58b3
commit c952c65
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/src/main/webapp/frontend/src/components/search-bar.html b/src/main/webapp/frontend/src/components/search-bar.html
@@ -90,15 +90,15 @@
 
     <div class="row">
       <vaadin-text-field id="field" class="field" placeholder="[[fieldPlaceholder]]" value="{{fieldValue}}" focused="{{_fieldFocused}}" on-value-changed="_filterChanged">
-        <iron-icon icon="[[fieldIcon]]" slot="prefix"></iron-icon>
+        <iron-icon icon$="[[fieldIcon]]" slot="prefix"></iron-icon>
       </vaadin-text-field>
       <vaadin-checkbox class="checkbox" checked="{{checkboxChecked}}" focused="{{_checkboxFocused}}" hidden$="[[!_desktopView]]">[[checkboxText]]</vaadin-checkbox>
       <vaadin-button id="clear" class="extra-filter" theme="tertiary">
         [[clearText]]
       </vaadin-button>
       <vaadin-button id="action" class="extra-action" theme="primary">
-        <iron-icon icon="[[buttonIcon]]"></iron-icon>
-        <span>[[buttonText]]</span>
+        <iron-icon icon$="[[buttonIcon]]" slot="prefix"></iron-icon>
+        [[buttonText]]
       </vaadin-button>
     </div>
 

diff --git a/src/main/webapp/frontend/src/styles/shared-styles.html b/src/main/webapp/frontend/src/styles/shared-styles.html
@@ -102,6 +102,21 @@
   </template>
 </dom-module>
 
+<!-- Theme for icons inside text-field and buttons, 'vaadin:' icons have custom rules 
+  in lumo theme that make icons look wrong, by overriding width and height but not 
+  padding the look ok -->
+<dom-module id="bakery-text-buttons-theme-icons" theme-for="vaadin-text-field vaadin-button">
+  <template>
+    <style>
+      [part="input-field"] ::slotted(iron-icon[icon^="vaadin:"]) ,
+      :host ::slotted(iron-icon[icon^="vaadin:"]) {
+        width: var(--iron-icon-width, 24px);
+        height: var(--iron-icon-height, 24px);
+      }
+    </style>
+  </template>
+</dom-module>
+
 <!-- Theme for the vaadin-grid -->
 <dom-module id="bakery-grid-theme" theme-for="vaadin-grid">
   <template>
@@ -173,10 +188,6 @@
         box-sizing: border-box;
       }
 
-      iron-icon {
-        box-sizing: content-box;
-      }
-
       :host([hidden]),
       [hidden] {
         display: none !important;

diff --git a/src/main/webapp/frontend/src/views/storefront/order-details-full.html b/src/main/webapp/frontend/src/views/storefront/order-details-full.html
@@ -215,10 +215,10 @@ <h3>[[item.customer.phoneNumber]]</h3>
 
       <div slot="info" class="total">Total [[item.totalPrice]]</div>
 
-      <vaadin-button slot="right" id="save" theme="primary success" class="edit-button" hidden="[[!review]]">Place Order ✓</vaadin-button>
-      <vaadin-button slot="right" id="edit" theme="primary" class="edit-button" hidden="[[review]]">
-        <span>Edit order</span>
-        <iron-icon icon="vaadin:edit"></iron-icon>
+      <vaadin-button slot="right" id="save" theme="primary success" hidden="[[!review]]">Place Order ✓</vaadin-button>
+      <vaadin-button slot="right" id="edit" theme="primary" hidden="[[review]]">
+        Edit order
+        <iron-icon icon="vaadin:edit" slot="suffix"></iron-icon>
       </vaadin-button>
     </buttons-bar>
   </template>