Add `color` property to ProgressRing

[gspasov]

Before you start...

• [X] Have you updated your dependencies? You might be using an old version of the library.
• [X] Have you checked if someone already requested this feature? If they have, post a comment with your use case instead.

Description

When adding ProgressRing to my SvelteKit project I was expecting the Ring to have the color that was showcased in the Docs. When going to the page I didn't even see the ProgressRing. Going to the Elements section of the dev tools I saw that the html was present, and there was a stroke color assigned from a variable (var(--fds-accent-default)), yet the circle had no color, hence it was invisible.

To add color I did the following:

<script lang="ts">
    import { ProgressRing } from "fluent-svelte";
    let circleElement: SVGCircleElement;

    $: if (circleElement) {
        circleElement.style.stroke = "red";
    }
</script>

<ProgressRing size={50} bind:circleElement />

Which is basically going around the issue. Which is: How to set the color of the ring?

Alternative solutions

What I propose is to expose a variable called stroke on which the User can set the desirable color of the ProgressRing.

Maybe something like:

<script lang="ts">
   export let stroke: string | undefined = undefined;
<script>

<circle
    bind:this={circleElement}
    style:stroke
    cx="50%"
    cy="50%"
    r="7"
    stroke-dasharray="3"
    stroke-dashoffset={((100 - value) / 100) * circumference}
/>

If stroke is a bit confusing you could go with color like so as well:

<script lang="ts">
   export let color: string | undefined = undefined;
<script>

<circle
    bind:this={circleElement}
    style:stroke={color}
    cx="50%"
    cy="50%"
    r="7"
    stroke-dasharray="3"
    stroke-dashoffset={((100 - value) / 100) * circumference}
/>

Relevant Assets

No response

[Tropix126]

Are you importing the default theme file? It's needed to give components the correct styling through variables. https://fluent-svelte.vercel.app/docs/getting-started#step-2-add-theme-file

[gspasov]

Yup, this does it. But what if I wish to have the process ring in another color? What would be the best way to accomplish this?

[Tropix126]

Yup, this does it. But what if I wish to have the process ring in another color? What would be the best way to accomplish this?

Either add a class to the ProgressRing and manually style it (note that classes on components need to be wrapped in :global()), or use style props:

<ProgressRing --fds-accent-default="red" />

Note that while the style props approach looks nicer in svelte, it will add an inline style and an extra <div> wrapper if you're okay with that.