Skip to content

Latest commit

 

History

History
80 lines (63 loc) · 3.26 KB

button.spec.md

File metadata and controls

80 lines (63 loc) · 3.26 KB
Raw

Button & Anchor

Overview

The button component represent an control that should invoke an action or perform a navigation.

Use Cases

  • Creating simple button or link elements

Non-goals

  • Complex or composite buttons (like split button)
  • Inline "hypertext" anchor
    • This component will expose a base class that a "hypertext" component can leverage, but the component itself is not in the scope of the button.

Features

  • Can represent either a hyperlink or a button
  • Appearances including "lightweight", "justified", "outline", "primary" and "stealth"
    • I'm proposing dropping "justified" because this is a simple matter of removing starting padding.

Risks and Challenges

Prior implementations of button provide the opportunity to create a button element or an a element. The button element is a form-associated element but the a element is not. If we expose a single polymorphic button component that can represent both a button and an a - we need to figure out how to only form-associate the button.

Button also supports a number of appearance options. Ideally these using one of these appearances does not incur the debt of the others, including recipe registrations and CSS bloat.

Prior Art/Examples

Design

The library would expose 2 custom element definitions:

  1. fast-button
  2. fast-anchor

All "button" components will be form-associated and support all methods and attributes of the button element.

All "anchor" components will support all methods and attributes of the anchor element.

API

  • button
  • anchor
  • appearance: "neutral" | "outline" | "lightweight" | "stealth" | "primary" (and "hypertext" for anchor)

Anatomy and Appearance

Button

<host>
  <button> <!-- focus deferred to this element -->
    <slot name="start"></slot>
    <slot></slot>
    <slot name="end"></slot>
  </button>
</host>

Anchor

<host>
  <a> <!-- focus deferred to this element -->
    <slot name="start"></slot>
    <slot></slot>
    <slot name="end"></slot>
  </a>
</host>
  • Slot Names
    • start: the content to place at the start of the primary content
    • default: the element's content
    • end: the content to place at the end of the the primary content

Accessibility

Both components create internal native elements to which attributes will get reflected. Focus will also be deferred to these internal elements.