Fix integration card design gallery (#17167)

gallery/src/pages/misc/integration-card.ts

@@ -265,6 +265,8 @@ export class DemoIntegrationCard extends LitElement {
             ></ha-config-flow-card>
           `
         )}
+      </div>
+      <div class="container">
         ${configEntries.map(
           (info) => html`
             <ha-integration-card
@@ -338,10 +340,10 @@ export class DemoIntegrationCard extends LitElement {
     return css`
       .container {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        grid-gap: 16px 16px;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        grid-gap: 8px 8px;
         padding: 8px 16px 16px;
-        margin-bottom: 64px;
+        margin-bottom: 16px;
       }
 
       .container > * {

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

@@ -16,6 +16,9 @@ import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import type { DataEntryFlowProgressExtended } from "./ha-config-integrations";
 import "./ha-integration-action-card";
+import "../../../components/ha-button-menu";
+import "../../../components/ha-button";
+import "../../../components/ha-list-item";
 
 @customElement("ha-config-flow-card")
 export class HaConfigFlowCard extends LitElement {
@@ -37,7 +40,7 @@ export class HaConfigFlowCard extends LitElement {
         .domain=${this.flow.handler}
         .label=${this.flow.localized_title}
       >
-        <mwc-button
+        <ha-button
           unelevated
           @click=${this._continueFlow}
           .label=${this.hass.localize(
@@ -45,15 +48,15 @@ export class HaConfigFlowCard extends LitElement {
               attention ? "reconfigure" : "configure"
             }`
           )}
-        ></mwc-button>
+        ></ha-button>
         ${DISCOVERY_SOURCES.includes(this.flow.context.source) &&
         this.flow.context.unique_id
-          ? html`<mwc-button
+          ? html`<ha-button
               @click=${this._ignoreFlow}
               .label=${this.hass.localize(
                 "ui.panel.config.integrations.ignore.ignore"
               )}
-            ></mwc-button>`
+            ></ha-button>`
           : ""}
         ${this.flow.context.configuration_url || this.manifest
           ? html`<ha-button-menu slot="header-button">
@@ -75,7 +78,7 @@ export class HaConfigFlowCard extends LitElement {
                       ? "_self"
                       : "_blank"}
                   >
-                    <mwc-list-item graphic="icon" hasMeta>
+                    <ha-list-item graphic="icon" hasMeta>
                       ${this.hass.localize(
                         "ui.panel.config.integrations.config_entry.open_configuration_url"
                       )}
@@ -84,7 +87,7 @@ export class HaConfigFlowCard extends LitElement {
                         slot="meta"
                         .path=${mdiOpenInNew}
                       ></ha-svg-icon>
-                    </mwc-list-item>
+                    </ha-list-item>
                   </a>`
                 : ""}
               ${this.manifest
@@ -98,7 +101,7 @@ export class HaConfigFlowCard extends LitElement {
                     rel="noreferrer"
                     target="_blank"
                   >
-                    <mwc-list-item graphic="icon" hasMeta>
+                    <ha-list-item graphic="icon" hasMeta>
                       ${this.hass.localize(
                         "ui.panel.config.integrations.config_entry.documentation"
                       )}
@@ -110,7 +113,7 @@ export class HaConfigFlowCard extends LitElement {
                         slot="meta"
                         .path=${mdiOpenInNew}
                       ></ha-svg-icon>
-                    </mwc-list-item>
+                    </ha-list-item>
                   </a>`
                 : ""}
             </ha-button-menu>`
@@ -171,6 +174,10 @@ export class HaConfigFlowCard extends LitElement {
       width: 18px;
       height: 18px;
     }
+    .attention {
+      --mdc-theme-primary: var(--error-color);
+      --ha-card-border-color: var(--error-color);
+    }
   `;
 }
 

src/panels/config/integrations/ha-ignored-config-entry-card.ts

@@ -7,6 +7,7 @@ import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box
 import type { HomeAssistant } from "../../../types";
 import type { ConfigEntryExtended } from "./ha-config-integrations";
 import "./ha-integration-action-card";
+import "../../../components/ha-button";
 
 @customElement("ha-ignored-config-entry-card")
 export class HaIgnoredConfigEntryCard extends LitElement {
@@ -32,12 +33,12 @@ export class HaIgnoredConfigEntryCard extends LitElement {
             this.entry.localized_domain_name
           : this.entry.title}
       >
-        <mwc-button
+        <ha-button
           @click=${this._removeIgnoredIntegration}
           .label=${this.hass.localize(
             "ui.panel.config.integrations.ignore.stop_ignore"
           )}
-        ></mwc-button>
+        ></ha-button>
       </ha-integration-action-card>
     `;
   }
@@ -76,7 +77,7 @@ export class HaIgnoredConfigEntryCard extends LitElement {
       --state-color: var(--divider-color, #e0e0e0);
     }
 
-    mwc-button {
+    ha-button {
       --mdc-theme-primary: var(--primary-color);
     }
   `;

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

@@ -1,6 +1,4 @@
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import "@material/mwc-button";
-import "@material/mwc-list";
 import "@material/mwc-ripple";
 import type { Ripple } from "@material/mwc-ripple";
 import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
@@ -24,6 +22,7 @@ import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-card";
+import "../../../components/ha-button";
 import "../../../components/ha-svg-icon";
 import { ConfigEntry, ERROR_STATES } from "../../../data/config_entries";
 import type { DeviceRegistryEntry } from "../../../data/device_registry";