Fixes for integration cards (#8930)

gallery/src/demos/demo-integration-card.ts

@@ -139,9 +139,9 @@ const configEntries: Array<{
   {
     items: [
       loadedEntry,
-      longNameEntry,
       setupErrorEntry,
       migrationErrorEntry,
+      longNameEntry,
       setupRetryEntry,
       failedUnloadEntry,
       notLoadedEntry,
@@ -211,47 +211,77 @@ export class DemoIntegrationCard extends LitElement {
       return html``;
     }
     return html`
-      <div class="filters">
+      <div class="container">
-        <ha-formfield label="Custom Integration">
+        <div class="filters">
-          <ha-switch @change=${this._toggleCustomIntegration}></ha-switch>
+          <ha-formfield label="Custom Integration">
-        </ha-formfield>
+            <ha-switch @change=${this._toggleCustomIntegration}></ha-switch>
-        <ha-formfield label="Relies on cloud">
+          </ha-formfield>
-          <ha-switch @change=${this._toggleCloud}></ha-switch>
+          <ha-formfield label="Relies on cloud">
-        </ha-formfield>
+            <ha-switch @change=${this._toggleCloud}></ha-switch>
+          </ha-formfield>
+        </div>
+
+        <ha-ignored-config-entry-card
+          .hass=${this.hass}
+          .entry=${createConfigEntry("Ignored Entry")}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+        ></ha-ignored-config-entry-card>
+
+        ${configFlows.map(
+          (flow) => html`
+            <ha-config-flow-card
+              .hass=${this.hass}
+              .flow=${flow}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud
+              )}
+            ></ha-config-flow-card>
+          `
+        )}
+        ${configEntries.map(
+          (info) => html`
+            <ha-integration-card
+              class=${classMap({
+                highlight: info.highlight !== undefined,
+              })}
+              .hass=${this.hass}
+              domain="esphome"
+              .items=${info.items}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud
+              )}
+              .entityRegistryEntries=${createEntityRegistryEntries(
+                info.items[0]
+              )}
+              .deviceRegistryEntries=${createDeviceRegistryEntries(
+                info.items[0]
+              )}
+              ?disabled=${info.disabled}
+              .selectedConfigEntryId=${info.highlight}
+            ></ha-integration-card>
+          `
+        )}
+      </div>
+      <div class="container">
+        <!-- One that is standalone to see how it increases height if height
+           not defined by other cards. -->
+        <ha-integration-card
+          .hass=${this.hass}
+          domain="esphome"
+          .items=${[
+            loadedEntry,
+            setupErrorEntry,
+            migrationErrorEntry,
+            setupRetryEntry,
+            failedUnloadEntry,
+          ]}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+          .entityRegistryEntries=${createEntityRegistryEntries(loadedEntry)}
+          .deviceRegistryEntries=${createDeviceRegistryEntries(loadedEntry)}
+        ></ha-integration-card>
       </div>
-
-      <ha-ignored-config-entry-card
-        .hass=${this.hass}
-        .entry=${createConfigEntry("Ignored Entry")}
-        .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
-      ></ha-ignored-config-entry-card>
-
-      ${configFlows.map(
-        (flow) => html`
-          <ha-config-flow-card
-            .hass=${this.hass}
-            .flow=${flow}
-            .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
-          ></ha-config-flow-card>
-        `
-      )}
-      ${configEntries.map(
-        (info) => html`
-          <ha-integration-card
-            class=${classMap({
-              highlight: info.highlight !== undefined,
-            })}
-            .hass=${this.hass}
-            domain="esphome"
-            .items=${info.items}
-            .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
-            .entityRegistryEntries=${createEntityRegistryEntries(info.items[0])}
-            .deviceRegistryEntries=${createDeviceRegistryEntries(info.items[0])}
-            ?disabled=${info.disabled}
-            .selectedConfigEntryId=${info.highlight}
-          ></ha-integration-card>
-        `
-      )}
     `;
   }
 
@@ -272,7 +302,7 @@ export class DemoIntegrationCard extends LitElement {
 
   static get styles() {
     return css`
-      :host {
+      .container {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         grid-gap: 16px 16px;
@@ -280,7 +310,7 @@ export class DemoIntegrationCard extends LitElement {
         margin-bottom: 64px;
       }
 
-      :host > * {
+      .container > * {
         max-width: 500px;
       }
 

src/panels/config/integrations/ha-integration-card.ts

@@ -49,7 +49,6 @@ import {
 } from "./ha-config-integrations-common";
 
 const ERROR_STATES: ConfigEntry["state"][] = [
-  "failed_unload",
   "migration_error",
   "setup_error",
   "setup_retry",
@@ -116,6 +115,7 @@ export class HaIntegrationCard extends LitElement {
           hasMultiple: this.items.length > 1,
           disabled: this.disabled,
           "state-not-loaded": hasItem && item!.state === "not_loaded",
+          "state-failed-unload": hasItem && item!.state === "failed_unload",
           "state-error": hasItem && ERROR_STATES.includes(item!.state),
         })}"
         .configEntry=${item}
@@ -619,6 +619,10 @@ export class HaIntegrationCard extends LitElement {
           --state-color: var(--error-color);
           --text-on-state-color: var(--text-primary-color);
         }
+        .state-failed-unload {
+          --state-color: var(--warning-color);
+          --text-on-state-color: var(--primary-text-color);
+        }
         .state-not-loaded {
           --state-message-color: var(--primary-text-color);
         }
@@ -626,9 +630,6 @@ export class HaIntegrationCard extends LitElement {
           --state-color: var(--accent-color);
           --text-on-state-color: var(--text-primary-color);
         }
-        ha-card.group {
-          max-height: 200px;
-        }
 
         .back-btn {
           background-color: var(--state-color);
@@ -650,9 +651,6 @@ export class HaIntegrationCard extends LitElement {
           align-items: center;
           padding: 16px 8px 8px 16px;
         }
-        .group.disabled .header {
-          padding-top: 8px;
-        }
         .header img {
           margin-right: 16px;
           width: 40px;
@@ -706,10 +704,21 @@ export class HaIntegrationCard extends LitElement {
           --mdc-menu-min-width: 200px;
         }
         @media (min-width: 563px) {
+          ha-card.group {
+            position: relative;
+            min-height: 164px;
+          }
           paper-listbox {
-            flex: 1;
+            position: absolute;
+            top: 64px;
+            left: 0;
+            right: 0;
+            bottom: 0;
             overflow: auto;
           }
+          .disabled paper-listbox {
+            top: 100px;
+          }
         }
         paper-item {
           cursor: pointer;