Component design
Background/Goal
An indeterminate inlineProgressBar component needs to be designed and specified before its implementation as part of the TypeaheadSearch component.
| This Figma frame contains the design specifications for this component. |
User stories
As a designer and developer, I need to be able to reuse a system-compliant indeterminate inlineProgressBar and use it within components in order to communicate to users that the information they're currently viewing is being updated.
Considerations
- The inlineProgressBar is a minimized version of the progress bar, adjusted to make its usage possible in smaller areas, like within components.
- The inlineProgressBar component can be determinate (displaying an approximation of the missing loading time – out of the scope of this task) or indeterminate (displaying an animation that is not aligned with the actual remaining loading time or system’s progress). You can view a demo of both variants in this Codepen.
Development considerations
This element might be implemented either as a component or as a mixin.
Acceptance criteria (or Done)
- All the interactive states and behavior of the indeterminate inlineProgressBar (based on the current visual design) are documented.
- All the visual properties of the inlineProgressBar are fully specified
Component implementation
Background
An indeterminate progress bar was built for WVUI and will be implemented in Codex (see T295174). We may be able to use this component for this purpose as well by adding an inline prop that changes the display to meet the design spec for the inline version.
Once this task is done, the inline progress bar can be implemented in the Menu component.
Acceptance criteria
- Either a modified version of the ProgressBar component or a new component called InlineProgressBar (or maybe ProgressBarInline?) is implemented
- The component meets design specifications
- The component is demonstrated on the docs site