microsoft · tomi-msft · Sep 30, 2022 · Jul 21, 2022 · Jul 21, 2022 · Jul 21, 2022
@@ -0,0 +1,7 @@
+import { Progress } from '@fluentui/react-progress';
+
+console.log(Progress);
+
+export default {
+  name: 'Progress',
+};
@@ -18,15 +18,23 @@ export const Progress: ForwardRefComponent<ProgressProps>;
 export const progressClassNames: SlotClassNames<ProgressSlots>;
 
 // @public
-export type ProgressProps = ComponentProps<ProgressSlots> & {};
+export type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {
+    indeterminate?: boolean;
+    percentComplete?: number;
+    thickness?: 'medium' | 'large';
+};
 
 // @public (undocumented)
 export type ProgressSlots = {
-    root: Slot<'div'>;
+    root: NonNullable<Slot<'div'>>;
+    label?: Slot<'span'>;
+    bar?: NonNullable<Slot<'div'>>;
+    track?: NonNullable<Slot<'div'>>;
+    description?: Slot<'span'>;
 };
 
 // @public
-export type ProgressState = ComponentState<ProgressSlots>;
+export type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'indeterminate' | 'percentComplete' | 'thickness'>>;
 
 // @public
 export const renderProgress_unstable: (state: ProgressState) => JSX.Element;

@@ -14,6 +14,7 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
@@ -32,6 +33,7 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@fluentui/react-shared-contexts": "^9.0.1",
     "@fluentui/react-theme": "^9.1.0",
     "@fluentui/react-utilities": "^9.1.0",
     "@griffel/react": "^1.3.0",

@@ -7,6 +7,16 @@ describe('Progress', () => {
   isConformant({
     Component: Progress,
     displayName: 'Progress',
+    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

@@ -6,7 +6,7 @@ import type { ProgressProps } from './Progress.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 
 /**
- * Progress component - TODO: add more docs
+ * A progress bar shows the progression of a task.
  */
 export const Progress: ForwardRefComponent<ProgressProps> = React.forwardRef((props, ref) => {
   const state = useProgress_unstable(props, ref);

@@ -1,17 +1,55 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 
 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<'span'>;
+  /**
+   * The animated slot of the Progress
+   * The bar slot receives the styling related to the loading bar associated with the Progress
+   */
+  bar?: NonNullable<Slot<'div'>>;
+  /**
+   * The track slot of the Progress
+   * The track slot receives the styling related to the loading bar track associated with the Progress
+   */
+  track?: NonNullable<Slot<'div'>>;
+  /**
+   * The description slot of the Progress
+   * The description slot receives the styling related to the description associated with the Progress
+   */
+  description?: Slot<'span'>;
 };
 
 /**
  * Progress Props
  */
-export type ProgressProps = ComponentProps<ProgressSlots> & {};
+export type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {
+  /**
+   * Prop to set whether the Progress is determinate or indeterminate
+   * @default false
+   */
+  indeterminate?: boolean;
+  /**
+   * Percentage of the operation's completeness, numerically between 0 and 100.
+   */
+  percentComplete?: number;
+  /**
+   * The thickness of the Progress bar
+   * @default 'medium'
+   */
+  thickness?: 'medium' | 'large';
+};
 
 /**
  * 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, 'indeterminate' | 'percentComplete' | 'thickness'>>;
@@ -4,8 +4,18 @@ exports[`Progress renders a default state 1`] = `
 <div>
   <div
     class="fui-Progress"
+    role="progressbar"
   >
-    Default Progress
+    <div
+      class="fui-Progress__track"
+    />
+    <div
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="0"
+      class="fui-Progress__bar"
+      style="--fui-Progress--percentage: 0%;"
+    />
   </div>
 </div>
 `;
@@ -7,7 +7,12 @@ import type { ProgressState, ProgressSlots } from './Progress.types';
  */
 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.track && <slots.track {...slotProps.track} />}
+      {slots.bar && <slots.bar {...slotProps.bar} />}
+      {slots.description && <slots.description {...slotProps.description} />}
+    </slots.root>
+  );
 };
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+import type { ProgressProps, ProgressState } from './Progress.types';
+
+/**
+ * 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 { thickness = 'medium', indeterminate = false, percentComplete = 0 } = props;
+  const baseId = useId('progress-');
+
+  const root = getNativeElementProps('div', { ref, role: 'progressbar', ...props });
+
+  const label = resolveShorthand(props.label, {
+    defaultProps: {
+      id: baseId + '__label',
+    },
+  });
+
+  const description = resolveShorthand(props.description, {
+    defaultProps: {
+      id: baseId + '__description',
+    },
+  });
+
+  const bar = resolveShorthand(props.bar, {
+    required: true,
+    defaultProps: {
+      'aria-valuemin': indeterminate ? undefined : 0,
+      'aria-valuemax': indeterminate ? undefined : 100,
+      'aria-valuenow': indeterminate ? undefined : Math.floor(percentComplete),
+    },
+  });
+
+  const track = resolveShorthand(props.track, {
+    required: true,
+  });
+
+  if (label && !root['aria-label'] && !root['aria-labelledby']) {
+    root['aria-labelledby'] = label.id;
+  }
+
+  const state: ProgressState = {
+    indeterminate,
+    percentComplete,
+    thickness,
+    components: {
+      root: 'div',
+      bar: 'div',
+      track: 'div',
+      label: 'span',
+      description: 'span',
+    },
+    root,
+    bar,
+    track,
+    label,
+    description,
+  };
+
+  return state;
+};