Skip to content

Button Specification

Jump to bottom
Diyan Dimitrov edited this page Jun 23, 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> and <igc-link-button> are elements which provide functionality of a button by wrapping <button> and <a> element respectively.

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

<igc-link-button type="raised" href="https://www.infragistics.com">Click me</igc-link-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 configurations specific for <button> and <a> elements.
  3. The button component should support a set of sizing options such as small, medium and large.
  4. 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 6: As a developer, I want to specify a text label or custom content of the button.
  • Story 7: 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

IgcButtonComponent Properties

Name Description Type Default value
variant The variant of the button. flat | raised | outlined | icon | fab flat
disabled Determines whether the button is disabled. boolean false
size The size of the button. small | medium | large large
type Specifies the type of the <button> element. button | reset | submit button

IgcLinkButtonComponent Properties

Name Description Type Default value
variant The variant of the button. flat | raised | outlined | icon | fab flat
disabled Determines whether the button is disabled. boolean false
size The size of the button. small | medium | large large
href The URL of the hyperlink. string undefined
download Prompts the user to save the linked URL instead of navigating to it. string undefined
target Specifies where to open the linked URL. _blank | _parent | _self | _top undefined
rel Specifies the relationship between the current document and the linked one. string undefined

Methods

Name Description Return type Parameters
focus Sets focus on the native element. options?: FocusOptions
blur Removes focus from the native element.

Events

Name Description Cancelable Parameters
igcFocus Emitted when the button gets focus.
igcBlur Emitted when the button loses focus.

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