@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.
- package/CHANGELOG.json +85 -1
- package/CHANGELOG.md +29 -2
- package/README.md +7 -7
- package/dist/index.d.ts +30 -30
- package/lib/ProgressBar.js +2 -0
- package/lib/ProgressBar.js.map +1 -0
- package/lib/components/ProgressBar/ProgressBar.js +15 -0
- package/lib/components/ProgressBar/ProgressBar.js.map +1 -0
- package/lib/components/ProgressBar/ProgressBar.types.js +2 -0
- package/lib/components/ProgressBar/ProgressBar.types.js.map +1 -0
- package/lib/components/ProgressBar/index.js +6 -0
- package/lib/components/ProgressBar/index.js.map +1 -0
- package/lib/components/{Progress/renderProgress.js → ProgressBar/renderProgressBar.js} +3 -3
- package/lib/components/ProgressBar/renderProgressBar.js.map +1 -0
- package/lib/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +7 -7
- package/lib/components/ProgressBar/useProgressBar.js.map +1 -0
- package/lib/components/{Progress/useProgressStyles.js → ProgressBar/useProgressBarStyles.js} +19 -19
- package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -0
- package/lib/components/ProgressField/ProgressField.js +2 -2
- package/lib/components/ProgressField/ProgressField.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/{Progress.js → ProgressBar.js} +2 -2
- package/lib-commonjs/ProgressBar.js.map +1 -0
- package/lib-commonjs/components/ProgressBar/ProgressBar.js +26 -0
- package/lib-commonjs/components/ProgressBar/ProgressBar.js.map +1 -0
- package/lib-commonjs/components/{Progress/Progress.types.js → ProgressBar/ProgressBar.types.js} +1 -1
- package/lib-commonjs/components/{Progress/Progress.types.js.map → ProgressBar/ProgressBar.types.js.map} +0 -0
- package/lib-commonjs/components/ProgressBar/index.js +18 -0
- package/lib-commonjs/components/ProgressBar/index.js.map +1 -0
- package/lib-commonjs/components/{Progress/renderProgress.js → ProgressBar/renderProgressBar.js} +5 -5
- package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map +1 -0
- package/lib-commonjs/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js} +9 -9
- package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -0
- package/lib-commonjs/components/{Progress/useProgressStyles.js → ProgressBar/useProgressBarStyles.js} +21 -21
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -0
- package/lib-commonjs/components/ProgressField/ProgressField.js +2 -2
- package/lib-commonjs/components/ProgressField/ProgressField.js.map +1 -1
- package/lib-commonjs/index.js +12 -12
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +5 -5
- package/MIGRATION.md +0 -26
- package/Spec.md +0 -124
- package/lib/Progress.js +0 -2
- package/lib/Progress.js.map +0 -1
- package/lib/components/Progress/Progress.js +0 -15
- package/lib/components/Progress/Progress.js.map +0 -1
- package/lib/components/Progress/Progress.types.js +0 -2
- package/lib/components/Progress/Progress.types.js.map +0 -1
- package/lib/components/Progress/index.js +0 -6
- package/lib/components/Progress/index.js.map +0 -1
- package/lib/components/Progress/renderProgress.js.map +0 -1
- package/lib/components/Progress/useProgress.js.map +0 -1
- package/lib/components/Progress/useProgressStyles.js.map +0 -1
- package/lib-commonjs/Progress.js.map +0 -1
- package/lib-commonjs/components/Progress/Progress.js +0 -26
- package/lib-commonjs/components/Progress/Progress.js.map +0 -1
- package/lib-commonjs/components/Progress/index.js +0 -18
- package/lib-commonjs/components/Progress/index.js.map +0 -1
- package/lib-commonjs/components/Progress/renderProgress.js.map +0 -1
- package/lib-commonjs/components/Progress/useProgress.js.map +0 -1
- 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/"}
|
File without changes
|
@@ -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/"}
|
package/lib-commonjs/components/{Progress/renderProgress.js → ProgressBar/renderProgressBar.js}
RENAMED
@@ -3,17 +3,17 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
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
|
12
|
+
* Render the final JSX of ProgressBar
|
13
13
|
*/
|
14
14
|
|
15
15
|
|
16
|
-
const
|
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.
|
27
|
-
//# sourceMappingURL=
|
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.
|
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
|
10
|
+
* Create the state required to render ProgressBar.
|
11
11
|
*
|
12
|
-
* The returned state can be modified with hooks such as
|
13
|
-
* before being passed to
|
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
|
16
|
-
* @param ref - reference to root HTMLElement of
|
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
|
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.
|
57
|
-
//# sourceMappingURL=
|
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.
|
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.
|
15
|
-
root: 'fui-
|
16
|
-
bar: 'fui-
|
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
|
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
|
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
|
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":
|
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":
|
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 );}", ".
|
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
|
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
|
143
|
+
* Apply styling to the ProgressBar slots based on the state
|
144
144
|
*/
|
145
145
|
|
146
146
|
|
147
|
-
const
|
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.
|
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.
|
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.
|
177
|
-
//# sourceMappingURL=
|
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
|
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:
|
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,
|
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/"}
|
package/lib-commonjs/index.js
CHANGED
@@ -3,38 +3,38 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.progressFieldClassNames = exports.ProgressField_unstable = exports.
|
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
|
8
|
+
var ProgressBar_1 = /*#__PURE__*/require("./ProgressBar");
|
9
9
|
|
10
|
-
Object.defineProperty(exports, "
|
10
|
+
Object.defineProperty(exports, "ProgressBar", {
|
11
11
|
enumerable: true,
|
12
12
|
get: function () {
|
13
|
-
return
|
13
|
+
return ProgressBar_1.ProgressBar;
|
14
14
|
}
|
15
15
|
});
|
16
|
-
Object.defineProperty(exports, "
|
16
|
+
Object.defineProperty(exports, "progressBarClassNames", {
|
17
17
|
enumerable: true,
|
18
18
|
get: function () {
|
19
|
-
return
|
19
|
+
return ProgressBar_1.progressBarClassNames;
|
20
20
|
}
|
21
21
|
});
|
22
|
-
Object.defineProperty(exports, "
|
22
|
+
Object.defineProperty(exports, "renderProgressBar_unstable", {
|
23
23
|
enumerable: true,
|
24
24
|
get: function () {
|
25
|
-
return
|
25
|
+
return ProgressBar_1.renderProgressBar_unstable;
|
26
26
|
}
|
27
27
|
});
|
28
|
-
Object.defineProperty(exports, "
|
28
|
+
Object.defineProperty(exports, "useProgressBar_unstable", {
|
29
29
|
enumerable: true,
|
30
30
|
get: function () {
|
31
|
-
return
|
31
|
+
return ProgressBar_1.useProgressBar_unstable;
|
32
32
|
}
|
33
33
|
});
|
34
|
-
Object.defineProperty(exports, "
|
34
|
+
Object.defineProperty(exports, "useProgressBarStyles_unstable", {
|
35
35
|
enumerable: true,
|
36
36
|
get: function () {
|
37
|
-
return
|
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,
|
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.
|
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.
|
35
|
-
"@fluentui/react-shared-contexts": "^9.1.
|
36
|
-
"@fluentui/react-theme": "^9.1.
|
37
|
-
"@fluentui/react-utilities": "^9.
|
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
package/lib/Progress.js.map
DELETED
@@ -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 +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 +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/"}
|