Loader - design issues

[asangma]

Actual Behavior

When inline

• the text string is placed poorly

When inline and determinate

• the value string is too big inside the circles
• the stroke color is too dark and hard to distinguish from the blue stroke

When not inline

• the text string is placed poorly

Expected Behavior

When inline and determinate

• suggest not rendering the text string
• suggest not rendering the value string
• use the correct stroke color, e.g. match the color when not inline

When not inline

• better styling for the text string

Reproduction Sample

https://codepen.io/mtb-alan/pen/QWQLKvq

Reproduction Steps

1. View the sample

Reproduction Version

latest

Relevant Info

No response

Regression?

No response

Calcite Design Recommendations

See this comment for design specs.

[asangma]

cc @macandcheese

[asangma]

It looks like inline Loader has a stroke: currentColor on it.

[macandcheese]

We should evaluate the need for these string props at all, if this is the only bug report maybe they aren't worth maintaining? If we do keep them, we'll need design improvements for the bugs shown in that codepen.

[geospatialem]

Will investigate further to help prioritize after next month's release if breaking changes are needed (May release), or if we can incorporate into an earlier release.

[macandcheese]

@asangma want to take a stab at some of these design improvement proposals :) ?

[geospatialem]

@asangma want to take a stab at some of these design improvement proposals :) ?

@asangma WDYT about taking a look into some prospective design opportunities in July?

[geospatialem]

Updated the issue context above to include the design considerations of inline with text per this Community thread.

[jacqueskeet]

Please see the Figma file for the proposed designs here:

https://www.figma.com/design/3ZUBn0JzuDTqQ1LYYtDdXT/Loader?m=dev&focus-id=1786-768

[github-actions[bot]]

cc @geospatialem, @brittneytewks