jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 17:56:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix button group in Safari (#9804)

Browse Source 
* FIx button group in Safari

* Update src/components/ha-button-toggle-group.ts

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
This commit is contained in:
Bram Kragten 2021-08-16 05:45:24 +02:00 committed by GitHub
parent e0d23ee6cf
commit dbe209e3f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/ha-button-toggle-group.ts
View File

@ -1,7 +1,8 @@
import "@material/mwc-button/mwc-button";
import type { Button } from "@material/mwc-button/mwc-button";
import "@material/mwc-icon-button/mwc-icon-button";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { customElement, property, queryAll } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { fireEvent } from "../common/dom/fire_event";
import type { ToggleButton } from "../types";
@ -17,6 +18,8 @@ export class HaButtonToggleGroup extends LitElement {
@property({ type: Boolean }) public dense = false;
@queryAll("mwc-button") private _buttons?: Button[];
protected render(): TemplateResult {
return html`
<div>
@ -48,6 +51,16 @@ export class HaButtonToggleGroup extends LitElement {
`;
}
protected updated() {
// Work around Safari default margin that is not reset in mwc-button as of aug 2021
this._buttons?.forEach(async (button) => {
await button.updateComplete;
(
button.shadowRoot!.querySelector("button") as HTMLButtonElement
).style.margin = "0";
});
}
private _handleClick(ev): void {
this.active = ev.currentTarget.value;
fireEvent(this, "value-changed", { value: this.active });