Skip to content

Linear Progress Indicator Specification

Jump to bottom
Teodosia Hristodorova edited this page Feb 10, 2022 · 18 revisions

Linear Progress Indicator Specification

Contents

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

Owned by

Team Name: Astrea

Developer Name: Martin Evtimov

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

1. Overview

The Linear Progress Indicator provides the ability to display a single-line progress indicator with its state changes. The value property determines the load state. The size of the filled-in part is calculated as a percentage based on the current value vs the max value. The default max value is 100. The progress indicator does not interact with the end-user and is read-only, i.e. the user could not change its state.

Objectives

The Linear Progress Indicator component is providing minimal API for the most common use cases, leaving maximum flexibility in the developer's hands. It follows the mobile-first approach and should be suitable for hybrid applications. It shows the status of an ongoing operation in a visual way and can represent determinate or indeterminate progress.

Acceptance criteria

  • Have a determinate linear progress indicator that shows increasing and decreasing action.
  • The progress indicator must have a variant (Primary, Warning, Danger, Info, Success) changing its background color.
  • The progress indicator must indicate the current state as a percentage and display it as such or any other way.
  • The linear progress indicator should support different styling – striped and solid color.
  • The indicator's value and max value must be configurable through the API.
  • The indicator's text which shows its progress should be templatable.
  • The text of the linear progress must have the ability to change its alignment(start, center, end) and position(top, bottom).
  • The linear progress indicator should provide an indeterminate mode to indicate an operation that is not clear how long will be needed until completion.

2. User Stories

Elaborate more on the multi-facetted use cases

Developer stories:

  • Story 1: As a developer, I want to be able to display an infinitely looping loading progress for an action whose completion is unknown. This mode is achievable by a property on the Linear Progress Indicator and visually matches the Material Guidelines indeterminate state.
  • Story 2: As a developer, I want to be able to display linearly certain progress for a concrete action so that the end-users know how much a task has been completed.
  • Story 3: As a developer, I want to be able to implement determined linear progress indicator visual styles so that I can integrate it better with the overall look and feel of the application.
  • Story 4: As a developer, I would like to hide, show, change the position and override the text which linear progress indicator shows.
<igc-linear-progress indeterminate striped>   
</igc-linear-progress>

End-user stories:

  • Story 1: As an end-user, I want to be given an indication for any process that is taking place behind the scenes and prevents me from making further actions until complete e.g. a remote data that is being loaded to populate the UI.
  • Story 2: As an end-user, I want to be given a visual representation of how much a task or an action has been completed, so that I can be better informed about its state.
  • Story 3: As an end-user, I want to have a linear progress indicator, so that it matches the overall look and feel of the application.

3. Functionality

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

3.1. End-User Experience The linear progress indicator should fill from 0% to 100% and never decrease in value or loop for an unknown period of time to show an ongoing operation that is unclear how long will take.

3.2. Developer Experience

  • Developers are able to specify the value and max value of the linear progress indicator via the exposed value and max properties.
  • Developers are able to specify the displayed text position via the exposed textAlign property.
  • Developers are able to specify the progress type and style via the exposed variant and striped properties.
  • Developers could re-template the text area of the indicator via the text slot.

3.3. Globalization/Localization

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

3.4. Keyboard Navigation

The end-user must not be able to change the linear progress indicator value, max and size.

3.5. API

IgcLinearProgressComponent Properties

Name Description Type Default value Reflected
value Get/Set the value that indicates the completed indicator position. Should be a positive number in the range min - max. number 0 true
max Get/Set the maximum fill range of the progress indicator. number 100 true
textFormat Get/Set the the format of the displayed progress indicator's value. string '{0%}' true
textAlign Get/Set the position that defines where the text is aligned. true
animated Get/Set whether the progress would be animated. boolean false true
indeterminate Determines whether the progress indicator is in an indeterminate state i.e. an infinitely looping loading progress. boolean false true
variant Get/Set the progress indicator type and apply a proper styles. primary | success | info | warning |danger primary true
thickness Get/Set the width of the progress indicator number true
striped Determines whether the linear progress indicator should have striped style. boolean false true
size The size of the progress indicator. small | medium | large small true

Slots

Name Description
(default) Renders the progress indicator content.
text The text area container.

CSS Parts

Name Description
track The progress ring's track area.
indicator The progress indicator area.

4. Test Scenarios

  • The Linear Progress Indicator should be initialized correctly with default values.
  • Should respond to passed values correctly.
  • Should set the value to 0 for negative numbers.
  • Should set the value to the maximum (default or custom max) if we try passing a value higher than the max.
  • Should change the value to max if the max value is updated to a lower (or equal) value.
  • Should not change the value if the max value is increased.
  • Should update the value when we try to decrease it.
  • Should not update the value if we try to set not a valid number.
  • When passing a string as a value it should be parsed correctly.
  • The update step should be 1% of the maximum value in order to prevent slow updates with big numbers.
  • Value should not exceed the lower limit (0).
  • Value should not exceed the max limit.
  • Should follow the value representation if the update step is bigger than the passed value of the progress indicator.
  • Value should not be updated if the progress indicator mode is indeterminate.
  • Should correctly display the progress indicator style (striped or solid) based on the striped property.
  • Should display the value properly depending on the textFormat. If it is not set, the value should be displayed in percent.
  • Should not display the value if textFormat is set to '' (empty string).
  • Should position the text correctly based on the textAlign value. By default leftTop.
  • Should render the defined text slot if there is defined and hide the displayed value.

5. Accessibility

ARIA Support

The linear indicator has the progress bar role - https://www.w3.org/TR/wai-aria-1.1/#progressbar

RTL Support

6. Assumptions and Limitations

7. References

Clone this wiki locally