From 7188425ac0fbe46d82c5d91dbb0ebe88673cc93e Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 30 Sep 2021 08:40:21 -0400
Subject: [PATCH] fix animation bug

---
 docs/components/progress-ring.md              |  6 ++---
 docs/resources/changelog.md                   |  1 +
 src/components/progress-ring/progress-ring.ts | 24 +++++++++++++++++--
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/docs/components/progress-ring.md b/docs/components/progress-ring.md
index 6406d214..fd7517b4 100644
--- a/docs/components/progress-ring.md
+++ b/docs/components/progress-ring.md
@@ -12,10 +12,10 @@ Progress rings are used to show the progress of a determinate operation in a cir
 
 ### Size
 
-Use the `size` attribute to set the diameter of the progress ring.
+Use the `--size` custom property to set the diameter of the progress ring.
 
 ```html preview
-<sl-progress-ring percentage="50" size="200"></sl-progress-ring>
+<sl-progress-ring percentage="50" style="--size: 200px;"></sl-progress-ring>
 ```
 
 ### Track Width
@@ -45,7 +45,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
 Use the default slot to show a label.
 
 ```html preview
-<sl-progress-ring percentage="50" size="200" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
+<sl-progress-ring percentage="50" class="progress-ring-labels" style="margin-bottom: .5rem;">50%</sl-progress-ring>
 
 <br>
 
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 446e8e9c..72cc6681 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -21,6 +21,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the undocumented custom properties `--thumb-size`, `--tooltip-offset`, `--track-height` on `<sl-range>`
 - Changed the default `distance` in `<sl-dropdown>` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
 - Fixed a bug where `<sl-select>` would be larger than the viewport when it had lots of options [#544](https://github.com/shoelace-style/shoelace/issues/544)
+- Fixed a bug where `<sl-progress-ring>` wouldn't animate in Safari
 - Updated the default height of `<sl-progress-bar>` from `16px` to `1rem` and added a subtle shadow to indicate depth
 - Removed the `lit-html` dependency and moved corresponding imports to `lit` [#546](https://github.com/shoelace-style/shoelace/issues/546)
 
diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts
index f7fc7631..29fe4018 100644
--- a/src/components/progress-ring/progress-ring.ts
+++ b/src/components/progress-ring/progress-ring.ts
@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import styles from './progress-ring.styles';
 
 /**
@@ -22,9 +22,28 @@ export default class SlProgressRing extends LitElement {
 
   @query('.progress-ring__indicator') indicator: SVGCircleElement;
 
+  @state() indicatorOffset: string;
+
   /** The current progress percentage, 0 - 100. */
   @property({ type: Number, reflect: true }) percentage: number;
 
+  updated(changedProps: Map<string, any>) {
+    super.updated(changedProps);
+
+    //
+    // This block is only required for Safari because it doesn't transition the circle when the custom properties
+    // change, possibly because of a mix of pixel + unitless values in the calc() function. It seems like a Safari bug,
+    // but I couldn't pinpoint it so this works around the problem.
+    //
+    if (changedProps.has('percentage')) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - (this.percentage / 100) * circumference;
+
+      this.indicatorOffset = String(offset) + 'px';
+    }
+  }
+
   render() {
     return html`
       <div
@@ -34,10 +53,11 @@ export default class SlProgressRing extends LitElement {
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="${this.percentage}"
+        style="--percentage: ${this.percentage / 100}"
       >
         <svg class="progress-ring__image">
           <circle class="progress-ring__track"></circle>
-          <circle class="progress-ring__indicator" style="--percentage: ${this.percentage / 100};"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
         </svg>
 
         <span part="label" class="progress-ring__label">