New arrow and chevron next+prev components

demo/src/custom-cards/ha-demo-card.ts

@@ -10,6 +10,8 @@ import "@polymer/paper-icon-button";
 import "@polymer/paper-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-paper-icon-button-next";
+import "../../../src/components/ha-paper-icon-button-prev";
 import { LovelaceCard, Lovelace } from "../../../src/panels/lovelace/types";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
@@ -47,12 +49,10 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card>
         <div class="picker">
-          <paper-icon-button
+          <ha-paper-icon-button-prev
             @click=${this._prevConfig}
-            icon="hass:chevron-right"
-            style="transform: rotate(180deg)"
             .disabled=${this._switching}
-          ></paper-icon-button>
+          ></ha-paper-icon-button-prev>
           <div>
             ${this._switching
               ? html`
@@ -73,11 +73,10 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                   ""
                 )}
           </div>
-          <paper-icon-button
+          <ha-paper-icon-button-next
             @click=${this._nextConfig}
-            icon="hass:chevron-right"
             .disabled=${this._switching}
-          ></paper-icon-button>
+          ></ha-paper-icon-button-next>
         </div>
         <div class="content">
           Welcome home! You've reached the Home Assistant demo where we showcase

src/auth/ha-pick-auth-provider.js

@@ -5,6 +5,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import EventsMixin from "../mixins/events-mixin";
 import { localizeLiteMixin } from "../mixins/localize-lite-mixin";
+import "../components/ha-icon-next";
 
 /*
  * @appliesMixin EventsMixin
@@ -26,7 +27,7 @@ class HaPickAuthProvider extends EventsMixin(
       <template is="dom-repeat" items="[[authProviders]]">
         <paper-item on-click="_handlePick">
           <paper-item-body>[[item.name]]</paper-item-body>
-          <iron-icon icon="hass:chevron-right"></iron-icon>
+          <ha-icon-next></ha-icon-next>
         </paper-item>
       </template>
     `;

src/dialogs/more-info/more-info-settings.js

@@ -13,6 +13,7 @@ import computeDomain from "../../common/entity/compute_domain";
 import isComponentLoaded from "../../common/config/is_component_loaded";
 import { updateEntityRegistryEntry } from "../../data/entity_registry";
 
+import "../../components/ha-paper-icon-button-arrow-prev";
 /*
  * @appliesMixin EventsMixin
  * @appliesMixin LocalizeMixin
@@ -44,10 +45,9 @@ class MoreInfoSettings extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </style>
 
       <app-toolbar>
-        <paper-icon-button
+        <ha-paper-icon-button-arrow-prev
-          icon="hass:arrow-left"
           on-click="_backTapped"
-        ></paper-icon-button>
+        ></ha-paper-icon-button-arrow-prev>
         <div main-title="">[[_computeStateName(stateObj)]]</div>
         <paper-button on-click="_save" disabled="[[_computeInvalid(_entityId)]]"
           >[[localize('ui.dialogs.more_info_settings.save')]]</paper-button

src/layouts/hass-subpage.js

@@ -5,6 +5,8 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import "../components/ha-paper-icon-button-arrow-prev";
+
 class HassSubpage extends PolymerElement {
   static get template() {
     return html`
@@ -12,10 +14,9 @@ class HassSubpage extends PolymerElement {
       <app-header-layout has-scrolling-region="">
         <app-header slot="header" fixed="">
           <app-toolbar>
-            <paper-icon-button
+            <ha-paper-icon-button-arrow-prev
-              icon="hass:arrow-left"
               on-click="_backTapped"
-            ></paper-icon-button>
+            ></ha-paper-icon-button-arrow-prev>
             <div main-title="">[[header]]</div>
             <slot name="toolbar-icon"></slot>
           </app-toolbar>

src/panels/config/automation/ha-automation-editor.ts

@@ -14,6 +14,7 @@ import "@polymer/paper-fab/paper-fab";
 
 import { h, render } from "preact";
 
+import "../../../components/ha-paper-icon-button-arrow-prev";
 import "../../../layouts/ha-app-layout";
 
 import Automation from "../js/automation";
@@ -72,10 +73,9 @@ class HaAutomationEditor extends LitElement {
       <ha-app-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <paper-icon-button
+            <ha-paper-icon-button-arrow-prev
-              icon="hass:arrow-left"
               @click=${this._backTapped}
-            ></paper-icon-button>
+            ></ha-paper-icon-button-arrow-prev>
             <div main-title>
               ${this.automation
                 ? computeStateName(this.automation)

src/panels/config/automation/ha-automation-picker.js

@@ -9,13 +9,17 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/ha-markdown";
+import "../../../components/ha-paper-icon-button-arrow-prev";
 import "../../../layouts/ha-app-layout";
 
 import "../ha-config-section";
 
+import "../../../components/ha-icon-next";
+
 import NavigateMixin from "../../../mixins/navigate-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import computeStateName from "../../../common/entity/compute_state_name";
+
 /*
  * @appliesMixin LocalizeMixin
  * @appliesMixin NavigateMixin
@@ -56,10 +60,8 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
       <ha-app-layout has-scrolling-region="">
         <app-header slot="header" fixed="">
           <app-toolbar>
-            <paper-icon-button
+            <ha-paper-icon-button-arrow-prev on-click="_backTapped">
-              icon="hass:arrow-left"
+            </ha-paper-icon-button-arrow-prev>
-              on-click="_backTapped"
-            ></paper-icon-button>
             <div main-title="">
               [[localize('ui.panel.config.automation.caption')]]
             </div>
@@ -92,7 +94,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
                   <div>[[computeName(automation)]]</div>
                   <div secondary="">[[computeDescription(automation)]]</div>
                 </paper-item-body>
-                <iron-icon icon="hass:chevron-right"></iron-icon>
+                <ha-icon-next></ha-icon-next>
               </paper-item>
             </template>
           </paper-card>

src/panels/config/cloud/ha-config-cloud-login.js

@@ -15,7 +15,7 @@ import "../../../resources/ha-style";
 import "../ha-config-section";
 import EventsMixin from "../../../mixins/events-mixin";
 import NavigateMixin from "../../../mixins/navigate-mixin";
-
+import "../../../components/ha-icon-next";
 /*
  * @appliesMixin NavigateMixin
  * @appliesMixin EventsMixin
@@ -147,7 +147,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
                   Start your free 1 month trial
                   <div secondary="">No payment information necessary</div>
                 </paper-item-body>
-                <iron-icon icon="hass:chevron-right"></iron-icon>
+                <ha-icon-next></ha-icon-next>
               </paper-item>
             </paper-card>
           </ha-config-section>

src/panels/config/config-entries/ha-config-entries-dashboard.js

@@ -11,6 +11,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../components/entity/ha-state-icon";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
+import "../../../components/ha-icon-next";
 
 import "../ha-config-section";
 import EventsMixin from "../../../mixins/events-mixin";
@@ -111,7 +112,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                       </template>
                     </div>
                   </paper-item-body>
-                  <iron-icon icon="hass:chevron-right"></iron-icon>
+                  <ha-icon-next></ha-icon-next>
                 </paper-item>
               </a>
             </template>

src/panels/config/customize/ha-config-customize.js

@@ -6,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../resources/ha-style";
+import "../../../components/ha-paper-icon-button-arrow-prev";
 
 import "../ha-config-section";
 import "../ha-entity-config";
@@ -27,10 +28,9 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
       <app-header-layout has-scrolling-region="">
         <app-header slot="header" fixed="">
           <app-toolbar>
-            <paper-icon-button
+            <ha-paper-icon-button-arrow-prev
-              icon="hass:arrow-left"
               on-click="_backTapped"
-            ></paper-icon-button>
+            ></ha-paper-icon-button-arrow-prev>
             <div main-title="">
               [[localize('ui.panel.config.customize.caption')]]
             </div>

src/panels/config/dashboard/ha-config-dashboard.js

@@ -9,6 +9,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/ha-menu-button";
+import "../../../components/ha-icon-next";
 
 import "../ha-config-section";
 import "./ha-config-navigation";
@@ -66,7 +67,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
                       </div>
                     </template>
                   </paper-item-body>
-                  <iron-icon icon="hass:chevron-right"></iron-icon>
+                  <ha-icon-next></ha-icon-next>
                 </paper-item>
               </paper-card>
             </a>
@@ -81,7 +82,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
                     [[localize('ui.panel.config.integrations.description')]]
                   </div>
                 </paper-item-body>
-                <iron-icon icon="hass:chevron-right"></iron-icon>
+                <ha-icon-next></ha-icon-next>
               </paper-item>
             </a>
 
@@ -93,7 +94,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
                     [[localize('ui.panel.config.users.description')]]
                   </div>
                 </paper-item-body>
-                <iron-icon icon="hass:chevron-right"></iron-icon>
+                <ha-icon-next></ha-icon-next>
               </paper-item>
             </a>
           </paper-card>

src/panels/config/dashboard/ha-config-navigation.js

@@ -10,6 +10,8 @@ import LocalizeMixin from "../../../mixins/localize-mixin";
 
 import isComponentLoaded from "../../../common/config/is_component_loaded";
 
+import "../../../components/ha-icon-next";
+
 const CORE_PAGES = ["core", "customize", "entity_registry", "area_registry"];
 /*
  * @appliesMixin LocalizeMixin
@@ -34,7 +36,7 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
                 [[_computeCaption(item, localize)]]
                 <div secondary="">[[_computeDescription(item, localize)]]</div>
               </paper-item-body>
-              <iron-icon icon="hass:chevron-right"></iron-icon>
+              <ha-icon-next></ha-icon-next>
             </paper-item>
           </template>
         </template>

src/panels/config/script/ha-script-editor.js

@@ -7,6 +7,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { h, render } from "preact";
 
 import "../../../layouts/ha-app-layout";
+import "../../../components/ha-paper-icon-button-arrow-prev";
 
 import Script from "../js/script";
 import unmountPreact from "../../../common/preact/unmount";
@@ -85,10 +86,9 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
       <ha-app-layout has-scrolling-region="">
         <app-header slot="header" fixed="">
           <app-toolbar>
-            <paper-icon-button
+            <ha-paper-icon-button-arrow-prev
-              icon="hass:arrow-left"
               on-click="backTapped"
-            ></paper-icon-button>
+            ></ha-paper-icon-button-arrow-prev>
             <div main-title="">Script [[computeName(script)]]</div>
           </app-toolbar>
         </app-header>

src/panels/config/script/ha-script-picker.js

@@ -9,6 +9,8 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../layouts/ha-app-layout";
+import "../../../components/ha-icon-next";
+import "../../../components/ha-paper-icon-button-arrow-prev";
 
 import "../ha-config-section";
 
@@ -52,10 +54,9 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
       <ha-app-layout has-scrolling-region="">
         <app-header slot="header" fixed="">
           <app-toolbar>
-            <paper-icon-button
+            <ha-paper-icon-button-arrow-prev
-              icon="hass:arrow-left"
               on-click="_backTapped"
-            ></paper-icon-button>
+            ></ha-paper-icon-button-arrow-prev>
             <div main-title="">
               [[localize('ui.panel.config.script.caption')]]
             </div>
@@ -86,7 +87,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
                   <div>[[computeName(script)]]</div>
                   <div secondary="">[[computeDescription(script)]]</div>
                 </paper-item-body>
-                <iron-icon icon="hass:chevron-right"></iron-icon>
+                <ha-icon-next></ha-icon-next>
               </paper-item>
             </template>
           </paper-card>

src/panels/config/users/ha-user-picker.js

@@ -6,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../layouts/hass-subpage";
+import "../../../components/ha-icon-next";
 
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import NavigateMixin from "../../../mixins/navigate-mixin";
@@ -59,7 +60,7 @@ class HaUserPicker extends EventsMixin(
                     </template>
                   </div>
                 </paper-item-body>
-                <iron-icon icon="hass:chevron-right"></iron-icon>
+                <ha-icon-next></ha-icon-next>
               </paper-item>
             </a>
           </template>

src/panels/config/zha/ha-config-zha.ts

@@ -12,6 +12,7 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { Cluster } from "../../../data/zha";
 import "../../../layouts/ha-app-layout";
+import "../../../components/ha-paper-icon-button-arrow-prev";
 import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import {
@@ -46,10 +47,9 @@ export class HaConfigZha extends LitElement {
       <ha-app-layout>
         <app-header slot="header">
           <app-toolbar>
-            <paper-icon-button
+            <ha-paper-icon-button-arrow-prev
-              icon="hass:arrow-left"
               @click="${this._onBackTapped}"
-            ></paper-icon-button>
+            ></ha-paper-icon-button-arrow-prev>
             <div main-title>Zigbee Home Automation</div>
           </app-toolbar>
         </app-header>

src/panels/config/zwave/ha-config-zwave.js

@@ -12,6 +12,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-menu-button";
 import "../../../components/ha-service-description";
+import "../../../components/ha-paper-icon-button-arrow-prev";
 import "../../../layouts/ha-app-layout";
 import "../../../resources/ha-style";
 
@@ -85,10 +86,9 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
       <ha-app-layout has-scrolling-region="">
         <app-header slot="header" fixed="">
           <app-toolbar>
-            <paper-icon-button
+            <ha-paper-icon-button-arrow-prev
-              icon="hass:arrow-left"
               on-click="_backTapped"
-            ></paper-icon-button>
+            ></ha-paper-icon-button-arrow-prev>
             <div main-title="">
               [[localize('ui.panel.config.zwave.caption')]]
             </div>

src/panels/lovelace/components/notifications/hui-notification-drawer.js

@@ -6,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "./hui-notification-item";
+import "../../../../components/ha-paper-icon-button-next";
 
 import EventsMixin from "../../../../mixins/events-mixin";
 import LocalizeMixin from "../../../../mixins/localize-mixin";
@@ -121,7 +122,7 @@ export class HuiNotificationDrawer extends EventsMixin(
     <div class="container">
       <app-toolbar>
         <div main-title>[[localize('ui.notification_drawer.title')]]</div>
-        <paper-icon-button icon="hass:chevron-right" on-click="_closeDrawer"></paper-icon-button>
+        <ha-paper-icon-button-next on-click="_closeDrawer"></paper-icon-button>
       </app-toolbar>
       <div class="notifications">
         <template is="dom-if" if="[[!_empty(notifications)]]">

src/panels/lovelace/hui-root.ts

@@ -26,6 +26,8 @@ import scrollToTarget from "../../common/dom/scroll-to-target";
 
 import "../../layouts/ha-app-layout";
 import "../../components/ha-start-voice-button";
+import "../../components/ha-paper-icon-button-arrow-next";
+import "../../components/ha-paper-icon-button-arrow-prev";
 import "../../components/ha-icon";
 import { loadModule, loadCSS, loadJS } from "../../common/dom/load_resource";
 import { subscribeNotifications } from "../../data/ws-notifications";
@@ -49,7 +51,7 @@ import { showEditLovelaceDialog } from "./editor/lovelace-editor/show-edit-lovel
 import { Lovelace } from "./types";
 import { afterNextRender } from "../../common/util/render-status";
 import { haStyle } from "../../resources/ha-style";
-import { computeRTL, computeRTLDirection } from "../../common/util/compute_rtl";
+import { computeRTLDirection } from "../../common/util/compute_rtl";
 
 // CSS and JS should only be imported once. Modules and HTML are safe.
 const CSS_CACHE = {};
@@ -251,15 +253,12 @@ class HUIRoot extends LitElement {
                         <paper-tab>
                           ${this._editMode
                             ? html`
-                                <paper-icon-button
+                                <ha-paper-icon-button-arrow-prev
                                   title="Move view left"
                                   class="edit-icon view"
-                                  icon="${computeRTL(this.hass!)
-                                    ? "hass:arrow-right"
-                                    : "hass:arrow-left"}"
                                   @click="${this._moveViewLeft}"
                                   ?disabled="${this._curView === 0}"
-                                ></paper-icon-button>
+                                ></ha-paper-icon-button-arrow-prev>
                               `
                             : ""}
                           ${view.icon
@@ -278,17 +277,14 @@ class HUIRoot extends LitElement {
                                   icon="hass:pencil"
                                   @click="${this._editView}"
                                 ></ha-icon>
-                                <paper-icon-button
+                                <ha-paper-icon-button-arrow-next
                                   title="Move view right"
                                   class="edit-icon view"
-                                  icon="${computeRTL(this.hass!)
-                                    ? "hass:arrow-left"
-                                    : "hass:arrow-right"}"
                                   @click="${this._moveViewRight}"
                                   ?disabled="${(this._curView! as number) +
                                     1 ===
                                     this.lovelace!.config.views.length}"
-                                ></paper-icon-button>
+                                ></ha-paper-icon-button-arrow-next>
                               `
                             : ""}
                         </paper-tab>