diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index ff1d8f1e..36a65154 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Added `button--checked` to `<sl-radio-button>` and `control--checked` to `<sl-radio>` to style just the checked state [#933](https://github.com/shoelace-style/shoelace/pull/933) - Added tests for `<sl-menu-item>` and `<sl-menu-label>` [#935](https://github.com/shoelace-style/shoelace/pull/935) +- Added `--indicator-transition-duration` custom property to `<sl-progress-ring>` [#986](https://github.com/shoelace-style/shoelace/issues/986) - Fixed a bug in `<sl-card>` that prevented the border radius to apply correctly to the header [#934](https://github.com/shoelace-style/shoelace/pull/934) - Fixed a bug in `<sl-button-group>` where the inner border disappeared on focus [#980](https://github.com/shoelace-style/shoelace/pull/980) - Improved `<sl-badge>` to improve padding and render relative to the current font size diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts index 51b65546..38ee1a4f 100644 --- a/src/components/progress-ring/progress-ring.styles.ts +++ b/src/components/progress-ring/progress-ring.styles.ts @@ -10,6 +10,7 @@ export default css` --track-color: var(--sl-color-neutral-200); --indicator-width: var(--track-width); --indicator-color: var(--sl-color-primary-600); + --indicator-transition-duration: 0.35s; display: inline-flex; } @@ -48,7 +49,8 @@ export default css` stroke: var(--indicator-color); stroke-width: var(--indicator-width); stroke-linecap: round; - transition: 0.35s stroke-dashoffset; + transition-property: stroke-dashoffset; + transition-duration: var(--indicator-transition-duration); stroke-dasharray: var(--circumference) var(--circumference); stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference)); } diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index 30231ae4..192fc53c 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -21,6 +21,7 @@ import type { CSSResultGroup } from 'lit'; * @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. + * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes. */ @customElement('sl-progress-ring') export default class SlProgressRing extends ShoelaceElement {