From e15c4b86d584cfda5dc850cb697bc9b9552e9536 Mon Sep 17 00:00:00 2001 From: Material Web Team Date: Thu, 2 Feb 2023 15:39:49 -0800 Subject: [PATCH] feat(menu,list): expose menu theme mixins and remove divider PiperOrigin-RevId: 506741566 --- list/_list-divider.scss | 6 ---- list/lib/_list.scss | 1 - list/lib/divider/_list-divider.scss | 36 ----------------------- list/lib/divider/list-divider-styles.scss | 8 ----- list/lib/divider/list-divider.ts | 26 ---------------- list/list-divider.ts | 27 ----------------- menu/_menu-item.scss | 6 ++++ menu/_menu.scss | 6 ++++ menu/lib/_menu.scss | 8 ----- menu/lib/menuitem/_menu-item.scss | 1 - menu/menu-divider.ts | 27 ----------------- 11 files changed, 12 insertions(+), 140 deletions(-) delete mode 100644 list/_list-divider.scss delete mode 100644 list/lib/divider/_list-divider.scss delete mode 100644 list/lib/divider/list-divider-styles.scss delete mode 100644 list/lib/divider/list-divider.ts delete mode 100644 list/list-divider.ts create mode 100644 menu/_menu-item.scss create mode 100644 menu/_menu.scss delete mode 100644 menu/menu-divider.ts diff --git a/list/_list-divider.scss b/list/_list-divider.scss deleted file mode 100644 index d7ebbd58ec..0000000000 --- a/list/_list-divider.scss +++ /dev/null @@ -1,6 +0,0 @@ -// -// Copyright 2022 Google LLC -// SPDX-License-Identifier: Apache-2.0 -// - -@forward './lib/divider/list-divider' show theme; diff --git a/list/lib/_list.scss b/list/lib/_list.scss index 58d7e6b260..aff98c57bb 100644 --- a/list/lib/_list.scss +++ b/list/lib/_list.scss @@ -11,7 +11,6 @@ @use './listitem/list-item'; @use '../../sass/theme'; @use '../../tokens'; -@use './divider/list-divider'; @use '../../elevation/lib/elevation'; @mixin theme($tokens) { diff --git a/list/lib/divider/_list-divider.scss b/list/lib/divider/_list-divider.scss deleted file mode 100644 index 42f95d4b8f..0000000000 --- a/list/lib/divider/_list-divider.scss +++ /dev/null @@ -1,36 +0,0 @@ -// -// Copyright 2022 Google LLC -// SPDX-License-Identifier: Apache-2.0 -// - -@use '../../../sass/map-ext'; -@use '../../../sass/theme'; -@use '../../../tokens'; - -$_custom-property-prefix: 'divider'; - -@mixin theme($tokens) { - $reference: tokens.md-comp-divider-values(); - $tokens: theme.validate-theme($reference, $tokens); - $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); - - @include theme.emit-theme-vars($tokens); -} - -@mixin styles() { - $tokens: tokens.md-comp-divider-values(); - $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix); - - :host { - @each $token, $value in $tokens { - --_#{$token}: #{$value}; - } - } - - .divider { - background-clip: content-box; - background-color: var(--_color); - height: var(--_thickness); - padding: 0; - } -} diff --git a/list/lib/divider/list-divider-styles.scss b/list/lib/divider/list-divider-styles.scss deleted file mode 100644 index 1a3a9b8df2..0000000000 --- a/list/lib/divider/list-divider-styles.scss +++ /dev/null @@ -1,8 +0,0 @@ -// -// Copyright 2022 Google LLC -// SPDX-License-Identifier: Apache-2.0 -// - -@use './list-divider'; - -@include list-divider.styles; diff --git a/list/lib/divider/list-divider.ts b/list/lib/divider/list-divider.ts deleted file mode 100644 index e9b7b3436e..0000000000 --- a/list/lib/divider/list-divider.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {html, LitElement, TemplateResult} from 'lit'; -import {property} from 'lit/decorators.js'; - -import {ariaProperty} from '../../../decorators/aria-property.js'; -import {ARIARole} from '../../../types/aria.js'; - -// tslint:disable-next-line:enforce-comments-on-exported-symbols -export class ListDivider extends LitElement { - @ariaProperty // tslint:disable-line:no-new-decorators - // tslint:disable-next-line:decorator-placement - @property({type: String, attribute: 'data-role', noAccessor: true}) - // @ts-ignore(b/264292293): Use `override` with TS 4.9+ - role: ARIARole = 'separator'; - - override render(): TemplateResult { - return html` -
  • - `; - } -} diff --git a/list/list-divider.ts b/list/list-divider.ts deleted file mode 100644 index d143f25e93..0000000000 --- a/list/list-divider.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright 2022 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; - -import {ListDivider} from './lib/divider/list-divider.js'; -import {styles} from './lib/divider/list-divider-styles.css.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-list-divider': MdListDivider; - } -} - -/** - * @summary A horizontal list item divider. - * - * @final - * @suppress {visibility} - */ -@customElement('md-list-divider') -export class MdListDivider extends ListDivider { - static override styles = [styles]; -} diff --git a/menu/_menu-item.scss b/menu/_menu-item.scss new file mode 100644 index 0000000000..a2c30b9ddf --- /dev/null +++ b/menu/_menu-item.scss @@ -0,0 +1,6 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +@forward './lib/menuitem/menu-item' show theme; diff --git a/menu/_menu.scss b/menu/_menu.scss new file mode 100644 index 0000000000..e76d59ae97 --- /dev/null +++ b/menu/_menu.scss @@ -0,0 +1,6 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +@forward './lib/menu' show theme; diff --git a/menu/lib/_menu.scss b/menu/lib/_menu.scss index 878892e8b1..5462a8f6a5 100644 --- a/menu/lib/_menu.scss +++ b/menu/lib/_menu.scss @@ -7,7 +7,6 @@ @use '../../list/list'; @use './menuitem/menu-item'; -@use '../../list/list-divider'; @use '../../sass/resolvers'; @use '../../sass/theme'; @use '../../tokens'; @@ -40,13 +39,6 @@ $_custom-property-prefix: 'menu'; ) ); - @include list-divider.theme( - ( - color: var(--_divider-color), - thickness: var(--_divider-height), - ) - ); - @include elevation.theme( ( level: var(--_container-elevation), diff --git a/menu/lib/menuitem/_menu-item.scss b/menu/lib/menuitem/_menu-item.scss index da34d811c2..92aef52b0c 100644 --- a/menu/lib/menuitem/_menu-item.scss +++ b/menu/lib/menuitem/_menu-item.scss @@ -9,7 +9,6 @@ @use '../../../list/list'; @use '../../../ripple/ripple'; @use '../../../list/list-item'; -@use '../../../list/list-divider'; @use '../../../sass/resolvers'; @use '../../../sass/theme'; @use '../../../tokens'; diff --git a/menu/menu-divider.ts b/menu/menu-divider.ts deleted file mode 100644 index cb65bd83ee..0000000000 --- a/menu/menu-divider.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright 2023 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; - -import {ListDivider} from '../list/lib/divider/list-divider.js'; -import {styles} from '../list/lib/divider/list-divider-styles.css.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-menu-divider': MdMenuDivider; - } -} - -/** - * @summary A horizontal menu item divider. - * - * @final - * @suppress {visibility} - */ -@customElement('md-menu-divider') -export class MdMenuDivider extends ListDivider { - static override styles = [styles]; -}