Circular progress looks too big when used in a banner/static list

jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customization and ease-of-use

https://www.saltdesignsystem.com

Apache License 2.0

123 stars 89 forks source link

Circular progress looks too big when used in a banner/static list #3978

Open origami-z opened 1 month ago

origami-z commented 1 month ago

Area

UI Components

The problem

(From MTK) When circular progress is used in banner, it feels too big

https://stackblitz.com/edit/salt-template-eg6vbq?file=App.tsx

The solution

Add size prop to circular progress?

Alternatives and examples

Spinner doesn't give number / %

Are you a JPMorgan Chase & Co. employee?

[X] I am an employee of JPMorgan Chase & Co.

joshwooding commented 3 weeks ago

Aug 20 - work to start tomorrow for a few days

ivan-calderon commented 3 weeks ago

@dplsek, Initial exploration of the Compact circular progress is ready for review/feedback. Ideally it should work on experiences with space constraints. In principle it is similar to spinner Figma component. However, there are some details that set them apart in terms of construction and purpose.

@origami-z, when you have a chance, could you please share your thoughts if that construction make sense in code?

TY both!

origami-z commented 3 weeks ago

2 points to consider

whether buffer would work
language to pick, size (similar to spinner) or compact (data grid, pagination)

ivan-calderon commented 3 weeks ago

Very good points! My thoughts:

Buffer: Buffer will not be supported by small/compact circular progress (it might present issue in terms of affordance + visibility of status).

Size/compact: This one is very tricky and probably need further discussion. I still have split thoughts about it. For instance, Spinner already scales size systematically in code and design where small=size-icon, default=size-base, large=size-base(2x). However, current Circular progress component tracks 'size-base'(3x). So, my doubts are:

Should we provide a compact variant in icon-size only. So, only 2 (default, compact) are available as separate variants, or:
Provide 3 sizes (small, default, large). But a non-systematic jump will happen between default size-base to large size-base(3x). Plus, the large size will be the only one supporting label and buffer.

@dplsek let us know your thoughts!

bhoppers2008 commented 2 weeks ago

Call scheduled for this afternoon (Monday)

ivan-calderon commented 2 weeks ago

As per our chat, the circular progress updates and migration plan is ready for review. See Sandbox / Circular progress

mark-tate commented 1 week ago

Espresso Goal to be reviewed by EOS

could be released on first release after button release on September 13th

origami-z commented 3 days ago

There isn't enough Dev capacity for this in the past 2 weeks, extending to Frappe for actual implementation.