Call service button feedback (#6752)

src/components/buttons/ha-progress-button.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import type { Button } from "@material/mwc-button";
 import {
   css,
   CSSResult,
@@ -7,6 +8,7 @@ import {
   LitElement,
   property,
   TemplateResult,
+  query,
 } from "lit-element";
 
 import "../ha-circular-progress";
@@ -17,9 +19,14 @@ class HaProgressButton extends LitElement {
 
   @property({ type: Boolean }) public progress = false;
 
+  @property({ type: Boolean }) public raised = false;
+
+  @query("mwc-button") private _button?: Button;
+
   public render(): TemplateResult {
     return html`
       <mwc-button
+        ?raised=${this.raised}
         .disabled=${this.disabled || this.progress}
         @click=${this._buttonTapped}
       >
@@ -42,9 +49,9 @@ class HaProgressButton extends LitElement {
   }
 
   private _tempClass(className: string): void {
-    this.classList.add(className);
+    this._button!.classList.add(className);
     setTimeout(() => {
-      this.classList.remove(className);
+      this._button!.classList.remove(className);
     }, 1000);
   }
 
@@ -66,18 +73,28 @@ class HaProgressButton extends LitElement {
         transition: all 1s;
       }
 
-      .success mwc-button {
+      mwc-button.success {
         --mdc-theme-primary: white;
         background-color: var(--success-color);
         transition: none;
       }
 
-      .error mwc-button {
+      mwc-button[raised].success {
+        --mdc-theme-primary: var(--success-color);
+        --mdc-theme-on-primary: white;
+      }
+
+      mwc-button.error {
         --mdc-theme-primary: white;
         background-color: var(--error-color);
         transition: none;
       }
 
+      mwc-button[raised].error {
+        --mdc-theme-primary: var(--error-color);
+        --mdc-theme-on-primary: white;
+      }
+
       .progress {
         bottom: 0;
         margin-top: 4px;

src/panels/developer-tools/service/developer-tools-service.js

@@ -1,8 +1,9 @@
-import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { safeDump, safeLoad } from "js-yaml";
+import { computeRTL } from "../../../common/util/compute_rtl";
+import "../../../components/buttons/ha-progress-button";
 import "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-code-editor";
 import "../../../components/ha-service-picker";
@@ -11,7 +12,6 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import "../../../styles/polymer-ha-style";
 import "../../../util/app-localstorage-document";
-import { computeRTL } from "../../../common/util/compute_rtl";
 
 const ERROR_SENTINEL = {};
 /*
@@ -34,7 +34,7 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
           max-width: 400px;
         }
 
-        mwc-button {
+        ha-progress-button {
           margin-top: 8px;
         }
 
@@ -136,9 +136,13 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
             error="[[!validJSON]]"
             on-value-changed="_yamlChanged"
           ></ha-code-editor>
-          <mwc-button on-click="_callService" raised disabled="[[!validJSON]]">
+          <ha-progress-button
+            on-click="_callService"
+            raised
+            disabled="[[!validJSON]]"
+          >
             [[localize('ui.panel.developer-tools.tabs.services.call_service')]]
-          </mwc-button>
+          </ha-progress-button>
         </div>
 
         <template is="dom-if" if="[[!domainService]]">
@@ -307,7 +311,8 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
     return ENTITY_COMPONENT_DOMAINS.includes(domain) ? [domain] : null;
   }
 
-  _callService() {
+  _callService(ev) {
+    const button = ev.target;
     if (this.parsedJSON === ERROR_SENTINEL) {
       showAlertDialog(this, {
         text: this.hass.localize(
@@ -316,10 +321,17 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
           this.serviceData
         ),
       });
+      button.actionError();
       return;
     }
-
-    this.hass.callService(this._domain, this._service, this.parsedJSON);
+    this.hass
+      .callService(this._domain, this._service, this.parsedJSON)
+      .then(() => {
+        button.actionSuccess();
+      })
+      .catch(() => {
+        button.actionError();
+      });
   }
 
   _fillExampleData() {