Page MenuHomePhabricator

Design and build indeterminate inlineProgressBar
Closed, ResolvedPublic

Description

Component design

Background/Goal

An indeterminate inlineProgressBar component needs to be designed and specified before its implementation as part of the TypeaheadSearch component.

Screenshot 2022-02-08 at 20.18.12.png (294×1 px, 52 KB)

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

  1. The inlineProgressBar is a minimized version of the progress bar, adjusted to make its usage possible in smaller areas, like within components.
  1. 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

Details

Event Timeline

AnneT renamed this task from Design indeterminate inlineProgressBar to Design and build indeterminate inlineProgressBar.Mar 9 2022, 9:58 PM
AnneT updated the task description. (Show Details)
AnneT updated the task description. (Show Details)

Change 785201 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] ProgressBar, Menu, TypeaheadSearch: Add inline progress bar

https://gerrit.wikimedia.org/r/785201

Change 786396 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] ProgressBar: add inline variant

https://gerrit.wikimedia.org/r/786396

STH changed the task status from Open to In Progress.Apr 27 2022, 3:08 PM
STH triaged this task as High priority.

Hey @Sarai-WMDE, could you please check out this comment thread and let me know what you think? We're wondering if the positioning styles (position: absolute and top: 2px) will always be true for the inline progress bar, or if they are specific to the implementation within Menu. Thanks!

Change 786396 merged by jenkins-bot:

[design/codex@main] ProgressBar: add inline variant

https://gerrit.wikimedia.org/r/786396

Signing this ticket off because, as stated in this comment, the indeterminate InlineProgressBar follows the new design specifications, which were adjusted to follow the more consistent implementation. Pending, necessary adjustments will need to be applied to the component through its parent component in a separate task/patch (TBD and linked here).

AnneT removed AnneT as the assignee of this task.May 13 2022, 9:01 PM
AnneT removed a project: Patch-For-Review.
AnneT added a subscriber: AnneT.
DAbad claimed this task.
DAbad added a subscriber: DAbad.

closed