Merge pull request home-assistant#11969 from home-assistant/patch-rel…

…ease
wilsonooi66 · Mar 7, 2022 · e9003ac · e9003ac
2 parents 7f086c0 + 1dd5214
commit e9003ac
Show file tree

Hide file tree

Showing 43 changed files with 906 additions and 769 deletions.
diff --git a/gallery/src/pages/components/ha-form.ts b/gallery/src/pages/components/ha-form.ts
@@ -38,6 +38,7 @@ const SCHEMAS: {
       select: "Select",
       icon: "Icon",
       media: "Media",
+      location: "Location",
     },
     schema: [
       { name: "addon", selector: { addon: {} } },
@@ -75,6 +76,10 @@ const SCHEMAS: {
           media: {},
         },
       },
+      {
+        name: "location",
+        selector: { location: { radius: true, icon: "mdi:home" } },
+      },
     ],
   },
   {

diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts
@@ -168,6 +168,11 @@ const SCHEMAS: {
       },
       icon: { name: "Icon", selector: { icon: {} } },
       media: { name: "Media", selector: { media: {} } },
+      location: { name: "Location", selector: { location: {} } },
+      location_radius: {
+        name: "Location with radius",
+        selector: { location: { radius: true, icon: "mdi:home" } },
+      },
     },
   },
 ];

diff --git a/hassio/src/components/hassio-upload-backup.ts b/hassio/src/components/hassio-upload-backup.ts
@@ -1,5 +1,4 @@
 import { mdiFolderUpload } from "@mdi/js";
-import "@polymer/paper-input/paper-input-container";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";

diff --git a/setup.cfg b/setup.cfg
@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220301.0
+version      = 20220301.1
 author       = The Home Assistant Authors
 author_email = [email protected]
 license      = Apache-2.0

diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts
@@ -41,7 +41,7 @@ export class HaDateInput extends LitElement {
     return html`<ha-textfield
       .label=${this.label}
       .disabled=${this.disabled}
-      iconTrailing="calendar"
+      iconTrailing
       @click=${this._openDialog}
       .value=${this.value
         ? formatDateNumeric(new Date(this.value), this.locale)

diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts
@@ -1,6 +1,13 @@
 import { mdiChevronDown } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { nextRender } from "../common/util/render-status";
@@ -16,11 +23,21 @@ class HaExpansionPanel extends LitElement {
 
   @property() secondary?: string;
 
+  @state() _showContent = this.expanded;
+
   @query(".container") private _container!: HTMLDivElement;
 
   protected render(): TemplateResult {
     return html`
-      <div class="summary" @click=${this._toggleContainer}>
+      <div
+        id="summary"
+        @click=${this._toggleContainer}
+        @keydown=${this._toggleContainer}
+        role="button"
+        tabindex="0"
+        aria-expanded=${this.expanded}
+        aria-controls="sect1"
+      >
         <slot class="header" name="header">
           ${this.header}
           <slot class="secondary" name="secondary">${this.secondary}</slot>
@@ -33,21 +50,37 @@ class HaExpansionPanel extends LitElement {
       <div
         class="container ${classMap({ expanded: this.expanded })}"
         @transitionend=${this._handleTransitionEnd}
+        role="region"
+        aria-labelledby="summary"
+        aria-hidden=${!this.expanded}
+        tabindex="-1"
       >
-        <slot></slot>
+        ${this._showContent ? html`<slot></slot>` : ""}
       </div>
     `;
   }
 
+  protected willUpdate(changedProps: PropertyValues) {
+    if (changedProps.has("expanded") && this.expanded) {
+      this._showContent = this.expanded;
+    }
+  }
+
   private _handleTransitionEnd() {
     this._container.style.removeProperty("height");
+    this._showContent = this.expanded;
   }
 
-  private async _toggleContainer(): Promise<void> {
+  private async _toggleContainer(ev): Promise<void> {
+    if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
+      return;
+    }
+    ev.preventDefault();
     const newExpanded = !this.expanded;
     fireEvent(this, "expanded-will-change", { expanded: newExpanded });
 
     if (newExpanded) {
+      this._showContent = true;
       // allow for dynamic content to be rendered
       await nextRender();
     }
@@ -80,17 +113,21 @@ class HaExpansionPanel extends LitElement {
           var(--divider-color, #e0e0e0)
         );
         border-radius: var(--ha-card-border-radius, 4px);
-        padding: 0 8px;
       }
 
-      .summary {
+      #summary {
         display: flex;
-        padding: var(--expansion-panel-summary-padding, 0);
+        padding: var(--expansion-panel-summary-padding, 0 8px);
         min-height: 48px;
         align-items: center;
         cursor: pointer;
         overflow: hidden;
         font-weight: 500;
+        outline: none;
+      }
+
+      #summary:focus {
+        background: var(--input-fill-color);
       }
 
       .summary-icon {
@@ -103,6 +140,7 @@ class HaExpansionPanel extends LitElement {
       }
 
       .container {
+        padding: var(--expansion-panel-content-padding, 0 8px);
         overflow: hidden;
         transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
         height: 0px;