Replace paper-fab with ha-fab (#3678)

* Replace paper-fab with ha-fab

...which is based on mwc-fab

* comment

package.json

@@ -47,7 +47,6 @@
     "@polymer/paper-dialog-scrollable": "^3.0.1",
     "@polymer/paper-drawer-panel": "^3.0.1",
     "@polymer/paper-dropdown-menu": "^3.0.1",
-    "@polymer/paper-fab": "^3.0.1",
     "@polymer/paper-icon-button": "^3.0.2",
     "@polymer/paper-input": "^3.0.1",
     "@polymer/paper-item": "^3.0.1",

src/panels/config/area_registry/ha-config-area-registry.ts

@@ -8,7 +8,6 @@ import {
 } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-fab/paper-fab";
 
 import { HomeAssistant } from "../../../types";
 import {
@@ -19,6 +18,7 @@ import {
   subscribeAreaRegistry,
 } from "../../../data/area_registry";
 import "../../../components/ha-card";
+import "../../../components/ha-fab";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
 import "../ha-config-section";
@@ -100,7 +100,7 @@ class HaConfigAreaRegistry extends LitElement {
         </ha-config-section>
       </hass-subpage>
 
-      <paper-fab
+      <ha-fab
         ?is-wide=${this.isWide}
         icon="hass:plus"
         title="${this.hass.localize(
@@ -110,7 +110,7 @@ class HaConfigAreaRegistry extends LitElement {
         class="${classMap({
           rtl: computeRTL(this.hass),
         })}"
-      ></paper-fab>
+      ></ha-fab>
     `;
   }
 
@@ -183,24 +183,24 @@ All devices in this area will become unassigned.`)
         padding-top: 4px;
         padding-bottom: 4px;
       }
-      paper-fab {
+      ha-fab {
         position: fixed;
         bottom: 16px;
         right: 16px;
         z-index: 1;
       }
 
-      paper-fab[is-wide] {
+      ha-fab[is-wide] {
         bottom: 24px;
         right: 24px;
       }
 
-      paper-fab.rtl {
+      ha-fab.rtl {
         right: auto;
         left: 16px;
       }
 
-      paper-fab[is-wide].rtl {
+      ha-fab[is-wide].rtl {
         bottom: 24px;
         right: auto;
         left: 24px;

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

@@ -10,11 +10,11 @@ import {
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-fab/paper-fab";
 import { classMap } from "lit-html/directives/class-map";
 
 import { h, render } from "preact";
 
+import "../../../components/ha-fab";
 import "../../../components/ha-paper-icon-button-arrow-prev";
 import "../../../layouts/ha-app-layout";
 
@@ -113,7 +113,7 @@ class HaAutomationEditor extends LitElement {
             })}"
           ></div>
         </div>
-        <paper-fab
+        <ha-fab
           slot="fab"
           ?is-wide="${this.isWide}"
           ?dirty="${this._dirty}"
@@ -125,7 +125,7 @@ class HaAutomationEditor extends LitElement {
           class="${classMap({
             rtl: computeRTL(this.hass),
           })}"
-        ></paper-fab>
+        ></ha-fab>
       </ha-app-layout>
     `;
   }
@@ -301,7 +301,7 @@ class HaAutomationEditor extends LitElement {
         span[slot="introduction"] a {
           color: var(--primary-color);
         }
-        paper-fab {
+        ha-fab {
           position: fixed;
           bottom: 16px;
           right: 16px;
@@ -310,21 +310,21 @@ class HaAutomationEditor extends LitElement {
           transition: margin-bottom 0.3s;
         }
 
-        paper-fab[is-wide] {
+        ha-fab[is-wide] {
           bottom: 24px;
           right: 24px;
         }
 
-        paper-fab[dirty] {
+        ha-fab[dirty] {
           margin-bottom: 0;
         }
 
-        paper-fab.rtl {
+        ha-fab.rtl {
           right: auto;
           left: 16px;
         }
 
-        paper-fab[is-wide].rtl {
+        ha-fab[is-wide].rtl {
           bottom: 24px;
           right: auto;
           left: 24px;

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

@@ -8,13 +8,13 @@ import {
   customElement,
 } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
-import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-tooltip/paper-tooltip";
 import "../../../layouts/hass-subpage";
 
 import "../../../components/ha-card";
+import "../../../components/ha-fab";
 import "../../../components/entity/ha-entity-toggle";
 
 import "../ha-config-section";
@@ -136,7 +136,7 @@ class HaAutomationPicker extends LitElement {
         </ha-config-section>
 
         <a href="/config/automation/new">
-          <paper-fab
+          <ha-fab
             slot="fab"
             ?is-wide=${this.isWide}
             icon="hass:plus"
@@ -144,7 +144,7 @@ class HaAutomationPicker extends LitElement {
               "ui.panel.config.automation.picker.add_automation"
             )}
             ?rtl=${computeRTL(this.hass)}
-          ></paper-fab
+          ></ha-fab
         ></a>
       </hass-subpage>
     `;
@@ -186,24 +186,24 @@ class HaAutomationPicker extends LitElement {
           display: flex;
         }
 
-        paper-fab {
+        ha-fab {
           position: fixed;
           bottom: 16px;
           right: 16px;
           z-index: 1;
         }
 
-        paper-fab[is-wide] {
+        ha-fab[is-wide] {
           bottom: 24px;
           right: 24px;
         }
 
-        paper-fab[rtl] {
+        ha-fab[rtl] {
           right: auto;
           left: 16px;
         }
 
-        paper-fab[rtl][is-wide] {
+        ha-fab[rtl][is-wide] {
           bottom: 24px;
           right: auto;
           left: 24px;

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

@@ -1,7 +1,6 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-tooltip/paper-tooltip";
 import "@material/mwc-button";
-import "@polymer/paper-fab/paper-fab";
 import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@@ -9,6 +8,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/ha-card";
+import "../../../components/ha-fab";
 import "../../../components/entity/ha-state-icon";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@@ -53,24 +53,24 @@ class HaConfigManagerDashboard extends LocalizeMixin(
           color: var(--primary-text-color);
           text-decoration: none;
         }
-        paper-fab {
+        ha-fab {
           position: fixed;
           bottom: 16px;
           right: 16px;
           z-index: 1;
         }
 
-        paper-fab[is-wide] {
+        ha-fab[is-wide] {
           bottom: 24px;
           right: 24px;
         }
 
-        paper-fab[rtl] {
+        ha-fab[rtl] {
           right: auto;
           left: 16px;
         }
 
-        paper-fab[rtl][is-wide] {
+        ha-fab[rtl][is-wide] {
           bottom: 24px;
           right: auto;
           left: 24px;
@@ -141,13 +141,13 @@ class HaConfigManagerDashboard extends LocalizeMixin(
           </ha-card>
         </ha-config-section>
 
-        <paper-fab
+        <ha-fab
           icon="hass:plus"
           title="[[localize('ui.panel.config.integrations.new')]]"
           on-click="_createFlow"
           is-wide$="[[isWide]]"
           rtl$="[[rtl]]"
-        ></paper-fab>
+        ></ha-fab>
       </hass-subpage>
     `;
   }

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

@@ -8,7 +8,6 @@ import {
 } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-fab/paper-fab";
 
 import { HomeAssistant } from "../../../types";
 import {
@@ -19,6 +18,7 @@ import {
   createPerson,
 } from "../../../data/person";
 import "../../../components/ha-card";
+import "../../../components/ha-fab";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
 import { compare } from "../../../common/string/compare";
@@ -109,12 +109,12 @@ class HaConfigPerson extends LitElement {
         </ha-config-section>
       </hass-subpage>
 
-      <paper-fab
+      <ha-fab
         ?is-wide=${this.isWide}
         icon="hass:plus"
         title="Add Person"
         @click=${this._createPerson}
-      ></paper-fab>
+      ></ha-fab>
     `;
   }
 
@@ -221,14 +221,14 @@ All devices belonging to this person will become unassigned.`)
       ha-card.storage paper-item {
         cursor: pointer;
       }
-      paper-fab {
+      ha-fab {
         position: fixed;
         bottom: 16px;
         right: 16px;
         z-index: 1;
       }
 
-      paper-fab[is-wide] {
+      ha-fab[is-wide] {
         bottom: 24px;
         right: 24px;
       }

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

@@ -1,13 +1,13 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-fab/paper-fab";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 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 "../../../components/ha-fab";
 
 import Script from "../js/script";
 import unmountPreact from "../../../common/preact/unmount";
@@ -65,7 +65,7 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
         span[slot="introduction"] a {
           color: var(--primary-color);
         }
-        paper-fab {
+        ha-fab {
           position: fixed;
           bottom: 16px;
           right: 16px;
@@ -74,21 +74,21 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
           transition: margin-bottom 0.3s;
         }
 
-        paper-fab[is-wide] {
+        ha-fab[is-wide] {
           bottom: 24px;
           right: 24px;
         }
 
-        paper-fab[dirty] {
+        ha-fab[dirty] {
           margin-bottom: 0;
         }
 
-        paper-fab[rtl] {
+        ha-fab[rtl] {
           right: auto;
           left: 16px;
         }
 
-        paper-fab[rtl][is-wide] {
+        ha-fab[rtl][is-wide] {
           bottom: 24px;
           right: auto;
           left: 24px;
@@ -115,7 +115,7 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
           </template>
           <div id="root"></div>
         </div>
-        <paper-fab
+        <ha-fab
           slot="fab"
           is-wide$="[[isWide]]"
           dirty$="[[dirty]]"
@@ -123,7 +123,7 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
           title="Save"
           on-click="saveScript"
           rtl$="[[rtl]]"
-        ></paper-fab>
+        ></ha-fab>
       </ha-app-layout>
     `;
   }

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

@@ -7,7 +7,6 @@ import {
   property,
   customElement,
 } from "lit-element";
-import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
 import { HassEntity } from "home-assistant-js-websocket";
@@ -17,6 +16,7 @@ import "../../../layouts/hass-subpage";
 import { computeRTL } from "../../../common/util/compute_rtl";
 
 import "../../../components/ha-card";
+import "../../../components/ha-fab";
 
 import "../ha-config-section";
 
@@ -81,13 +81,13 @@ class HaScriptPicker extends LitElement {
         </ha-config-section>
 
         <a href="/config/script/new">
-          <paper-fab
+          <ha-fab
             slot="fab"
             ?is-wide=${this.isWide}
             icon="hass:plus"
             title="Add Script"
             ?rtl=${computeRTL(this.hass)}
-          ></paper-fab>
+          ></ha-fab>
         </a>
       </hass-subpage>
     `;
@@ -135,24 +135,24 @@ class HaScriptPicker extends LitElement {
           display: flex;
         }
 
-        paper-fab {
+        ha-fab {
           position: fixed;
           bottom: 16px;
           right: 16px;
           z-index: 1;
         }
 
-        paper-fab[is-wide] {
+        ha-fab[is-wide] {
           bottom: 24px;
           right: 24px;
         }
 
-        paper-fab[rtl] {
+        ha-fab[rtl] {
           right: auto;
           left: 16px;
         }
 
-        paper-fab[rtl][is-wide] {
+        ha-fab[rtl][is-wide] {
           bottom: 24px;
           right: auto;
           left: 24px;

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

@@ -1,4 +1,3 @@
-import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -7,6 +6,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../layouts/hass-subpage";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-card";
+import "../../../components/ha-fab";
 
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import NavigateMixin from "../../../mixins/navigate-mixin";
@@ -27,21 +27,21 @@ class HaUserPicker extends EventsMixin(
   static get template() {
     return html`
       <style>
-        paper-fab {
+        ha-fab {
           position: fixed;
           bottom: 16px;
           right: 16px;
           z-index: 1;
         }
-        paper-fab[is-wide] {
+        ha-fab[is-wide] {
           bottom: 24px;
           right: 24px;
         }
-        paper-fab[rtl] {
+        ha-fab[rtl] {
           right: auto;
           left: 16px;
         }
-        paper-fab[rtl][is-wide] {
+        ha-fab[rtl][is-wide] {
           bottom: 24px;
           right: auto;
           left: 24px;
@@ -78,13 +78,13 @@ class HaUserPicker extends EventsMixin(
           </template>
         </ha-card>
 
-        <paper-fab
+        <ha-fab
           is-wide$="[[isWide]]"
           icon="hass:plus"
           title="[[localize('ui.panel.config.users.picker.add_user')]]"
           on-click="_addUser"
           rtl$="[[rtl]]"
-        ></paper-fab>
+        ></ha-fab>
       </hass-subpage>
     `;
   }

src/panels/lovelace/hui-view-editable.ts

@@ -1,3 +1,3 @@
 // hui-view dependencies for when in edit mode.
-import "@polymer/paper-fab/paper-fab";
 import "./components/hui-card-options";
+import "../../components/ha-fab";

src/panels/lovelace/hui-view.ts

@@ -6,7 +6,6 @@ import {
   TemplateResult,
 } from "lit-element";
 
-import "@polymer/paper-fab/paper-fab";
 import "../../components/entity/ha-state-label-badge";
 // This one is for types
 // tslint:disable-next-line
@@ -96,8 +95,7 @@ export class HUIView extends LitElement {
       <div id="columns"></div>
       ${this.lovelace!.editMode
         ? html`
-            <paper-fab
-              elevated="2"
+            <ha-fab
               icon="hass:plus"
               title="${this.hass!.localize(
                 "ui.panel.lovelace.editor.edit_card.add"
@@ -106,7 +104,7 @@ export class HUIView extends LitElement {
               class="${classMap({
                 rtl: computeRTL(this.hass!),
               })}"
-            ></paper-fab>
+            ></ha-fab>
           `
         : ""}
     `;
@@ -148,7 +146,7 @@ export class HUIView extends LitElement {
           margin: 4px 4px 8px;
         }
 
-        paper-fab {
+        ha-fab {
           position: sticky;
           float: right;
           bottom: 16px;
@@ -156,7 +154,7 @@ export class HUIView extends LitElement {
           z-index: 1;
         }
 
-        paper-fab.rtl {
+        ha-fab.rtl {
           float: left;
           right: auto;
           left: 16px;

yarn.lock

@@ -1095,17 +1095,6 @@
     "@polymer/paper-styles" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/paper-fab@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-fab/-/paper-fab-3.0.1.tgz#2636359e7fb70dd5a549ed92ba9b3bdb9ff86bf8"
-  integrity sha512-LO8ckgd72MnAtC1WiPd5CFR27WC/dEuY/lOIQuHYdEjwI62+iiV7Bmr7uoQ9wvvV71qMFdMIOyq/03KklsuAzw==
-  dependencies:
-    "@polymer/iron-flex-layout" "^3.0.0-pre.26"
-    "@polymer/iron-icon" "^3.0.0-pre.26"
-    "@polymer/paper-behaviors" "^3.0.0-pre.27"
-    "@polymer/paper-styles" "^3.0.0-pre.26"
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/paper-icon-button@^3.0.0-pre.26", "@polymer/paper-icon-button@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@polymer/paper-icon-button/-/paper-icon-button-3.0.2.tgz#a1254faadc2c8dd135ce1ae33bcc161a94c31f65"