Skip to content

Button Specification

Jump to bottom
Simeon Simeonoff edited this page Jul 21, 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 Diyan Dimitrov 12-Jul-2021

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 Reflected
variant The variant of the button. flat | raised | outlined | icon | fab flat true
disabled Determines whether the button is disabled. boolean false true
size The size of the button. small | medium | large large true
type Specifies the type of the <button> element. button | reset | submit button false

IgcLinkButtonComponent Properties

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

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
base The native <button>/<a> element.
prefix The prefix container.
suffix The suffix container.

4. Test Scenarios

Automation

  • Should render <igc-button> with <button>/<a> element inside
  • Should render the content, prefix and suffix in the correct slots
  • Should apply correct CSS classes to the native element for all variants (flat, raised, outlined, icon, fab)
  • Should apply correct CSS classes to the native element for all sizes (small, medium, large)
  • Should apply correct CSS classes and attributes to the native element when the button is disabled
  • Should apply all <button> specific properties to the wrapped native element
  • Should apply all <a> specific properties to the wrapped native element
  • Should focus/blur the native element when focus/blur methods are called
  • Should emit igcFocus/igcBlur events

5. Accessibility

ARIA Support

  • <igc-button> and <igc-link-button> transfer the aria-label attribute to the wrapped native element
  • <igc-link-button> sets role="button" to the <a> element
  • <igc-link-button> sets aria-disabled="true" to the <a> element when the button is disabled

RTL Support

6. Assumptions and Limitations

Assumptions Limitation Notes

7. References

Clone this wiki locally