@fluentui/react-progress 9.0.0-alpha.6 → 9.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/CHANGELOG.json +85 -1
  2. package/CHANGELOG.md +29 -2
  3. package/README.md +7 -7
  4. package/dist/index.d.ts +30 -30
  5. package/lib/ProgressBar.js +2 -0
  6. package/lib/ProgressBar.js.map +1 -0
  7. package/lib/components/ProgressBar/ProgressBar.js +15 -0
  8. package/lib/components/ProgressBar/ProgressBar.js.map +1 -0
  9. package/lib/components/ProgressBar/ProgressBar.types.js +2 -0
  10. package/lib/components/ProgressBar/ProgressBar.types.js.map +1 -0
  11. package/lib/components/ProgressBar/index.js +6 -0
  12. package/lib/components/ProgressBar/index.js.map +1 -0
  13. package/lib/components/{Progress/renderProgress.js → ProgressBar/renderProgressBar.js} +3 -3
  14. package/lib/components/ProgressBar/renderProgressBar.js.map +1 -0
  15. package/lib/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +7 -7
  16. package/lib/components/ProgressBar/useProgressBar.js.map +1 -0
  17. package/lib/components/{Progress/useProgressStyles.js → ProgressBar/useProgressBarStyles.js} +19 -19
  18. package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -0
  19. package/lib/components/ProgressField/ProgressField.js +2 -2
  20. package/lib/components/ProgressField/ProgressField.js.map +1 -1
  21. package/lib/index.js +1 -1
  22. package/lib/index.js.map +1 -1
  23. package/lib-commonjs/{Progress.js → ProgressBar.js} +2 -2
  24. package/lib-commonjs/ProgressBar.js.map +1 -0
  25. package/lib-commonjs/components/ProgressBar/ProgressBar.js +26 -0
  26. package/lib-commonjs/components/ProgressBar/ProgressBar.js.map +1 -0
  27. package/lib-commonjs/components/{Progress/Progress.types.js → ProgressBar/ProgressBar.types.js} +1 -1
  28. package/lib-commonjs/components/{Progress/Progress.types.js.map → ProgressBar/ProgressBar.types.js.map} +0 -0
  29. package/lib-commonjs/components/ProgressBar/index.js +18 -0
  30. package/lib-commonjs/components/ProgressBar/index.js.map +1 -0
  31. package/lib-commonjs/components/{Progress/renderProgress.js → ProgressBar/renderProgressBar.js} +5 -5
  32. package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map +1 -0
  33. package/lib-commonjs/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +9 -9
  34. package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -0
  35. package/lib-commonjs/components/{Progress/useProgressStyles.js → ProgressBar/useProgressBarStyles.js} +21 -21
  36. package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -0
  37. package/lib-commonjs/components/ProgressField/ProgressField.js +2 -2
  38. package/lib-commonjs/components/ProgressField/ProgressField.js.map +1 -1
  39. package/lib-commonjs/index.js +12 -12
  40. package/lib-commonjs/index.js.map +1 -1
  41. package/package.json +5 -5
  42. package/MIGRATION.md +0 -26
  43. package/Spec.md +0 -124
  44. package/lib/Progress.js +0 -2
  45. package/lib/Progress.js.map +0 -1
  46. package/lib/components/Progress/Progress.js +0 -15
  47. package/lib/components/Progress/Progress.js.map +0 -1
  48. package/lib/components/Progress/Progress.types.js +0 -2
  49. package/lib/components/Progress/Progress.types.js.map +0 -1
  50. package/lib/components/Progress/index.js +0 -6
  51. package/lib/components/Progress/index.js.map +0 -1
  52. package/lib/components/Progress/renderProgress.js.map +0 -1
  53. package/lib/components/Progress/useProgress.js.map +0 -1
  54. package/lib/components/Progress/useProgressStyles.js.map +0 -1
  55. package/lib-commonjs/Progress.js.map +0 -1
  56. package/lib-commonjs/components/Progress/Progress.js +0 -26
  57. package/lib-commonjs/components/Progress/Progress.js.map +0 -1
  58. package/lib-commonjs/components/Progress/index.js +0 -18
  59. package/lib-commonjs/components/Progress/index.js.map +0 -1
  60. package/lib-commonjs/components/Progress/renderProgress.js.map +0 -1
  61. package/lib-commonjs/components/Progress/useProgress.js.map +0 -1
  62. package/lib-commonjs/components/Progress/useProgressStyles.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;EAEA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;EACA,OAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP;AACD,CALiE,CAArD;AAOb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n const state = useProgressBar_unstable(props, ref);\n\n useProgressBarStyles_unstable(state);\n return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"],"sourceRoot":"../src/"}
@@ -3,4 +3,4 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- //# sourceMappingURL=Progress.types.js.map
6
+ //# sourceMappingURL=ProgressBar.types.js.map
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
+
9
+ tslib_1.__exportStar(require("./ProgressBar"), exports);
10
+
11
+ tslib_1.__exportStar(require("./ProgressBar.types"), exports);
12
+
13
+ tslib_1.__exportStar(require("./renderProgressBar"), exports);
14
+
15
+ tslib_1.__exportStar(require("./useProgressBar"), exports);
16
+
17
+ tslib_1.__exportStar(require("./useProgressBarStyles"), exports);
18
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"],"sourceRoot":"../src/"}
@@ -3,17 +3,17 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.renderProgress_unstable = void 0;
6
+ exports.renderProgressBar_unstable = void 0;
7
7
 
8
8
  const React = /*#__PURE__*/require("react");
9
9
 
10
10
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
11
  /**
12
- * Render the final JSX of Progress
12
+ * Render the final JSX of ProgressBar
13
13
  */
14
14
 
15
15
 
16
- const renderProgress_unstable = state => {
16
+ const renderProgressBar_unstable = state => {
17
17
  const {
18
18
  slots,
19
19
  slotProps
@@ -23,5 +23,5 @@ const renderProgress_unstable = state => {
23
23
  }));
24
24
  };
25
25
 
26
- exports.renderProgress_unstable = renderProgress_unstable;
27
- //# sourceMappingURL=renderProgress.js.map
26
+ exports.renderProgressBar_unstable = renderProgressBar_unstable;
27
+ //# sourceMappingURL=renderProgressBar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,IAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"sourceRoot":"../src/"}
@@ -3,21 +3,21 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useProgress_unstable = void 0;
6
+ exports.useProgressBar_unstable = void 0;
7
7
 
8
8
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
9
  /**
10
- * Create the state required to render Progress.
10
+ * Create the state required to render ProgressBar.
11
11
  *
12
- * The returned state can be modified with hooks such as useProgressStyles_unstable,
13
- * before being passed to renderProgress_unstable.
12
+ * The returned state can be modified with hooks such as useProgressBarStyles_unstable,
13
+ * before being passed to renderProgressBar_unstable.
14
14
  *
15
- * @param props - props from this instance of Progress
16
- * @param ref - reference to root HTMLElement of Progress
15
+ * @param props - props from this instance of ProgressBar
16
+ * @param ref - reference to root HTMLElement of ProgressBar
17
17
  */
18
18
 
19
19
 
20
- const useProgress_unstable = (props, ref) => {
20
+ const useProgressBar_unstable = (props, ref) => {
21
21
  // Props
22
22
  const {
23
23
  max = 1.0,
@@ -53,5 +53,5 @@ const useProgress_unstable = (props, ref) => {
53
53
  return state;
54
54
  };
55
55
 
56
- exports.useProgress_unstable = useProgress_unstable;
57
- //# sourceMappingURL=useProgress.js.map
56
+ exports.useProgressBar_unstable = useProgressBar_unstable;
57
+ //# sourceMappingURL=useProgressBar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH;EACA,MAAM;IAAE,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD,eAAtD;IAAuE;EAAvE,IAAiF,KAAvF;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAA7B,CAAb;EASA,MAAM,GAAG,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,GAAvB,EAA4B;IACtC,QAAQ,EAAE;EAD4B,CAA5B,CAAZ;EAIA,MAAM,KAAK,GAAqB;IAC9B,GAD8B;IAE9B,KAF8B;IAG9B,SAH8B;IAI9B,KAJ8B;IAK9B,eAL8B;IAM9B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CANkB;IAU9B,IAV8B;IAW9B;EAX8B,CAAhC;EAcA,OAAO,KAAP;AACD,CAhCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n // Props\n const { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, value } = props;\n\n const root = getNativeElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-valuemin': value !== undefined ? 0 : undefined,\n 'aria-valuemax': value !== undefined ? max : undefined,\n 'aria-valuenow': value,\n ...props,\n });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n });\n\n const state: ProgressBarState = {\n max,\n shape,\n thickness,\n value,\n validationState,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useProgressStyles_unstable = exports.progressClassNames = void 0;
6
+ exports.useProgressBarStyles_unstable = exports.progressBarClassNames = void 0;
7
7
 
8
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
9
9
 
@@ -11,9 +11,9 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
11
 
12
12
  const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
13
13
 
14
- exports.progressClassNames = {
15
- root: 'fui-Progress',
16
- bar: 'fui-Progress__bar'
14
+ exports.progressBarClassNames = {
15
+ root: 'fui-ProgressBar',
16
+ bar: 'fui-ProgressBar__bar'
17
17
  }; // If the percentComplete is near 0, don't animate it.
18
18
  // This prevents animations on reset to 0 scenarios.
19
19
 
@@ -22,20 +22,20 @@ const barThicknessValues = {
22
22
  medium: '2px',
23
23
  large: '4px'
24
24
  };
25
- const indeterminateProgress = {
25
+ const indeterminateProgressBar = {
26
26
  '0%': {
27
- left: '0%'
27
+ left: '0% /* @noflip */'
28
28
  },
29
29
  '100%': {
30
- left: '100%'
30
+ left: '100% /* @noflip */'
31
31
  }
32
32
  };
33
- const indeterminateProgressRTL = {
33
+ const indeterminateProgressBarRTL = {
34
34
  '100%': {
35
- right: '-100%'
35
+ right: '-100% /* @noflip */'
36
36
  },
37
37
  '0%': {
38
- right: '100%'
38
+ right: '100% /* @noflip */'
39
39
  }
40
40
  };
41
41
  /**
@@ -82,7 +82,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
82
82
  }]]
83
83
  });
84
84
  /**
85
- * Styles for the progress bar
85
+ * Styles for the ProgressBar bar
86
86
  */
87
87
 
88
88
 
@@ -110,14 +110,14 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
110
110
  "B2u0y6b": "fa0wk36",
111
111
  "qhf8xq": "f10pi13n",
112
112
  "Bcmaq0h": ["fpo0yib", "f1u5hf6c"],
113
- "Bv12yb3": ["f1wk4z0g", "f1f62nrt"],
113
+ "Bv12yb3": "f1h4fm7e",
114
114
  "vin17d": "f1a27w2r",
115
115
  "w3vfg9": "f1cpbl36",
116
116
  "Gqtpxc": "f4akx1t",
117
117
  "B3vm3ge": "f18p5put"
118
118
  },
119
119
  "rtl": {
120
- "Bv12yb3": ["fw97ye2", "fqbve9y"]
120
+ "Bv12yb3": "fjhwsai"
121
121
  },
122
122
  "error": {
123
123
  "De3pzq": "fdl5y0r"
@@ -129,7 +129,7 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
129
129
  "De3pzq": "flxk52p"
130
130
  }
131
131
  }, {
132
- "d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1u5hf6c{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
132
+ "d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1u5hf6c{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1h4fm7e{-webkit-animation-name:fd3k50f;animation-name:fd3k50f;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjhwsai{-webkit-animation-name:f1kx06uz;animation-name:f1kx06uz;}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
133
133
  "m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
134
134
  "m": "screen and (forced-colors: active)"
135
135
  }], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
@@ -137,14 +137,14 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
137
137
  }], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
138
138
  "m": "screen and (prefers-reduced-motion: reduce)"
139
139
  }]],
140
- "k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@-webkit-keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@-webkit-keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}", "@keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}"]
140
+ "k": ["@-webkit-keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
141
141
  });
142
142
  /**
143
- * Apply styling to the Progress slots based on the state
143
+ * Apply styling to the ProgressBar slots based on the state
144
144
  */
145
145
 
146
146
 
147
- const useProgressStyles_unstable = state => {
147
+ const useProgressBarStyles_unstable = state => {
148
148
  const {
149
149
  max,
150
150
  shape,
@@ -157,10 +157,10 @@ const useProgressStyles_unstable = state => {
157
157
  const {
158
158
  dir
159
159
  } = react_shared_contexts_1.useFluent_unstable();
160
- state.root.className = react_1.mergeClasses(exports.progressClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
160
+ state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
161
161
 
162
162
  if (state.bar) {
163
- state.bar.className = react_1.mergeClasses(exports.progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, validationState && barStyles[validationState], state.bar.className);
163
+ state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, validationState && barStyles[validationState], state.bar.className);
164
164
  }
165
165
 
166
166
  if (state.bar && value !== undefined) {
@@ -173,5 +173,5 @@ const useProgressStyles_unstable = state => {
173
173
  return state;
174
174
  };
175
175
 
176
- exports.useProgressStyles_unstable = useProgressStyles_unstable;
177
- //# sourceMappingURL=useProgressStyles.js.map
176
+ exports.useProgressBarStyles_unstable = useProgressBarStyles_unstable;
177
+ //# sourceMappingURL=useProgressBarStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n medium: '2px',\n large: '4px',\n};\n\nconst indeterminateProgressBar = {\n '0%': {\n left: '0% /* @noflip */',\n },\n '100%': {\n left: '100% /* @noflip */',\n },\n};\nconst indeterminateProgressBarRTL = {\n '100%': {\n right: '-100% /* @noflip */',\n },\n '0%': {\n right: '100% /* @noflip */',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rectangular: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n ...shorthands.borderRadius('inherit'),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease',\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorTransparentBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n rtl: {\n animationName: indeterminateProgressBarRTL,\n },\n\n error: {\n backgroundColor: tokens.colorPaletteRedBackground3,\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n const { max, shape, thickness, validationState, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressBarClassNames.root,\n rootStyles.root,\n rootStyles[shape],\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressBarClassNames.bar,\n barStyles.base,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n validationState && barStyles[validationState],\n state.bar.className,\n );\n }\n\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n ...state.bar.style,\n };\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -9,12 +9,12 @@ const React = /*#__PURE__*/require("react");
9
9
 
10
10
  const react_field_1 = /*#__PURE__*/require("@fluentui/react-field");
11
11
 
12
- const Progress_1 = /*#__PURE__*/require("../../Progress");
12
+ const ProgressBar_1 = /*#__PURE__*/require("../../ProgressBar");
13
13
 
14
14
  exports.progressFieldClassNames = /*#__PURE__*/react_field_1.getFieldClassNames('ProgressField');
15
15
  exports.ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
16
16
  const state = react_field_1.useField_unstable(props, ref, {
17
- component: Progress_1.Progress,
17
+ component: ProgressBar_1.ProgressBar,
18
18
  classNames: exports.progressFieldClassNames,
19
19
  labelConnection: 'aria-labelledby',
20
20
  ariaInvalidOnError: false
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAC1C,SAAS,EAAE,UAAA,CAAA,QAD+B;IAE1C,UAAU,EAAE,OAAA,CAAA,uBAF8B;IAG1C,eAAe,EAAE,iBAHyB;IAI1C,kBAAkB,EAAE;EAJsB,CAA9B,CAAd;EAMA,KAAK,CAAC,OAAN,CAAc,eAAd,GAAgC,KAAK,CAAC,eAAtC;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAVqE,CAAzD;AAYb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Progress } from '../../Progress';\n\nexport type ProgressFieldProps = FieldProps<typeof Progress>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: Progress,\n classNames: progressFieldClassNames,\n labelConnection: 'aria-labelledby',\n ariaInvalidOnError: false,\n });\n state.control.validationState = state.validationState;\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,aAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAIa,OAAA,CAAA,uBAAA,gBAA0B,aAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAC1C,SAAS,EAAE,aAAA,CAAA,WAD+B;IAE1C,UAAU,EAAE,OAAA,CAAA,uBAF8B;IAG1C,eAAe,EAAE,iBAHyB;IAI1C,kBAAkB,EAAE;EAJsB,CAA9B,CAAd;EAMA,KAAK,CAAC,OAAN,CAAc,eAAd,GAAgC,KAAK,CAAC,eAAtC;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAVqE,CAAzD;AAYb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n getFieldClassNames,\n renderField_unstable,\n useFieldStyles_unstable,\n useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar } from '../../ProgressBar';\n\nexport type ProgressFieldProps = FieldProps<typeof ProgressBar>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n const state = useField_unstable(props, ref, {\n component: ProgressBar,\n classNames: progressFieldClassNames,\n labelConnection: 'aria-labelledby',\n ariaInvalidOnError: false,\n });\n state.control.validationState = state.validationState;\n useFieldStyles_unstable(state);\n return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"],"sourceRoot":"../src/"}
@@ -3,38 +3,38 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.progressFieldClassNames = exports.ProgressField_unstable = exports.useProgressStyles_unstable = exports.useProgress_unstable = exports.renderProgress_unstable = exports.progressClassNames = exports.Progress = void 0;
6
+ exports.progressFieldClassNames = exports.ProgressField_unstable = exports.useProgressBarStyles_unstable = exports.useProgressBar_unstable = exports.renderProgressBar_unstable = exports.progressBarClassNames = exports.ProgressBar = void 0;
7
7
 
8
- var Progress_1 = /*#__PURE__*/require("./Progress");
8
+ var ProgressBar_1 = /*#__PURE__*/require("./ProgressBar");
9
9
 
10
- Object.defineProperty(exports, "Progress", {
10
+ Object.defineProperty(exports, "ProgressBar", {
11
11
  enumerable: true,
12
12
  get: function () {
13
- return Progress_1.Progress;
13
+ return ProgressBar_1.ProgressBar;
14
14
  }
15
15
  });
16
- Object.defineProperty(exports, "progressClassNames", {
16
+ Object.defineProperty(exports, "progressBarClassNames", {
17
17
  enumerable: true,
18
18
  get: function () {
19
- return Progress_1.progressClassNames;
19
+ return ProgressBar_1.progressBarClassNames;
20
20
  }
21
21
  });
22
- Object.defineProperty(exports, "renderProgress_unstable", {
22
+ Object.defineProperty(exports, "renderProgressBar_unstable", {
23
23
  enumerable: true,
24
24
  get: function () {
25
- return Progress_1.renderProgress_unstable;
25
+ return ProgressBar_1.renderProgressBar_unstable;
26
26
  }
27
27
  });
28
- Object.defineProperty(exports, "useProgress_unstable", {
28
+ Object.defineProperty(exports, "useProgressBar_unstable", {
29
29
  enumerable: true,
30
30
  get: function () {
31
- return Progress_1.useProgress_unstable;
31
+ return ProgressBar_1.useProgressBar_unstable;
32
32
  }
33
33
  });
34
- Object.defineProperty(exports, "useProgressStyles_unstable", {
34
+ Object.defineProperty(exports, "useProgressBarStyles_unstable", {
35
35
  enumerable: true,
36
36
  get: function () {
37
- return Progress_1.useProgressStyles_unstable;
37
+ return ProgressBar_1.useProgressBarStyles_unstable;
38
38
  }
39
39
  });
40
40
 
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-progress/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;;AAIF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAyC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n Progress,\n progressClassNames,\n renderProgress_unstable,\n useProgress_unstable,\n useProgressStyles_unstable,\n} from './Progress';\nexport type { ProgressProps, ProgressSlots, ProgressState } from './Progress';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-progress/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,WAAA;EAAW;AAAX,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;;AAIF,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,aAAA;EAAa;AAAb,CAAA;AAAyC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,eAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n ProgressBar,\n progressBarClassNames,\n renderProgressBar_unstable,\n useProgressBar_unstable,\n useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-progress",
3
- "version": "9.0.0-alpha.6",
3
+ "version": "9.0.0-alpha.8",
4
4
  "description": "Progress component for FluentUI v9",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -31,10 +31,10 @@
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-field": "9.0.0-alpha.9",
35
- "@fluentui/react-shared-contexts": "^9.1.1",
36
- "@fluentui/react-theme": "^9.1.2",
37
- "@fluentui/react-utilities": "^9.2.2",
34
+ "@fluentui/react-field": "9.0.0-alpha.11",
35
+ "@fluentui/react-shared-contexts": "^9.1.3",
36
+ "@fluentui/react-theme": "^9.1.4",
37
+ "@fluentui/react-utilities": "^9.3.0",
38
38
  "@griffel/react": "^1.4.2",
39
39
  "tslib": "^2.1.0"
40
40
  },
package/MIGRATION.md DELETED
@@ -1,26 +0,0 @@
1
- # Progress Migration
2
-
3
- ## Migration from v8
4
-
5
- v8 offers a component equivalent to v9's `Progress`. However, the API is slightly different. The main difference is that v9's `Progress` does not have the `label` or `description` props. Instead, the `label` and `hint` are located in the `ProgressField` that can be used in conjunction with `Progress`.
6
-
7
- Here's how the API of v8's `Progress` compares to the one from v9's `Progress` component:
8
-
9
- - `className` => `className`
10
- - `description` => Use `ProgressField` to use the `hint` prop
11
- - `label` => Use `ProgressField` to use the `label` prop
12
- - `onRenderProgress` => NOT SUPPORTED
13
- - `percentComplete` => Use the `value` prop
14
- - `progressHidden` => NOT SUPPORTED
15
- - `styles` => Use style customization through `className` instead
16
-
17
- ## Property Mapping
18
-
19
- | v8 `ProgressIndicator` | v9 `Progress` |
20
- | ---------------------- | ------------------------- |
21
- | `barHeight` | `thickness` |
22
- | `className` | `className` |
23
- | `componentRef` | `ref` |
24
- | `description` | use `ProgressField` hint |
25
- | `label` | use `ProgressField` label |
26
- | `percentComplete` | `value` |
package/Spec.md DELETED
@@ -1,124 +0,0 @@
1
- # @fluentui/react-progress Spec
2
-
3
- ## Background
4
-
5
- The `Progress` component is used to display the current progress of an operation flow, or show that an operation is currently being executed.
6
-
7
- ## Prior Art
8
-
9
- ### Open UI
10
-
11
- | Library | Component Name | Spec Link | Notes |
12
- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
13
- | Ant Design | Progress | [Progress](https://ant.design/components/progress/) | Specifies the type, a combined progress component |
14
- | Atlassian Design | Progress bar | [ProgressBar](https://atlassian.design/components/progress-bar/success-progress-bar/examples) | Defaults to determinate state, which turns green when value reaches 1. Has an indeterminate state |
15
- | Bootstrap | Progress | [Progress](https://getbootstrap.com/docs/4.3/components/progress/) | Allows for multiple different animation styles on the same Progress bar |
16
- | Carbon Design | Progress Indicator | [ProgressIndicator](https://react.carbondesignsystem.com/?path=/story/components-progressindicator--default) | Determinate Progress that has steps, similar to a Slider |
17
- | Fast | Progress | [Progress](https://explore.fast.design/components/fast-progress) | Combined Progress and Spinner component, has a determinate and indeterminate state |
18
- | Lightning Design System | Progress Bar | [ProgressBar](https://www.lightningdesignsystem.com/components/progress-bar/) | Has a vertical bar, only determinate, and can specify progress step |
19
- | Semantic UI | Progress | [Progress](https://semantic-ui.com/modules/progress.html#indicating) | Allows for success and error states, default rounded edges. No indeterminate form |
20
-
21
- ### Comparison of v8 and v0
22
-
23
- The existing components are:
24
-
25
- - v8
26
- - `ProgressIndicator`
27
- - v0
28
-
29
- ## Sample Code
30
-
31
- Basic example:
32
-
33
- ```jsx
34
- import { Progress } from '@fluentui/react-progress';
35
-
36
- function App() {
37
- return <Progress thickness="large" />;
38
- }
39
- ```
40
-
41
- ## Variants
42
-
43
- - Indeterminate Progress
44
- - The default Progress that animates indefinitely
45
- - Determinate Progress
46
- - The determinate form of the Progress component that incrementally loads from 0% to 100%
47
- - Error/success
48
- - The validationState prop can be set to "error", "warning", or "success" to make the bar red, orange, or green, respectively.
49
- - The prop name was chosen to align with the Field prop of the same name, allowing ProgressField to have the same API as other fields.
50
-
51
- #### Adding Label and Description with ProgressField
52
-
53
- There is a `ProgressField` component that adds a `label`, validation state(`success`, `warning`, `error`), and hint text to the `Progress`.
54
- You can use it like so:
55
-
56
- ```jsx
57
- import * as React from 'react';
58
- import type { ProgressFieldProps } from '@fluentui/react-field';
59
- import { ProgressField } from '@fluentui/react-field';
60
-
61
- export const Default = (props: ProgressFieldProps) => (
62
- <ProgressField
63
- label="Example Progress field"
64
- value={0.75}
65
- validationState="success"
66
- validationMessage="This is a success message"
67
- hint="This is a hint message"
68
- {...props}
69
- />
70
- );
71
- ```
72
-
73
- ### Shape
74
-
75
- The Progress is represented as a rounded rectangular area with an inner animated bar that either travels across the area indefinitely or animates up till a specified point
76
-
77
- ## API
78
-
79
- ### Slots
80
-
81
- - `root` - The root element of the Progress, which also serves as the track for the Progress bar. The html element is a `div`
82
- - `bar` - The div element that gets animated into a Progress bar. The html element is `div`
83
-
84
- ### Props
85
-
86
- See API at [Progress.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-progress/src/components/Progress/Progress.types.ts).
87
-
88
- ## Structure
89
-
90
- ```html
91
- <div class="fui-Progress">
92
- <!-- Bar for Progress -->
93
- <div class="fui-Progess__bar" />
94
- </div>
95
- ```
96
-
97
- ## Migration
98
-
99
- See [MIGRATION.md](./MIGRATION.md).
100
-
101
- ## Behaviors
102
-
103
- ### States
104
-
105
- - **Display** - The Progress will use the following priority:
106
-
107
- - Specifying the `value` prop will alter the Progress from `indeterminate` to `determinate`.
108
- - The component also has `rtl` support and will animate the progress bar from right to left if set.
109
-
110
- ### Interaction
111
-
112
- The Progress is non-interactive.
113
-
114
- - **Keyboard** - Not keyboard focusable.
115
- - **Mouse**
116
-
117
- - Click: No action
118
-
119
- - **Touch** - Nothing
120
-
121
- ## Accessibility
122
-
123
- - The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`.
124
- - When `reduced-motion` is active, the `indeterminate` `Progress` will animate only once. Use `ProgressField` to add a `description` and `hint` message to the `Progress` bar.
package/lib/Progress.js DELETED
@@ -1,2 +0,0 @@
1
- export * from './components/Progress/index';
2
- //# sourceMappingURL=Progress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Progress.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/Progress.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './components/Progress/index';\n"]}
@@ -1,15 +0,0 @@
1
- import * as React from 'react';
2
- import { useProgress_unstable } from './useProgress';
3
- import { renderProgress_unstable } from './renderProgress';
4
- import { useProgressStyles_unstable } from './useProgressStyles';
5
- /**
6
- * A progress bar shows the progression of a task.
7
- */
8
-
9
- export const Progress = /*#__PURE__*/React.forwardRef((props, ref) => {
10
- const state = useProgress_unstable(props, ref);
11
- useProgressStyles_unstable(state);
12
- return renderProgress_unstable(state);
13
- });
14
- Progress.displayName = 'Progress';
15
- //# sourceMappingURL=Progress.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["packages/react-components/react-progress/src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC1F,MAAM,KAAK,GAAG,oBAAoB,CAAC,KAAD,EAAQ,GAAR,CAAlC;EAEA,0BAA0B,CAAC,KAAD,CAA1B;EACA,OAAO,uBAAuB,CAAC,KAAD,CAA9B;AACD,CAL2D,CAArD;AAOP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourcesContent":["import * as React from 'react';\nimport { useProgress_unstable } from './useProgress';\nimport { renderProgress_unstable } from './renderProgress';\nimport { useProgressStyles_unstable } from './useProgressStyles';\nimport type { ProgressProps } from './Progress.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A progress bar shows the progression of a task.\n */\nexport const Progress: ForwardRefComponent<ProgressProps> = React.forwardRef((props, ref) => {\n const state = useProgress_unstable(props, ref);\n\n useProgressStyles_unstable(state);\n return renderProgress_unstable(state);\n});\n\nProgress.displayName = 'Progress';\n"],"sourceRoot":"../src/"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=Progress.types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Progress.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/Progress/Progress.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressSlots = {\n /**\n * The track behind the progress bar\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The filled portion of the progress bar. Animated in the indeterminate state, when no value is provided.\n */\n bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Progress Props\n */\nexport type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {\n /**\n * The shape of the bar and track.\n * @default 'rounded'\n */\n shape?: 'rounded' | 'rectangular';\n /**\n * A decimal number between `0` and `1` (or between `0` and `max` if given),\n * which specifies how much of the task has been completed.\n *\n * If `undefined` (default), the Progress will display an **indeterminate** state.\n */\n value?: number;\n /**\n * The maximum value, which indicates the task is complete.\n * The progress bar will be full when `value` equals `max`.\n * @default 1\n */\n max?: number;\n /**\n * The thickness of the Progress bar\n * @default 'medium'\n */\n thickness?: 'medium' | 'large';\n\n /**\n * The status of the progress bar. Changes the color of the bar.\n */\n validationState?: 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering Progress\n */\nexport type ProgressState = ComponentState<ProgressSlots> &\n Required<Pick<ProgressProps, 'max' | 'shape' | 'thickness'>> &\n Pick<ProgressProps, 'value' | 'validationState'>;\n"]}
@@ -1,6 +0,0 @@
1
- export * from './Progress';
2
- export * from './Progress.types';
3
- export * from './renderProgress';
4
- export * from './useProgress';
5
- export * from './useProgressStyles';
6
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/Progress/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Progress';\nexport * from './Progress.types';\nexport * from './renderProgress';\nexport * from './useProgress';\nexport * from './useProgressStyles';\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["packages/react-components/react-progress/src/components/Progress/renderProgress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAyB;EAC9D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAgB,KAAhB,CAArC;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,iBAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\n\n/**\n * Render the final JSX of Progress\n */\nexport const renderProgress_unstable = (state: ProgressState) => {\n const { slots, slotProps } = getSlots<ProgressSlots>(state);\n return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["packages/react-components/react-progress/src/components/Progress/useProgress.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG;EACA,MAAM;IAAE,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD,eAAtD;IAAuE;EAAvE,IAAiF,KAAvF;EAEA,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAD,EAAQ;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAAR,CAAlC;EASA,MAAM,GAAG,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAP,EAAY;IACtC,QAAQ,EAAE;EAD4B,CAAZ,CAA5B;EAIA,MAAM,KAAK,GAAkB;IAC3B,GAD2B;IAE3B,KAF2B;IAG3B,SAH2B;IAI3B,KAJ2B;IAK3B,eAL2B;IAM3B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CANe;IAU3B,IAV2B;IAW3B;EAX2B,CAA7B;EAcA,OAAO,KAAP;AACD,CAhCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressProps, ProgressState } from './Progress.types';\n\n/**\n * Create the state required to render Progress.\n *\n * The returned state can be modified with hooks such as useProgressStyles_unstable,\n * before being passed to renderProgress_unstable.\n *\n * @param props - props from this instance of Progress\n * @param ref - reference to root HTMLElement of Progress\n */\nexport const useProgress_unstable = (props: ProgressProps, ref: React.Ref<HTMLElement>): ProgressState => {\n // Props\n const { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, value } = props;\n\n const root = getNativeElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-valuemin': value !== undefined ? 0 : undefined,\n 'aria-valuemax': value !== undefined ? max : undefined,\n 'aria-valuenow': value,\n ...props,\n });\n\n const bar = resolveShorthand(props.bar, {\n required: true,\n });\n\n const state: ProgressState = {\n max,\n shape,\n thickness,\n value,\n validationState,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressState, ProgressSlots } from './Progress.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressClassNames: SlotClassNames<ProgressSlots> = {\n root: 'fui-Progress',\n bar: 'fui-Progress__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n medium: '2px',\n large: '4px',\n};\n\nconst indeterminateProgress = {\n '0%': {\n left: '0%',\n },\n '100%': {\n left: '100%',\n },\n};\nconst indeterminateProgressRTL = {\n '100%': {\n right: '-100%',\n },\n '0%': {\n right: '100%',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n justifySelf: 'stretch',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n rectangular: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n});\n\n/**\n * Styles for the progress bar\n */\nconst useBarStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n ...shorthands.borderRadius('inherit'),\n },\n medium: {\n height: barThicknessValues.medium,\n },\n large: {\n height: barThicknessValues.large,\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease',\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorTransparentBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgress,\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n rtl: {\n animationName: indeterminateProgressRTL,\n },\n\n error: {\n backgroundColor: tokens.colorPaletteRedBackground3,\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenBackground3,\n },\n});\n\n/**\n * Apply styling to the Progress slots based on the state\n */\nexport const useProgressStyles_unstable = (state: ProgressState): ProgressState => {\n const { max, shape, thickness, validationState, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n const { dir } = useFluent();\n\n state.root.className = mergeClasses(\n progressClassNames.root,\n rootStyles.root,\n rootStyles[shape],\n rootStyles[thickness],\n state.root.className,\n );\n\n if (state.bar) {\n state.bar.className = mergeClasses(\n progressClassNames.bar,\n barStyles.base,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\n barStyles[thickness],\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n validationState && barStyles[validationState],\n state.bar.className,\n );\n }\n\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n ...state.bar.style,\n };\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["packages/react-components/react-progress/src/Progress.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,6BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Progress/index';\n"],"sourceRoot":"../src/"}