feat(progress): add max property

PiperOrigin-RevId: 549673538

progress/demo/demo.ts

@@ -23,6 +23,7 @@ function cssWire<T = string>(prop: string, unit = '') {
 const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
     'Progress indicators', [
       new Knob('value', {ui: numberInput({step: 0.1}), defaultValue: 0.5}),
+      new Knob('max', {ui: numberInput(), defaultValue: 1}),
       new Knob('indeterminate', {ui: boolInput(), defaultValue: false}),
       new Knob('fourColor', {ui: boolInput(), defaultValue: false}),
       new Knob(

progress/demo/stories.ts

@@ -20,6 +20,7 @@ import {classMap} from 'lit/directives/class-map.js';
 /** Knob types for linear progress stories. */
 export interface StoryKnobs {
   value: number;
+  max: number;
   'buffer (linear)': number;
   indeterminate: boolean;
   fourColor: boolean;
@@ -47,7 +48,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
     }
   `,
   render(knobs) {
-    const {value, indeterminate, fourColor} = knobs;
+    const {value, max, indeterminate, fourColor} = knobs;
     const buffer = knobs['buffer (linear)'];
     const classes = {'custom': knobs['custom theme (linear)']};
 
@@ -55,6 +56,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
       <md-linear-progress
           class=${classMap(classes)}
           .value=${value}
+          .max=${max}
           .buffer=${buffer}
           .indeterminate=${indeterminate}
           .fourColor=${fourColor}
@@ -65,10 +67,11 @@ const standard: MaterialStoryInit<StoryKnobs> = {
 
 const standardCircular: MaterialStoryInit<StoryKnobs> = {
   name: 'Circular progress',
-  render({value, indeterminate, fourColor}) {
+  render({value, max, indeterminate, fourColor}) {
     return html`
       <md-circular-progress
           .value=${value}
+          .max=${max}
           .indeterminate=${indeterminate}
           .fourColor=${fourColor}
       ></md-circular-progress>`;
@@ -87,7 +90,7 @@ const iconButton: MaterialStoryInit<StoryKnobs> = {
       position: absolute;
     }
   `,
-  render({value, indeterminate, fourColor}) {
+  render({value, max, indeterminate, fourColor}) {
     const toggle = ({target}: Event) => {
       const spinner =
           ((target as HTMLElement).parentElement as MdCircularProgress);
@@ -98,6 +101,7 @@ const iconButton: MaterialStoryInit<StoryKnobs> = {
       <div class="around-icon">
         <md-circular-progress
           .value=${value}
+          .max=${max}
           .indeterminate=${indeterminate}
           .fourColor=${fourColor}
         ></md-circular-progress>
@@ -116,7 +120,7 @@ const insideButton: MaterialStoryInit<StoryKnobs> = {
         --md-tonal-button-with-icon-spacing-trailing: 8px;
         width: 80px;
       }`,
-  render({value, indeterminate, fourColor}) {
+  render({value, max, indeterminate, fourColor}) {
     const loadTime = 2500;
     let loadTimeout = -1;
     const toggleLoad = (target: MdTonalButton) => {
@@ -141,6 +145,7 @@ const insideButton: MaterialStoryInit<StoryKnobs> = {
         }}>
         <md-circular-progress slot="nothing"
             .value=${value}
+            .max=${max}
             .indeterminate=${indeterminate}
             .fourColor=${fourColor}
         ></md-circular-progress>

progress/lib/circular-progress.ts

@@ -23,15 +23,16 @@ 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.value) * 100;
+    const dashOffset = (1 - this.value / this.max) * 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;
+    return html`
-    return html`<svg viewBox="0 0 4800 4800">
+      <svg viewBox="0 0 4800 4800">
-      <circle class="track" pathLength="${pathLength}"></circle>
+        <circle class="track" pathLength="100"></circle>
-      <circle class="progress" pathLength="${pathLength}" stroke-dashoffset="${
+        <circle class="progress" pathLength="100"
-        dashOffset}"></circle>
+          stroke-dashoffset=${dashOffset}></circle>
-    </svg>`;
+      </svg>
+    `;
   }
 
   // Indeterminate mode rendered with 2 bordered-divs. The borders are

progress/lib/linear-progress.ts

@@ -36,10 +36,12 @@ 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.value) * 100}%)`
+      transform:
+          `scaleX(${(this.indeterminate ? 1 : this.value / this.max) * 100}%)`
     };
     const bufferStyles = {
-      transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`
+      transform:
+          `scaleX(${(this.indeterminate ? 1 : this.buffer / this.max) * 100}%)`
     };
 
     return html`

progress/lib/progress.ts

@@ -20,10 +20,15 @@ export abstract class Progress extends LitElement {
   }
 
   /**
-   * Progress to display, a fraction between 0 and 1.
+   * Progress to display, a fraction between 0 and `max`.
    */
   @property({type: Number}) value = 0;
 
+  /**
+   * Maximum progress to display, defaults to 1.
+   */
+  @property({type: Number}) max = 1;
+
   /**
    * Whether or not to display indeterminate progress, which gives no indication
    * to how long an activity will take.
@@ -43,7 +48,7 @@ export abstract class Progress extends LitElement {
         role="progressbar"
         aria-label="${ariaLabel || nothing}"
         aria-valuemin="0"
-        aria-valuemax="1"
+        aria-valuemax=${this.max}
         aria-valuenow=${this.indeterminate ? nothing : this.value}
       >${this.renderIndicator()}</div>
     `;