Feat/improve progress radial (#2093)

Co-authored-by: endigo9740 <[email protected]>
skeletonlabs · Oct 6, 2023 · 7286219 · 7286219
1 parent e71f935
commit 7286219
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 15 deletions.
diff --git a/.changeset/little-dingos-repeat.md 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
@@ -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 @@
 	<!-- Draw SVG -->
 	<svg viewBox="0 0 {baseSize} {baseSize}" class="rounded-full" class:animate-spin={value === undefined}>
 		<!-- Track -->
-		<circle class="progress-radial-track {cBaseTrack} {track}" stroke-width={stroke} r={baseSize / 2} cx="50%" cy="50%" />
+		<circle class="progress-radial-track {cBaseTrack} {track}" stroke-width={stroke} r={radius} cx="50%" cy="50%" />
 
 		<!-- Meter -->
 		<circle
 			class="progress-radial-meter {cBaseMeter} {meter}"
 			stroke-width={stroke}
-			r={baseSize / 2}
+			r={radius}
 			cx="50%"
 			cy="50%"
 			style:stroke-dasharray="{circumference}
 			{circumference}"
 			style:stroke-dashoffset={dashoffset}
+			stroke-linecap={strokeLinecap}
 		/>
 
 		<!-- Center Text -->

diff --git 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
@@ -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';
 </script>
 
 <DocsShell {settings}>
@@ -45,47 +46,96 @@
 		<section class="space-y-4">
 			<h2 class="h2">Styling</h2>
 			<p>
-				Use the <code class="code">stroke</code> <code class="code">meter</code> or <code class="code">track</code>properties to style the
-				radial.
+				Use the <code class="code">meter</code>, or <code class="code">track</code>, <code class="code">stroke</code>,
+				<code class="code">strokeLinecap</code> properties to style the radial.
 			</p>
 			<DocsPreview background="neutral">
 				<svelte:fragment slot="preview">
 					<div class="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 text-center">
 						<div class="p-4 space-y-2">
-							<ProgressRadial stroke={strokeProps.value} meter="stroke-primary-500" track="stroke-primary-500/30" width="w-full" />
+							<ProgressRadial
+								stroke={strokeProps.value}
+								meter="stroke-primary-500"
+								track="stroke-primary-500/30"
+								width="w-full"
+								{strokeLinecap}
+								value={50}
+							/>
 							<p>Primary</p>
 						</div>
 						<div class="p-4 space-y-2">
-							<ProgressRadial stroke={strokeProps.value} meter="stroke-secondary-500" track="stroke-secondary-500/30" width="w-full" />
+							<ProgressRadial
+								stroke={strokeProps.value}
+								meter="stroke-secondary-500"
+								track="stroke-secondary-500/30"
+								width="w-full"
+								{strokeLinecap}
+								value={50}
+							/>
 							<p>Secondary</p>
 						</div>
 						<div class="p-4 space-y-2">
-							<ProgressRadial stroke={strokeProps.value} meter="stroke-tertiary-500" track="stroke-tertiary-500/30" width="w-full" />
+							<ProgressRadial
+								stroke={strokeProps.value}
+								meter="stroke-tertiary-500"
+								track="stroke-tertiary-500/30"
+								width="w-full"
+								{strokeLinecap}
+								value={50}
+							/>
 							<p>Tertiary</p>
 						</div>
 						<div class="p-4 space-y-2">
-							<ProgressRadial stroke={strokeProps.value} meter="stroke-success-500" track="stroke-success-500/30" width="w-full" />
+							<ProgressRadial
+								stroke={strokeProps.value}
+								meter="stroke-success-500"
+								track="stroke-success-500/30"
+								width="w-full"
+								{strokeLinecap}
+								value={50}
+							/>
 							<p>Success</p>
 						</div>
 						<div class="p-4 space-y-2">
-							<ProgressRadial stroke={strokeProps.value} meter="stroke-warning-500" track="stroke-warning-500/30" width="w-full" />
+							<ProgressRadial
+								stroke={strokeProps.value}
+								meter="stroke-warning-500"
+								track="stroke-warning-500/30"
+								width="w-full"
+								{strokeLinecap}
+								value={50}
+							/>
 							<p>Warning</p>
 						</div>
 						<div class="p-4 space-y-2">
-							<ProgressRadial stroke={strokeProps.value} meter="stroke-error-500" track="stroke-error-500/30" width="w-full" />
+							<ProgressRadial
+								stroke={strokeProps.value}
+								meter="stroke-error-500"
+								track="stroke-error-500/30"
+								width="w-full"
+								{strokeLinecap}
+								value={50}
+							/>
 							<p>Error</p>
 						</div>
 					</div>
 				</svelte:fragment>
 				<svelte:fragment slot="footer">
-					<div class="w-48 mx-auto">
-						<input type="range" min="20" max={strokeProps.max} step={strokeProps.step} bind:value={strokeProps.value} />
+					<div class="flex justify-between items-center gap-4">
+						<div class="w-60">
+							<input type="range" min="20" max={strokeProps.max} step={strokeProps.step} bind:value={strokeProps.value} />
+						</div>
+						<select bind:value={strokeLinecap} class="select w-auto">
+							{#each ['butt', 'round', 'square'] as v}
+								<option value={v}>{v}</option>
+							{/each}
+						</select>
 					</div>
 				</svelte:fragment>
 				<svelte:fragment slot="source">
 					<CodeBlock
 						language="html"
-						code={`<ProgressRadial ... stroke={${strokeProps.value}} meter="stroke-primary-500" track="stroke-primary-500/30" />`}
+						code={`<ProgressRadial ... stroke={${strokeProps.value}} meter="stroke-primary-500" track="stroke-primary-500/30" strokeLinecap={${strokeLinecap}} />`}
 					/>
 				</svelte:fragment>
 			</DocsPreview>