add transition duration custom prop

shoelace-style · Oct 28, 2022 · ab754e9 · ab754e9
1 parent 55445a8
commit ab754e9
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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 {