@fluentui/react-progress 0.0.0-nightly-20250703-1103.1 → 0.0.0-nightly-20250704-0407.1
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.md +11 -11
- package/package.json +8 -8
- package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js +0 -111
- package/lib/components/ProgressBar/useProgressBarStyles.styles.raw.js.map +0 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.raw.js +0 -127
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.raw.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 04 Jul 2025 04:23:46 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20250704-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v0.0.0-nightly-20250704-0407.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.3.5..@fluentui/react-progress_v0.0.0-nightly-
|
|
9
|
+
Fri, 04 Jul 2025 04:23:46 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.3.5..@fluentui/react-progress_v0.0.0-nightly-20250704-0407.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
|
|
22
22
|
|
|
23
23
|
## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.3.5)
|
|
24
24
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20250704-0407.1",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,16 +13,16 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"devDependencies": {
|
|
15
15
|
"@fluentui/eslint-plugin": "*",
|
|
16
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
17
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
16
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20250704-0407.1",
|
|
17
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20250704-0407.1",
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
22
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
23
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
24
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
25
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
21
|
+
"@fluentui/react-field": "0.0.0-nightly-20250704-0407.1",
|
|
22
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20250704-0407.1",
|
|
23
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20250704-0407.1",
|
|
24
|
+
"@fluentui/react-theme": "0.0.0-nightly-20250704-0407.1",
|
|
25
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20250704-0407.1",
|
|
26
26
|
"@griffel/react": "^1.5.22",
|
|
27
27
|
"@swc/helpers": "^0.5.1"
|
|
28
28
|
},
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import { makeStyles, mergeClasses } from '@griffel/react';
|
|
2
|
-
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
export const progressBarClassNames = {
|
|
4
|
-
root: 'fui-ProgressBar',
|
|
5
|
-
bar: 'fui-ProgressBar__bar'
|
|
6
|
-
};
|
|
7
|
-
// If the percentComplete is near 0, don't animate it.
|
|
8
|
-
// This prevents animations on reset to 0 scenarios.
|
|
9
|
-
const ZERO_THRESHOLD = 0.01;
|
|
10
|
-
const barThicknessValues = {
|
|
11
|
-
medium: '2px',
|
|
12
|
-
large: '4px'
|
|
13
|
-
};
|
|
14
|
-
const indeterminateProgressBar = {
|
|
15
|
-
'0%': {
|
|
16
|
-
left: '-33%'
|
|
17
|
-
},
|
|
18
|
-
'100%': {
|
|
19
|
-
left: '100%'
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
/**
|
|
23
|
-
* Styles for the root slot
|
|
24
|
-
*/ const useRootStyles = makeStyles({
|
|
25
|
-
root: {
|
|
26
|
-
display: 'block',
|
|
27
|
-
backgroundColor: tokens.colorNeutralBackground6,
|
|
28
|
-
width: '100%',
|
|
29
|
-
overflow: 'hidden',
|
|
30
|
-
'@media screen and (forced-colors: active)': {
|
|
31
|
-
backgroundColor: 'CanvasText'
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
rounded: {
|
|
35
|
-
borderRadius: tokens.borderRadiusMedium
|
|
36
|
-
},
|
|
37
|
-
square: {
|
|
38
|
-
borderRadius: tokens.borderRadiusNone
|
|
39
|
-
},
|
|
40
|
-
medium: {
|
|
41
|
-
height: barThicknessValues.medium
|
|
42
|
-
},
|
|
43
|
-
large: {
|
|
44
|
-
height: barThicknessValues.large
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
/**
|
|
48
|
-
* Styles for the ProgressBar bar
|
|
49
|
-
*/ const useBarStyles = makeStyles({
|
|
50
|
-
base: {
|
|
51
|
-
'@media screen and (forced-colors: active)': {
|
|
52
|
-
backgroundColor: 'Highlight'
|
|
53
|
-
},
|
|
54
|
-
borderRadius: 'inherit',
|
|
55
|
-
height: '100%'
|
|
56
|
-
},
|
|
57
|
-
nonZeroDeterminate: {
|
|
58
|
-
transitionProperty: 'width',
|
|
59
|
-
transitionDuration: '0.3s',
|
|
60
|
-
transitionTimingFunction: 'ease'
|
|
61
|
-
},
|
|
62
|
-
indeterminate: {
|
|
63
|
-
maxWidth: '33%',
|
|
64
|
-
position: 'relative',
|
|
65
|
-
backgroundImage: `linear-gradient(
|
|
66
|
-
to right,
|
|
67
|
-
${tokens.colorNeutralBackground6} 0%,
|
|
68
|
-
${tokens.colorTransparentBackground} 50%,
|
|
69
|
-
${tokens.colorNeutralBackground6} 100%
|
|
70
|
-
)`,
|
|
71
|
-
animationName: indeterminateProgressBar,
|
|
72
|
-
animationDuration: '3s',
|
|
73
|
-
animationTimingFunction: 'linear',
|
|
74
|
-
animationIterationCount: 'infinite',
|
|
75
|
-
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
76
|
-
animationDuration: '0.01ms',
|
|
77
|
-
animationIterationCount: '1'
|
|
78
|
-
}
|
|
79
|
-
},
|
|
80
|
-
brand: {
|
|
81
|
-
backgroundColor: tokens.colorCompoundBrandBackground
|
|
82
|
-
},
|
|
83
|
-
error: {
|
|
84
|
-
backgroundColor: tokens.colorPaletteRedBackground3
|
|
85
|
-
},
|
|
86
|
-
warning: {
|
|
87
|
-
backgroundColor: tokens.colorPaletteDarkOrangeBackground3
|
|
88
|
-
},
|
|
89
|
-
success: {
|
|
90
|
-
backgroundColor: tokens.colorPaletteGreenBackground3
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
/**
|
|
94
|
-
* Apply styling to the ProgressBar slots based on the state
|
|
95
|
-
*/ export const useProgressBarStyles_unstable = (state)=>{
|
|
96
|
-
'use no memo';
|
|
97
|
-
const { color, max, shape, thickness, value } = state;
|
|
98
|
-
const rootStyles = useRootStyles();
|
|
99
|
-
const barStyles = useBarStyles();
|
|
100
|
-
state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
101
|
-
if (state.bar) {
|
|
102
|
-
state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
103
|
-
}
|
|
104
|
-
if (state.bar && value !== undefined) {
|
|
105
|
-
state.bar.style = {
|
|
106
|
-
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
|
107
|
-
...state.bar.style
|
|
108
|
-
};
|
|
109
|
-
}
|
|
110
|
-
return state;
|
|
111
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\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: '-33%', // matches indeterminate bar width\n },\n '100%': {\n left: '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 width: '100%',\n overflow: 'hidden',\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n 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 '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n borderRadius: 'inherit',\n height: '100%',\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 animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground,\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 'use no memo';\n\n const { color, max, shape, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\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 barStyles.brand,\n value === undefined && barStyles.indeterminate,\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n color && value !== undefined && barStyles[color],\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"],"names":["makeStyles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","useRootStyles","display","backgroundColor","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","animationName","animationDuration","animationTimingFunction","animationIterationCount","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","Math","min"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", {
|
|
3
|
-
value: true
|
|
4
|
-
});
|
|
5
|
-
function _export(target, all) {
|
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
progressBarClassNames: function() {
|
|
13
|
-
return progressBarClassNames;
|
|
14
|
-
},
|
|
15
|
-
useProgressBarStyles_unstable: function() {
|
|
16
|
-
return useProgressBarStyles_unstable;
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
const _react = require("@griffel/react");
|
|
20
|
-
const _reacttheme = require("@fluentui/react-theme");
|
|
21
|
-
const progressBarClassNames = {
|
|
22
|
-
root: 'fui-ProgressBar',
|
|
23
|
-
bar: 'fui-ProgressBar__bar'
|
|
24
|
-
};
|
|
25
|
-
// If the percentComplete is near 0, don't animate it.
|
|
26
|
-
// This prevents animations on reset to 0 scenarios.
|
|
27
|
-
const ZERO_THRESHOLD = 0.01;
|
|
28
|
-
const barThicknessValues = {
|
|
29
|
-
medium: '2px',
|
|
30
|
-
large: '4px'
|
|
31
|
-
};
|
|
32
|
-
const indeterminateProgressBar = {
|
|
33
|
-
'0%': {
|
|
34
|
-
left: '-33%'
|
|
35
|
-
},
|
|
36
|
-
'100%': {
|
|
37
|
-
left: '100%'
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* Styles for the root slot
|
|
42
|
-
*/ const useRootStyles = (0, _react.makeStyles)({
|
|
43
|
-
root: {
|
|
44
|
-
display: 'block',
|
|
45
|
-
backgroundColor: _reacttheme.tokens.colorNeutralBackground6,
|
|
46
|
-
width: '100%',
|
|
47
|
-
overflow: 'hidden',
|
|
48
|
-
'@media screen and (forced-colors: active)': {
|
|
49
|
-
backgroundColor: 'CanvasText'
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
rounded: {
|
|
53
|
-
borderRadius: _reacttheme.tokens.borderRadiusMedium
|
|
54
|
-
},
|
|
55
|
-
square: {
|
|
56
|
-
borderRadius: _reacttheme.tokens.borderRadiusNone
|
|
57
|
-
},
|
|
58
|
-
medium: {
|
|
59
|
-
height: barThicknessValues.medium
|
|
60
|
-
},
|
|
61
|
-
large: {
|
|
62
|
-
height: barThicknessValues.large
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
/**
|
|
66
|
-
* Styles for the ProgressBar bar
|
|
67
|
-
*/ const useBarStyles = (0, _react.makeStyles)({
|
|
68
|
-
base: {
|
|
69
|
-
'@media screen and (forced-colors: active)': {
|
|
70
|
-
backgroundColor: 'Highlight'
|
|
71
|
-
},
|
|
72
|
-
borderRadius: 'inherit',
|
|
73
|
-
height: '100%'
|
|
74
|
-
},
|
|
75
|
-
nonZeroDeterminate: {
|
|
76
|
-
transitionProperty: 'width',
|
|
77
|
-
transitionDuration: '0.3s',
|
|
78
|
-
transitionTimingFunction: 'ease'
|
|
79
|
-
},
|
|
80
|
-
indeterminate: {
|
|
81
|
-
maxWidth: '33%',
|
|
82
|
-
position: 'relative',
|
|
83
|
-
backgroundImage: `linear-gradient(
|
|
84
|
-
to right,
|
|
85
|
-
${_reacttheme.tokens.colorNeutralBackground6} 0%,
|
|
86
|
-
${_reacttheme.tokens.colorTransparentBackground} 50%,
|
|
87
|
-
${_reacttheme.tokens.colorNeutralBackground6} 100%
|
|
88
|
-
)`,
|
|
89
|
-
animationName: indeterminateProgressBar,
|
|
90
|
-
animationDuration: '3s',
|
|
91
|
-
animationTimingFunction: 'linear',
|
|
92
|
-
animationIterationCount: 'infinite',
|
|
93
|
-
'@media screen and (prefers-reduced-motion: reduce)': {
|
|
94
|
-
animationDuration: '0.01ms',
|
|
95
|
-
animationIterationCount: '1'
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
brand: {
|
|
99
|
-
backgroundColor: _reacttheme.tokens.colorCompoundBrandBackground
|
|
100
|
-
},
|
|
101
|
-
error: {
|
|
102
|
-
backgroundColor: _reacttheme.tokens.colorPaletteRedBackground3
|
|
103
|
-
},
|
|
104
|
-
warning: {
|
|
105
|
-
backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground3
|
|
106
|
-
},
|
|
107
|
-
success: {
|
|
108
|
-
backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground3
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
|
-
const useProgressBarStyles_unstable = (state)=>{
|
|
112
|
-
'use no memo';
|
|
113
|
-
const { color, max, shape, thickness, value } = state;
|
|
114
|
-
const rootStyles = useRootStyles();
|
|
115
|
-
const barStyles = useBarStyles();
|
|
116
|
-
state.root.className = (0, _react.mergeClasses)(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
117
|
-
if (state.bar) {
|
|
118
|
-
state.bar.className = (0, _react.mergeClasses)(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
119
|
-
}
|
|
120
|
-
if (state.bar && value !== undefined) {
|
|
121
|
-
state.bar.style = {
|
|
122
|
-
width: Math.min(100, Math.max(0, value / max * 100)) + '%',
|
|
123
|
-
...state.bar.style
|
|
124
|
-
};
|
|
125
|
-
}
|
|
126
|
-
return state;
|
|
127
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ProgressBar/useProgressBarStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\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: '-33%', // matches indeterminate bar width\n },\n '100%': {\n left: '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 width: '100%',\n overflow: 'hidden',\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n 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 '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n borderRadius: 'inherit',\n height: '100%',\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 animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground,\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 'use no memo';\n\n const { color, max, shape, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\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 barStyles.brand,\n value === undefined && barStyles.indeterminate,\n value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n color && value !== undefined && barStyles[color],\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"],"names":["progressBarClassNames","useProgressBarStyles_unstable","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","useRootStyles","makeStyles","display","backgroundColor","tokens","colorNeutralBackground6","width","overflow","rounded","borderRadius","borderRadiusMedium","square","borderRadiusNone","height","useBarStyles","base","nonZeroDeterminate","transitionProperty","transitionDuration","transitionTimingFunction","indeterminate","maxWidth","position","backgroundImage","colorTransparentBackground","animationName","animationDuration","animationTimingFunction","animationIterationCount","brand","colorCompoundBrandBackground","error","colorPaletteRedBackground3","warning","colorPaletteDarkOrangeBackground3","success","colorPaletteGreenBackground3","state","color","max","shape","thickness","value","rootStyles","barStyles","className","mergeClasses","undefined","style","Math","min"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|