From 8e53019cf2a4dc5cebd81285899cdf3124ffd92c Mon Sep 17 00:00:00 2001
From: Ludeeus <ludeeus@ludeeus.dev>
Date: Tue, 26 Oct 2021 12:28:48 +0000
Subject: [PATCH] Use outlined

---
 gallery/src/demos/demo-ha-chip.ts | 10 +++++-----
 src/components/ha-chip.ts         | 12 ++++++------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/gallery/src/demos/demo-ha-chip.ts b/gallery/src/demos/demo-ha-chip.ts
index 750bf7fa99..e2b51c1226 100644
--- a/gallery/src/demos/demo-ha-chip.ts
+++ b/gallery/src/demos/demo-ha-chip.ts
@@ -63,7 +63,7 @@ export class DemoHaChip extends LitElement {
           <div class="standalone">
             <span>Simple:</span>
             <ha-chip
-              .outline=${this.standaloneIsOutlined}
+              .outlined=${this.standaloneIsOutlined}
               ?disabled=${this.standaloneIsDisabled}
               >Demo chip</ha-chip
             >
@@ -72,7 +72,7 @@ export class DemoHaChip extends LitElement {
           <div class="standalone">
             <span>Label property:</span>
             <ha-chip
-              .outline=${this.standaloneIsOutlined}
+              .outlined=${this.standaloneIsOutlined}
               ?disabled=${this.standaloneIsDisabled}
               label="Demo chip"
             ></ha-chip>
@@ -82,7 +82,7 @@ export class DemoHaChip extends LitElement {
             <span>With leadingIcon:</span>
             <ha-chip
               .leadingIcon=${mdiHomeAssistant}
-              .outline=${this.standaloneIsOutlined}
+              .outlined=${this.standaloneIsOutlined}
               ?disabled=${this.standaloneIsDisabled}
               >Demo chip</ha-chip
             >
@@ -92,7 +92,7 @@ export class DemoHaChip extends LitElement {
             <span>With trailingIcon property:</span>
             <ha-chip
               .trailingIcon=${mdiHomeAssistant}
-              .outline=${this.standaloneIsOutlined}
+              .outlined=${this.standaloneIsOutlined}
               ?disabled=${this.standaloneIsDisabled}
               >Demo chip</ha-chip
             >
@@ -101,7 +101,7 @@ export class DemoHaChip extends LitElement {
           <div class="standalone">
             <span>With trailingIcon slot:</span>
             <ha-chip
-              .outline=${this.standaloneIsOutlined}
+              .outlined=${this.standaloneIsOutlined}
               ?disabled=${this.standaloneIsDisabled}
             >
               Demo chip
diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
index 6368c7f8ab..443a7afd41 100644
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@@ -12,7 +12,7 @@ import { customElement, property } from "lit/decorators";
 
 @customElement("ha-chip")
 export class HaChip extends LitElement {
-  @property({ type: Boolean }) public outline = false;
+  @property({ type: Boolean }) public outlined = false;
 
   @property() public label?: string;
 
@@ -22,7 +22,7 @@ export class HaChip extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="mdc-chip ${this.outline ? "outline" : ""}">
+      <div class="mdc-chip ${this.outlined ? "outlined" : ""}">
         ${this.leadingIcon
           ? html`<span role="gridcell">
               <span role="button" tabindex="0" class="mdc-chip__primary-action"
@@ -68,25 +68,25 @@ export class HaChip extends LitElement {
         color: var(--ha-chip-text-color, var(--text-primary-color));
       }
 
-      .mdc-chip.outline {
+      .mdc-chip.outlined {
         border: 2px solid var(--ha-chip-background-color, var(--primary-color));
         background: var(--card-background-color);
         color: var(--ha-chip-text-color, var(--primary-text-color));
       }
 
-      .mdc-chip:not(.outline) .mdc-chip__icon.mdc-chip__icon--leading {
+      .mdc-chip:not(.outlined) .mdc-chip__icon.mdc-chip__icon--leading {
         margin-left: -12px !important;
         margin-right: -2px !important;
       }
 
-      .mdc-chip.outline ha-svg-icon,
+      .mdc-chip.outlined ha-svg-icon,
       slot[name="trailing-icon"]::slotted(ha-svg-icon) {
         border-radius: 50%;
         background: var(--ha-chip-background-color, var(--primary-color));
         color: var(--card-background-color);
       }
 
-      .mdc-chip.outline .mdc-chip__icon.mdc-chip__icon--leading {
+      .mdc-chip.outlined .mdc-chip__icon.mdc-chip__icon--leading {
         margin-left: -16px !important;
       }