From a117b06b7b1d177cc9cd8abd4c9b9ff489e20d5d Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Mon, 31 Jul 2023 11:37:24 -0700 Subject: [PATCH] fix(iconbutton)!: rename to PiperOrigin-RevId: 552545415 --- all.ts | 4 +- catalog/src/components/copy-code-button.ts | 8 ++-- catalog/src/components/top-app-bar.ts | 25 ++++++----- .../components/icon-button.ts | 4 +- catalog/src/ssr.ts | 2 +- .../stories/components/story-knob-panel.ts | 10 ++--- common.ts | 4 +- dialog/demo/stories.ts | 6 +-- .../figures/iconbutton/buttons.html | 10 ++--- .../figures/iconbutton/theming-standard.html | 6 +-- .../figures/iconbutton/usage-standard.html | 6 +-- .../figures/iconbutton/usage-toggle.html | 10 ++--- docs/components/figures/iconbutton/usage.html | 6 +-- docs/components/icon-button.md | 42 +++++++++---------- ...ard-icon-button.scss => _icon-button.scss} | 2 +- iconbutton/demo/stories.ts | 20 ++++----- ...standard-icon-button.ts => icon-button.ts} | 6 +-- iconbutton/icon-button_test.ts | 38 ++++++++--------- ...ard-icon-button.scss => _icon-button.scss} | 0 iconbutton/internal/standard-styles.scss | 4 +- progress/demo/stories.ts | 8 ++-- tabs/demo/stories.ts | 17 ++++---- 22 files changed, 115 insertions(+), 123 deletions(-) rename iconbutton/{_standard-icon-button.scss => _icon-button.scss} (57%) rename iconbutton/{standard-icon-button.ts => icon-button.ts} (87%) rename iconbutton/internal/{_standard-icon-button.scss => _icon-button.scss} (100%) diff --git a/all.ts b/all.ts index 9f4dfc41d..0b6ec0471 100644 --- a/all.ts +++ b/all.ts @@ -34,8 +34,8 @@ import './focus/md-focus-ring.js'; import './icon/icon.js'; import './iconbutton/filled-icon-button.js'; import './iconbutton/filled-tonal-icon-button.js'; +import './iconbutton/icon-button.js'; import './iconbutton/outlined-icon-button.js'; -import './iconbutton/standard-icon-button.js'; import './list/list.js'; import './list/list-item.js'; import './list/list-item-link.js'; @@ -82,8 +82,8 @@ export * from './focus/md-focus-ring.js'; export * from './icon/icon.js'; export * from './iconbutton/filled-icon-button.js'; export * from './iconbutton/filled-tonal-icon-button.js'; +export * from './iconbutton/icon-button.js'; export * from './iconbutton/outlined-icon-button.js'; -export * from './iconbutton/standard-icon-button.js'; export * from './list/list.js'; export * from './list/list-item.js'; export * from './list/list-item-link.js'; diff --git a/catalog/src/components/copy-code-button.ts b/catalog/src/components/copy-code-button.ts index 82cffa556..a05415dba 100644 --- a/catalog/src/components/copy-code-button.ts +++ b/catalog/src/components/copy-code-button.ts @@ -4,7 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import '@material/web/iconbutton/standard-icon-button.js'; +import '@material/web/iconbutton/icon-button.js'; import '@material/web/icon/icon.js'; import {css, html, LitElement} from 'lit'; @@ -24,7 +24,7 @@ export class CopyCodeButton extends LitElement { --_border-radius: calc(var(--catalog-code-block-border-radius) / 4); } - md-standard-icon-button { + md-icon-button { color: red; position: absolute; inset: var(--catalog-copy-code-button-inset, var(--_border-radius) var(--_border-radius) auto auto); @@ -60,11 +60,11 @@ export class CopyCodeButton extends LitElement { const icon = this.showCheckmark ? 'check' : 'content_copy'; return html` - + - + `; } diff --git a/catalog/src/components/top-app-bar.ts b/catalog/src/components/top-app-bar.ts index b22c4ce3b..1c2c96d4d 100644 --- a/catalog/src/components/top-app-bar.ts +++ b/catalog/src/components/top-app-bar.ts @@ -5,10 +5,10 @@ */ import '@material/web/focus/md-focus-ring.js'; -import '@material/web/iconbutton/standard-icon-button.js'; +import '@material/web/iconbutton/icon-button.js'; import '@material/web/icon/icon.js'; -import type {MdStandardIconButton} from '@material/web/iconbutton/standard-icon-button.js'; +import type {MdIconButton} from '@material/web/iconbutton/icon-button.js'; import {css, html, LitElement} from 'lit'; import {customElement, query, state} from 'lit/decorators.js'; import {live} from 'lit/directives/live.js'; @@ -28,15 +28,14 @@ import {materialDesign} from '../svg/material-design-logo.js'; */ @state() private menuOpen = false; - @query('.end md-standard-icon-button') - private paletteButton!: MdStandardIconButton; + @query('.end md-icon-button') private paletteButton!: MdIconButton; render() { return html`
- menu menu_open - - + + ${materialDesign} - +
@@ -71,9 +70,9 @@ import {materialDesign} from '../svg/material-design-logo.js'; > - + palette - +
@@ -106,7 +105,7 @@ import {materialDesign} from '../svg/material-design-logo.js'; * Toggles the sidebar's open state. */ private onMenuIconToggle(e: InputEvent) { - drawerOpenSignal.value = (e.target as MdStandardIconButton).selected; + drawerOpenSignal.value = (e.target as MdIconButton).selected; } static styles = css` @@ -135,14 +134,14 @@ import {materialDesign} from '../svg/material-design-logo.js'; align-items: center; } - md-standard-icon-button:not(:defined) { + md-icon-button:not(:defined) { width: 40px; height: 40px; display: flex; visibility: hidden; } - md-standard-icon-button * { + md-icon-button * { display: block; } diff --git a/catalog/src/hydration-entrypoints/components/icon-button.ts b/catalog/src/hydration-entrypoints/components/icon-button.ts index 8eac8d51a..8f5e00a15 100644 --- a/catalog/src/hydration-entrypoints/components/icon-button.ts +++ b/catalog/src/hydration-entrypoints/components/icon-button.ts @@ -4,7 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import '@material/web/iconbutton/standard-icon-button.js'; +import '@material/web/iconbutton/icon-button.js'; import '@material/web/iconbutton/filled-icon-button.js'; import '@material/web/iconbutton/filled-tonal-icon-button.js'; -import '@material/web/iconbutton/outlined-icon-button.js'; \ No newline at end of file +import '@material/web/iconbutton/outlined-icon-button.js'; diff --git a/catalog/src/ssr.ts b/catalog/src/ssr.ts index e3e669527..835f4bb11 100644 --- a/catalog/src/ssr.ts +++ b/catalog/src/ssr.ts @@ -18,7 +18,7 @@ import '@material/web/list/list-item-link.js'; import '@material/web/progress/circular-progress.js'; import '@material/web/tabs/tabs.js'; import '@material/web/tabs/tab.js'; -import '@material/web/iconbutton/standard-icon-button.js'; +import '@material/web/iconbutton/icon-button.js'; import '@material/web/iconbutton/filled-icon-button.js'; import '@material/web/iconbutton/filled-tonal-icon-button.js'; import '@material/web/iconbutton/outlined-icon-button.js'; diff --git a/catalog/stories/components/story-knob-panel.ts b/catalog/stories/components/story-knob-panel.ts index 687c54ae0..af4056565 100644 --- a/catalog/stories/components/story-knob-panel.ts +++ b/catalog/stories/components/story-knob-panel.ts @@ -6,7 +6,7 @@ /* Fork of Lit stories story-knob-renderer with m3 components and theming */ -import '@material/web/iconbutton/standard-icon-button.js'; +import '@material/web/iconbutton/icon-button.js'; import '@material/web/icon/icon.js'; import '@material/web/elevation/elevation.js'; @@ -72,9 +72,9 @@ export class StoryKnobPanel extends LitElement { if (this.showCloseIcon) { closeIcon = html` - + close - + `; } @@ -96,13 +96,13 @@ export class StoryKnobPanel extends LitElement { const iconLabel = this.draggable ? 'dock' : 'pop out'; dragIcon = html` - ${iconSvg} - + `; } diff --git a/common.ts b/common.ts index 61caf3000..697d87b19 100644 --- a/common.ts +++ b/common.ts @@ -23,7 +23,7 @@ import './chips/assist-chip.js'; import './chips/filter-chip.js'; import './dialog/dialog.js'; import './icon/icon.js'; -import './iconbutton/standard-icon-button.js'; +import './iconbutton/icon-button.js'; import './list/list.js'; import './list/list-item.js'; import './list/list-item-link.js'; @@ -52,7 +52,7 @@ export * from './chips/assist-chip.js'; export * from './chips/filter-chip.js'; export * from './dialog/dialog.js'; export * from './icon/icon.js'; -export * from './iconbutton/standard-icon-button.js'; +export * from './iconbutton/icon-button.js'; export * from './list/list.js'; export * from './list/list-item.js'; export * from './list/list-item-link.js'; diff --git a/dialog/demo/stories.ts b/dialog/demo/stories.ts index 4b5a0f193..cd95c8214 100644 --- a/dialog/demo/stories.ts +++ b/dialog/demo/stories.ts @@ -4,7 +4,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import '@material/web/iconbutton/standard-icon-button.js'; +import '@material/web/iconbutton/icon-button.js'; import '@material/web/textfield/filled-text-field.js'; import '@material/web/radio/radio.js'; import '@material/web/icon/icon.js'; @@ -208,7 +208,7 @@ const contacts: MaterialStoryInit = { .stacked=${stacked} > - close + close Create new contact
@@ -250,7 +250,7 @@ const floatingSheet: MaterialStoryInit = { > Floating Sheet - close + close
This is a floating sheet with title. Floating sheets offer no action buttons at the bottom, diff --git a/docs/components/figures/iconbutton/buttons.html b/docs/components/figures/iconbutton/buttons.html index f9ff16779..00418a65e 100644 --- a/docs/components/figures/iconbutton/buttons.html +++ b/docs/components/figures/iconbutton/buttons.html @@ -37,13 +37,13 @@
- + favorite - - + + bookmark bookmark - +
1
@@ -63,4 +63,4 @@
-
\ No newline at end of file + diff --git a/docs/components/figures/iconbutton/theming-standard.html b/docs/components/figures/iconbutton/theming-standard.html index 438fb980c..5fa207461 100644 --- a/docs/components/figures/iconbutton/theming-standard.html +++ b/docs/components/figures/iconbutton/theming-standard.html @@ -15,8 +15,8 @@ --md-sys-color-on-surface-variant: #dc362e; } - + check - + - \ No newline at end of file + diff --git a/docs/components/figures/iconbutton/usage-standard.html b/docs/components/figures/iconbutton/usage-standard.html index 4ad5988e7..c92962fd1 100644 --- a/docs/components/figures/iconbutton/usage-standard.html +++ b/docs/components/figures/iconbutton/usage-standard.html @@ -3,8 +3,8 @@ style="justify-content:center;gap: 8px;" title="Standard Icon Button with Check icon" aria-label="A check icon"> - + check - + - \ No newline at end of file + diff --git a/docs/components/figures/iconbutton/usage-toggle.html b/docs/components/figures/iconbutton/usage-toggle.html index f7ed1f71e..b2d0f2ced 100644 --- a/docs/components/figures/iconbutton/usage-toggle.html +++ b/docs/components/figures/iconbutton/usage-toggle.html @@ -3,10 +3,10 @@ style="gap:8px;flex-direction:column;padding-block:8px;" aria-label="Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected">
- + close check - + close check @@ -21,10 +21,10 @@
- + close check - + close check @@ -39,4 +39,4 @@
- \ No newline at end of file + diff --git a/docs/components/figures/iconbutton/usage.html b/docs/components/figures/iconbutton/usage.html index c4b7d90e5..8121567f2 100644 --- a/docs/components/figures/iconbutton/usage.html +++ b/docs/components/figures/iconbutton/usage.html @@ -3,9 +3,9 @@ style="justify-content:center;gap: 8px;" title="Icon buttons can be used within other components, such as a bottom app bar" aria-label="A row of icon buttons"> - + check - + check @@ -16,4 +16,4 @@ check - \ No newline at end of file + diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md index eb01cf2fa..e719f49e5 100644 --- a/docs/components/icon-button.md +++ b/docs/components/icon-button.md @@ -60,7 +60,7 @@ people take supplementary actions with a single tap. -1. [Standard Icon Button](#standard-icon-button) +1. [Icon Button](#icon-button) 2. [Filled Icon Button](#filled-icon-button) 3. [Filled Tonal Icon Button](#filled-tonal-icon-button) 4. [Outlined Icon Button](#outlined-icon-button) @@ -85,9 +85,9 @@ the icon font. ```html - + check - + check @@ -108,9 +108,9 @@ and optionally a attribute to turn the icon button into a link. ```html - + check - + ``` ### Toggle @@ -129,10 +129,10 @@ adding or removing something from favorites. ```html
- + close check - + close check @@ -147,10 +147,10 @@ adding or removing something from favorites.
- + close check - + close check @@ -173,9 +173,9 @@ Add an attribute to buttons whose labels need a more descriptive label. ```html - + search - + ``` ### Toggle @@ -184,17 +184,15 @@ Add a `selected-aria-label` attribute to toggle buttons whose labels need a more descriptive label when selected. ```html - close check - + ``` -## Standard Icon Button - - +## Icon Button Use [icon buttons](https://m3.material.io/components/icon-buttons/guidelines) @@ -212,9 +210,9 @@ Icon buttons can be grouped together or they can stand alone. ```html - + check - + ``` ## Filled Icon Button @@ -285,7 +283,7 @@ filled tonal icon button. Icon Button supports [Material theming](../theming.md) and can be customized in terms of color, and shape. -### Standard Icon Button tokens +### Icon Button tokens Token | Default value ---------------------------------------- | ----------------------------------- @@ -296,7 +294,7 @@ Token | Default value * [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-icon-button.scss) -### Standard Icon Button example +### Icon Button example @@ -314,9 +312,9 @@ Token | Default value } - + check - + ``` ### Filled Icon Button tokens diff --git a/iconbutton/_standard-icon-button.scss b/iconbutton/_icon-button.scss similarity index 57% rename from iconbutton/_standard-icon-button.scss rename to iconbutton/_icon-button.scss index d9c83ba58..7f8b5cb58 100644 --- a/iconbutton/_standard-icon-button.scss +++ b/iconbutton/_icon-button.scss @@ -3,4 +3,4 @@ // SPDX-License-Identifier: Apache-2.0 // -@forward './internal/standard-icon-button' show theme; +@forward './internal/icon-button' show theme; diff --git a/iconbutton/demo/stories.ts b/iconbutton/demo/stories.ts index 941fa887f..3c700f4d5 100644 --- a/iconbutton/demo/stories.ts +++ b/iconbutton/demo/stories.ts @@ -8,7 +8,7 @@ import '@material/web/icon/icon.js'; import '@material/web/iconbutton/filled-icon-button.js'; import '@material/web/iconbutton/filled-tonal-icon-button.js'; import '@material/web/iconbutton/outlined-icon-button.js'; -import '@material/web/iconbutton/standard-icon-button.js'; +import '@material/web/iconbutton/icon-button.js'; import {isRtl} from '@material/web/internal/controller/is-rtl.js'; import {MaterialStoryInit} from './material-collection.js'; @@ -29,25 +29,25 @@ export interface StoryKnobs { } const standard: MaterialStoryInit = { - name: '', + name: '', render(knobs) { const {icon, ariaLabel, disabled, flipIconInRtl} = knobs; return html` - ${icon} - `; + `; } }; const link: MaterialStoryInit = { - name: ' link', + name: ' link', render(knobs) { const {icon, ariaLabel, href, target, disabled, flipIconInRtl} = knobs; return html` - = { .target="${target}" ${ref(rtlRefCallback(knobs))}> ${icon} - `; + `; } }; const toggle: MaterialStoryInit = { - name: ' toggle', + name: ' toggle', render(knobs) { const { icon, @@ -70,7 +70,7 @@ const toggle: MaterialStoryInit = { disabled, } = knobs; return html` - = { html`${selectedIcon}` : nothing} ${icon} - `; + `; } }; const outlined: MaterialStoryInit = { diff --git a/iconbutton/standard-icon-button.ts b/iconbutton/icon-button.ts similarity index 87% rename from iconbutton/standard-icon-button.ts rename to iconbutton/icon-button.ts index bd220316e..2f65a720e 100644 --- a/iconbutton/standard-icon-button.ts +++ b/iconbutton/icon-button.ts @@ -12,7 +12,7 @@ import {styles} from './internal/standard-styles.css.js'; declare global { interface HTMLElementTagNameMap { - 'md-standard-icon-button': MdStandardIconButton; + 'md-icon-button': MdIconButton; } } @@ -31,8 +31,8 @@ declare global { * - Add to Favorites * - Print */ -@customElement('md-standard-icon-button') -export class MdStandardIconButton extends IconButton { +@customElement('md-icon-button') +export class MdIconButton extends IconButton { static override styles = [sharedStyles, styles]; protected override getRenderClasses() { diff --git a/iconbutton/icon-button_test.ts b/iconbutton/icon-button_test.ts index f743f6995..b8a34c206 100644 --- a/iconbutton/icon-button_test.ts +++ b/iconbutton/icon-button_test.ts @@ -5,7 +5,7 @@ */ import '../icon/icon.js'; -import './standard-icon-button.js'; +import './icon-button.js'; import {html} from 'lit'; @@ -14,20 +14,20 @@ import {Environment} from '../testing/environment.js'; import {IconButtonHarness} from './harness.js'; const ICON_BUTTON_TEMPLATE = html` - + star - + `; const LINK_ICON_BUTTON_TEMPLATE = html` - + star - + `; const ICON_BUTTON_TOGGLE_TEMPLATE = html` - + star star_border - + `; interface IconButtonInternals { @@ -37,7 +37,7 @@ interface IconButtonInternals { describe('icon button tests', () => { const env = new Environment(); - describe('md-standard-icon-button', () => { + describe('md-icon-button', () => { it('setting `disabled` updates the disabled attribute on the native ' + 'button element', async () => { @@ -65,7 +65,7 @@ describe('icon button tests', () => { }); }); - describe('md-standard-icon-button link', () => { + describe('md-icon-button link', () => { it('setting `ariaLabel` updates the aria-label attribute on the anchor' + 'tag', async () => { @@ -79,7 +79,7 @@ describe('icon button tests', () => { }); }); - describe('md-standard-icon-button toggle', () => { + describe('md-icon-button toggle', () => { it('setting `disabled` updates the disabled attribute on the native ' + 'button element', async () => { @@ -165,12 +165,11 @@ describe('icon button tests', () => { it('if `flipsIconInRtl=true`, flips icon in an RTL context', async () => { const template = html`
- + star - +
`; - const element = - env.render(template).querySelector('md-standard-icon-button')!; + const element = env.render(template).querySelector('md-icon-button')!; await env.waitForStability(); expect((element as unknown as IconButtonInternals).flipIcon).toBeTrue(); @@ -180,13 +179,11 @@ describe('icon button tests', () => { async () => { const template = html`
- + star - +
`; - const element = - env.render(template).querySelector('md-standard-icon-button')!; + const element = env.render(template).querySelector('md-icon-button')!; await env.waitForStability(); expect((element as unknown as IconButtonInternals).flipIcon) @@ -210,8 +207,7 @@ describe('icon button tests', () => { throw new Error('Invalid tag name: ' + type); } - const element = - env.render(template).querySelector('md-standard-icon-button')!; + const element = env.render(template).querySelector('md-icon-button')!; await env.waitForStability(); return { element, diff --git a/iconbutton/internal/_standard-icon-button.scss b/iconbutton/internal/_icon-button.scss similarity index 100% rename from iconbutton/internal/_standard-icon-button.scss rename to iconbutton/internal/_icon-button.scss diff --git a/iconbutton/internal/standard-styles.scss b/iconbutton/internal/standard-styles.scss index c242ac8b5..48ba6aa9a 100644 --- a/iconbutton/internal/standard-styles.scss +++ b/iconbutton/internal/standard-styles.scss @@ -4,7 +4,7 @@ // // go/keep-sorted start -@use './standard-icon-button'; +@use './icon-button'; // go/keep-sorted end -@include standard-icon-button.styles; +@include icon-button.styles; diff --git a/progress/demo/stories.ts b/progress/demo/stories.ts index 9258cbd63..44339ea89 100644 --- a/progress/demo/stories.ts +++ b/progress/demo/stories.ts @@ -8,7 +8,7 @@ import '@material/web/progress/linear-progress.js'; import '@material/web/button/tonal-button.js'; import '@material/web/icon/icon.js'; -import '@material/web/iconbutton/standard-icon-button.js'; +import '@material/web/iconbutton/icon-button.js'; import '@material/web/progress/circular-progress.js'; import {MaterialStoryInit} from './material-collection.js'; @@ -102,7 +102,7 @@ const components: MaterialStoryInit = { width: 48px; } - .around-icon md-standard-icon-button { + .around-icon md-icon-button { inset: 0; margin: auto; position: absolute; @@ -146,13 +146,13 @@ const components: MaterialStoryInit = {
- play_arrow pause - +
`; diff --git a/tabs/demo/stories.ts b/tabs/demo/stories.ts index c2a1f5b82..b6d179a13 100644 --- a/tabs/demo/stories.ts +++ b/tabs/demo/stories.ts @@ -5,7 +5,7 @@ */ import '@material/web/icon/icon.js'; -import '@material/web/iconbutton/standard-icon-button.js'; +import '@material/web/iconbutton/icon-button.js'; import '@material/web/tabs/tabs.js'; import {MaterialStoryInit} from './material-collection.js'; @@ -385,14 +385,13 @@ const dynamic: MaterialStoryInit = { return html`
- add - remove - chevron_left - chevron_right + add + remove + chevron_left + chevron_right