Skip to content

Button Specification

Jump to bottom
Diyan Dimitrov edited this page May 31, 2021 · 11 revisions

Button Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility
  6. Assumptions and Limitations
  7. References

Owned by

Team Name: CodeX

Developer Name: Diyan Dimitrov

Designer Name:

Requires approval from

  • Peer Developer Name | Date:
  • Design Manager Name | Date:

Signed off by

  • Radoslav Mirchev| Date:
  • Radoslav Karaivanov | Date:

Revision History

Version Users Date Notes
1 Names of Developers and Designers Date

1. Overview

The <igc-button> is an element which provides functionality of a button by wrapping either a <button> or an <a> element.

<igc-button type="raised">Click me</igc-button>

Objectives

  • Click the button to perform an action.
  • Click the button to navigate to a URL.
  • Differentiation between states (enabled/disabled, focused, pressed)

Acceptance criteria

  1. The button component should support different types according to the material spec such as flat, outlined, raised, etc.
  2. The button component should have configurable background and text colors.
  3. The button component should have configurations specific for <button> and <a> elements.
  4. The button component should support a set of sizing options such as small, medium and large.
  5. The button component should have customizable content, prefix and suffix.

2. User Stories

Elaborate more on the multi-facetted use cases

Developer stories:

  • Story 1: As a developer, I want to specify a type of the button - flat, raised, outlined, icon, fab.
  • Story 2: As a developer, I want to be able to disable the button.
  • Story 3: As a developer, I want to specify the size of the button - small, medium, large.
  • Story 4: As a developer, I want to set <button> specific properties like type (submit, reset, button).
  • Story 5: As a developer, I want to set <a> specific properties like href, download, target, rel.
  • Story 5: As a developer, I want to specify background and text color of the button.
  • Story 6: As a developer, I want to specify a text label or custom content of the button.
  • Story 6: As a developer, I want to specify a prefix/suffix element of the button.

End-user stories:

  • Story 1: As an end-user, I want to click a button which performs an action.
  • Story 2: As an end-user, I want to click a button which navigates to a URL.

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End-User Experience

** Integration scenarios or functionality with other features/components prototype ** End-to-end user experienceprototype ** Prepared design files for styling e.g. interplay with features and light/dark variants design hand-off

3.2. Developer Experience

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. Keyboard Navigation

Keys Description

3.5. API

Properties

Name Description Type Default value
type The type of the button. flat | raised | outlined | icon | fab flat
disabled Determines whether the button is disabled. boolean false
background The background color of the button. string undefined
color The text color of the button. string undefined
size The size of the button. small | medium | large large
href The URL of the hyperlink. If set <a> element is rendered instead of <button>. string undefined
download Prompts the user to save the linked URL instead of navigating to it. Used only when href is set. string undefined
target Specifies where to open the linked URL. Used only when href is set. _blank | _parent | _self | _top undefined
rel Specifies the relationship between the current document and the linked one. Used only when href is set. string undefined
buttonType Specifies the type of the <button> element. button | reset | submit button

Methods

Name Description Return type Parameters

Events

Name Description Cancelable Parameters

Slots

Name Description
(default) Renders the label of the button.
prefix Renders content before the default slot.
suffix Renders content after the default slot.

CSS Parts

Name Description
native The native <button>/<a> element.

4. Test Scenarios

Automation

  • Scenario 1:
  • scenario 2:

5. Accessibility

ARIA Support

RTL Support

6. Assumptions and Limitations

Assumptions Limitation Notes

7. References

Clone this wiki locally