@fluentui/react-progress 9.0.0-alpha.16 → 9.0.0-alpha.18
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 +37 -1
- package/CHANGELOG.md +21 -2
- package/dist/index.d.ts +5 -4
- package/lib/components/ProgressBar/ProgressBar.types.js.map +1 -1
- package/lib/components/ProgressBar/useProgressBar.js +2 -2
- package/lib/components/ProgressBar/useProgressBar.js.map +1 -1
- package/lib/components/ProgressBar/useProgressBarStyles.js +14 -12
- package/lib/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBar.js +2 -2
- package/lib-commonjs/components/ProgressBar/useProgressBar.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js +14 -12
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,43 @@
|
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 13 Feb 2023 23:40:50 GMT",
|
|
6
|
+
"tag": "@fluentui/react-progress_v9.0.0-alpha.18",
|
|
7
|
+
"version": "9.0.0-alpha.18",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-progress",
|
|
13
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.20",
|
|
14
|
+
"commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-progress",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.5.3",
|
|
20
|
+
"commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Mon, 13 Feb 2023 09:35:47 GMT",
|
|
27
|
+
"tag": "@fluentui/react-progress_v9.0.0-alpha.17",
|
|
28
|
+
"version": "9.0.0-alpha.17",
|
|
29
|
+
"comments": {
|
|
30
|
+
"prerelease": [
|
|
31
|
+
{
|
|
32
|
+
"author": "ololubek@microsoft.com",
|
|
33
|
+
"package": "@fluentui/react-progress",
|
|
34
|
+
"commit": "48b466e0ba8a55ad6f216127e538076c1e65fd37",
|
|
35
|
+
"comment": "chore: Update docs and styling to fix visual bugs and clarify usage of ProgressBar"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"date": "Fri, 10 Feb 2023 08:50:02 GMT",
|
|
6
42
|
"tag": "@fluentui/react-progress_v9.0.0-alpha.16",
|
|
7
43
|
"version": "9.0.0-alpha.16",
|
|
8
44
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 13 Feb 2023 23:40:50 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.18)
|
|
8
|
+
|
|
9
|
+
Mon, 13 Feb 2023 23:40:50 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.17..@fluentui/react-progress_v9.0.0-alpha.18)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.20 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.5.3 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.17)
|
|
18
|
+
|
|
19
|
+
Mon, 13 Feb 2023 09:35:47 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.16..@fluentui/react-progress_v9.0.0-alpha.17)
|
|
21
|
+
|
|
22
|
+
### Changes
|
|
23
|
+
|
|
24
|
+
- chore: Update docs and styling to fix visual bugs and clarify usage of ProgressBar ([PR #26768](https://github.com/microsoft/fluentui/pull/26768) by ololubek@microsoft.com)
|
|
25
|
+
|
|
7
26
|
## [9.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.16)
|
|
8
27
|
|
|
9
|
-
Fri, 10 Feb 2023 08:
|
|
28
|
+
Fri, 10 Feb 2023 08:50:02 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.15..@fluentui/react-progress_v9.0.0-alpha.16)
|
|
11
30
|
|
|
12
31
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -21,7 +21,7 @@ export declare const progressBarClassNames: SlotClassNames<ProgressBarSlots>;
|
|
|
21
21
|
export declare type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {
|
|
22
22
|
/**
|
|
23
23
|
* The shape of the bar and track.
|
|
24
|
-
* @default
|
|
24
|
+
* @default rounded
|
|
25
25
|
*/
|
|
26
26
|
shape?: 'rounded' | 'square';
|
|
27
27
|
/**
|
|
@@ -39,13 +39,14 @@ export declare type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 's
|
|
|
39
39
|
max?: number;
|
|
40
40
|
/**
|
|
41
41
|
* The thickness of the ProgressBar bar
|
|
42
|
-
* @default
|
|
42
|
+
* @default medium
|
|
43
43
|
*/
|
|
44
44
|
thickness?: 'medium' | 'large';
|
|
45
45
|
/**
|
|
46
46
|
* The status of the ProgressBar bar. Changes the color of the bar.
|
|
47
|
+
* @default brand
|
|
47
48
|
*/
|
|
48
|
-
|
|
49
|
+
color?: 'brand' | 'success' | 'warning' | 'error';
|
|
49
50
|
};
|
|
50
51
|
|
|
51
52
|
export declare type ProgressBarSlots = {
|
|
@@ -62,7 +63,7 @@ export declare type ProgressBarSlots = {
|
|
|
62
63
|
/**
|
|
63
64
|
* State used in rendering ProgressBar
|
|
64
65
|
*/
|
|
65
|
-
export declare type ProgressBarState = ComponentState<ProgressBarSlots> & Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressBarProps, 'value' | '
|
|
66
|
+
export declare type ProgressBarState = ComponentState<ProgressBarSlots> & Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressBarProps, 'value' | 'color'>;
|
|
66
67
|
|
|
67
68
|
/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */
|
|
68
69
|
export declare const ProgressField_unstable: ForwardRefComponent<ProgressFieldProps_unstable>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n /**\n * The track behind the ProgressBar bar\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n */\n bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n /**\n * The shape of the bar and track.\n * @default
|
|
1
|
+
{"version":3,"file":"ProgressBar.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n /**\n * The track behind the ProgressBar bar\n */\n root: NonNullable<Slot<'div'>>;\n /**\n * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n */\n bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n /**\n * The shape of the bar and track.\n * @default rounded\n */\n shape?: 'rounded' | 'square';\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 ProgressBar will display an **indeterminate** state.\n */\n value?: number;\n /**\n * The maximum value, which indicates the task is complete.\n * The ProgressBar bar will be full when `value` equals `max`.\n * @default 1\n */\n max?: number;\n /**\n * The thickness of the ProgressBar bar\n * @default medium\n */\n thickness?: 'medium' | 'large';\n\n /**\n * The status of the ProgressBar bar. Changes the color of the bar.\n * @default brand\n */\n color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<ProgressBarSlots> &\n Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n Pick<ProgressBarProps, 'value' | 'color'>;\n"]}
|
|
@@ -11,10 +11,10 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
|
|
|
11
11
|
export const useProgressBar_unstable = (props, ref) => {
|
|
12
12
|
// Props
|
|
13
13
|
const {
|
|
14
|
+
color = 'brand',
|
|
14
15
|
max = 1.0,
|
|
15
16
|
shape = 'rounded',
|
|
16
17
|
thickness = 'medium',
|
|
17
|
-
validationState,
|
|
18
18
|
value
|
|
19
19
|
} = props;
|
|
20
20
|
const root = getNativeElementProps('div', {
|
|
@@ -29,11 +29,11 @@ export const useProgressBar_unstable = (props, ref) => {
|
|
|
29
29
|
required: true
|
|
30
30
|
});
|
|
31
31
|
const state = {
|
|
32
|
+
color,
|
|
32
33
|
max,
|
|
33
34
|
shape,
|
|
34
35
|
thickness,
|
|
35
36
|
value,
|
|
36
|
-
validationState,
|
|
37
37
|
components: {
|
|
38
38
|
root: 'div',
|
|
39
39
|
bar: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC
|
|
1
|
+
{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAE5F,MAAMO,IAAI,GAAGV,qBAAqB,CAAC,KAAK,EAAE;IACxCI,GAAG;IACHO,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEF,KAAK,KAAKG,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEH,KAAK,KAAKG,SAAS,GAAGN,GAAG,GAAGM,SAAS;IACtD,eAAe,EAAEH,KAAK;IACtB,GAAGN;GACJ,CAAC;EAEF,MAAMU,GAAG,GAAGZ,gBAAgB,CAACE,KAAK,CAACU,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BV,KAAK;IACLC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLO,UAAU,EAAE;MACVN,IAAI,EAAE,KAAK;MACXG,GAAG,EAAE;KACN;IACDH,IAAI;IACJG;GACD;EAED,OAAOE,KAAK;AACd,CAAC","names":["getNativeElementProps","resolveShorthand","useProgressBar_unstable","props","ref","color","max","shape","thickness","value","root","role","undefined","bar","required","state","components"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"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 { color = 'brand', max = 1.0, shape = 'rounded', thickness = 'medium', 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 color,\n max,\n shape,\n thickness,\n value,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"]}
|
|
@@ -14,7 +14,7 @@ const barThicknessValues = {
|
|
|
14
14
|
};
|
|
15
15
|
const indeterminateProgressBar = {
|
|
16
16
|
'0%': {
|
|
17
|
-
left: '
|
|
17
|
+
left: '-100% /* @noflip */'
|
|
18
18
|
},
|
|
19
19
|
'100%': {
|
|
20
20
|
left: '100% /* @noflip */'
|
|
@@ -75,8 +75,6 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
75
75
|
*/
|
|
76
76
|
const useBarStyles = /*#__PURE__*/__styles({
|
|
77
77
|
base: {
|
|
78
|
-
De3pzq: "ftywsgz",
|
|
79
|
-
Bpep1pd: "f1neahkh",
|
|
80
78
|
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
|
81
79
|
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
|
82
80
|
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
|
@@ -97,7 +95,7 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
97
95
|
B2u0y6b: "fa0wk36",
|
|
98
96
|
qhf8xq: "f10pi13n",
|
|
99
97
|
Bcmaq0h: ["fpo0yib", "f1u5hf6c"],
|
|
100
|
-
Bv12yb3: "
|
|
98
|
+
Bv12yb3: "f1jk3tlg",
|
|
101
99
|
vin17d: "f1a27w2r",
|
|
102
100
|
w3vfg9: "f1cpbl36",
|
|
103
101
|
Gqtpxc: "f4akx1t",
|
|
@@ -106,6 +104,10 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
106
104
|
rtl: {
|
|
107
105
|
Bv12yb3: "fjhwsai"
|
|
108
106
|
},
|
|
107
|
+
brand: {
|
|
108
|
+
De3pzq: "ftywsgz",
|
|
109
|
+
Bpep1pd: "f1neahkh"
|
|
110
|
+
},
|
|
109
111
|
error: {
|
|
110
112
|
De3pzq: "fdl5y0r"
|
|
111
113
|
},
|
|
@@ -116,25 +118,25 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
116
118
|
De3pzq: "flxk52p"
|
|
117
119
|
}
|
|
118
120
|
}, {
|
|
119
|
-
d: [".
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
121
|
+
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;}", ".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 );}", ".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);}"],
|
|
122
|
+
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%;}}"],
|
|
123
|
+
m: [["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
123
124
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
124
125
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
125
126
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
126
|
-
}]
|
|
127
|
-
|
|
127
|
+
}], ["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
128
|
+
m: "screen and (forced-colors: active)"
|
|
129
|
+
}]]
|
|
128
130
|
});
|
|
129
131
|
/**
|
|
130
132
|
* Apply styling to the ProgressBar slots based on the state
|
|
131
133
|
*/
|
|
132
134
|
export const useProgressBarStyles_unstable = state => {
|
|
133
135
|
const {
|
|
136
|
+
color,
|
|
134
137
|
max,
|
|
135
138
|
shape,
|
|
136
139
|
thickness,
|
|
137
|
-
validationState,
|
|
138
140
|
value
|
|
139
141
|
} = state;
|
|
140
142
|
const rootStyles = useRootStyles();
|
|
@@ -144,7 +146,7 @@ export const useProgressBarStyles_unstable = state => {
|
|
|
144
146
|
} = useFluent();
|
|
145
147
|
state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
146
148
|
if (state.bar) {
|
|
147
|
-
state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,
|
|
149
|
+
state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
148
150
|
}
|
|
149
151
|
if (state.bar && value !== undefined) {
|
|
150
152
|
state.bar.style = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,IAAIC,SAAS,QAAQ,iCAAiC;AAIjF,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,GAAG,EAAE;CACN;AAED;AACA;AACA,MAAMC,cAAc,GAAG,IAAI;AAE3B,MAAMC,kBAAkB,GAAG;EACzBC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE;CACR;AAED,MAAMC,wBAAwB,GAAG;EAC/B,IAAI,EAAE;IACJC,IAAI,EAAE;GACP;EACD,MAAM,EAAE;IACNA,IAAI,EAAE;;CAET;AACD,MAAMC,2BAA2B,GAAG;EAClC,MAAM,EAAE;IACNC,KAAK,EAAE;GACR;EACD,IAAI,EAAE;IACJA,KAAK,EAAE;;CAEV;AAED;;;AAGA,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAuBpB;AAEF;;;AAGA,MAAMC,YAAY,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","useFluent_unstable","useFluent","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","useBarStyles","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","className","base","brand","undefined","indeterminate","rtl","nonZeroDeterminate","style","width","Math","min"],"sourceRoot":"../src/","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 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 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 ...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 brand: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\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 barStyles[thickness],\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"]}
|
|
@@ -17,10 +17,10 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
17
17
|
const useProgressBar_unstable = (props, ref) => {
|
|
18
18
|
// Props
|
|
19
19
|
const {
|
|
20
|
+
color = 'brand',
|
|
20
21
|
max = 1.0,
|
|
21
22
|
shape = 'rounded',
|
|
22
23
|
thickness = 'medium',
|
|
23
|
-
validationState,
|
|
24
24
|
value
|
|
25
25
|
} = props;
|
|
26
26
|
const root = react_utilities_1.getNativeElementProps('div', {
|
|
@@ -35,11 +35,11 @@ const useProgressBar_unstable = (props, ref) => {
|
|
|
35
35
|
required: true
|
|
36
36
|
});
|
|
37
37
|
const state = {
|
|
38
|
+
color,
|
|
38
39
|
max,
|
|
39
40
|
shape,
|
|
40
41
|
thickness,
|
|
41
42
|
value,
|
|
42
|
-
validationState,
|
|
43
43
|
components: {
|
|
44
44
|
root: 'div',
|
|
45
45
|
bar: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC
|
|
1
|
+
{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAE5F,MAAMO,IAAI,GAAGC,uCAAqB,CAAC,KAAK,EAAE;IACxCP,GAAG;IACHQ,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEH,KAAK,KAAKI,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEJ,KAAK,KAAKI,SAAS,GAAGP,GAAG,GAAGO,SAAS;IACtD,eAAe,EAAEJ,KAAK;IACtB,GAAGN;GACJ,CAAC;EAEF,MAAMW,GAAG,GAAGH,kCAAgB,CAACR,KAAK,CAACW,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BX,KAAK;IACLC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLQ,UAAU,EAAE;MACVP,IAAI,EAAE,KAAK;MACXI,GAAG,EAAE;KACN;IACDJ,IAAI;IACJI;GACD;EAED,OAAOE,KAAK;AACd,CAAC;AAhCYE,+BAAuB","names":["useProgressBar_unstable","props","ref","color","max","shape","thickness","value","root","react_utilities_1","role","undefined","bar","required","state","components","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"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 { color = 'brand', max = 1.0, shape = 'rounded', thickness = 'medium', 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 color,\n max,\n shape,\n thickness,\n value,\n components: {\n root: 'div',\n bar: 'div',\n },\n root,\n bar,\n };\n\n return state;\n};\n"]}
|
|
@@ -20,7 +20,7 @@ const barThicknessValues = {
|
|
|
20
20
|
};
|
|
21
21
|
const indeterminateProgressBar = {
|
|
22
22
|
'0%': {
|
|
23
|
-
left: '
|
|
23
|
+
left: '-100% /* @noflip */'
|
|
24
24
|
},
|
|
25
25
|
'100%': {
|
|
26
26
|
left: '100% /* @noflip */'
|
|
@@ -81,8 +81,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
81
81
|
*/
|
|
82
82
|
const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
83
83
|
base: {
|
|
84
|
-
De3pzq: "ftywsgz",
|
|
85
|
-
Bpep1pd: "f1neahkh",
|
|
86
84
|
Bbmb7ep: ["f1d9uwra", "fzibvwi"],
|
|
87
85
|
Beyfa6y: ["fzibvwi", "f1d9uwra"],
|
|
88
86
|
B7oj6ja: ["fuoumxm", "f1vtqnvc"],
|
|
@@ -103,7 +101,7 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
103
101
|
B2u0y6b: "fa0wk36",
|
|
104
102
|
qhf8xq: "f10pi13n",
|
|
105
103
|
Bcmaq0h: ["fpo0yib", "f1u5hf6c"],
|
|
106
|
-
Bv12yb3: "
|
|
104
|
+
Bv12yb3: "f1jk3tlg",
|
|
107
105
|
vin17d: "f1a27w2r",
|
|
108
106
|
w3vfg9: "f1cpbl36",
|
|
109
107
|
Gqtpxc: "f4akx1t",
|
|
@@ -112,6 +110,10 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
112
110
|
rtl: {
|
|
113
111
|
Bv12yb3: "fjhwsai"
|
|
114
112
|
},
|
|
113
|
+
brand: {
|
|
114
|
+
De3pzq: "ftywsgz",
|
|
115
|
+
Bpep1pd: "f1neahkh"
|
|
116
|
+
},
|
|
115
117
|
error: {
|
|
116
118
|
De3pzq: "fdl5y0r"
|
|
117
119
|
},
|
|
@@ -122,25 +124,25 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
122
124
|
De3pzq: "flxk52p"
|
|
123
125
|
}
|
|
124
126
|
}, {
|
|
125
|
-
d: [".
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
127
|
+
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;}", ".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 );}", ".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);}"],
|
|
128
|
+
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%;}}"],
|
|
129
|
+
m: [["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
|
|
129
130
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
130
131
|
}], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
|
|
131
132
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
132
|
-
}]
|
|
133
|
-
|
|
133
|
+
}], ["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
134
|
+
m: "screen and (forced-colors: active)"
|
|
135
|
+
}]]
|
|
134
136
|
});
|
|
135
137
|
/**
|
|
136
138
|
* Apply styling to the ProgressBar slots based on the state
|
|
137
139
|
*/
|
|
138
140
|
const useProgressBarStyles_unstable = state => {
|
|
139
141
|
const {
|
|
142
|
+
color,
|
|
140
143
|
max,
|
|
141
144
|
shape,
|
|
142
145
|
thickness,
|
|
143
|
-
validationState,
|
|
144
146
|
value
|
|
145
147
|
} = state;
|
|
146
148
|
const rootStyles = useRootStyles();
|
|
@@ -150,7 +152,7 @@ const useProgressBarStyles_unstable = state => {
|
|
|
150
152
|
} = react_shared_contexts_1.useFluent_unstable();
|
|
151
153
|
state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
152
154
|
if (state.bar) {
|
|
153
|
-
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,
|
|
155
|
+
state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
|
|
154
156
|
}
|
|
155
157
|
if (state.bar && value !== undefined) {
|
|
156
158
|
state.bar.style = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,6BAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,GAAG,EAAE;CACN;AAED;AACA;AACA,MAAMC,cAAc,GAAG,IAAI;AAE3B,MAAMC,kBAAkB,GAAG;EACzBC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE;CACR;AAED,MAAMC,wBAAwB,GAAG;EAC/B,IAAI,EAAE;IACJC,IAAI,EAAE;GACP;EACD,MAAM,EAAE;IACNA,IAAI,EAAE;;CAET;AACD,MAAMC,2BAA2B,GAAG;EAClC,MAAM,EAAE;IACNC,KAAK,EAAE;GACR;EACD,IAAI,EAAE;IACJA,KAAK,EAAE;;CAEV;AAED;;;AAGA,MAAMC,aAAa,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAuB9B;AAEF;;;AAGA,MAAMC,YAAY,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":"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","names":["exports","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","react_1","useBarStyles","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","react_shared_contexts_1","className","base","brand","undefined","indeterminate","rtl","nonZeroDeterminate","style","width","Math","min"],"sourceRoot":"../src/","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 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 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 ...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 brand: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\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 barStyles[thickness],\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"]}
|
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.18",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-field": "9.0.0-alpha.
|
|
35
|
+
"@fluentui/react-field": "9.0.0-alpha.20",
|
|
36
36
|
"@fluentui/react-shared-contexts": "^9.2.0",
|
|
37
37
|
"@fluentui/react-theme": "^9.1.5",
|
|
38
|
-
"@fluentui/react-utilities": "^9.5.
|
|
38
|
+
"@fluentui/react-utilities": "^9.5.3",
|
|
39
39
|
"@griffel/react": "^1.5.2",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
41
41
|
},
|