fix(button)!: merge standard and link buttons

PiperOrigin-RevId: 520365410
material-components · Mar 29, 2023 · acfdbb4 · acfdbb4
1 parent 123c1e0
commit acfdbb4
Show file tree

Hide file tree

Showing 17 changed files with 50 additions and 434 deletions.
diff --git a/button/elevated-link-button.ts b/button/elevated-link-button.ts
diff --git a/button/filled-link-button.ts b/button/filled-link-button.ts
diff --git 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`
-      <button
-          class="md3-button ${classMap(this.getRenderClasses())}"
-          ?disabled="${this.disabled}"
-          aria-label="${this.ariaLabel || nothing}"
-          aria-haspopup="${this.ariaHasPopup || nothing}"
-          aria-expanded="${this.ariaExpanded || nothing}"
-          @pointerdown="${this.handlePointerDown}"
-          @focus="${this.handleFocus}"
-          @blur="${this.handleBlur}"
-          @click="${this.handleClick}"
-          ${ripple(this.getRipple)}>
+    // Link buttons may not be disabled
+    const isDisabled = this.disabled && !this.href;
+
+    const button = this.href ? literal`a` : literal`button`;
+    return staticHtml`
+      <${button}
+        class="md3-button ${classMap(this.getRenderClasses())}"
+        ?disabled=${isDisabled}
+        aria-label="${this.ariaLabel || nothing}"
+        aria-haspopup="${this.ariaHasPopup || nothing}"
+        aria-expanded="${this.ariaExpanded || nothing}"
+        href=${this.href || nothing}
+        target=${this.target || nothing}
+        @pointerdown="${this.handlePointerDown}"
+        @focus="${this.handleFocus}"
+        @blur="${this.handleBlur}"
+        @click="${this.handleClick}"
+        ${ripple(this.getRipple)}
+      >
         ${this.renderFocusRing()}
         ${this.renderElevation()}
         ${when(this.showRipple, this.renderRipple)}
@@ -133,7 +153,7 @@ export abstract class Button extends LitElement implements ButtonState {
         ${this.renderLeadingIcon()}
         ${this.renderLabel()}
         ${this.renderTrailingIcon()}
-      </button>`;
+      </${button}}>`;
   }
 
   protected getRenderClasses(): ClassInfo {

diff --git 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
diff --git 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`<md-elevation shadow surface></md-elevation>`;
   }

diff --git a/button/lib/filled-link-button.ts b/button/lib/filled-link-button.ts
diff --git a/button/lib/link-button.ts b/button/lib/link-button.ts
diff --git 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
diff --git 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