diff --git a/docs/components/progress-bar.md b/docs/components/progress-bar.md index cff5327f4..9818b132e 100644 --- a/docs/components/progress-bar.md +++ b/docs/components/progress-bar.md @@ -5,7 +5,7 @@ Progress bars are used to show the status of an ongoing operation. ```html preview - + ``` ## Examples @@ -15,7 +15,7 @@ Progress bars are used to show the status of an ongoing operation. Use the `--height` custom property to set the progress bar's height. ```html preview - + ``` ### Labels @@ -23,7 +23,7 @@ Use the `--height` custom property to set the progress bar's height. Use the default slot to show a label. ```html preview -50% +50%
@@ -36,22 +36,22 @@ Use the default slot to show a label. const addButton = subtractButton.nextElementSibling; addButton.addEventListener('click', () => { - const percentage = Math.min(100, progressBar.percentage + 10); - progressBar.percentage = percentage; - progressBar.textContent = `${percentage}%`; + const value = Math.min(100, progressBar.value + 10); + progressBar.value = value; + progressBar.textContent = `${value}%`; }); subtractButton.addEventListener('click', () => { - const percentage = Math.max(0, progressBar.percentage - 10) - progressBar.percentage = percentage; - progressBar.textContent = `${percentage}%`; + const value = Math.max(0, progressBar.value - 10) + progressBar.value = value; + progressBar.textContent = `${value}%`; }); ``` ### Indeterminate -The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `percentage` is ignored and the label, if present, will not be shown. +The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `value` is ignored and the label, if present, will not be shown. ```html preview diff --git a/docs/components/progress-ring.md b/docs/components/progress-ring.md index fd7517b41..ba1c1a8c4 100644 --- a/docs/components/progress-ring.md +++ b/docs/components/progress-ring.md @@ -5,7 +5,7 @@ Progress rings are used to show the progress of a determinate operation in a circular fashion. ```html preview - + ``` ## Examples @@ -15,7 +15,7 @@ Progress rings are used to show the progress of a determinate operation in a cir Use the `--size` custom property to set the diameter of the progress ring. ```html preview - + ``` ### Track Width @@ -23,7 +23,7 @@ Use the `--size` custom property to set the diameter of the progress ring. Use the `track-width` attribute to set the width of the progress ring's track. ```html preview - + ``` ### Colors @@ -32,7 +32,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop ```html preview 50% +50%
@@ -58,15 +58,15 @@ Use the default slot to show a label. const addButton = subtractButton.nextElementSibling; addButton.addEventListener('click', () => { - const percentage = Math.min(100, progressRing.percentage + 10); - progressRing.percentage = percentage; - progressRing.textContent = `${percentage}%`; + const value = Math.min(100, progressRing.value + 10); + progressRing.value = value; + progressRing.textContent = `${value}%`; }); subtractButton.addEventListener('click', () => { - const percentage = Math.max(0, progressRing.percentage - 10) - progressRing.percentage = percentage; - progressRing.textContent = `${percentage}%`; + const value = Math.max(0, progressRing.value - 10) + progressRing.value = value; + progressRing.textContent = `${value}%`; }); ``` diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 72cc66816..d35a71f78 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next - 🚨 BREAKING: removed `` (use `` instead) +- 🚨 BREAKING: removed `percentage` attribute from `` and `` (use `value`) instead - Added the `` component - Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode - Added the `--sl-panel-border-width` design token diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index 1788b8287..e9f010624 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -23,8 +23,8 @@ import styles from './progress-bar.styles'; export default class SlProgressBar extends LitElement { static styles = styles; - /** The progress bar's percentage, 0 to 100. */ - @property({ type: Number, reflect: true }) percentage = 0; + /** The current progress, 0 to 100. */ + @property({ type: Number, reflect: true }) value = 0; /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */ @property({ type: Boolean, reflect: true }) indeterminate = false; @@ -40,9 +40,9 @@ export default class SlProgressBar extends LitElement { role="progressbar" aria-valuemin="0" aria-valuemax="100" - aria-valuenow="${this.indeterminate ? '' : this.percentage}" + aria-valuenow="${this.indeterminate ? '' : this.value}" > -
+
${!this.indeterminate ? html` diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index 29fe40189..1eeccd65a 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -24,8 +24,8 @@ export default class SlProgressRing extends LitElement { @state() indicatorOffset: string; - /** The current progress percentage, 0 - 100. */ - @property({ type: Number, reflect: true }) percentage: number; + /** The current progress, 0 to 100. */ + @property({ type: Number, reflect: true }) value = 0; updated(changedProps: Map) { super.updated(changedProps); @@ -38,7 +38,7 @@ export default class SlProgressRing extends LitElement { 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; + const offset = circumference - (this.value / 100) * circumference; this.indicatorOffset = String(offset) + 'px'; } @@ -52,8 +52,8 @@ export default class SlProgressRing extends LitElement { role="progressbar" aria-valuemin="0" aria-valuemax="100" - aria-valuenow="${this.percentage}" - style="--percentage: ${this.percentage / 100}" + aria-valuenow="${this.value}" + style="--percentage: ${this.value / 100}" >