diff --git a/docs/components/progress-ring.md b/docs/components/progress-ring.md index e14fd898..499189af 100644 --- a/docs/components/progress-ring.md +++ b/docs/components/progress-ring.md @@ -30,18 +30,18 @@ import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; const App = () => ; ``` -### Track Width +### Track and Indicator Width -Use the `--track-width` custom property to set the width of the progress ring's track. +Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator. ```html preview - + ``` ```jsx react import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; -const App = () => ; +const App = () => ; ``` ### Colors diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index f344a96d..40e80432 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next +- Added `--indicator-width` custom property to `` [#837](https://github.com/shoelace-style/shoelace/issues/837) - Changed the type of component styles from `CSSResult` to `CSSResultGroup` [#828](https://github.com/shoelace-style/shoelace/issues/828) - Fixed a bug in `` where using Left and Right would select the wrong color - Fixed a bug in `` where the divider was on the wrong side when using `placement="end"` @@ -25,7 +26,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - 🚨 BREAKING: Moved the `checked-icon` and `indeterminate-icon` parts from a wrapper `` to the `` in `` [#786](https://github.com/shoelace-style/shoelace/issues/786) - 🚨 BREAKING: Moved the `checked-icon` part from a wrapper `` to the `` in `` [#786](https://github.com/shoelace-style/shoelace/issues/786) -- Added the `--track-active-offset` CSS custom property to `` [#806](https://github.com/shoelace-style/shoelace/issues/806) +- Added the `--track-active-offset` custom property to `` [#806](https://github.com/shoelace-style/shoelace/issues/806) - Fixed a bug that caused `` to sometimes have two vertical scrollbars [#814](https://github.com/shoelace-style/shoelace/issues/814) - Fixed a bug that caused a gray line to appear between radio buttons [#821](https://github.com/shoelace-style/shoelace/discussions/821) - Fixed a bug that caused `` to not render anything when using the `play` attribute initially [#824](https://github.com/shoelace-style/shoelace/issues/824) @@ -223,7 +224,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - 🚨 BREAKING: the `unit` property of `` has changed to `byte | bit` instead of `bytes | bits` - Added `display-label` part to `` [#650](https://github.com/shoelace-style/shoelace/issues/650) -- Added `--spacing` CSS custom property to `` [#664](https://github.com/shoelace-style/shoelace/pull/664) +- Added `--spacing` custom property to `` [#664](https://github.com/shoelace-style/shoelace/pull/664) - Added `event.detail.source` to the `sl-request-close` event in `` and `` - Fixed a bug that caused `` to render the wrong size when `--track-width` was increased [#656](https://github.com/shoelace-style/shoelace/issues/656) - Fixed a bug that allowed `` to open and close when disabled using a screen reader [#658](https://github.com/shoelace-style/shoelace/issues/658) diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts index b8c83ca6..51b65546 100644 --- a/src/components/progress-ring/progress-ring.styles.ts +++ b/src/components/progress-ring/progress-ring.styles.ts @@ -8,6 +8,7 @@ export default css` --size: 128px; --track-width: 4px; --track-color: var(--sl-color-neutral-200); + --indicator-width: var(--track-width); --indicator-color: var(--sl-color-primary-600); display: inline-flex; @@ -29,11 +30,10 @@ export default css` .progress-ring__track, .progress-ring__indicator { - --radius: calc(var(--size) / 2 - var(--track-width) * 0.5); + --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5); --circumference: calc(var(--radius) * 2 * 3.141592654); fill: none; - stroke-width: var(--track-width); r: var(--radius); cx: calc(var(--size) / 2); cy: calc(var(--size) / 2); @@ -41,10 +41,12 @@ export default css` .progress-ring__track { stroke: var(--track-color); + stroke-width: var(--track-width); } .progress-ring__indicator { stroke: var(--indicator-color); + stroke-width: var(--indicator-width); stroke-linecap: round; transition: 0.35s stroke-dashoffset; stroke-dasharray: var(--circumference) var(--circumference); diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index 25395dd4..1cfab68b 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -16,6 +16,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --size - The diameter of the progress ring (cannot be a percentage). * @cssproperty --track-width - The width of the track. * @cssproperty --track-color - The color of the track. + * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width. * @cssproperty --indicator-color - The indicator color. */ @customElement('sl-progress-ring')