From a2b4f6152d7b284f291e494f120aad98c54dbb16 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Wed, 19 Jul 2023 17:30:13 -0700 Subject: [PATCH] fix(progress)!: rename `progress` property to `value` PiperOrigin-RevId: 549471839 --- docs/components/circular-progress.md | 10 +++++----- docs/components/linear-progress.md | 10 +++++----- progress/demo/demo.ts | 2 +- progress/demo/stories.ts | 18 +++++++++--------- progress/lib/circular-progress.ts | 2 +- progress/lib/linear-progress.ts | 2 +- progress/lib/progress.ts | 4 ++-- 7 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/components/circular-progress.md b/docs/components/circular-progress.md index 3993c025c..03027fd56 100644 --- a/docs/components/circular-progress.md +++ b/docs/components/circular-progress.md @@ -75,7 +75,7 @@ indeterminate.](images/circularprogress/usage.gif "Determinate and indeterminate aria-label="Two circular progress indicators, one with three quarters of the track full and the other indeterminate."> - + @@ -86,7 +86,7 @@ indeterminate."> ```html - + ``` @@ -131,7 +131,7 @@ Add an attribute to progress indicators to give them a descriptive name. ```html - + ``` ## Theming @@ -179,7 +179,7 @@ Token | Default value } - + @@ -198,5 +198,5 @@ Token | Default value } - + ``` diff --git a/docs/components/linear-progress.md b/docs/components/linear-progress.md index 8ded6ce9c..6d25d9136 100644 --- a/docs/components/linear-progress.md +++ b/docs/components/linear-progress.md @@ -82,7 +82,7 @@ indeterminate.](images/linearprogress/usage.gif "Determinate and indeterminate l style="min-width:300px;flex-direction:column;justify-content:center;gap:16px;" title="Determinate and indeterminate linear progress indicators." aria-label="Two linear progress indicators, one with half the track and the other indeterminate."> - + @@ -92,7 +92,7 @@ indeterminate.](images/linearprogress/usage.gif "Determinate and indeterminate l ```html - + ``` @@ -136,7 +136,7 @@ Add an attribute to progress indicators to give them a descriptive name. ```html - + ``` ## Theming @@ -187,7 +187,7 @@ Token | Default value flex-grow: 1; } - + @@ -206,5 +206,5 @@ Token | Default value } - + ``` diff --git a/progress/demo/demo.ts b/progress/demo/demo.ts index 58833a200..897c193eb 100644 --- a/progress/demo/demo.ts +++ b/progress/demo/demo.ts @@ -22,7 +22,7 @@ function cssWire(prop: string, unit = '') { const collection = new MaterialCollection>( 'Progress indicators', [ - new Knob('progress', {ui: numberInput({step: 0.1}), defaultValue: 0.5}), + new Knob('value', {ui: numberInput({step: 0.1}), defaultValue: 0.5}), new Knob('indeterminate', {ui: boolInput(), defaultValue: false}), new Knob('fourColor', {ui: boolInput(), defaultValue: false}), new Knob( diff --git a/progress/demo/stories.ts b/progress/demo/stories.ts index 12d326c28..2d8d3b1e4 100644 --- a/progress/demo/stories.ts +++ b/progress/demo/stories.ts @@ -19,7 +19,7 @@ import {classMap} from 'lit/directives/class-map.js'; /** Knob types for linear progress stories. */ export interface StoryKnobs { - progress: number; + value: number; 'buffer (linear)': number; indeterminate: boolean; fourColor: boolean; @@ -47,14 +47,14 @@ const standard: MaterialStoryInit = { } `, render(knobs) { - const {progress, indeterminate, fourColor} = knobs; + const {value, indeterminate, fourColor} = knobs; const buffer = knobs['buffer (linear)']; const classes = {'custom': knobs['custom theme (linear)']}; return html` = { const standardCircular: MaterialStoryInit = { name: 'Circular progress', - render({progress, indeterminate, fourColor}) { + render({value, indeterminate, fourColor}) { return html` `; @@ -87,7 +87,7 @@ const iconButton: MaterialStoryInit = { position: absolute; } `, - render({progress, indeterminate, fourColor}) { + render({value, indeterminate, fourColor}) { const toggle = ({target}: Event) => { const spinner = ((target as HTMLElement).parentElement as MdCircularProgress); @@ -97,7 +97,7 @@ const iconButton: MaterialStoryInit = { return html`
@@ -116,7 +116,7 @@ const insideButton: MaterialStoryInit = { --md-tonal-button-with-icon-spacing-trailing: 8px; width: 80px; }`, - render({progress, indeterminate, fourColor}) { + render({value, indeterminate, fourColor}) { const loadTime = 2500; let loadTimeout = -1; const toggleLoad = (target: MdTonalButton) => { @@ -140,7 +140,7 @@ const insideButton: MaterialStoryInit = { toggleLoad(currentTarget as MdTonalButton); }}> diff --git a/progress/lib/circular-progress.ts b/progress/lib/circular-progress.ts index b12b326bf..55594ade1 100644 --- a/progress/lib/circular-progress.ts +++ b/progress/lib/circular-progress.ts @@ -23,7 +23,7 @@ export class CircularProgress extends Progress { // Determinate mode is rendered with an svg so the progress arc can be // easily animated via stroke-dashoffset. private renderDeterminateContainer() { - const dashOffset = (1 - this.progress) * 100; + const dashOffset = (1 - this.value) * 100; // note, dash-array/offset are relative to Setting `pathLength` but // Chrome seems to render this inaccurately and using a large viewbox helps. const pathLength = 100; diff --git a/progress/lib/linear-progress.ts b/progress/lib/linear-progress.ts index 0495190f6..07726ada5 100644 --- a/progress/lib/linear-progress.ts +++ b/progress/lib/linear-progress.ts @@ -36,7 +36,7 @@ export class LinearProgress extends Progress { // due to a now fixed Chrome bug: crbug.com/389359. protected override renderIndicator() { const progressStyles = { - transform: `scaleX(${(this.indeterminate ? 1 : this.progress) * 100}%)` + transform: `scaleX(${(this.indeterminate ? 1 : this.value) * 100}%)` }; const bufferStyles = { transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)` diff --git a/progress/lib/progress.ts b/progress/lib/progress.ts index 091a91d1d..a3910afa3 100644 --- a/progress/lib/progress.ts +++ b/progress/lib/progress.ts @@ -22,7 +22,7 @@ export abstract class Progress extends LitElement { /** * Progress to display, a fraction between 0 and 1. */ - @property({type: Number}) progress = 0; + @property({type: Number}) value = 0; /** * Whether or not to display indeterminate progress, which gives no indication @@ -44,7 +44,7 @@ export abstract class Progress extends LitElement { aria-label="${ariaLabel || nothing}" aria-valuemin="0" aria-valuemax="1" - aria-valuenow=${this.indeterminate ? nothing : this.progress} + aria-valuenow=${this.indeterminate ? nothing : this.value} >${this.renderIndicator()}
`; }