jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-26 06:17:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Entity dialogs: Remove paper element and align dialog header style (#6370)

Browse Source 
* Entity dialogs: Remove paper element and align dialog header style

* Remove centerTitle
This commit is contained in:
Bram Kragten 2020-07-13 19:37:48 +02:00 committed by GitHub
parent 2f7d744228
commit 1c73007ae6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 228 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -37,6 +37,9 @@
"@material/mwc-menu": "^0.17.2", "@material/mwc-menu": "^0.17.2",
"@material/mwc-ripple": "^0.17.2", "@material/mwc-ripple": "^0.17.2",
"@material/mwc-switch": "^0.17.2", "@material/mwc-switch": "^0.17.2",
"@material/mwc-tab": "^0.17.2",
"@material/mwc-tab-bar": "^0.17.2",
"@material/top-app-bar": "=8.0.0-canary.a78ceb112.0",
"@mdi/js": "5.3.45", "@mdi/js": "5.3.45",
"@mdi/svg": "5.3.45", "@mdi/svg": "5.3.45",
"@polymer/app-layout": "^3.0.2", "@polymer/app-layout": "^3.0.2",

2
src/components/ha-dialog.ts
View File

@ -57,7 +57,7 @@ export class HaDialog extends MwcDialog {
.header_button { .header_button {
position: absolute; position: absolute;
right: 16px; right: 16px;
top: 12px; top: 10px;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }

47
src/components/ha-header-bar.ts Normal file
View File

@ -0,0 +1,47 @@
import { customElement, LitElement, html, unsafeCSS, css } from "lit-element";
// @ts-ignore
import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
@customElement("ha-header-bar")
export class HaHeaderBar extends LitElement {
protected render() {
return html`<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
id="navigation"
>
<slot name="navigationIcon"></slot>
<span class="mdc-top-app-bar__title">
<slot name="title"></slot>
</span>
</section>
<section
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
id="actions"
role="toolbar"
>
<slot name="actionItems"></slot>
</section>
</div>
</header>`;
}
static get styles() {
return [
unsafeCSS(topAppBarStyles),
css`
.mdc-top-app-bar {
position: static;
color: var(--mdc-theme-on-primary, #fff);
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-header-bar": HaHeaderBar;
}
}

41
src/dialogs/more-info/ha-more-info-dialog.ts
View File

@ -1,7 +1,6 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@material/mwc-icon-button"; import "@material/mwc-icon-button";
import "@polymer/app-layout/app-toolbar/app-toolbar"; import "../../components/ha-header-bar";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "../../components/ha-dialog"; import "../../components/ha-dialog";
import "../../components/ha-svg-icon"; import "../../components/ha-svg-icon";
import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../common/config/is_component_loaded";
@ -94,18 +93,20 @@ export class MoreInfoDialog extends LitElement {
hideActions hideActions
data-domain=${domain} data-domain=${domain}
> >
<app-toolbar slot="heading"> <ha-header-bar slot="heading">
<mwc-icon-button <mwc-icon-button
slot="navigationIcon"
.label=${this.hass.localize("ui.dialogs.more_info_control.dismiss")} .label=${this.hass.localize("ui.dialogs.more_info_control.dismiss")}
dialogAction="cancel" dialogAction="cancel"
> >
<ha-svg-icon .path=${mdiClose}></ha-svg-icon> <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<div class="main-title" main-title @click=${this._enlarge}> <div slot="title" class="main-title" @click=${this._enlarge}>
${computeStateName(stateObj)} ${computeStateName(stateObj)}
</div> </div>
${this.hass.user!.is_admin ${this.hass.user!.is_admin
? html`<mwc-icon-button ? html`<mwc-icon-button
slot="actionItems"
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.more_info_control.settings" "ui.dialogs.more_info_control.settings"
)} )}
@ -119,6 +120,7 @@ export class MoreInfoDialog extends LitElement {
stateObj.attributes.id) || stateObj.attributes.id) ||
EDITABLE_DOMAINS.includes(domain)) EDITABLE_DOMAINS.includes(domain))
? html` <mwc-icon-button ? html` <mwc-icon-button
slot="actionItems"
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.more_info_control.edit" "ui.dialogs.more_info_control.edit"
)} )}
@ -127,7 +129,7 @@ export class MoreInfoDialog extends LitElement {
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon> <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
</mwc-icon-button>` </mwc-icon-button>`
: ""} : ""}
</app-toolbar> </ha-header-bar>
<div class="content"> <div class="content">
${DOMAINS_NO_INFO.includes(domain) ${DOMAINS_NO_INFO.includes(domain)
? "" ? ""
@ -247,29 +249,19 @@ export class MoreInfoDialog extends LitElement {
--dialog-content-position: static; --dialog-content-position: static;
} }
app-toolbar { ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--card-background-color);
flex-shrink: 0; flex-shrink: 0;
color: var(--primary-text-color); border-bottom: 1px solid
background-color: var(--secondary-background-color); var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
app-toolbar [main-title] {
/* Design guideline states 24px, changed to 16 to align with state info */
margin-left: 16px;
line-height: 1.3em;
max-height: 2.6em;
overflow: hidden;
/* webkit and blink still support simple multiline text-overflow */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
} }
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
app-toolbar { ha-header-bar {
background-color: var(--app-header-background-color); --mdc-theme-primary: var(--app-header-background-color);
color: var(--app-header-text-color, white); --mdc-theme-on-primary: var(--app-header-text-color, white);
border-bottom: none;
} }
} }
@ -287,7 +279,6 @@ export class MoreInfoDialog extends LitElement {
} }
.main-title { .main-title {
pointer-events: auto;
cursor: default; cursor: default;
} }

104
src/panels/config/entities/dialog-entity-editor.ts
View File

@ -1,6 +1,5 @@
import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@material/mwc-tab-bar";
import "@polymer/paper-tabs/paper-tab"; import "@material/mwc-tab";
import "@polymer/paper-tabs/paper-tabs";
import "@material/mwc-icon-button"; import "@material/mwc-icon-button";
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { import {
@ -17,6 +16,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { dynamicElement } from "../../../common/dom/dynamic-element-directive"; import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/ha-dialog"; import "../../../components/ha-dialog";
import "../../../components/ha-header-bar";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-related-items"; import "../../../components/ha-related-items";
import { import {
@ -51,7 +51,7 @@ export class DialogEntityEditor extends LitElement {
| ExtEntityRegistryEntry | ExtEntityRegistryEntry
| null; | null;
@property() private _curTab?: string; @property() private _curTab = "tab-settings";
@property() private _extraTabs: Tabs = {}; @property() private _extraTabs: Tabs = {};
@ -92,19 +92,21 @@ export class DialogEntityEditor extends LitElement {
@close-dialog=${this.closeDialog} @close-dialog=${this.closeDialog}
> >
<div slot="heading"> <div slot="heading">
<app-toolbar> <ha-header-bar>
<mwc-icon-button <mwc-icon-button
slot="navigationIcon"
.label=${this.hass.localize("ui.dialogs.entity_registry.dismiss")} .label=${this.hass.localize("ui.dialogs.entity_registry.dismiss")}
dialogAction="cancel" dialogAction="cancel"
> >
<ha-svg-icon .path=${mdiClose}></ha-svg-icon> <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<div class="main-title" main-title> <span slot="title">
${stateObj ? computeStateName(stateObj) : entry?.name || entityId} ${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
</div> </span>
${stateObj ${stateObj
? html` ? html`
<mwc-icon-button <mwc-icon-button
slot="actionItems"
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.entity_registry.control" "ui.dialogs.entity_registry.control"
)} )}
@ -114,25 +116,34 @@ export class DialogEntityEditor extends LitElement {
</mwc-icon-button> </mwc-icon-button>
` `
: ""} : ""}
</app-toolbar> </ha-header-bar>
<paper-tabs <mwc-tab-bar
.selected=${this._curTabIndex} .activeIndex=${this._curTabIndex}
@selected-item-changed=${this._handleTabSelected} @MDCTabBar:activated=${this._handleTabActivated}
@MDCTab:interacted=${this._handleTabInteracted}
> >
<paper-tab id="tab-settings"> <mwc-tab
${this.hass.localize("ui.dialogs.entity_registry.settings")} id="tab-settings"
</paper-tab> .label=${this.hass.localize(
"ui.dialogs.entity_registry.settings"
)}
>
</mwc-tab>
${Object.entries(this._extraTabs).map( ${Object.entries(this._extraTabs).map(
([key, tab]) => html` ([key, tab]) => html`
<paper-tab id=${key}> <mwc-tab
${this.hass.localize(tab.translationKey) || key} id=${key}
</paper-tab> .label=${this.hass.localize(tab.translationKey) || key}
>
</mwc-tab>
` `
)} )}
<paper-tab id="tab-related"> <mwc-tab
${this.hass.localize("ui.dialogs.entity_registry.related")} id="tab-related"
</paper-tab> .label=${this.hass.localize("ui.dialogs.entity_registry.related")}
</paper-tabs> >
</mwc-tab>
</mwc-tab-bar>
</div> </div>
<div class="wrapper"> <div class="wrapper">
${cache(this._renderTab())} ${cache(this._renderTab())}
@ -187,11 +198,12 @@ export class DialogEntityEditor extends LitElement {
} }
} }
private _handleTabSelected(ev: CustomEvent): void { private _handleTabActivated(ev: CustomEvent): void {
if (!ev.detail.value) { this._curTabIndex = ev.detail.index;
return;
} }
this._curTab = ev.detail.value.id;
private _handleTabInteracted(ev: CustomEvent): void {
this._curTab = ev.detail.tabId;
} }
private async _loadPlatformSettingTabs(): Promise<void> { private async _loadPlatformSettingTabs(): Promise<void> {
@ -220,24 +232,15 @@ export class DialogEntityEditor extends LitElement {
return [ return [
haStyleDialog, haStyleDialog,
css` css`
app-toolbar { ha-header-bar {
color: var(--primary-text-color); --mdc-theme-on-primary: var(--primary-text-color);
background-color: var(--secondary-background-color); --mdc-theme-primary: var(--card-background-color);
margin: 0; flex-shrink: 0;
padding: 0 16px;
} }
app-toolbar [main-title] { mwc-tab-bar {
/* Design guideline states 24px, changed to 16 to align with state info */ border-bottom: 1px solid
margin-left: 16px; var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
line-height: 1.3em;
max-height: 2.6em;
overflow: hidden;
/* webkit and blink still support simple multiline text-overflow */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
} }
ha-dialog { ha-dialog {
@ -245,10 +248,6 @@ export class DialogEntityEditor extends LitElement {
} }
@media all and (min-width: 451px) and (min-height: 501px) { @media all and (min-width: 451px) and (min-height: 501px) {
.main-title {
pointer-events: auto;
cursor: default;
}
.wrapper { .wrapper {
width: 400px; width: 400px;
} }
@ -261,9 +260,9 @@ export class DialogEntityEditor extends LitElement {
/* overrule the ha-style-dialog max-height on small screens */ /* overrule the ha-style-dialog max-height on small screens */
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
app-toolbar { ha-header-bar {
background-color: var(--app-header-background-color); --mdc-theme-primary: var(--app-header-background-color);
color: var(--app-header-text-color, white); --mdc-theme-on-primary: var(--app-header-text-color, white);
} }
} }
@ -275,15 +274,6 @@ export class DialogEntityEditor extends LitElement {
direction: rtl; direction: rtl;
text-align: right; text-align: right;
} }
:host {
--paper-font-title_-_white-space: normal;
}
paper-tabs {
--paper-tabs-selection-bar-color: var(--primary-color);
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 0;
}
`, `,
]; ];
} }

113
yarn.lock
View File

@ -1658,6 +1658,54 @@
lit-element "^2.3.0" lit-element "^2.3.0"
tslib "^1.10.0" tslib "^1.10.0"
"@material/mwc-tab-bar@^0.17.2":
version "0.17.2"
resolved "https://registry.yarnpkg.com/@material/mwc-tab-bar/-/mwc-tab-bar-0.17.2.tgz#d89a290d4dda5f854ee51a539b69020c6634d1db"
integrity sha512-QsHOmxj6FM7jKYM9Dt6u7jKQv8r13z7/ryocQAAqyd13+LwAc+ec2o0hE6lTFpqNPAdlIhosip5Y3GDHdoKT5w==
dependencies:
"@material/mwc-base" "^0.17.2"
"@material/mwc-tab" "^0.17.2"
"@material/mwc-tab-scroller" "^0.17.2"
"@material/tab" "=8.0.0-canary.a78ceb112.0"
"@material/tab-bar" "=8.0.0-canary.a78ceb112.0"
lit-element "^2.3.0"
tslib "^1.10.0"
"@material/mwc-tab-indicator@^0.17.2":
version "0.17.2"
resolved "https://registry.yarnpkg.com/@material/mwc-tab-indicator/-/mwc-tab-indicator-0.17.2.tgz#fc3ac2c7a53df20acc99e71599dd38e8abbc2cda"
integrity sha512-JaAyWLhU/FO1v0wX1LLk4nTph13kFla14tYzMNg1rK6DcHdU19FgpjO7T1D61AJXQUmOMJ5q1qX/8dWd7BLlXg==
dependencies:
"@material/mwc-base" "^0.17.2"
"@material/tab-indicator" "=8.0.0-canary.a78ceb112.0"
lit-element "^2.3.0"
lit-html "^1.1.2"
tslib "^1.10.0"
"@material/mwc-tab-scroller@^0.17.2":
version "0.17.2"
resolved "https://registry.yarnpkg.com/@material/mwc-tab-scroller/-/mwc-tab-scroller-0.17.2.tgz#1f90691fe1bb91058cb884a72056951484967654"
integrity sha512-T03XsOQH457yhqeoZojMb2cfBshnBYCW4KIF8h2XqZiL9d47/E1OQqpWT/r1BbSZ7ysVhpH0TiwHvIaPzNW4ZA==
dependencies:
"@material/dom" "=8.0.0-canary.a78ceb112.0"
"@material/mwc-base" "^0.17.2"
"@material/tab-scroller" "=8.0.0-canary.a78ceb112.0"
lit-element "^2.3.0"
tslib "^1.10.0"
"@material/mwc-tab@^0.17.2":
version "0.17.2"
resolved "https://registry.yarnpkg.com/@material/mwc-tab/-/mwc-tab-0.17.2.tgz#5629164b9099acd6d3d1109232b99ff23088f0ba"
integrity sha512-M8+T4jXL/noG3MAoxXNuN/or2Ky3Zozxa9XsgK4vGHK3rN5tB1w0t2ZMjmVgp8qJ4JIqgnYtsiM0Z1P/MLV4lw==
dependencies:
"@material/mwc-base" "^0.17.2"
"@material/mwc-ripple" "^0.17.2"
"@material/mwc-tab-indicator" "^0.17.2"
"@material/tab" "=8.0.0-canary.a78ceb112.0"
lit-element "^2.3.0"
lit-html "^1.1.2"
tslib "^1.10.0"
"@material/progress-indicator@8.0.0-canary.a78ceb112.0": "@material/progress-indicator@8.0.0-canary.a78ceb112.0":
version "8.0.0-canary.a78ceb112.0" version "8.0.0-canary.a78ceb112.0"
resolved "https://registry.yarnpkg.com/@material/progress-indicator/-/progress-indicator-8.0.0-canary.a78ceb112.0.tgz#70a769d413910daf8ea1c4d51712487e381eaeab" resolved "https://registry.yarnpkg.com/@material/progress-indicator/-/progress-indicator-8.0.0-canary.a78ceb112.0.tgz#70a769d413910daf8ea1c4d51712487e381eaeab"
@ -1724,6 +1772,56 @@
"@material/theme" "8.0.0-canary.a78ceb112.0" "@material/theme" "8.0.0-canary.a78ceb112.0"
tslib "^1.9.3" tslib "^1.9.3"
"@material/tab-bar@=8.0.0-canary.a78ceb112.0":
version "8.0.0-canary.a78ceb112.0"
resolved "https://registry.yarnpkg.com/@material/tab-bar/-/tab-bar-8.0.0-canary.a78ceb112.0.tgz#f15dc55be11dbfe9d42d5a924e5ebe0e122fd430"
integrity sha512-OrrieVHPPdBPm7Nsc2rdjLWIH5S1+immZxDe3zmn8eX0kw+EZf1HucFUwPWYFVTj1bFQfAk+P5AOHbrpu0UeAA==
dependencies:
"@material/animation" "8.0.0-canary.a78ceb112.0"
"@material/base" "8.0.0-canary.a78ceb112.0"
"@material/density" "8.0.0-canary.a78ceb112.0"
"@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
"@material/tab" "8.0.0-canary.a78ceb112.0"
"@material/tab-scroller" "8.0.0-canary.a78ceb112.0"
tslib "^1.9.3"
"@material/tab-indicator@8.0.0-canary.a78ceb112.0", "@material/tab-indicator@=8.0.0-canary.a78ceb112.0":
version "8.0.0-canary.a78ceb112.0"
resolved "https://registry.yarnpkg.com/@material/tab-indicator/-/tab-indicator-8.0.0-canary.a78ceb112.0.tgz#24ad5d88b9fd652c91cfdb0c4f86eae7b7f48c4f"
integrity sha512-LPh3RZwzbyoaCnCkRw2GvEdH1m3m49H+jzJaA56vP7XCrSqlFD0UvGHM622ObkFbJb3xV+SKtq+jcRzHcSlQQw==
dependencies:
"@material/animation" "8.0.0-canary.a78ceb112.0"
"@material/base" "8.0.0-canary.a78ceb112.0"
"@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
"@material/theme" "8.0.0-canary.a78ceb112.0"
tslib "^1.9.3"
"@material/tab-scroller@8.0.0-canary.a78ceb112.0", "@material/tab-scroller@=8.0.0-canary.a78ceb112.0":
version "8.0.0-canary.a78ceb112.0"
resolved "https://registry.yarnpkg.com/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a78ceb112.0.tgz#393b79ed32bb6ceda87be8d4a6f64506b35e009d"
integrity sha512-of9L0foIN+jec1QRDnygTJ2vbK6MLGcJV1kPAFxBehObXo7MMisP8jZtxLCLaV5sdPpVvfIPdGdvvemYWUsysw==
dependencies:
"@material/animation" "8.0.0-canary.a78ceb112.0"
"@material/base" "8.0.0-canary.a78ceb112.0"
"@material/dom" "8.0.0-canary.a78ceb112.0"
"@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
"@material/tab" "8.0.0-canary.a78ceb112.0"
tslib "^1.9.3"
"@material/tab@8.0.0-canary.a78ceb112.0", "@material/tab@=8.0.0-canary.a78ceb112.0":
version "8.0.0-canary.a78ceb112.0"
resolved "https://registry.yarnpkg.com/@material/tab/-/tab-8.0.0-canary.a78ceb112.0.tgz#0591ce259891e2a6b121af40b9fb182da2911ad6"
integrity sha512-lExmfj6Hw2Q9rSVTmjc+ruipoFZIgta9CAATRgxbuhCapXO7BUDkBihQbcxwTqH6qe4G80hRnUcsqm2PzsAEVA==
dependencies:
"@material/base" "8.0.0-canary.a78ceb112.0"
"@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
"@material/ripple" "8.0.0-canary.a78ceb112.0"
"@material/rtl" "8.0.0-canary.a78ceb112.0"
"@material/tab-indicator" "8.0.0-canary.a78ceb112.0"
"@material/theme" "8.0.0-canary.a78ceb112.0"
"@material/typography" "8.0.0-canary.a78ceb112.0"
tslib "^1.9.3"
"@material/theme@8.0.0-canary.a78ceb112.0": "@material/theme@8.0.0-canary.a78ceb112.0":
version "8.0.0-canary.a78ceb112.0" version "8.0.0-canary.a78ceb112.0"
resolved "https://registry.yarnpkg.com/@material/theme/-/theme-8.0.0-canary.a78ceb112.0.tgz#0a32294d806f16ebfab42025d35056a6954863a0" resolved "https://registry.yarnpkg.com/@material/theme/-/theme-8.0.0-canary.a78ceb112.0.tgz#0a32294d806f16ebfab42025d35056a6954863a0"
@ -1731,6 +1829,21 @@
dependencies: dependencies:
"@material/feature-targeting" "8.0.0-canary.a78ceb112.0" "@material/feature-targeting" "8.0.0-canary.a78ceb112.0"
"@material/top-app-bar@=8.0.0-canary.a78ceb112.0":
version "8.0.0-canary.a78ceb112.0"
resolved "https://registry.yarnpkg.com/@material/top-app-bar/-/top-app-bar-8.0.0-canary.a78ceb112.0.tgz#d84baf4a91cbaaf83b4bc7e798cbae0adff1b1b9"
integrity sha512-27bm0xPxepKSVh04FK7m0zUSP9FveIXv/qa2vJI3XTZWkFiNPrF+MGwkMPo83Z5TMqMFDRhDcjzSJlo9H4IrOg==
dependencies:
"@material/animation" "8.0.0-canary.a78ceb112.0"
"@material/base" "8.0.0-canary.a78ceb112.0"
"@material/elevation" "8.0.0-canary.a78ceb112.0"
"@material/ripple" "8.0.0-canary.a78ceb112.0"
"@material/rtl" "8.0.0-canary.a78ceb112.0"
"@material/shape" "8.0.0-canary.a78ceb112.0"
"@material/theme" "8.0.0-canary.a78ceb112.0"
"@material/typography" "8.0.0-canary.a78ceb112.0"
tslib "^1.9.3"
"@material/touch-target@8.0.0-canary.a78ceb112.0": "@material/touch-target@8.0.0-canary.a78ceb112.0":
version "8.0.0-canary.a78ceb112.0" version "8.0.0-canary.a78ceb112.0"
resolved "https://registry.yarnpkg.com/@material/touch-target/-/touch-target-8.0.0-canary.a78ceb112.0.tgz#dcacd182c99e3eae5547ffe26bc758fca252cfae" resolved "https://registry.yarnpkg.com/@material/touch-target/-/touch-target-8.0.0-canary.a78ceb112.0.tgz#dcacd182c99e3eae5547ffe26bc758fca252cfae"