Foundation: Update Progress templates

microsoft · Aug 8, 2023 · 6a11f49 · 6a11f49
1 parent 50dba9c
commit 6a11f49
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 141 deletions.
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -2526,14 +2526,21 @@ export type PickerOptions = {
 // @public
 export function pickerTemplate<T extends FASTPicker>(options: PickerOptions): ElementViewTemplate<T>;
 
+// @public (undocumented)
+export const progressIndicatorTemplate: ViewTemplate<any, any>;
+
 // @public
 export type ProgressOptions = {
-    indeterminateIndicator1?: StaticallyComposableHTML<FASTProgress>;
-    indeterminateIndicator2?: StaticallyComposableHTML<FASTProgress>;
+    determinateIndicator?: StaticallyComposableHTML<FASTProgress>;
+    indeterminateIndicator?: StaticallyComposableHTML<FASTProgress>;
 };
 
+// @public (undocumented)
+export const progressRingIndicatorTemplate: ViewTemplate<any, any>;
+
 // @public
 export type ProgressRingOptions = {
+    determinateIndicator?: StaticallyComposableHTML<FASTProgressRing>;
     indeterminateIndicator?: StaticallyComposableHTML<FASTProgressRing>;
 };
 

diff --git a/packages/web-components/fast-foundation/src/progress-ring/index.ts b/packages/web-components/fast-foundation/src/progress-ring/index.ts
@@ -1,3 +1,4 @@
+export * from "../progress/base-progress.js";
 export * from "./progress-ring.js";
 export * from "./progress-ring.options.js";
 export * from "./progress-ring.template.js";
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.options.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.options.ts
@@ -6,5 +6,6 @@ import type { FASTProgressRing } from "./progress-ring.js";
  * @public
  */
 export type ProgressRingOptions = {
+    determinateIndicator?: StaticallyComposableHTML<FASTProgressRing>;
     indeterminateIndicator?: StaticallyComposableHTML<FASTProgressRing>;
 };
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.pw.spec.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.pw.spec.ts
@@ -1,6 +1,7 @@
 import { expect, test } from "@playwright/test";
 import type { Locator, Page } from "@playwright/test";
 import { fixtureURL } from "../__test__/helpers.js";
+import type { FASTProgressRing } from "./progress-ring.js";
 
 test.describe("Progress ring", () => {
     let page: Page;
@@ -61,15 +62,67 @@ test.describe("Progress ring", () => {
         await expect(element).toHaveAttribute("aria-valuemax", "75");
     });
 
-    test("should render an element with a `determinate` slot when a value is provided", async () => {
+    test("should render an element with a `determinate` class when a value is provided", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-progress-ring value="50"></fast-progress-ring>
             `;
         });
 
-        const progress = element.locator(".progress");
+        const progress = element.locator(".determinate");
 
-        await expect(progress).toHaveAttribute("slot", "determinate");
+        await expect(progress).toHaveCount(1);
+    });
+
+    test("should render an element with an `indeterminate` class when no value is provided", async () => {
+        await root.evaluate(node => {
+            node.innerHTML = /* html */ `
+                <fast-progress-ring></fast-progress-ring>
+            `;
+        });
+
+        const progress = element.locator(".indeterminate");
+
+        await expect(progress).toHaveCount(1);
+    });
+
+    test("should return the `percentComplete` property as a value between 0 and 100 when `min` and `max` are unset", async () => {
+        await page.setContent(/* html */ `
+            <fast-progress-ring value="50"></fast-progress-ring>
+        `);
+
+        await expect(element).toHaveJSProperty("percentComplete", 50);
+    });
+
+    test("should set the `percentComplete` property to match the current `value` in the range of `min` and `max`", async () => {
+        await page.setContent(/* html */ `
+            <fast-progress-ring value="0"></fast-progress-ring>
+        `);
+
+        await expect(element).toHaveJSProperty("percentComplete", 0);
+
+        await element.evaluate((node: FASTProgressRing) => {
+            node.value = 50;
+        });
+
+        await expect(element).toHaveJSProperty("percentComplete", 50);
+
+        await element.evaluate((node: FASTProgressRing) => {
+            node.value = 100;
+        });
+
+        await expect(element).toHaveJSProperty("percentComplete", 100);
+
+        await element.evaluate((node: FASTProgressRing) => {
+            node.max = 200;
+        });
+
+        await expect(element).toHaveJSProperty("percentComplete", 50);
+
+        await element.evaluate((node: FASTProgressRing) => {
+            node.min = 100;
+        });
+
+        await expect(element).toHaveJSProperty("percentComplete", 0);
     });
 });
diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.template.ts
@@ -4,7 +4,15 @@ import { staticallyCompose } from "../utilities/template-helpers.js";
 import type { FASTProgressRing } from "./progress-ring.js";
 import type { ProgressRingOptions } from "./progress-ring.options.js";
 
-const progressSegments: number = 44;
+/**
+ * @public
+ */
+export const progressRingIndicatorTemplate = html`
+    <svg viewBox="0 0 16 16" class="progress">
+        <circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle>
+        <circle class="indicator" part="indicator" cx="8px" cy="8px" r="7px"></circle>
+    </svg>
+`;
 
 /**
  * The template for the {@link @microsoft/fast-foundation#FASTProgressRing} component.
@@ -23,35 +31,22 @@ export function progressRingTemplate<T extends FASTProgressRing>(
             ${when(
                 x => typeof x.value === "number",
                 html<T>`
-                    <svg
-                        class="progress"
-                        part="progress"
-                        viewBox="0 0 16 16"
-                        slot="determinate"
+                    <span
+                        class="determinate"
+                        part="determinate"
+                        style="--percent-complete: ${x => x.percentComplete}"
                     >
-                        <circle
-                            class="background"
-                            part="background"
-                            cx="8px"
-                            cy="8px"
-                            r="7px"
-                        ></circle>
-                        <circle
-                            class="determinate"
-                            part="determinate"
-                            style="stroke-dasharray: ${x =>
-                                (progressSegments * x.percentComplete) /
-                                100}px ${progressSegments}px"
-                            cx="8px"
-                            cy="8px"
-                            r="7px"
-                        ></circle>
-                    </svg>
+                        <slot name="determinate">
+                            ${staticallyCompose(options.determinateIndicator)}
+                        </slot>
+                    </span>
                 `,
                 html<T>`
-                    <slot name="indeterminate">
-                        ${staticallyCompose(options.indeterminateIndicator)}
-                    </slot>
+                    <span class="indeterminate" part="indeterminate">
+                        <slot name="indeterminate">
+                            ${staticallyCompose(options.indeterminateIndicator)}
+                        </slot>
+                    </span>
                 `
             )}
         </template>

diff --git a/packages/web-components/fast-foundation/src/progress-ring/progress-ring.ts b/packages/web-components/fast-foundation/src/progress-ring/progress-ring.ts
@@ -4,11 +4,10 @@ import { FASTBaseProgress } from "../progress/base-progress.js";
  * An circular Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
- * @slot indeterminate - The slot for a custom indeterminate indicator
- * @slot determinate - The slot for a custom determinate indicator
- * @csspart progress - Represents the progress element
+ * @slot determinate - The slot for the determinate indicator
+ * @slot indeterminate - The slot for the indeterminate indicator
  * @csspart determinate - The determinate indicator
- * @csspart background - The background
+ * @csspart indeterminate - The indeterminate indicator
  *
  * @public
  */

diff --git a/packages/web-components/fast-foundation/src/progress-ring/stories/progress-ring.register.ts b/packages/web-components/fast-foundation/src/progress-ring/stories/progress-ring.register.ts
@@ -1,7 +1,9 @@
-import { html } from "@microsoft/fast-element";
 import { css } from "@microsoft/fast-element";
 import { FASTProgressRing } from "../progress-ring.js";
-import { progressRingTemplate } from "../progress-ring.template.js";
+import {
+    progressRingIndicatorTemplate,
+    progressRingTemplate,
+} from "../progress-ring.template.js";
 
 const styles = css`
     :host {
@@ -24,17 +26,22 @@ const styles = css`
         stroke-width: 2px;
     }
 
-    .determinate {
+    .determinate .indicator {
+        --progress-segments: 44;
         stroke: var(--accent-foreground-rest);
         fill: none;
+        stroke-dasharray: calc(
+                ((var(--progress-segments) * var(--percent-complete)) / 100) * 1px
+            )
+            calc(var(--progress-segments) * 1px);
         stroke-width: 2px;
         stroke-linecap: round;
         transform-origin: 50% 50%;
         transform: rotate(-90deg);
         transition: all 0.2s ease-in-out;
     }
 
-    .indeterminate-indicator-1 {
+    .indeterminate .indicator {
         stroke: var(--accent-foreground-rest);
         fill: none;
         stroke-width: 2px;
@@ -64,24 +71,8 @@ const styles = css`
 FASTProgressRing.define({
     name: "fast-progress-ring",
     template: progressRingTemplate({
-        indeterminateIndicator: /* html */ html`
-            <svg class="progress" part="progress" viewBox="0 0 16 16">
-                <circle
-                    class="background"
-                    part="background"
-                    cx="8px"
-                    cy="8px"
-                    r="7px"
-                ></circle>
-                <circle
-                    class="indeterminate-indicator-1"
-                    part="indeterminate-indicator-1"
-                    cx="8px"
-                    cy="8px"
-                    r="7px"
-                ></circle>
-            </svg>
-        `,
+        determinateIndicator: progressRingIndicatorTemplate,
+        indeterminateIndicator: progressRingIndicatorTemplate,
     }),
     styles,
 });
diff --git a/packages/web-components/fast-foundation/src/progress/README.md b/packages/web-components/fast-foundation/src/progress/README.md
@@ -174,17 +174,17 @@ export const myProgressRing = ProgressRing.compose<ProgressRingOptions>({
 
 #### CSS Parts
 
-| Name            | Description                     |
-| --------------- | ------------------------------- |
-| `progress`      | Represents the progress element |
-| `determinate`   | The determinate indicator       |
-| `indeterminate` | The indeterminate indicator     |
+| Name            | Description                 |
+| --------------- | --------------------------- |
+| `determinate`   | The determinate indicator   |
+| `indeterminate` | The indeterminate indicator |
 
 #### Slots
 
-| Name            | Description                                   |
-| --------------- | --------------------------------------------- |
-| `indeterminate` | The slot for a custom indeterminate indicator |
+| Name            | Description                              |
+| --------------- | ---------------------------------------- |
+| `determinate`   | The slot for the determinate indicator   |
+| `indeterminate` | The slot for the indeterminate indicator |
 
 <hr/>
 

diff --git a/packages/web-components/fast-foundation/src/progress/progress.options.ts b/packages/web-components/fast-foundation/src/progress/progress.options.ts
@@ -6,6 +6,6 @@ import type { FASTProgress } from "./progress.js";
  * @public
  */
 export type ProgressOptions = {
-    indeterminateIndicator1?: StaticallyComposableHTML<FASTProgress>;
-    indeterminateIndicator2?: StaticallyComposableHTML<FASTProgress>;
+    determinateIndicator?: StaticallyComposableHTML<FASTProgress>;
+    indeterminateIndicator?: StaticallyComposableHTML<FASTProgress>;
 };
diff --git a/packages/web-components/fast-foundation/src/progress/progress.pw.spec.ts b/packages/web-components/fast-foundation/src/progress/progress.pw.spec.ts
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
 import { fixtureURL } from "../__test__/helpers.js";
 import type { FASTProgress } from "./progress.js";
 
-test.describe("Progress ring", () => {
+test.describe("Progress", () => {
     let page: Page;
     let element: Locator;
     let root: Locator;
@@ -56,28 +56,28 @@ test.describe("Progress ring", () => {
         await expect(element).toHaveAttribute("aria-valuemax", "50");
     });
 
-    test("should render an element with a `determinate` slot when a value is provided", async () => {
+    test("should render an element with a `determinate` class when a value is provided", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-progress value="50"></fast-progress>
             `;
         });
 
-        const progress = element.locator(".progress");
+        const progress = element.locator(".determinate");
 
-        await expect(progress).toHaveAttribute("slot", "determinate");
+        await expect(progress).toHaveCount(1);
     });
 
-    test("should render an element with an `indeterminate` slot when no value is provided", async () => {
+    test("should render an element with an `indeterminate` class when no value is provided", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `
                 <fast-progress></fast-progress>
             `;
         });
 
-        const progress = element.locator(".progress");
+        const progress = element.locator(".indeterminate");
 
-        await expect(progress).toHaveAttribute("slot", "indeterminate");
+        await expect(progress).toHaveCount(1);
     });
 
     test("should return the `percentComplete` property as a value between 0 and 100 when `min` and `max` are unset", async () => {

diff --git a/packages/web-components/fast-foundation/src/progress/progress.template.ts b/packages/web-components/fast-foundation/src/progress/progress.template.ts
@@ -4,14 +4,21 @@ import { staticallyCompose } from "../utilities/template-helpers.js";
 import type { FASTProgress } from "./progress.js";
 import type { ProgressOptions } from "./progress.options.js";
 
+/**
+ * @public
+ */
+export const progressIndicatorTemplate = html`
+    <div class="indicator" part="indicator"></div>
+`;
+
 /**
  * The template for the {@link @microsoft/fast-foundation#FASTProgress} component.
  * @public
  */
 export function progressTemplate<T extends FASTProgress>(
     options: ProgressOptions = {}
 ): ElementViewTemplate<T> {
-    return html`
+    return html<T>`
         <template
             role="progressbar"
             aria-valuenow="${x => x.value}"
@@ -21,21 +28,22 @@ export function progressTemplate<T extends FASTProgress>(
             ${when(
                 x => typeof x.value === "number",
                 html<T>`
-                    <div class="progress" part="progress" slot="determinate">
-                        <div
-                            class="determinate"
-                            part="determinate"
-                            style="width: ${x => x.percentComplete}%"
-                        ></div>
-                    </div>
+                    <span
+                        class="determinate"
+                        part="determinate"
+                        style="--percent-complete: ${x => x.percentComplete}"
+                    >
+                        <slot name="determinate">
+                            ${staticallyCompose(options.determinateIndicator)}
+                        </slot>
+                    </span>
                 `,
                 html<T>`
-                    <div class="progress" part="progress" slot="indeterminate">
+                    <span class="indeterminate" part="indeterminate">
                         <slot name="indeterminate">
-                            ${staticallyCompose(options.indeterminateIndicator1)}
-                            ${staticallyCompose(options.indeterminateIndicator2)}
+                            ${staticallyCompose(options.indeterminateIndicator)}
                         </slot>
-                    </div>
+                    </span>
                 `
             )}
         </template>