Progress scaffold & implementation

packages/react-components/react-progress/bundle-size/Progress.fixture.js

@@ -0,0 +1,7 @@
+import { Progress } from '@fluentui/react-progress';
+
+console.log(Progress);
+
+export default {
+  name: 'Progress',
+};

packages/react-components/react-progress/etc/react-progress.api.md

@@ -7,6 +7,7 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -18,15 +19,22 @@ export const Progress: ForwardRefComponent<ProgressProps>;
 export const progressClassNames: SlotClassNames<ProgressSlots>;
 
 // @public
-export type ProgressProps = ComponentProps<ProgressSlots> & {};
+export type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {
+    appearance?: 'primary' | 'inverted';
+    barHeight?: number;
+    percentComplete?: number;
+};
 
 // @public (undocumented)
 export type ProgressSlots = {
-    root: Slot<'div'>;
+    root: NonNullable<Slot<'div'>>;
+    label?: Slot<typeof Label>;
+    indicator?: Slot<'span'>;
+    description?: Slot<typeof Label>;
 };
 
 // @public
-export type ProgressState = ComponentState<ProgressSlots>;
+export type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'appearance' | 'barHeight' | 'percentComplete'>>;
 
 // @public
 export const renderProgress_unstable: (state: ProgressState) => JSX.Element;

packages/react-components/react-progress/package.json

@@ -18,12 +18,12 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
+    "start": "yarn storybook",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-progress/src && yarn docs",
-    "type-check": "tsc -b tsconfig.json",
     "storybook": "node ../../../scripts/storybook/runner",
-    "start": "yarn storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-progress/src && yarn docs",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -32,8 +32,10 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@fluentui/react-label": "^9.0.3",
     "@fluentui/react-theme": "^9.0.0",
     "@fluentui/react-utilities": "^9.0.2",
+    "@fluentui/react-shared-contexts": "^9.0.0",
     "@griffel/react": "^1.2.0",
     "tslib": "^2.1.0"
   },

packages/react-components/react-progress/src/components/Progress/DefaultDiv.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export const DefaultDiv = () => (
+  <div className="fui-Progress__Container">
+    <div className="fui-Progress__Track" />
+    <div className="fui-Progress__Bar" />
+  </div>
+);

packages/react-components/react-progress/src/components/Progress/Progress.test.tsx

@@ -8,6 +8,16 @@ describe('Progress', () => {
     Component: Progress,
     displayName: 'Progress',
     disabledTests: ['component-has-static-classname', 'component-has-static-classname-exported'],
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            label: 'Test Label',
+            description: 'Test Description',
+          },
+        },
+      ],
+    },
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests

packages/react-components/react-progress/src/components/Progress/Progress.tsx

@@ -6,7 +6,7 @@ import type { ProgressProps } from './Progress.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * Progress component - TODO: add more docs
+ * Converged Progress component for the fluentui repo
  */
 export const Progress: ForwardRefComponent<ProgressProps> = React.forwardRef((props, ref) => {
   const state = useProgress_unstable(props, ref);

packages/react-components/react-progress/src/components/Progress/Progress.types.ts

@@ -1,17 +1,52 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { Label } from '@fluentui/react-label';
 
 export type ProgressSlots = {
-  root: Slot<'div'>;
+  /**
+   * The root of the Progress
+   * The root slot receives the `className` and `style` specified directly on the `<Progress>`.
+   */
+  root: NonNullable<Slot<'div'>>;
+  /**
+   * The title of the Progress.
+   * The label slot receives the styling related to the title associated with the Progress.
+   */
+  label?: Slot<typeof Label>;
+  /**
+   * The animated slot of the Progress
+   * The indicator slot receives the styling related to the loading bar associated with the Progress
+   */
+  indicator?: Slot<'span'>;
+  /**
+   * The description slot of the Progress
+   * The description slot receives the styling related to the description associated with the Progress
+   */
+  description?: Slot<typeof Label>;
 };
 
 /**
  * Progress Props
  */
-export type ProgressProps = ComponentProps<ProgressSlots> & {};
+export type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {
+  /**
+   * The appearance of the Progress.
+   * @default 'primary'
+   */
+  appearance?: 'primary' | 'inverted';
+  /**
+   * The height of the Progress bar
+   * @defaultValue 2
+   */
+  barHeight?: number;
+  /**
+   * Percentage of the operation's completeness, numerically between 0 and 1. If this is not set,
+   * the indeterminate progress animation will be shown instead.
+   */
+  percentComplete?: number;
+};
 
 /**
  * State used in rendering Progress
  */
-export type ProgressState = ComponentState<ProgressSlots>;
-// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from ProgressProps
-// & Required<Pick<ProgressProps, 'propName'>>
+export type ProgressState = ComponentState<ProgressSlots> &
+  Required<Pick<ProgressProps, 'appearance' | 'barHeight' | 'percentComplete'>>;

packages/react-components/react-progress/src/components/Progress/__snapshots__/Progress.test.tsx.snap

@@ -4,8 +4,23 @@ exports[`Progress renders a default state 1`] = `
 <div>
   <div
     class="fui-Progress"
+    role="progressbar"
   >
-    Default Progress
+    <span
+      class="fui-Progress__indicator"
+      style="--fui-Progress--percentage: 0; --fui-Progress--transition: width .3s ease;"
+    >
+      <div
+        class="fui-Progress__Container"
+      >
+        <div
+          class="fui-Progress__Track"
+        />
+        <div
+          class="fui-Progress__Bar"
+        />
+      </div>
+    </span>
   </div>
 </div>
 `;

packages/react-components/react-progress/src/components/Progress/renderProgress.tsx

@@ -3,11 +3,15 @@ import { getSlots } from '@fluentui/react-utilities';
 import type { ProgressState, ProgressSlots } from './Progress.types';
 
 /**
- * Render the final JSX of Progress
+ * Render the final JSX of Spinner
  */
 export const renderProgress_unstable = (state: ProgressState) => {
   const { slots, slotProps } = getSlots<ProgressSlots>(state);
-
-  // TODO Add additional slots in the appropriate place
-  return <slots.root {...slotProps.root} />;
+  return (
+    <slots.root {...slotProps.root}>
+      {slots.label && <slots.label {...slotProps.label} />}
+      {slots.indicator && <slots.indicator {...slotProps.indicator} />}
+      {slots.description && <slots.description {...slotProps.description} />}
+    </slots.root>
+  );
 };

packages/react-components/react-progress/src/components/Progress/useProgress.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import type { ProgressProps, ProgressState } from './Progress.types';
+import { Label } from '@fluentui/react-label';
+import { DefaultDiv } from './DefaultDiv';
+import { useProgressState_unstable } from './useProgressState';
+
+/**
+ * Create the state required to render Progress.
+ *
+ * The returned state can be modified with hooks such as useProgressStyles_unstable,
+ * before being passed to renderProgress_unstable.
+ *
+ * @param props - props from this instance of Progress
+ * @param ref - reference to root HTMLElement of Progress
+ */
+export const useProgress_unstable = (props: ProgressProps, ref: React.Ref<HTMLElement>): ProgressState => {
+  // Props
+  const { appearance = 'primary', barHeight = 2, percentComplete = -1 } = props;
+  const baseId = useId('Progress');
+  const describedbyId = useId('Progress Description');
+
+  const { role = 'progressbar', ...rest } = props;
+  const nativeRoot = getNativeElementProps('div', { ref, role, ...rest });
+
+  const labelShorthand = resolveShorthand(props.label, {
+    defaultProps: {
+      id: baseId,
+    },
+    required: false,
+  });
+
+  const descriptionShorthand = resolveShorthand(props.description, {
+    defaultProps: {
+      id: describedbyId,
+    },
+    required: false,
+  });
+
+  const indicatorShortHand = resolveShorthand(props.indicator, {
+    required: true,
+    defaultProps: {
+      children: <DefaultDiv />,
+    },
+  });
+
+  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
+    nativeRoot['aria-labelledby'] = labelShorthand.id;
+  }
+
+  const state: ProgressState = {
+    appearance,
+    barHeight,
+    percentComplete,
+    components: {
+      root: 'div',
+      indicator: 'span',
+      label: Label,
+      description: Label,
+    },
+    root: nativeRoot,
+    indicator: indicatorShortHand,
+    label: labelShorthand,
+    description: descriptionShorthand,
+  };
+
+  useProgressState_unstable(state, props);
+  return state;
+};

packages/react-components/react-progress/src/components/Progress/useProgressState.tsx

@@ -0,0 +1,35 @@
+import type { ProgressState, ProgressProps } from './Progress.types';
+import { progressCssVars } from './useProgressStyles';
+
+// if the percentComplete is near 0, don't animate it.
+// This prevents animations on reset to 0 scenarios
+const ZERO_THRESHOLD = 0.01;
+
+export const useProgressState_unstable = (state: ProgressState, props: ProgressProps) => {
+  const { percentComplete = -1 } = props;
+
+  const determinate = percentComplete > -1 ? true : false;
+
+  const valuePercent = determinate ? Math.min(100, Math.max(0, percentComplete)) : undefined;
+
+  const progressBarStyles = {
+    [`${progressCssVars.percentageCssVar}`]: determinate ? valuePercent + '%' : '0',
+    [`${progressCssVars.transitionCssVar}`]:
+      valuePercent && determinate && valuePercent < ZERO_THRESHOLD ? 'none' : 'width .3s ease',
+  };
+
+  const ariaValueMin = determinate ? 0 : undefined;
+  const ariaValueMax = determinate ? 100 : undefined;
+  const ariaValueNow = determinate ? Math.floor(percentComplete!) : undefined;
+
+  if (state.indicator) {
+    state.indicator.style = {
+      ...progressBarStyles,
+      ...state.indicator.style,
+    };
+    state.indicator['aria-valuemin'] = ariaValueMin;
+    state.indicator['aria-valuemax'] = ariaValueMax;
+    state.indicator['aria-valuenow'] = ariaValueNow;
+  }
+  //return state;
+};