mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(progress)!: rename progress
property to value
PiperOrigin-RevId: 549471839
This commit is contained in:
parent
e9ef7ec5b4
commit
a2b4f6152d
@ -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.">
|
||||
<md-circular-progress progress="0.75"></md-circular-progress>
|
||||
<md-circular-progress value="0.75"></md-circular-progress>
|
||||
|
||||
<md-circular-progress indeterminate></md-circular-progress>
|
||||
</figure>
|
||||
@ -86,7 +86,7 @@ indeterminate.">
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-circular-progress progress="0.75"></md-circular-progress>
|
||||
<md-circular-progress value="0.75"></md-circular-progress>
|
||||
|
||||
<md-circular-progress indeterminate></md-circular-progress>
|
||||
```
|
||||
@ -131,7 +131,7 @@ Add an
|
||||
attribute to progress indicators to give them a descriptive name.
|
||||
|
||||
```html
|
||||
<md-circular-progress progress="0.5" aria-label="Page refresh progress"></md-circular-progress>
|
||||
<md-circular-progress value="0.5" aria-label="Page refresh progress"></md-circular-progress>
|
||||
```
|
||||
|
||||
## Theming
|
||||
@ -179,7 +179,7 @@ Token | Default value
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-circular-progress progress="0.5"></md-circular-progress>
|
||||
<md-circular-progress value="0.5"></md-circular-progress>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@ -198,5 +198,5 @@ Token | Default value
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-circular-progress progress="0.5"></md-circular-progress>
|
||||
<md-circular-progress value="0.5"></md-circular-progress>
|
||||
```
|
||||
|
@ -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.">
|
||||
<md-linear-progress style="width:100%;" progress="0.5"></md-linear-progress>
|
||||
<md-linear-progress style="width:100%;" value="0.5"></md-linear-progress>
|
||||
<md-linear-progress style="width:100%;" indeterminate></md-linear-progress>
|
||||
</figure>
|
||||
</div>
|
||||
@ -92,7 +92,7 @@ indeterminate.](images/linearprogress/usage.gif "Determinate and indeterminate l
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-linear-progress progress="0.5"></md-linear-progress>
|
||||
<md-linear-progress value="0.5"></md-linear-progress>
|
||||
|
||||
<md-linear-progress indeterminate></md-linear-progress>
|
||||
```
|
||||
@ -136,7 +136,7 @@ Add an
|
||||
attribute to progress indicators to give them a descriptive name.
|
||||
|
||||
```html
|
||||
<md-linear-progress progress="0.5" aria-label="Download progress"></md-linear-progress>
|
||||
<md-linear-progress value="0.5" aria-label="Download progress"></md-linear-progress>
|
||||
```
|
||||
|
||||
## Theming
|
||||
@ -187,7 +187,7 @@ Token | Default value
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
<md-linear-progress progress="0.5"></md-linear-progress>
|
||||
<md-linear-progress value="0.5"></md-linear-progress>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
@ -206,5 +206,5 @@ Token | Default value
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-linear-progress progress="0.5"></md-linear-progress>
|
||||
<md-linear-progress value="0.5"></md-linear-progress>
|
||||
```
|
||||
|
@ -22,7 +22,7 @@ function cssWire<T = string>(prop: string, unit = '') {
|
||||
|
||||
const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
|
||||
'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(
|
||||
|
@ -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<StoryKnobs> = {
|
||||
}
|
||||
`,
|
||||
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`
|
||||
<md-linear-progress
|
||||
class=${classMap(classes)}
|
||||
.progress=${progress}
|
||||
.value=${value}
|
||||
.buffer=${buffer}
|
||||
.indeterminate=${indeterminate}
|
||||
.fourColor=${fourColor}
|
||||
@ -65,10 +65,10 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
|
||||
const standardCircular: MaterialStoryInit<StoryKnobs> = {
|
||||
name: 'Circular progress',
|
||||
render({progress, indeterminate, fourColor}) {
|
||||
render({value, indeterminate, fourColor}) {
|
||||
return html`
|
||||
<md-circular-progress
|
||||
.progress=${progress}
|
||||
.value=${value}
|
||||
.indeterminate=${indeterminate}
|
||||
.fourColor=${fourColor}
|
||||
></md-circular-progress>`;
|
||||
@ -87,7 +87,7 @@ const iconButton: MaterialStoryInit<StoryKnobs> = {
|
||||
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<StoryKnobs> = {
|
||||
return html`
|
||||
<div class="around-icon">
|
||||
<md-circular-progress
|
||||
.progress=${progress}
|
||||
.value=${value}
|
||||
.indeterminate=${indeterminate}
|
||||
.fourColor=${fourColor}
|
||||
></md-circular-progress>
|
||||
@ -116,7 +116,7 @@ const insideButton: MaterialStoryInit<StoryKnobs> = {
|
||||
--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<StoryKnobs> = {
|
||||
toggleLoad(currentTarget as MdTonalButton);
|
||||
}}>
|
||||
<md-circular-progress slot="nothing"
|
||||
.progress=${progress}
|
||||
.value=${value}
|
||||
.indeterminate=${indeterminate}
|
||||
.fourColor=${fourColor}
|
||||
></md-circular-progress>
|
||||
|
@ -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;
|
||||
|
@ -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}%)`
|
||||
|
@ -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()}</div>
|
||||
`;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user