From acfdbb4f9273fe1a62430ec7a8857cca391674cb Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 29 Mar 2023 09:57:14 -0700 Subject: [PATCH] fix(button)!: merge standard and link buttons PiperOrigin-RevId: 520365410 --- button/elevated-link-button.ts | 46 -------------------- button/filled-link-button.ts | 43 ------------------ button/lib/button.ts | 50 ++++++++++++++------- button/lib/elevated-button.ts | 4 +- button/lib/elevated-link-button.ts | 26 ----------- button/lib/filled-button.ts | 5 ++- button/lib/filled-link-button.ts | 27 ------------ button/lib/link-button.ts | 70 ------------------------------ button/lib/outlined-button.ts | 4 +- button/lib/outlined-link-button.ts | 24 ---------- button/lib/text-button.ts | 4 +- button/lib/text-link-button.ts | 19 -------- button/lib/tonal-button.ts | 5 ++- button/lib/tonal-link-button.ts | 27 ------------ button/outlined-link-button.ts | 44 ------------------- button/text-link-button.ts | 42 ------------------ button/tonal-link-button.ts | 44 ------------------- 17 files changed, 50 insertions(+), 434 deletions(-) delete mode 100644 button/elevated-link-button.ts delete mode 100644 button/filled-link-button.ts delete mode 100644 button/lib/elevated-link-button.ts delete mode 100644 button/lib/filled-link-button.ts delete mode 100644 button/lib/link-button.ts delete mode 100644 button/lib/outlined-link-button.ts delete mode 100644 button/lib/text-link-button.ts delete mode 100644 button/lib/tonal-link-button.ts delete mode 100644 button/outlined-link-button.ts delete mode 100644 button/text-link-button.ts delete mode 100644 button/tonal-link-button.ts diff --git a/button/elevated-link-button.ts b/button/elevated-link-button.ts deleted file mode 100644 index 2a6f71eed8..0000000000 --- a/button/elevated-link-button.ts +++ /dev/null @@ -1,46 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; - -import {ElevatedLinkButton} from './lib/elevated-link-button.js'; -import {styles as elevatedStyles} from './lib/elevated-styles.css.js'; -import {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js'; -import {styles as sharedStyles} from './lib/shared-styles.css.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-elevated-link-button': MdElevatedLinkButton; - } -} - -/** - * @summary Buttons help people take action, such as sending an email, sharing a - * document, or liking a comment. This is a linkable variant. - * - * @description - * __Emphasis:__ Medium emphasis – For important actions that don’t distract - * from other onscreen elements. - * - * __Rationale:__ Elevated buttons are essentially filled buttons with a lighter - * background color and a shadow. To prevent shadow creep, only use them when - * absolutely necessary, such as when the button requires visual separation from - * a patterned background. - * - * __Example usages:__ - * - Reply - * - View all - * - Add to cart - * - Take out of trash - * - * @final - * @suppress {visibility} - */ -@customElement('md-elevated-link-button') -export class MdElevatedLinkButton extends ElevatedLinkButton { - static override styles = - [sharedStyles, sharedElevationStyles, elevatedStyles]; -} diff --git a/button/filled-link-button.ts b/button/filled-link-button.ts deleted file mode 100644 index 34830e1f55..0000000000 --- a/button/filled-link-button.ts +++ /dev/null @@ -1,43 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; - -import {FilledLinkButton} from './lib/filled-link-button.js'; -import {styles as filledStyles} from './lib/filled-styles.css.js'; -import {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js'; -import {styles as sharedStyles} from './lib/shared-styles.css.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-filled-link-button': MdFilledLinkButton; - } -} - -/** - * @summary Buttons help people take action, such as sending an email, sharing a - * document, or liking a comment. This is a linkable variant. - * - * @description - * __Emphasis:__ High emphasis – For the primary, most important, or most common - * action on a screen - * - * __Rationale:__ The filled button’s contrasting surface color makes it the - * most prominent button after the FAB. It’s used for final or unblocking - * actions in a flow. - * - * __Example usages:__ - * - Save - * - Confirm - * - Done - * - * @final - * @suppress {visibility} - */ -@customElement('md-filled-link-button') -export class MdFilledLinkButton extends FilledLinkButton { - static override styles = [sharedStyles, sharedElevationStyles, filledStyles]; -} diff --git a/button/lib/button.ts b/button/lib/button.ts index 0b274e24df..5570dee653 100644 --- a/button/lib/button.ts +++ b/button/lib/button.ts @@ -14,6 +14,7 @@ import {html, LitElement, nothing, TemplateResult} from 'lit'; import {property, query, queryAssignedElements, queryAsync, state} from 'lit/decorators.js'; import {ClassInfo, classMap} from 'lit/directives/class-map.js'; import {when} from 'lit/directives/when.js'; +import {html as staticHtml, literal} from 'lit/static-html.js'; import {dispatchActivationClick, isActivationClick} from '../../controller/events.js'; import {ariaProperty} from '../../decorators/aria-property.js'; @@ -24,7 +25,9 @@ import {ARIAExpanded, ARIAHasPopup} from '../../types/aria.js'; import {ButtonState} from './state.js'; -// tslint:disable-next-line:enforce-comments-on-exported-symbols +/** + * A button component. + */ export abstract class Button extends LitElement implements ButtonState { static override shadowRootOptions: ShadowRootInit = {mode: 'open', delegatesFocus: true}; @@ -46,6 +49,17 @@ export abstract class Button extends LitElement implements ButtonState { */ @property({type: Boolean, reflect: true}) disabled = false; + /** + * The URL that the link button points to. + */ + @property({type: String}) href?: string; + + /** + * Where to display the linked `href` URL for a link button. Common options + * include `_blank` to open in a new tab. + */ + @property({type: String}) target?: string; + /** * Whether to render the icon at the inline end of the label rather than the * inline start. @@ -112,19 +126,25 @@ export abstract class Button extends LitElement implements ButtonState { }; protected override render(): TemplateResult { - // TODO(b/237283903): Replace ifDefined(... || undefined) with ifTruthy(...) - return html` - `; + `; } protected getRenderClasses(): ClassInfo { diff --git a/button/lib/elevated-button.ts b/button/lib/elevated-button.ts index 898d85f20b..49f967f417 100644 --- a/button/lib/elevated-button.ts +++ b/button/lib/elevated-button.ts @@ -11,7 +11,9 @@ import {ClassInfo} from 'lit/directives/class-map.js'; import {Button} from './button.js'; -// tslint:disable-next-line:enforce-comments-on-exported-symbols +/** + * An elevated button component. + */ export class ElevatedButton extends Button { protected override getRenderClasses(): ClassInfo { return { diff --git a/button/lib/elevated-link-button.ts b/button/lib/elevated-link-button.ts deleted file mode 100644 index 5668e7ef55..0000000000 --- a/button/lib/elevated-link-button.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import '../../elevation/elevation.js'; - -import {html, TemplateResult} from 'lit'; -import {ClassInfo} from 'lit/directives/class-map.js'; - -import {LinkButton} from './link-button.js'; - -// tslint:disable-next-line:enforce-comments-on-exported-symbols -export class ElevatedLinkButton extends LinkButton { - protected override getRenderClasses(): ClassInfo { - return { - ...super.getRenderClasses(), - 'md3-button--elevated': true, - }; - } - - protected override renderElevation(): TemplateResult { - return html``; - } -} diff --git a/button/lib/filled-button.ts b/button/lib/filled-button.ts index f6945fe7e3..22abb1b9aa 100644 --- a/button/lib/filled-button.ts +++ b/button/lib/filled-button.ts @@ -11,7 +11,9 @@ import {ClassInfo} from 'lit/directives/class-map.js'; import {Button} from './button.js'; -// tslint:disable-next-line:enforce-comments-on-exported-symbols +/** + * A filled button component. + */ export class FilledButton extends Button { protected override getRenderClasses(): ClassInfo { return { @@ -20,7 +22,6 @@ export class FilledButton extends Button { }; } - /** @soyTemplate */ protected override renderElevation(): TemplateResult { return html``; } diff --git a/button/lib/filled-link-button.ts b/button/lib/filled-link-button.ts deleted file mode 100644 index 0bc8c62b4e..0000000000 --- a/button/lib/filled-link-button.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import '../../elevation/elevation.js'; - -import {html, TemplateResult} from 'lit'; -import {ClassInfo} from 'lit/directives/class-map.js'; - -import {LinkButton} from './link-button.js'; - -// tslint:disable-next-line:enforce-comments-on-exported-symbols -export class FilledLinkButton extends LinkButton { - protected override getRenderClasses(): ClassInfo { - return { - ...super.getRenderClasses(), - 'md3-button--filled': true, - }; - } - - /** @soyTemplate */ - protected override renderElevation(): TemplateResult { - return html``; - } -} diff --git a/button/lib/link-button.ts b/button/lib/link-button.ts deleted file mode 100644 index 7a7b2a809d..0000000000 --- a/button/lib/link-button.ts +++ /dev/null @@ -1,70 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {html, TemplateResult} from 'lit'; -import {property} from 'lit/decorators.js'; -import {ClassInfo, classMap} from 'lit/directives/class-map.js'; -import {ifDefined} from 'lit/directives/if-defined.js'; -import {when} from 'lit/directives/when.js'; - -import {ripple} from '../../ripple/directive.js'; - -import {Button} from './button.js'; - -/** - * Note that we cast `linkTarget` to this type, below. The Lit compiler - * enforces the `target` attribute value to be of this type, but this is not - * compatible with the generated Wit Soy/JS, which expects `linkTarget` - * to be a string type. - */ -type LinkTarget = '_blank'|'_parent'|'_self'|'_top'; - -// tslint:disable-next-line:enforce-comments-on-exported-symbols -export abstract class LinkButton extends Button { - /** - * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute. - */ - @property({type: String}) href!: string; - - /** - * Sets the underlying `HTMLAnchorElement`'s `target` attribute. - */ - @property({type: String}) target!: string; - - /** - * Link buttons cannot be disabled. - */ - override disabled = false; - - // Note: link buttons cannot have trailing icons. - protected override getRenderClasses(): ClassInfo { - return { - 'md3-button--icon-leading': this.hasIcon, - }; - } - - protected override render(): TemplateResult { - return html` - - - ${this.renderFocusRing()} - ${this.renderElevation()} - ${when(this.showRipple, this.renderRipple)} - ${this.renderOutline()} - ${this.renderTouchTarget()} - ${this.renderIcon()} - ${this.renderLabel()} - `; - } -} diff --git a/button/lib/outlined-button.ts b/button/lib/outlined-button.ts index 2d439f37dc..01cee566f9 100644 --- a/button/lib/outlined-button.ts +++ b/button/lib/outlined-button.ts @@ -9,7 +9,9 @@ import {ClassInfo} from 'lit/directives/class-map.js'; import {Button} from './button.js'; -// tslint:disable-next-line:enforce-comments-on-exported-symbols +/** + * An outlined button component. + */ export class OutlinedButton extends Button { protected override getRenderClasses(): ClassInfo { return { diff --git a/button/lib/outlined-link-button.ts b/button/lib/outlined-link-button.ts deleted file mode 100644 index 3619a0e008..0000000000 --- a/button/lib/outlined-link-button.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {html, TemplateResult} from 'lit'; -import {ClassInfo} from 'lit/directives/class-map.js'; - -import {LinkButton} from './link-button.js'; - -// tslint:disable-next-line:enforce-comments-on-exported-symbols -export class OutlinedLinkButton extends LinkButton { - protected override getRenderClasses(): ClassInfo { - return { - ...super.getRenderClasses(), - 'md3-button--outlined': true, - }; - } - - protected override renderOutline(): TemplateResult { - return html``; - } -} diff --git a/button/lib/text-button.ts b/button/lib/text-button.ts index a6a55663e2..460911e82c 100644 --- a/button/lib/text-button.ts +++ b/button/lib/text-button.ts @@ -8,7 +8,9 @@ import {ClassInfo} from 'lit/directives/class-map.js'; import {Button} from './button.js'; -// tslint:disable-next-line:enforce-comments-on-exported-symbols +/** + * A text button component. + */ export class TextButton extends Button { protected override getRenderClasses(): ClassInfo { return { diff --git a/button/lib/text-link-button.ts b/button/lib/text-link-button.ts deleted file mode 100644 index 8d09b6a146..0000000000 --- a/button/lib/text-link-button.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {ClassInfo} from 'lit/directives/class-map.js'; - -import {LinkButton} from './link-button.js'; - -// tslint:disable-next-line:enforce-comments-on-exported-symbols -export class TextLinkButton extends LinkButton { - protected override getRenderClasses(): ClassInfo { - return { - ...super.getRenderClasses(), - 'md3-button--text': true, - }; - } -} diff --git a/button/lib/tonal-button.ts b/button/lib/tonal-button.ts index 6d5c392991..6b836ac823 100644 --- a/button/lib/tonal-button.ts +++ b/button/lib/tonal-button.ts @@ -11,7 +11,9 @@ import {ClassInfo} from 'lit/directives/class-map.js'; import {Button} from './button.js'; -// tslint:disable-next-line:enforce-comments-on-exported-symbols +/** + * A tonal button component. + */ export class TonalButton extends Button { protected override getRenderClasses(): ClassInfo { return { @@ -20,7 +22,6 @@ export class TonalButton extends Button { }; } - /** @soyTemplate */ protected override renderElevation(): TemplateResult { return html``; } diff --git a/button/lib/tonal-link-button.ts b/button/lib/tonal-link-button.ts deleted file mode 100644 index 630209de01..0000000000 --- a/button/lib/tonal-link-button.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import '../../elevation/elevation.js'; - -import {html, TemplateResult} from 'lit'; -import {ClassInfo} from 'lit/directives/class-map.js'; - -import {LinkButton} from './link-button.js'; - -// tslint:disable-next-line:enforce-comments-on-exported-symbols -export class TonalLinkButton extends LinkButton { - protected override getRenderClasses(): ClassInfo { - return { - ...super.getRenderClasses(), - 'md3-button--tonal': true, - }; - } - - /** @soyTemplate */ - protected override renderElevation(): TemplateResult { - return html``; - } -} diff --git a/button/outlined-link-button.ts b/button/outlined-link-button.ts deleted file mode 100644 index 6428d6b53e..0000000000 --- a/button/outlined-link-button.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; - -import {OutlinedLinkButton} from './lib/outlined-link-button.js'; -import {styles as outlinedStyles} from './lib/outlined-styles.css.js'; -import {styles as sharedStyles} from './lib/shared-styles.css.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-outlined-link-button': MdOutlinedLinkButton; - } -} - -/** - * @summary Buttons help people take action, such as sending an email, sharing a - * document, or liking a comment. This is a linkable variant. - * - * @description - * __Emphasis:__ Medium emphasis – For important actions that don’t distract - * from other onscreen elements. - * - * __Rationale:__ Use an outlined button for actions that need attention but - * aren’t the primary action, such as “See all” or “Add to cart.” This is also - * the button to use for giving someone the opportunity to change their mind or - * escape a flow. - * - * __Example usages:__ - * - Reply - * - View all - * - Add to cart - * - Take out of trash - * - * @final - * @suppress {visibility} - */ -@customElement('md-outlined-link-button') -export class MdOutlinedLinkButton extends OutlinedLinkButton { - static override styles = [sharedStyles, outlinedStyles]; -} diff --git a/button/text-link-button.ts b/button/text-link-button.ts deleted file mode 100644 index 1a03008fd3..0000000000 --- a/button/text-link-button.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; - -import {styles as sharedStyles} from './lib/shared-styles.css.js'; -import {TextLinkButton} from './lib/text-link-button.js'; -import {styles as textStyles} from './lib/text-styles.css.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-text-link-button': MdTextLinkButton; - } -} - -/** - * @summary Buttons help people take action, such as sending an email, sharing a - * document, or liking a comment. This is a linkable variant. - * - * @description - * __Emphasis:__ Low emphasis – For optional or supplementary actions with the - * least amount of prominence - * - * __Rationale:__ Text buttons have less visual prominence, so should be used - * for low emphasis actions, such as an alternative option. - * - * __Example usages:__ - * - Learn more - * - View all - * - Change account - * - Turn on - * - * @final - * @suppress {visibility} - */ -@customElement('md-text-link-button') -export class MdTextLinkButton extends TextLinkButton { - static override styles = [sharedStyles, textStyles]; -} diff --git a/button/tonal-link-button.ts b/button/tonal-link-button.ts deleted file mode 100644 index fff88499b4..0000000000 --- a/button/tonal-link-button.ts +++ /dev/null @@ -1,44 +0,0 @@ -/** - * @license - * Copyright 2021 Google LLC - * SPDX-License-Identifier: Apache-2.0 - */ - -import {customElement} from 'lit/decorators.js'; - -import {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js'; -import {styles as sharedStyles} from './lib/shared-styles.css.js'; -import {TonalLinkButton} from './lib/tonal-link-button.js'; -import {styles as tonalStyles} from './lib/tonal-styles.css.js'; - -declare global { - interface HTMLElementTagNameMap { - 'md-tonal-link-button': MdTonalLinkButton; - } -} - -/** - * @summary Buttons help people take action, such as sending an email, sharing a - * document, or liking a comment. This is a linkable variant. - * - * @description - * __Emphasis:__ Medium emphasis – For important actions that don’t distract - * from other onscreen elements. - * - * __Rationale:__ Filled tonal buttons have a lighter background color and - * darker label color, making them less visually prominent than a regular, - * filled button. They’re still used for final or unblocking actions in a flow, - * but do so with less emphasis. - * - * __Example usages:__ - * - Save - * - Confirm - * - Done - * - * @final - * @suppress {visibility} - */ -@customElement('md-tonal-link-button') -export class MdTonalLinkButton extends TonalLinkButton { - static override styles = [sharedStyles, sharedElevationStyles, tonalStyles]; -}