[calcite-loader] Allow a way to display percent sign on the determinate value

[rpanichakit9541]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Currently the value of the determinate loader just displays as a number which the user can mistake as the count number of items done instead of the percentage of completion. This is a request to be able to set a prop to tell the calcite-loader component to display the percent sign next to the number value.

Acceptance Criteria

The user should be able to set a prop on the calcite-loader component to tell it to display a percent sign next to the percent value

Relevant Info

No response

Which Component

calcite-loader

Example Use Case

No response

Priority impact

p4 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[mpriour]

This issue is now impacting us in ArcGIS Online. We would really like this enhancement before the fall release of ArcGIS Online if at all possible.

[geospatialem]

For design expertise 🧠 : Should we also support the "%" when the value is 100?

[geospatialem]

Discussed the above with Skye, where they recommend the following:

We should always display the percentage for the value, even when the value is at 100%. However, it is recommended once the component reaches 100% to remove the loading state.

Additionally, in looking at other design systems, which use a circular progress similar to our determinate loader, it is common to not have the percentage by default, so we should explore adding the percentage as a new property.

Resources:

• https://v2.chakra-ui.com/docs/components/circular-progress
• https://quasar.dev/vue-components/circular-progress
• https://design.wonderflow.ai/get-started/components/loading/circular-progress

[github-actions]

cc @geospatialem, @brittneytewks

[SkyeSeitz]

Would like to propose closing in favor of 4470, where we are exploring renaming the current Loader type value to determinate-numeric which displays a number out of 100 (there was not sufficient space to warrant adding a percentage suffix) and adding an additional Loader type value that is just determinate, which removes the number to avoid confusion.

[rpanichakit9541]

@SkyeSeitz - I'm not quite clear on the meaning of your comment. I took a look at #8735 you referenced, but didn't see anything that has to do with the number labeling. Will the new solution you are proposing allow the user of calcite-loader to be able to label it with a percent sign?

[SkyeSeitz]

Apologies, @rpanichakit9541! It looks like we can address adding the percentage sign in this issue. Easy addition with only one font-size adjustment needed to fit the extra "%" character at the small scale (outlined below).

We can add this percentage affordance as a new value to the type property.

Link to Figma file: https://www.figma.com/design/7BIhM7Anfkp0pdv03cFfFg/%5BLoader%5D-percent-sign?node-id=1-2&t=rxtPGEZmxgSjeQUA-11

[jcfranco]

Note that there will be a minor visual change for small scale, determinate loaders.

[github-actions]

Installed and assigned for verification.

[jcfranco]

Additional note: the current determinate type will no longer display a label in a future release.

[DitwanP]

🍡 Verified on 2.12.0-next.26
https://codepen.io/Ditwan-Price/pen/zYVWvEB