From bba41402aa62f5675e94199d5c4b1f760551edbc Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 17 Sep 2021 18:15:13 -0400 Subject: [PATCH] update progress ring to use CSS --- docs/components/progress-ring.md | 8 ++-- docs/resources/changelog.md | 7 ++- .../progress-ring/progress-ring.styles.ts | 19 ++++++++ src/components/progress-ring/progress-ring.ts | 48 +++---------------- src/components/spinner/spinner.ts | 6 +-- 5 files changed, 37 insertions(+), 51 deletions(-) diff --git a/docs/components/progress-ring.md b/docs/components/progress-ring.md index 5602b7c33..6406d2142 100644 --- a/docs/components/progress-ring.md +++ b/docs/components/progress-ring.md @@ -18,9 +18,9 @@ Use the `size` attribute to set the diameter of the progress ring. ``` -### Stroke Width +### Track Width -Use the `stroke-width` attribute to set the width of the progress ring's indicator. +Use the `track-width` attribute to set the width of the progress ring's track. ```html preview @@ -34,8 +34,8 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop ``` diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index bd890778d..37057ba8e 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -8,9 +8,12 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next -- 🚨 BREAKING: removed `--stroke-width` from `` (use `--track-width` instead) -- Added `--speed` CSS custom property to `` +- 🚨 BREAKING: removed `--stroke-width` from `` (use the `--track-width` custom property instead) +- 🚨 BREAKING: removed `size` and `stroke-width` attributes from `` (use the `--size` and `--track-width` custom properties instead) +- Added the `--speed` custom property to `` +- Added the `--size` and `--track-width` custom properties to `` - Fixed a bug where `` wasn't using a border radius token [#523](https://github.com/shoelace-style/shoelace/issues/523) +- Updated `` to use only CSS for styling - Updated `` to use an SVG and improved the indicator animation ## 2.0.0-beta.51 diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts index a9c4420ec..fb1a53ffb 100644 --- a/src/components/progress-ring/progress-ring.styles.ts +++ b/src/components/progress-ring/progress-ring.styles.ts @@ -5,6 +5,8 @@ export default css` ${componentStyles} :host { + --size: 128px; + --track-width: 4px; --track-color: rgb(var(--sl-color-neutral-500) / 20%); --indicator-color: rgb(var(--sl-color-primary-600)); @@ -19,17 +21,34 @@ export default css` } .progress-ring__image { + width: var(--size); + height: var(--size); transform: rotate(-90deg); transform-origin: 50% 50%; } + .progress-ring__track, + .progress-ring__indicator { + --radius: calc(var(--size) / 2 - var(--track-width) * 2); + --circumference: calc(var(--radius) * 2 * var(--pi)); + + fill: none; + stroke-width: var(--track-width); + r: var(--radius); + cx: calc(var(--size) / 2); + cy: calc(var(--size) / 2); + } + .progress-ring__track { stroke: var(--track-color); } .progress-ring__indicator { stroke: var(--indicator-color); + stroke-linecap: round; transition: 0.35s stroke-dashoffset, 0.35s stroke; + stroke-dasharray: var(--circumference) var(--circumference); + stroke-dashoffset: calc(var(--circumference) - (var(--percentage) / 100) * var(--circumference)); } .progress-ring__label { diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index a953856e2..8ccc4c6a1 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -1,6 +1,5 @@ import { LitElement, html } from 'lit'; import { customElement, property, query } from 'lit/decorators.js'; -import { watch } from '../../internal/watch'; import styles from './progress-ring.styles'; /** @@ -12,7 +11,9 @@ import styles from './progress-ring.styles'; * @csspart base - The component's base wrapper. * @csspart label - The progress ring label. * - * @cssproperty --track-color - The track color. + * @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-color - The indicator color. */ @customElement('sl-progress-ring') @@ -21,29 +22,9 @@ export default class SlProgressRing extends LitElement { @query('.progress-ring__indicator') indicator: SVGCircleElement; - /** The size of the progress ring in pixels. */ - @property({ type: Number }) size = 128; - - /** The stroke width of the progress ring in pixels. */ - @property({ attribute: 'stroke-width', type: Number }) strokeWidth = 4; - /** The current progress percentage, 0 - 100. */ @property({ type: Number, reflect: true }) percentage: number; - firstUpdated() { - this.updateProgress(); - } - - @watch('percentage', { waitUntilFirstUpdate: true }) - updateProgress() { - const radius = this.indicator.r.baseVal.value; - const circumference = radius * 2 * Math.PI; - const offset = circumference - (this.percentage / 100) * circumference; - - this.indicator.style.strokeDasharray = `${circumference} ${circumference}`; - this.indicator.style.strokeDashoffset = `${offset}`; - } - render() { return html`
- - - - + + + diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts index a392735d6..cf3fdf1a8 100644 --- a/src/components/spinner/spinner.ts +++ b/src/components/spinner/spinner.ts @@ -8,9 +8,9 @@ import styles from './spinner.styles'; * * @csspart base - The component's base wrapper. * - * @cssproperty --track-width - The width of the indicator. - * @cssproperty --track-color - The color of the spinner's track. - * @cssproperty --indicator-color - The color of the spinner's indicator. + * @cssproperty --track-width - The width of the track. + * @cssproperty --track-color - The color of the track. + * @cssproperty --indicator-color - The color of the indicator. * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle. */ @customElement('sl-spinner')