Use mwc-button instead of paper-button (#2744)

* Convert from paper-button to mwc-button * Fixes * Bye paper-button * Fixes * Final fixes * Fix rebase conversion
home-assistant · Feb 13, 2019 · 1b8c567 · 1b8c567
1 parent e1c2cf7
commit 1b8c567
Show file tree

Hide file tree

Showing 97 changed files with 530 additions and 514 deletions.
diff --git a/demo/src/custom-cards/ha-demo-card.ts b/demo/src/custom-cards/ha-demo-card.ts
@@ -7,7 +7,7 @@ import {
 } from "lit-element";
 import { until } from "lit-html/directives/until";
 import "@polymer/paper-icon-button";
-import "@polymer/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import "../../../src/components/ha-card";
 import { LovelaceCard, Lovelace } from "../../../src/panels/lovelace/types";
@@ -85,7 +85,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         </div>
         <div class="actions">
           <a href="https://www.home-assistant.io" target="_blank">
-            <paper-button>Learn more about Home Assistant</paper-button>
+            <mwc-button>Learn more about Home Assistant</mwc-button>
           </a>
         </div>
       </ha-card>
@@ -146,12 +146,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         }
 
         .actions {
-          padding-left: 5px;
-        }
-
-        .actions paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
+          padding-left: 8px;
         }
       `,
     ];

diff --git a/gallery/src/demos/demo-util-long-press.ts b/gallery/src/demos/demo-util-long-press.ts
@@ -1,5 +1,5 @@
 import { html, LitElement, TemplateResult } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import "../../../src/components/ha-card";
 import { longPress } from "../../../src/panels/lovelace/common/directives/long-press-directive";
@@ -11,13 +11,13 @@ export class DemoUtilLongPress extends LitElement {
       ${[1, 2, 3].map(
         () => html`
           <ha-card>
-            <paper-button
+            <mwc-button
               @ha-click="${this._handleTap}"
               @ha-hold="${this._handleHold}"
               .longPress="${longPress()}"
             >
               (long) press me!
-            </paper-button>
+            </mwc-button>
 
             <textarea></textarea>
 
@@ -60,11 +60,6 @@ export class DemoUtilLongPress extends LitElement {
           margin-bottom: 16px;
         }
 
-        paper-button {
-          font-weight: bold;
-          color: var(--primary-color);
-        }
-
         textarea {
           height: 50px;
         }

diff --git a/hassio/src/addon-view/hassio-addon-audio.js b/hassio/src/addon-view/hassio-addon-audio.js
@@ -1,6 +1,6 @@
 import "web-animations-js/web-animations-next-lite.min";
 
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
@@ -65,7 +65,7 @@ class HassioAddonAudio extends EventsMixin(PolymerElement) {
           </paper-dropdown-menu>
         </div>
         <div class="card-actions">
-          <paper-button on-click="_saveSettings">Save</paper-button>
+          <mwc-button on-click="_saveSettings">Save</mwc-button>
         </div>
       </paper-card>
     `;

diff --git a/hassio/src/addon-view/hassio-addon-config.js b/hassio/src/addon-view/hassio-addon-config.js
@@ -1,5 +1,5 @@
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -50,8 +50,8 @@ class HassioAddonConfig extends PolymerElement {
             data="[[resetData]]"
             >Reset to defaults</ha-call-api-button
           >
-          <paper-button on-click="saveTapped" disabled="[[!configParsed]]"
-            >Save</paper-button
+          <mwc-button on-click="saveTapped" disabled="[[!configParsed]]"
+            >Save</mwc-button
           >
         </div>
       </paper-card>

diff --git a/hassio/src/addon-view/hassio-addon-info.js b/hassio/src/addon-view/hassio-addon-info.js
@@ -1,5 +1,5 @@
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -77,7 +77,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           color: white;
           --paper-card-header-color: white;
         }
-        paper-card.warning paper-button {
+        paper-card.warning mwc-button {
           color: white !important;
         }
         .warning {
@@ -169,7 +169,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
               >Update</ha-call-api-button
             >
             <template is="dom-if" if="[[addon.changelog]]">
-              <paper-button on-click="openChangelog">Changelog</paper-button>
+              <mwc-button on-click="openChangelog">Changelog</mwc-button>
             </template>
           </div>
         </paper-card>
@@ -219,7 +219,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 Protection mode on this addon is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this addon.
               </div>
               <div class="card-actions">
-                  <paper-button on-click="protectionToggled">Enable Protection mode</paper-button>
+                  <mwc-button on-click="protectionToggled">Enable Protection mode</mwc-button>
                 </div>
               </div>
             </paper-card>
@@ -250,7 +250,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 <ha-label-badge
                 on-click="showMoreInfo"
                 id="full_access"
-                icon="hassio:chip"  
+                icon="hassio:chip"
                 label="hardware"
                 description=""
                 ></ha-label-badge>
@@ -337,8 +337,8 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
         </div>
         <div class="card-actions">
           <template is="dom-if" if="[[addon.version]]">
-            <paper-button class="warning" on-click="_unistallClicked"
-              >Uninstall</paper-button
+            <mwc-button class="warning" on-click="_unistallClicked"
+              >Uninstall</mwc-button
             >
             <template is="dom-if" if="[[addon.build]]">
               <ha-call-api-button
@@ -378,7 +378,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 tabindex="-1"
                 target="_blank"
                 class="right"
-                ><paper-button>Open web UI</paper-button></a
+                ><mwc-button>Open web UI</mwc-button></a
               >
             </template>
           </template>

diff --git a/hassio/src/addon-view/hassio-addon-logs.js b/hassio/src/addon-view/hassio-addon-logs.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -24,7 +24,7 @@ class HassioAddonLogs extends PolymerElement {
       <paper-card heading="Log">
         <div class="card-content" id="content"></div>
         <div class="card-actions">
-          <paper-button on-click="refresh">Refresh</paper-button>
+          <mwc-button on-click="refresh">Refresh</mwc-button>
         </div>
       </paper-card>
     `;

diff --git a/hassio/src/addon-view/hassio-addon-network.js b/hassio/src/addon-view/hassio-addon-network.js
@@ -60,7 +60,7 @@ class HassioAddonNetwork extends EventsMixin(PolymerElement) {
             data="[[resetData]]"
             >Reset to defaults</ha-call-api-button
           >
-          <paper-button on-click="saveTapped">Save</paper-button>
+          <mwc-button on-click="saveTapped">Save</mwc-button>
         </div>
       </paper-card>
     `;

diff --git a/hassio/src/dashboard/hassio-hass-update.js b/hassio/src/dashboard/hassio-hass-update.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -56,7 +56,7 @@ class HassioHassUpdate extends PolymerElement {
                 <a
                   href="https://github.com/home-assistant/home-assistant/releases"
                   target="_blank"
-                  ><paper-button>Release notes</paper-button></a
+                  ><mwc-button>Release notes</mwc-button></a
                 >
               </div>
             </paper-card>

diff --git a/hassio/src/snapshots/hassio-snapshot.js b/hassio/src/snapshots/hassio-snapshot.js
@@ -1,5 +1,5 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-dialog/paper-dialog";
@@ -123,12 +123,12 @@ class HassioSnapshot extends PolymerElement {
             class="download"
             title="Download snapshot"
           ></paper-icon-button>
-          <paper-button on-click="_partialRestoreClicked"
-            >Restore selected</paper-button
+          <mwc-button on-click="_partialRestoreClicked"
+            >Restore selected</mwc-button
           >
           <template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">
-            <paper-button on-click="_fullRestoreClicked"
-              >Wipe &amp; restore</paper-button
+            <mwc-button on-click="_fullRestoreClicked"
+              >Wipe &amp; restore</mwc-button
             >
           </template>
         </div>

diff --git a/hassio/src/snapshots/hassio-snapshots.js b/hassio/src/snapshots/hassio-snapshots.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
@@ -90,10 +90,10 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
               </template>
             </div>
             <div class="card-actions">
-              <paper-button
+              <mwc-button
                 disabled="[[creatingSnapshot]]"
                 on-click="_createSnapshot"
-                >Create</paper-button
+                >Create</mwc-button
               >
             </div>
           </paper-card>

diff --git a/hassio/src/system/hassio-host-info.js b/hassio/src/system/hassio-host-info.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -39,7 +39,7 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
           color: var(--google-red-500);
           margin-top: 16px;
         }
-        paper-button.info {
+        mwc-button.info {
           max-width: calc(50% - 12px);
         }
         table.info {
@@ -67,13 +67,13 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
               </template>
             </tbody>
           </table>
-          <paper-button raised on-click="_showHardware" class="info">
+          <mwc-button raised on-click="_showHardware" class="info">
             Hardware
-          </paper-button>
+          </mwc-button>
           <template is="dom-if" if="[[_featureAvailable(data, 'hostname')]]">
-            <paper-button raised on-click="_changeHostnameClicked" class="info">
+            <mwc-button raised on-click="_changeHostnameClicked" class="info">
               Change hostname
-            </paper-button>
+            </mwc-button>
           </template>
           <template is="dom-if" if="[[errors]]">
             <div class="errors">Error: [[errors]]</div>

diff --git a/hassio/src/system/hassio-supervisor-info.js b/hassio/src/system/hassio-supervisor-info.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -80,11 +80,11 @@ class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
             >
           </template>
           <template is="dom-if" if='[[_equals(data.channel, "stable")]]'>
-            <paper-button
+            <mwc-button
               on-click="_joinBeta"
               class="warning"
               title="Get beta updates for Home Assistant (RCs), supervisor and host"
-              >Join beta channel</paper-button
+              >Join beta channel</mwc-button
             >
           </template>
         </div>

diff --git a/hassio/src/system/hassio-supervisor-log.js b/hassio/src/system/hassio-supervisor-log.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -24,7 +24,7 @@ class HassioSupervisorLog extends PolymerElement {
       <paper-card>
         <div class="card-content" id="content"></div>
         <div class="card-actions">
-          <paper-button on-click="refresh">Refresh</paper-button>
+          <mwc-button on-click="refresh">Refresh</mwc-button>
         </div>
       </paper-card>
     `;

diff --git a/package.json b/package.json
@@ -17,6 +17,8 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
+    "@material/mwc-button": "^0.3.6",
+    "@material/mwc-ripple": "^0.3.6",
     "@mdi/svg": "^3.0.39",
     "@polymer/app-layout": "^3.0.1",
     "@polymer/app-localize-behavior": "^3.0.1",
@@ -35,7 +37,6 @@
     "@polymer/iron-pages": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/neon-animation": "^3.0.1",
-    "@polymer/paper-button": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-checkbox": "^3.0.1",
     "@polymer/paper-dialog": "^3.0.1",

diff --git a/src/auth/ha-auth-flow.js b/src/auth/ha-auth-flow.js
@@ -1,5 +1,5 @@
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import "../components/ha-form";
 import { localizeLiteMixin } from "../mixins/localize-lite-mixin";
@@ -55,8 +55,8 @@ class HaAuthFlow extends localizeLiteMixin(PolymerElement) {
             ></ha-form>
           </template>
           <div class="action">
-            <paper-button raised on-click="_handleSubmit"
-              >[[_computeSubmitCaption(_step.type)]]</paper-button
+            <mwc-button raised on-click="_handleSubmit"
+              >[[_computeSubmitCaption(_step.type)]]</mwc-button
             >
           </div>
         </template>

diff --git a/src/cards/ha-persistent_notification-card.js b/src/cards/ha-persistent_notification-card.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -38,16 +38,16 @@ class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
         ha-markdown img {
           max-width: 100%;
         }
-        paper-button {
+        mwc-button {
           margin: 8px;
           font-weight: 500;
         }
       </style>
 
       <ha-card header="[[computeTitle(stateObj)]]">
         <ha-markdown content="[[stateObj.attributes.message]]"></ha-markdown>
-        <paper-button on-click="dismissTap"
-          >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button
+        <mwc-button on-click="dismissTap"
+          >[[localize('ui.card.persistent_notification.dismiss')]]</mwc-button
         >
       </ha-card>
     `;