IdsLoadingIndicator: Design Enhancements and new Features

[tmcconechy]

Based on the design at https://www.figma.com/file/PwwLkUtTxpxLzRJzm5kACM/IDS-Progress-Indicators?node-id=0%3A1 we want to build out some of the elements and port some of it as noted. See https://material.io/components/progress-indicators#usage for inspiration

We want to also port the design changes back to 4.x . I.E. whats "design changed" and the line loader styles (phase 1 items).

Loader (Phase 1)

• Use these designs and update ids-loader
• port this back to 4.x as a new loader component
• show under the header and on cards

Line Loader (Phase 1)

• Compare with what is there now.
• Update 4.x with these designs

Spinners (Phase 1)

• Will call this circular progress indicator (ids-progress-indicator type="circular") - P3
• Indeterminate vs with a progress count - P5 for progress count (indeterminate="false" value="40%")
• size (small for fields / vs normal)
• show on a card and show on an input
• Update 4.x with these designs

Other Tasks (Phase 1)

• Lets rename ids-progress to ids-progress-bar for clarity

Progress Buttons (Future)

• Skip for now

Skeleton (Future)

• skip for now

Suggested Internal Markup

<ids-loading-indicator percent="10" type="circular" determinate="true"></ids-loading-indicator>
<!-- Centered in the Card -->
<ids-loading-indicator type="linear"></ids-loading-indicator>
<ids-loading-indicator type="circular"></ids-loading-indicator>
<!-- Top Page Loader on a Card or Page/Container or Datagrid-->
<ids-loading-indicator type="bar"></ids-loading-indicator>

<!-- Future -->
<ids-loader type="skeleton"></ids-loader>

or Loader:

• Skeleton Loader
• Circle Loader
• Line Loader
• Etc Loader

Suggested Dependencies NA

Settings

• indeterminate
• type

Design

• https://www.figma.com/file/PwwLkUtTxpxLzRJzm5kACM/IDS-Progress-Indicators?node-id=0%3A1

Events

• updated (name)
• finished
• started

Other Pass the following checklist ordered in priority (some may be left for later) https://github.com/infor-design/enterprise-wc/blob/main/doc/CHECKLIST.md

[rob2d]

Thinking on it a little while trying to create example markup, I have a few ideas for possible iteration:

(1) type

• since there aren't many variants of the ids-loading-indicator (3), it could be easier for users to use a flag vs type -- which could be similar to how ids-pager-button works in the recent PR (can still have a readonly type as well). Saw elsewhere in repo.
• (if we use flags), since 80% of user-app cases would be circular and also 2/3 are basically just variants of linear, the default could be circular?
• for the bar variant/type, it seems that actually linear is pretty similar, especially with ids-progress-bar also being-bar-like and representing something that's a little more concrete for the app. Maybe we can use the word affixed for a flag? def for the word "affix" is

  to stick, attach, or fasten (something) to something else.

which seems to be concise on what bar was is doing with it

(2) setting for determinate

• rather than mark as determinate, we could have progress to indicate the percentage complete. (@tmcconechy something we agreed about earlier and agreed on functionally but I realized maybe this could be the word we are looking for? I'm not certain on it just felt a little bit more natural than what we were at)

Examples:

circular indeterminate

<ids-loading-indicator></ids-loading-indicator>

determinate and representing full view

<ids-loading-indicator progress="10" affixed></ids-loading-indicator>

indeterminate and linear

<ids-loading-indicator linear></ids-loading-indicator>

[tmcconechy]

I like that but the only one im not sure about is:

• anything wrong with the type? seems like what we have been using
• need a better name for the affixed one i think (sticky i like better but its not perfect)

Will get the copy team involved on https://jira.infor.com/browse/UXD-2617?focusedCommentId=8344423&page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-8344423 so will try and setup something to discuss between the ideas.

[rob2d]

For type it just seemed that affixed is just a variant for a linear loader; only contrasted by their position and a difference of about 2 pixels (so, both are actually "linear" in a sense). That and the implicit "type" (e.g. type needs double value) if not specified.

[rob2d]

Just for ref on the issue: for the WC, this issue is technically in "review" and almost done there.

Need to go back to wrapping up the enterprise version which is started but it seemed a bit difficult to come up with efficient patterns for the different types immediately due to my lack of experience with it and also the context of the existing busy-indicator and inputs being slightly different there.

Currently on ids-splitter to be able to better time-box the sprint since it seems that one could get interesting, and will try to get back to this one intermittently next week.

[tmcconechy]

Duplicate of https://github.com/infor-design/enterprise/issues/5427