@api-client/ui 0.2.13 → 0.3.1

package/src/elements/http/HttpAssertions.element.ts

@@ -6,7 +6,7 @@ import { HttpFlowsUi, StepsTarget } from './HttpFlowsUi.js'
 import type SwitchElement from '../../md/switch/internals/SwitchElement.js'
 import type Input from '../../md/input/Input.js'
 import UiDialog, { UiDialogClosingReason } from '../../md/dialog/internals/Dialog.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/switch/ui-switch.js'
 import '../../md/dialog/ui-dialog.js'
 import '../../md/divider/ui-divider.js'
@@ -165,7 +165,7 @@ export default class HttpAssertions extends HttpFlowsUi {
   protected renderActionButtons(): TemplateResult {
     return html`
       <div class="editor-actions">
-        <ui-filled-tonal-button @click="${this.handleAdd}" class="add-button">Add</ui-filled-tonal-button>
+        <ui-button color="tonal" @click="${this.handleAdd}" class="add-button">Add</ui-button>
       </div>
     `
   }

package/src/elements/http/HttpFlows.element.ts

@@ -11,7 +11,7 @@ import { HttpFlowsUi, StepsTarget } from './HttpFlowsUi.js'
 import '../../md/list/ui-list.js'
 import '../../md/list/ui-list-item.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
-import '../../md/button/ui-outlined-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/divider/ui-divider.js'
 import '../../md/dialog/ui-dialog.js'
 import '../dialog/rename-dialog.js'
@@ -451,10 +451,10 @@ export default class HttpFlows extends HttpFlowsUi {
     const label = trigger === 'request' ? 'Pre-request' : 'Post-request'
     return html`
       <ui-dropdown-list @select="${this.handleTriggerSelect}" horizontalAlign="right" closeOnOutsideClick>
-        <ui-outlined-button class="new-button">
+        <ui-button color="outlined" class="new-button">
           <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
           ${label}
-        </ui-outlined-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu">
           <ui-list-item data-trigger="request" role="menuitem" title="Select pre-request flows"
             >Pre-request</ui-list-item
@@ -474,10 +474,10 @@ export default class HttpFlows extends HttpFlowsUi {
     const hasItems = !!items.length
     return html`
       <ui-dropdown-list @select="${this.handleFlowSelect}" horizontalAlign="right" closeOnOutsideClick>
-        <ui-outlined-button class="new-button">
+        <ui-button color="outlined" class="new-button">
           <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
           ${label}
-        </ui-outlined-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu">
           ${hasItems
             ? html`
@@ -569,7 +569,7 @@ export default class HttpFlows extends HttpFlowsUi {
     return html`
       <div class="empty-message">Create a flow to get started.</div>
       <div class="empty-message">
-        <ui-outlined-button @click="${this.handleAdd}" class="empty-button">Create</ui-outlined-button>
+        <ui-button color="outlined" @click="${this.handleAdd}" class="empty-button">Create</ui-button>
       </div>
     `
   }

package/src/elements/http/RequestEditor.ts

@@ -37,9 +37,7 @@ import '../../define/http/http-request-config.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
 import '../../md/list/ui-list.js'
 import '../../md/list/ui-list-item.js'
-import '../../md/button/ui-text-button.js'
-import '../../md/button/ui-filled-button.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/tabs/ui-tabs.js'
 import '../../md/tabs/ui-tab.js'
 import '../../md/divider/ui-divider.js'
@@ -769,10 +767,10 @@ export default class RequestEditor extends ApiElement {
         class="verb-dropdown"
         closeOnOutsideClick
       >
-        <ui-text-button class="button">
+        <ui-button color="text" class="button">
           ${method}
           <ui-icon icon="arrowDropDown"></ui-icon>
-        </ui-text-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu"> ${this.renderHttpVerbOptions()} </ui-list>
       </ui-dropdown-list>
     `
@@ -816,11 +814,11 @@ export default class RequestEditor extends ApiElement {
   protected renderSendButton(): TemplateResult | string {
     if (this.loading) {
       return html`
-        <ui-filled-button title="Abort the request" class="send-button" @click="${this.abort}">Abort</ui-filled-button>
+        <ui-button color="filled" title="Abort the request" class="send-button" @click="${this.abort}">Abort</ui-button>
       `
     }
     return html`
-      <ui-filled-button title="Send the request" class="send-button" @click="${this.send}">Send</ui-filled-button>
+      <ui-button color="filled" title="Send the request" class="send-button" @click="${this.send}">Send</ui-button>
     `
   }
 
@@ -950,14 +948,15 @@ export default class RequestEditor extends ApiElement {
     const toRender: string[] = all.filter((type) => !current.some((i) => i.type === type))
     return html`
       <ui-dropdown-list verticalAlign="top" @select="${this.handleAuthAdd}" class="auth-dropdown" closeOnOutsideClick>
-        <ui-filled-tonal-button
+        <ui-button
+          color="tonal"
           title="Add authorization option"
           aria-label="Opens a menu to select authorization option"
           ?disabled="${!toRender.length}"
         >
           <ui-icon icon="arrowDropDown" slot="icon" role="presentation"></ui-icon>
           Add
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu"> ${this.renderAuthorizationOptions(toRender)} </ui-list>
       </ui-dropdown-list>
     `
@@ -1195,8 +1194,8 @@ export default class RequestEditor extends ApiElement {
         <p><b>Do you want to continue?</b></p>
       </div>
 
-      <ui-text-button value="dismiss" slot="button">Cancel request</ui-text-button>
-      <ui-text-button value="confirm" slot="button">Continue</ui-text-button>
+      <ui-button color="text" value="dismiss" slot="button">Cancel request</ui-button>
+      <ui-button color="text" value="confirm" slot="button">Continue</ui-button>
     </ui-dialog>`
   }
 }

package/src/elements/http/UrlParamsForm.ts

@@ -6,7 +6,7 @@ import { UrlEncoder } from '@api-client/core/lib/parsers/UrlEncoder.js'
 import ApiElement from '../ApiElement.js'
 import type Input from '../../md/input/Input.js'
 import type SwitchElement from '../../md/switch/internals/SwitchElement.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/icon-button/ui-icon-button.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
 import '../../md/list/ui-list.js'
@@ -273,9 +273,9 @@ export default class UrlParamsForm extends ApiElement {
   protected renderActionButtons(): TemplateResult {
     return html`
       <div class="editor-actions">
-        <ui-filled-tonal-button @click="${this.handleAdd}">Add</ui-filled-tonal-button>
-        <ui-filled-tonal-button @click="${this.handleEncode}">URL encode</ui-filled-tonal-button>
-        <ui-filled-tonal-button @click="${this.handleDecode}">URL decode</ui-filled-tonal-button>
+        <ui-button color="tonal" @click="${this.handleAdd}">Add</ui-button>
+        <ui-button color="tonal" @click="${this.handleEncode}">URL encode</ui-button>
+        <ui-button color="tonal" @click="${this.handleDecode}">URL decode</ui-button>
         <ui-dropdown-list @select="${this.handleOption}" closeOnOutsideClick class="dropdown">
           <ui-icon-button aria-label="Additional options"
             ><ui-icon icon="moreVert" role="presentation"></ui-icon

package/src/elements/project/HttpProjectRequest.ts

@@ -27,7 +27,7 @@ import { EventTypes } from '../../events/EventTypes.js'
 import { midnightTimestamp } from '../../lib/time/Conversion.js'
 
 import '../../md/icons/ui-icon.js'
-import '../../md/button/ui-text-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
 import '../../md/list/ui-list.js'
 import '../../md/list/ui-list-item.js'
@@ -439,10 +439,10 @@ export default class HttpProjectRequest extends RequestEditor {
         class="environment-dropdown"
         closeOnOutsideClick
       >
-        <ui-text-button class="button">
+        <ui-button color="text" class="button">
           ${currentEnvironmentLabel || 'No environment'}
           <ui-icon icon="arrowDropDown"></ui-icon>
-        </ui-text-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu">
           <ui-list-item
             role="menuitem"

package/src/elements/project/HttpProjectRequestHistory.ts

@@ -17,8 +17,7 @@ import '@github/relative-time-element'
 import type UiIconButton from '../../md/icon-button/internals/IconButton.js'
 import '../../define/http/http-request-log.js'
 import '../../md/icons/ui-icon.js'
-import '../../md/button/ui-filled-tonal-button.js'
-import '../../md/button/ui-text-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
 import '../../md/list/ui-list.js'
 import '../../md/list/ui-list-item.js'
@@ -446,10 +445,10 @@ export default class HttpProjectRequestHistory extends ApiElement {
         closeOnOutsideClick
         @select="${this.handleSelection}"
       >
-        <ui-filled-tonal-button ?disabled="${disabled}">
+        <ui-button color="tonal" ?disabled="${disabled}">
           <ui-icon slot="icon" icon="arrowDropDown"></ui-icon>
           History
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu" aria-label="History list"> ${this.renderHistoryList()} </ui-list>
       </ui-dropdown-list>
     `
@@ -589,8 +588,8 @@ export default class HttpProjectRequestHistory extends ApiElement {
         <ui-icon slot="icon" icon="deleteOutline"></ui-icon>
         <span slot="title">Delete history?</span>
         <p>This will clear responses history for this request.</p>
-        <ui-text-button slot="button" value="dismiss">Cancel</ui-text-button>
-        <ui-text-button slot="button" value="confirm">Accept</ui-text-button>
+        <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
+        <ui-button color="text" slot="button" value="confirm">Accept</ui-button>
       </ui-dialog>
     `
   }

package/src/elements/project/ProjectRunReport.ts

@@ -13,7 +13,7 @@ import type { IResponse } from '@api-client/core/models/Response.js'
 import '@github/relative-time-element'
 import '../../define/http/http-request-log.js'
 import '../../md/icons/ui-icon.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
 import '../../md/list/ui-list.js'
 import '../../md/list/ui-list-item.js'
@@ -228,10 +228,10 @@ export default class ProjectRunReport extends LitElement {
         closeOnOutsideClick
         @select="${this.handleIterationSelection}"
       >
-        <ui-filled-tonal-button>
+        <ui-button color="tonal">
           <ui-icon slot="icon" icon="arrowDropDown"></ui-icon>
           Iteration #${index}
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu" aria-label="Iterations list">
           ${iterations.map((current) => this.renderIterationOption(current.index))}
         </ui-list>
@@ -269,10 +269,10 @@ export default class ProjectRunReport extends LitElement {
         closeOnOutsideClick
         @select="${this.handleRequestSelection}"
       >
-        <ui-filled-tonal-button title="${title}">
+        <ui-button color="tonal" title="${title}">
           <ui-icon slot="icon" icon="arrowDropDown"></ui-icon>
           <span class="request-title-dropdown">${title}</span>
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu" aria-label="History list"> ${options} </ui-list>
       </ui-dropdown-list>
     `
@@ -280,10 +280,10 @@ export default class ProjectRunReport extends LitElement {
 
   protected renderEmptyRequestsList(): TemplateResult {
     return html`
-      <ui-filled-tonal-button disabled>
+      <ui-button color="tonal" disabled>
         <ui-icon slot="icon" icon="arrowDropDown"></ui-icon>
         No requests
-      </ui-filled-tonal-button>
+      </ui-button>
     `
   }
 

package/src/elements/project/ProjectRunner.ts

@@ -17,8 +17,7 @@ import '@github/relative-time-element'
 import '../../define/http-project/project-run-report.js'
 import '../../md/checkbox/ui-checkbox.js'
 import '../../md/text-field/ui-filled-text-field.js'
-import '../../md/button/ui-filled-button.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/progress/ui-progress.js'
 import '../../md/icons/ui-icon.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
@@ -447,7 +446,7 @@ export default class ProjectRunner extends ApiElement {
   protected renderSubmit(): TemplateResult {
     return html`
       <div class="submit-row">
-        <ui-filled-button @click="${this.handleRun}" ?disabled="${this.running}">Run</ui-filled-button>
+        <ui-button color="filled" @click="${this.handleRun}" ?disabled="${this.running}">Run</ui-button>
       </div>
     `
   }
@@ -493,12 +492,12 @@ export default class ProjectRunner extends ApiElement {
           closeOnOutsideClick
           @select="${this.handleHistorySelection}"
         >
-          <ui-filled-tonal-button ?disabled="${disabled}">
+          <ui-button color="tonal" ?disabled="${disabled}">
             <ui-icon slot="icon" icon="arrowDropDown"></ui-icon>
             ${selected
               ? html`<relative-time datetime="${new Date(selected.ended).toISOString()}"></relative-time>`
               : 'History'}
-          </ui-filled-tonal-button>
+          </ui-button>
           <ui-list slot="dropdown" role="menu" aria-label="History list">
             ${history.map((current) => this.renderHistoryOption(current))}
           </ui-list>

package/src/md/button/internals/base.ts

@@ -0,0 +1,299 @@
+import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'
+import { property, query } from 'lit/decorators.js'
+import { UiElement } from '../../UiElement.js'
+import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
+import { isDisabled, setDisabled } from '../../../lib/disabled.js'
+import type UiRipple from '../../ripple/internals/ripple.js'
+
+import '../../ripple/ui-ripple.js'
+import '@material/web/focus/md-focus-ring.js'
+
+export type ButtonType = 'submit' | 'reset' | 'button'
+export type MdButtonShape = 'round' | 'square'
+export type MdButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
+
+/**
+ * A material design button with M3 Expressive features - CSS-native implementation.
+ *
+ * @slot icon - A slot for the icon element
+ * @slot - The default slot for the label
+ * @attribute {string} form - The form associated with this element when the element is outside the form.
+ * @fires {ToggleEvent} toggle - Fired when the `toggle` property is true and the button is clicked,
+ *                               changing its selection state.
+ *                               The event's `newState` and `oldState` properties (string values: 'selected' or
+ *                               'unselected') detail this selection change.
+ */
+export default class BaseButton extends UiElement {
+  static readonly formAssociated = true
+
+  #internals = this.attachInternals()
+
+  /**
+   * The form associated with this element
+   * @attribute
+   */
+  get form(): HTMLFormElement | null | string {
+    return this.#internals.form
+  }
+
+  get validity() {
+    return this.#internals.validity
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage
+  }
+
+  get willValidate() {
+    return this.#internals.willValidate
+  }
+
+  /**
+   * The name of the button, submitted as a pair with the button's value as part of the form data.
+   * @attribute
+   */
+  @property({ type: String }) accessor name: string | undefined
+
+  #value?: string
+
+  get value(): string | undefined {
+    return this.#value
+  }
+
+  /**
+   * Defines the value associated with the button's name when it's submitted with the form data.
+   * @attribute
+   */
+  @property({ type: String })
+  set value(value: string | undefined) {
+    if (this.#value === value) {
+      return
+    }
+    this.#value = value
+    this.#internals?.setFormValue(value || null)
+  }
+
+  /**
+   * Whether to render the icon at the inline end of the label rather than the inline start.
+   * @attribute
+   */
+  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) accessor trailingIcon = false
+
+  /**
+   * The default behavior of the button.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor type: ButtonType = 'button'
+
+  /**
+   * When set, the button is a toggle button.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor toggle = false
+
+  /**
+   * Indicates that the button is currently selected.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor selected = false
+
+  /**
+   * The shape of the button.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor shape: MdButtonShape = 'round'
+
+  /**
+   * The size of the button.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor size: MdButtonSize = 's'
+
+  get disabled(): boolean {
+    return isDisabled(this)
+  }
+
+  /**
+   * When set, the button is in a disabled state.
+   * @attribute
+   */
+  @property({ reflect: true, type: Boolean })
+  set disabled(value: boolean) {
+    const old = isDisabled(this)
+    setDisabled(this, value)
+    this.requestUpdate('disabled', old)
+  }
+
+  @query('ui-ripple') protected accessor ripple!: UiRipple | null
+
+  constructor() {
+    super()
+    this.actionController.cancelKeyboardEvents = true
+    this.addEventListener('keydown', this.handleKeyDown.bind(this))
+    this.addEventListener('keyup', this.handleKeyUp.bind(this))
+    this.addEventListener('click', this.handleClick.bind(this))
+    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))
+    this.addEventListener('pointerup', this.handlePointerUp.bind(this))
+    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))
+    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))
+    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))
+    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'button')
+    }
+    if (!this.hasAttribute('tabindex') && !this.disabled) {
+      this.setAttribute('tabindex', '0')
+    }
+  }
+
+  protected override updated(cp: PropertyValues<this>): void {
+    super.updated(cp)
+
+    // If the button is disabled, remove the tabindex attribute
+    if (cp.has('disabled')) {
+      if (this.disabled) {
+        this.removeAttribute('tabindex')
+      } else if (!this.hasAttribute('tabindex')) {
+        this.setAttribute('tabindex', '0')
+      }
+    }
+
+    if (cp.has('toggle') || cp.has('selected')) {
+      this.updatePressedState()
+    }
+  }
+
+  protected updatePressedState(): void {
+    if (this.toggle) {
+      this.ariaPressed = String(this.selected)
+    } else {
+      this.selected = false
+      this.removeAttribute('aria-pressed')
+    }
+  }
+
+  checkValidity() {
+    return this.#internals.checkValidity()
+  }
+
+  reportValidity() {
+    return this.#internals.reportValidity()
+  }
+
+  protected override firstUpdated(): void {
+    this.#internals?.setFormValue(this.value || null)
+  }
+
+  override beginPress(options: BeginPressConfig): void {
+    super.beginPress(options)
+    this.classList.add('pressed')
+    this.ripple?.beginFocus()
+  }
+
+  override endPress(config: EndPressConfig): void {
+    super.endPress(config)
+    this.classList.remove('pressed')
+    this.ripple?.endFocus()
+    const { cancelled, reason } = config
+    if (cancelled) {
+      return
+    }
+    const allowedReasons = reason === 'enter' || reason === 'space'
+    if (this.type === 'submit' && (!reason || allowedReasons)) {
+      this.handleSubmit()
+    } else if (allowedReasons) {
+      this.click()
+    }
+  }
+
+  override handleClick(e: MouseEvent): void {
+    super.handleClick(e)
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+
+    if (this.toggle) {
+      this.selected = !this.selected
+      const e = new ToggleEvent('toggle', {
+        bubbles: true,
+        composed: true,
+        newState: this.selected ? 'selected' : 'unselected',
+        oldState: this.selected ? 'unselected' : 'selected',
+      })
+      this.dispatchEvent(e)
+    }
+    this.endPress({ cancelled: false, actionData: { event: e } })
+  }
+
+  protected handleSubmit(): void {
+    const { name, value, type, disabled, form } = this
+    if (!form || !type || disabled) {
+      return
+    }
+    const typedForm = form as HTMLFormElement
+    let button: HTMLButtonElement | undefined
+    if (name || value) {
+      button = document.createElement('button')
+      if (name) {
+        button.name = name
+      }
+      if (value) {
+        button.value = value
+      }
+      button.type = type
+      button.hidden = true
+      typedForm.append(button)
+    }
+    try {
+      typedForm.requestSubmit(button)
+    } catch {
+      // Ignore errors
+    }
+    if (button) {
+      typedForm.removeChild(button)
+    }
+  }
+
+  override handlePointerEnter(e: PointerEvent): void {
+    super.handlePointerEnter(e)
+    if (this.ripple) {
+      this.ripple.beginHover(e)
+    }
+  }
+
+  override handlePointerLeave(e: PointerEvent): void {
+    super.handlePointerLeave(e)
+    if (this.ripple) {
+      this.ripple.endHover()
+    }
+  }
+
+  protected override render(): TemplateResult {
+    const { trailingIcon = false } = this
+    const icon = this.renderIcon()
+
+    return html`
+      ${this.renderFocusRing()} ${this.renderRipple()} ${trailingIcon ? nothing : icon}
+      <slot></slot>
+      ${trailingIcon ? icon : nothing}
+    `
+  }
+
+  protected renderIcon(): TemplateResult {
+    return html`<slot name="icon"></slot>`
+  }
+
+  protected renderFocusRing(): TemplateResult {
+    return html`<md-focus-ring part="focus-ring" class="focus-ring" .control="${this as HTMLElement}"></md-focus-ring>`
+  }
+
+  protected renderRipple(): TemplateResult {
+    return html`<ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>`
+  }
+}