@fluentui/react-progress 0.0.0-nightly-20230307-0423.1 → 0.0.0-nightly-20230308-0418.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.json +13 -13
- package/CHANGELOG.md +9 -9
- package/lib/components/ProgressBar/useProgressBarStyles.js +6 -11
- package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js +6 -11
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-progress_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Wed, 08 Mar 2023 04:25:06 GMT",
|
|
6
|
+
"tag": "@fluentui/react-progress_v0.0.0-nightly-20230308-0418.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230308-0418.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-progress",
|
|
19
|
-
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-20230308-0418.1",
|
|
20
|
+
"commit": "18e00df0c91d25694ab9b35bdc2ca88ba9f5c5b2"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-progress",
|
|
25
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230308-0418.1",
|
|
26
|
+
"commit": "18e00df0c91d25694ab9b35bdc2ca88ba9f5c5b2"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-progress",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230308-0418.1",
|
|
32
|
+
"commit": "18e00df0c91d25694ab9b35bdc2ca88ba9f5c5b2"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-progress",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230308-0418.1",
|
|
38
|
+
"commit": "18e00df0c91d25694ab9b35bdc2ca88ba9f5c5b2"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-progress",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230308-0418.1",
|
|
44
|
+
"commit": "18e00df0c91d25694ab9b35bdc2ca88ba9f5c5b2"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 08 Mar 2023 04:25:06 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-20230308-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v0.0.0-nightly-20230308-0418.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0..@fluentui/react-progress_v0.0.0-nightly-
|
|
9
|
+
Wed, 08 Mar 2023 04:25:06 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0..@fluentui/react-progress_v0.0.0-nightly-20230308-0418.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-shared-contexts to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20230308-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/18e00df0c91d25694ab9b35bdc2ca88ba9f5c5b2) by beachball)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230308-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/18e00df0c91d25694ab9b35bdc2ca88ba9f5c5b2) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230308-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/18e00df0c91d25694ab9b35bdc2ca88ba9f5c5b2) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230308-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/18e00df0c91d25694ab9b35bdc2ca88ba9f5c5b2) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230308-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/18e00df0c91d25694ab9b35bdc2ca88ba9f5c5b2) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0)
|
|
22
22
|
|
|
@@ -35,7 +35,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
35
35
|
root: {
|
|
36
36
|
mc9l5x: "ftgm304",
|
|
37
37
|
De3pzq: "f18f03hv",
|
|
38
|
-
|
|
38
|
+
a9b677: "fly5x3f",
|
|
39
39
|
B68tc82: "f1p9o1ba",
|
|
40
40
|
Bmxbyg5: "f1sil6mw",
|
|
41
41
|
Bpep1pd: "fu42dvn"
|
|
@@ -59,7 +59,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
59
59
|
Bqenvij: "f6ywr7j"
|
|
60
60
|
}
|
|
61
61
|
}, {
|
|
62
|
-
d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".
|
|
62
|
+
d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fly5x3f{width:100%;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
|
63
63
|
m: [["@media screen and (forced-colors: active){.fu42dvn{background-color:CanvasText;}}", {
|
|
64
64
|
m: "screen and (forced-colors: active)"
|
|
65
65
|
}]]
|
|
@@ -73,13 +73,8 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
73
73
|
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
|
74
74
|
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
|
75
75
|
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
|
76
|
-
Btl43ni: ["f1vtqnvc", "fuoumxm"]
|
|
77
|
-
|
|
78
|
-
medium: {
|
|
79
|
-
Bqenvij: "f4t8t6x"
|
|
80
|
-
},
|
|
81
|
-
large: {
|
|
82
|
-
Bqenvij: "f6ywr7j"
|
|
76
|
+
Btl43ni: ["f1vtqnvc", "fuoumxm"],
|
|
77
|
+
Bqenvij: "f1l02sjl"
|
|
83
78
|
},
|
|
84
79
|
nonZeroDeterminate: {
|
|
85
80
|
Bmy1vo4: "fjt6zfz",
|
|
@@ -119,7 +114,7 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
119
114
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
120
115
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
121
116
|
}]],
|
|
122
|
-
d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".
|
|
117
|
+
d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1l02sjl{height:100%;}", ".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 );}", ".f1jk3tlg{-webkit-animation-name:fzkbrka;animation-name:fzkbrka;}", ".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;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
|
123
118
|
k: ["@-webkit-keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
|
|
124
119
|
});
|
|
125
120
|
/**
|
|
@@ -140,7 +135,7 @@ export const useProgressBarStyles_unstable = state => {
|
|
|
140
135
|
} = useFluent();
|
|
141
136
|
state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
142
137
|
if (state.bar) {
|
|
143
|
-
state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl,
|
|
138
|
+
state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
144
139
|
}
|
|
145
140
|
if (state.bar && value !== undefined) {
|
|
146
141
|
state.bar.style = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","useFluent_unstable","useFluent","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","mc9l5x","De3pzq","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","useFluent_unstable","useFluent","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpep1pd","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","square","Bqenvij","d","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","w3vfg9","Gqtpxc","B3vm3ge","rtl","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","className","undefined","style","width","Math","min"],"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"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: '-100% /* @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 width: '100%',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n square: {\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 '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n ...shorthands.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 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 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 const { color, max, shape, thickness, 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 barStyles.brand,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\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"],"mappings":"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"}
|
|
@@ -41,7 +41,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
41
41
|
root: {
|
|
42
42
|
mc9l5x: "ftgm304",
|
|
43
43
|
De3pzq: "f18f03hv",
|
|
44
|
-
|
|
44
|
+
a9b677: "fly5x3f",
|
|
45
45
|
B68tc82: "f1p9o1ba",
|
|
46
46
|
Bmxbyg5: "f1sil6mw",
|
|
47
47
|
Bpep1pd: "fu42dvn"
|
|
@@ -65,7 +65,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
65
65
|
Bqenvij: "f6ywr7j"
|
|
66
66
|
}
|
|
67
67
|
}, {
|
|
68
|
-
d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".
|
|
68
|
+
d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fly5x3f{width:100%;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
|
69
69
|
m: [["@media screen and (forced-colors: active){.fu42dvn{background-color:CanvasText;}}", {
|
|
70
70
|
m: "screen and (forced-colors: active)"
|
|
71
71
|
}]]
|
|
@@ -79,13 +79,8 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
79
79
|
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
|
80
80
|
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
|
81
81
|
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
|
82
|
-
Btl43ni: ["f1vtqnvc", "fuoumxm"]
|
|
83
|
-
|
|
84
|
-
medium: {
|
|
85
|
-
Bqenvij: "f4t8t6x"
|
|
86
|
-
},
|
|
87
|
-
large: {
|
|
88
|
-
Bqenvij: "f6ywr7j"
|
|
82
|
+
Btl43ni: ["f1vtqnvc", "fuoumxm"],
|
|
83
|
+
Bqenvij: "f1l02sjl"
|
|
89
84
|
},
|
|
90
85
|
nonZeroDeterminate: {
|
|
91
86
|
Bmy1vo4: "fjt6zfz",
|
|
@@ -125,7 +120,7 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
125
120
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
126
121
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
127
122
|
}]],
|
|
128
|
-
d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".
|
|
123
|
+
d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1l02sjl{height:100%;}", ".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 );}", ".f1jk3tlg{-webkit-animation-name:fzkbrka;animation-name:fzkbrka;}", ".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;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
|
129
124
|
k: ["@-webkit-keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
|
|
130
125
|
});
|
|
131
126
|
/**
|
|
@@ -146,7 +141,7 @@ const useProgressBarStyles_unstable = state => {
|
|
|
146
141
|
} = react_shared_contexts_1.useFluent_unstable();
|
|
147
142
|
state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
148
143
|
if (state.bar) {
|
|
149
|
-
state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl,
|
|
144
|
+
state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
150
145
|
}
|
|
151
146
|
if (state.bar && value !== undefined) {
|
|
152
147
|
state.bar.style = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["react_1","require","react_theme_1","react_shared_contexts_1","exports","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","__styles","mc9l5x","De3pzq","
|
|
1
|
+
{"version":3,"names":["react_1","require","react_theme_1","react_shared_contexts_1","exports","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","__styles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpep1pd","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","square","Bqenvij","d","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","w3vfg9","Gqtpxc","B3vm3ge","rtl","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","useFluent_unstable","className","mergeClasses","undefined","style","width","Math","min"],"sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"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: '-100% /* @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 width: '100%',\n ...shorthands.overflow('hidden'),\n\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText',\n },\n },\n rounded: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n square: {\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 '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n ...shorthands.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 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 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 const { color, max, shape, thickness, 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 barStyles.brand,\n value === undefined && barStyles.indeterminate,\n value === undefined && dir === 'rtl' && barStyles.rtl,\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"],"mappings":"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"}
|
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-20230308-0418.1",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230308-0418.1",
|
|
31
31
|
"@fluentui/scripts-api-extractor": "*",
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-field": "0.0.0-nightly-20230308-0418.1",
|
|
36
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230308-0418.1",
|
|
37
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230308-0418.1",
|
|
38
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230308-0418.1",
|
|
39
39
|
"@griffel/react": "^1.5.2",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
41
41
|
},
|