diff --git a/.changeset/little-dingos-repeat.md b/.changeset/little-dingos-repeat.md new file mode 100644 index 000000000..5ddcf585d --- /dev/null +++ b/.changeset/little-dingos-repeat.md @@ -0,0 +1,5 @@ +--- +"@skeletonlabs/skeleton": patch +--- + +feat: Added a `strokeLinecap` property to to Progress Radials, enabling rounded styling diff --git a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte index 91fffcdba..1c5abcf5a 100644 --- a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte +++ b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.svelte @@ -15,6 +15,8 @@ export let stroke = 40; // px /** Sets the base font size. Scales responsively. */ export let font = 56; // px + /** Sets the stoke-linecap value */ + export let strokeLinecap: 'butt' | 'round' | 'square' = 'butt'; // Props (styles) /** Provide classes to set the width. */ @@ -37,7 +39,7 @@ // Calculated Values const baseSize = 512; // px - const radius: number = baseSize / 2; + const radius: number = baseSize / 2 - stroke / 2; let circumference: number = radius; let dashoffset: number; @@ -73,18 +75,19 @@ - + diff --git a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.test.ts b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.test.ts index 39a134b76..cec95add4 100644 --- a/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.test.ts +++ b/packages/skeleton/src/lib/components/ProgressRadial/ProgressRadial.test.ts @@ -18,7 +18,8 @@ describe('ProgressRadial.svelte', () => { meter: 'stroke-black dark:stroke-white', color: 'fill-black dark:fill-white', font: 56, - label: 'testProgressRadial1' + label: 'testProgressRadial1', + roundedLineCap: true } }); expect(getByTestId('progress-radial')).toBeTruthy(); diff --git a/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte index 8097e35eb..d9b229f27 100644 --- a/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte +++ b/sites/skeleton.dev/src/routes/(inner)/components/progress-radials/+page.svelte @@ -21,6 +21,7 @@ // Reactive $: props = { value: 50, max: 100, step: 10 }; $: strokeProps = { value: 100, max: 400, step: 20 }; + let strokeLinecap: 'butt' | 'round' | 'square' = 'butt'; @@ -45,47 +46,96 @@

Styling

- Use the stroke meter or trackproperties to style the - radial. + Use the meter, or track, stroke, + strokeLinecap properties to style the radial.

- +

Primary

- +

Secondary

- +

Tertiary

- +

Success

- +

Warning

- +

Error

-
- +
+
+ +
+
`} + code={``} />