@fluentui/react-progress 9.0.0-alpha.1 → 9.0.0-alpha.3
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +81 -1
- package/CHANGELOG.md +27 -2
- package/MIGRATION.md +8 -8
- package/README.md +2 -0
- package/Spec.md +3 -0
- package/dist/index.d.ts +10 -1
- package/lib/components/Progress/Progress.types.js.map +1 -1
- package/lib/components/Progress/useProgress.js +6 -2
- package/lib/components/Progress/useProgress.js.map +1 -1
- package/lib/components/Progress/useProgressStyles.js +33 -6
- package/lib/components/Progress/useProgressStyles.js.map +1 -1
- package/lib-commonjs/components/Progress/useProgress.js +6 -2
- package/lib-commonjs/components/Progress/useProgress.js.map +1 -1
- package/lib-commonjs/components/Progress/useProgressStyles.js +33 -6
- package/lib-commonjs/components/Progress/useProgressStyles.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,87 @@
|
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 25 Oct 2022 00:34:13 GMT",
|
|
6
|
+
"tag": "@fluentui/react-progress_v9.0.0-alpha.3",
|
|
7
|
+
"version": "9.0.0-alpha.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "behowell@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-progress",
|
|
13
|
+
"commit": "f9436f583d3c291921fe7a4531f69551096e758c",
|
|
14
|
+
"comment": "feat: Add validationState to Progress, to make the bar red or green"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "ololubek@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-progress",
|
|
19
|
+
"commit": "e255da7cf629534ebaaac05af3b5bb9a2f7def71",
|
|
20
|
+
"comment": "feat: add react-progress to react-components/unstable"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Thu, 20 Oct 2022 08:39:42 GMT",
|
|
27
|
+
"tag": "@fluentui/react-progress_v9.0.0-alpha.2",
|
|
28
|
+
"version": "9.0.0-alpha.2",
|
|
29
|
+
"comments": {
|
|
30
|
+
"prerelease": [
|
|
31
|
+
{
|
|
32
|
+
"author": "ololubek@microsoft.com",
|
|
33
|
+
"package": "@fluentui/react-progress",
|
|
34
|
+
"commit": "e14e5348f1f08aee8da7cb911a24a811d9f9cb09",
|
|
35
|
+
"comment": "feat: Add shape prop to Progress"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "mgodbolt@microsoft.com",
|
|
39
|
+
"package": "@fluentui/react-progress",
|
|
40
|
+
"commit": "17096b3137d9d3e7c7443ddc3ce0738b2910a334",
|
|
41
|
+
"comment": "chore: Bump peer deps to support React 18"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "olfedias@microsoft.com",
|
|
45
|
+
"package": "@fluentui/react-progress",
|
|
46
|
+
"commit": "06865dada128321804646582f564ee86d835d174",
|
|
47
|
+
"comment": "chore: Update Griffel to latest version"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-progress",
|
|
52
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.2",
|
|
53
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-progress",
|
|
58
|
+
"comment": "Bump @fluentui/react-theme to v9.1.1",
|
|
59
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-progress",
|
|
64
|
+
"comment": "Bump @fluentui/react-utilities to v9.1.2",
|
|
65
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-progress",
|
|
70
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16",
|
|
71
|
+
"commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
|
|
72
|
+
}
|
|
73
|
+
],
|
|
74
|
+
"none": [
|
|
75
|
+
{
|
|
76
|
+
"author": "mgodbolt@microsoft.com",
|
|
77
|
+
"package": "@fluentui/react-progress",
|
|
78
|
+
"commit": "82650ef8b3d436c039e33f3eb8a658a3d878064f",
|
|
79
|
+
"comment": "prettier update"
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"date": "Thu, 13 Oct 2022 11:02:58 GMT",
|
|
6
86
|
"tag": "@fluentui/react-progress_v9.0.0-alpha.1",
|
|
7
87
|
"version": "9.0.0-alpha.1",
|
|
8
88
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 25 Oct 2022 00:34:13 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.3)
|
|
8
|
+
|
|
9
|
+
Tue, 25 Oct 2022 00:34:13 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.2..@fluentui/react-progress_v9.0.0-alpha.3)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- feat: Add validationState to Progress, to make the bar red or green ([PR #25253](https://github.com/microsoft/fluentui/pull/25253) by behowell@microsoft.com)
|
|
15
|
+
- feat: add react-progress to react-components/unstable ([PR #25226](https://github.com/microsoft/fluentui/pull/25226) by ololubek@microsoft.com)
|
|
16
|
+
|
|
17
|
+
## [9.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.2)
|
|
18
|
+
|
|
19
|
+
Thu, 20 Oct 2022 08:39:42 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.1..@fluentui/react-progress_v9.0.0-alpha.2)
|
|
21
|
+
|
|
22
|
+
### Changes
|
|
23
|
+
|
|
24
|
+
- feat: Add shape prop to Progress ([PR #25219](https://github.com/microsoft/fluentui/pull/25219) by ololubek@microsoft.com)
|
|
25
|
+
- chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
|
|
26
|
+
- chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
|
|
27
|
+
- Bump @fluentui/react-shared-contexts to v9.0.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
28
|
+
- Bump @fluentui/react-theme to v9.1.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
30
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.1)
|
|
8
33
|
|
|
9
|
-
Thu, 13 Oct 2022
|
|
34
|
+
Thu, 13 Oct 2022 11:02:58 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.0..@fluentui/react-progress_v9.0.0-alpha.1)
|
|
11
36
|
|
|
12
37
|
### Changes
|
package/MIGRATION.md
CHANGED
|
@@ -16,11 +16,11 @@ Here's how the API of v8's `Progress` compares to the one from v9's `Progress` c
|
|
|
16
16
|
|
|
17
17
|
## Property Mapping
|
|
18
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`
|
|
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/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
**React Progress components for [Fluent UI React](https://react.fluentui.dev/)**
|
|
4
4
|
|
|
5
|
+
## STATUS: Alpha
|
|
6
|
+
|
|
5
7
|
These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
|
|
6
8
|
|
|
7
9
|
## Usage
|
package/Spec.md
CHANGED
|
@@ -44,6 +44,9 @@ function App() {
|
|
|
44
44
|
- The default Progress that animates indefinitely
|
|
45
45
|
- Determinate Progress
|
|
46
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.
|
|
47
50
|
|
|
48
51
|
#### Adding Label and Description with ProgressField
|
|
49
52
|
|
package/dist/index.d.ts
CHANGED
|
@@ -16,6 +16,11 @@ export declare const progressClassNames: SlotClassNames<ProgressSlots>;
|
|
|
16
16
|
* Progress Props
|
|
17
17
|
*/
|
|
18
18
|
export declare type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {
|
|
19
|
+
/**
|
|
20
|
+
* The shape of the bar and track.
|
|
21
|
+
* @default 'rounded'
|
|
22
|
+
*/
|
|
23
|
+
shape?: 'rounded' | 'rectangular';
|
|
19
24
|
/**
|
|
20
25
|
* A decimal number between `0` and `1` (or between `0` and `max` if given),
|
|
21
26
|
* which specifies how much of the task has been completed.
|
|
@@ -34,6 +39,10 @@ export declare type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'>
|
|
|
34
39
|
* @default 'medium'
|
|
35
40
|
*/
|
|
36
41
|
thickness?: 'medium' | 'large';
|
|
42
|
+
/**
|
|
43
|
+
* The status of the progress bar. Changes the color of the bar.
|
|
44
|
+
*/
|
|
45
|
+
validationState?: 'success' | 'warning' | 'error';
|
|
37
46
|
};
|
|
38
47
|
|
|
39
48
|
export declare type ProgressSlots = {
|
|
@@ -50,7 +59,7 @@ export declare type ProgressSlots = {
|
|
|
50
59
|
/**
|
|
51
60
|
* State used in rendering Progress
|
|
52
61
|
*/
|
|
53
|
-
export declare type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'thickness'>> & Pick<ProgressProps, 'value'>;
|
|
62
|
+
export declare type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressProps, 'value' | 'validationState'>;
|
|
54
63
|
|
|
55
64
|
/**
|
|
56
65
|
* Render the final JSX of Progress
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.types.js","sourceRoot":"../src/","sources":["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 * 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
|
|
1
|
+
{"version":3,"file":"Progress.types.js","sourceRoot":"../src/","sources":["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"]}
|
|
@@ -12,9 +12,11 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
|
|
|
12
12
|
export const useProgress_unstable = (props, ref) => {
|
|
13
13
|
// Props
|
|
14
14
|
const {
|
|
15
|
+
max = 1.0,
|
|
16
|
+
shape = 'rounded',
|
|
15
17
|
thickness = 'medium',
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
validationState,
|
|
19
|
+
value
|
|
18
20
|
} = props;
|
|
19
21
|
const root = getNativeElementProps('div', {
|
|
20
22
|
ref,
|
|
@@ -29,8 +31,10 @@ export const useProgress_unstable = (props, ref) => {
|
|
|
29
31
|
});
|
|
30
32
|
const state = {
|
|
31
33
|
max,
|
|
34
|
+
shape,
|
|
32
35
|
thickness,
|
|
33
36
|
value,
|
|
37
|
+
validationState,
|
|
34
38
|
components: {
|
|
35
39
|
root: 'div',
|
|
36
40
|
bar: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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,
|
|
1
|
+
{"version":3,"sources":["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/"}
|
|
@@ -43,6 +43,18 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
43
43
|
"tu2nte": "f1mcb20s",
|
|
44
44
|
"y0r1ed": "fek7wd8"
|
|
45
45
|
},
|
|
46
|
+
"rounded": {
|
|
47
|
+
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
48
|
+
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
49
|
+
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
50
|
+
"Btl43ni": ["fyu767a", "f1jar5jt"]
|
|
51
|
+
},
|
|
52
|
+
"rectangular": {
|
|
53
|
+
"Bbmb7ep": ["fzi6hpg", "fyowgf4"],
|
|
54
|
+
"Beyfa6y": ["fyowgf4", "fzi6hpg"],
|
|
55
|
+
"B7oj6ja": ["f3fg2lr", "f13av6d4"],
|
|
56
|
+
"Btl43ni": ["f13av6d4", "f3fg2lr"]
|
|
57
|
+
},
|
|
46
58
|
"medium": {
|
|
47
59
|
"Bqenvij": "f4t8t6x"
|
|
48
60
|
},
|
|
@@ -50,7 +62,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
50
62
|
"Bqenvij": "f6ywr7j"
|
|
51
63
|
}
|
|
52
64
|
}, {
|
|
53
|
-
"d": [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
|
65
|
+
"d": [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".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;}"],
|
|
54
66
|
"m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
|
|
55
67
|
"m": "screen and (forced-colors: active)"
|
|
56
68
|
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
|
@@ -67,7 +79,11 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
67
79
|
const useBarStyles = /*#__PURE__*/__styles({
|
|
68
80
|
"base": {
|
|
69
81
|
"De3pzq": "ftywsgz",
|
|
70
|
-
"Bpep1pd": "f1neahkh"
|
|
82
|
+
"Bpep1pd": "f1neahkh",
|
|
83
|
+
"Bbmb7ep": ["f1d9uwra", "fzibvwi"],
|
|
84
|
+
"Beyfa6y": ["fzibvwi", "f1d9uwra"],
|
|
85
|
+
"B7oj6ja": ["fuoumxm", "f1vtqnvc"],
|
|
86
|
+
"Btl43ni": ["f1vtqnvc", "fuoumxm"]
|
|
71
87
|
},
|
|
72
88
|
"medium": {
|
|
73
89
|
"Bqenvij": "f4t8t6x"
|
|
@@ -83,16 +99,25 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
83
99
|
"indeterminate": {
|
|
84
100
|
"B2u0y6b": "fa0wk36",
|
|
85
101
|
"qhf8xq": "f10pi13n",
|
|
86
|
-
"Bcmaq0h": ["
|
|
102
|
+
"Bcmaq0h": ["fpo0yib", "f1u5hf6c"],
|
|
87
103
|
"Bv12yb3": ["f1wk4z0g", "f1f62nrt"],
|
|
88
104
|
"vin17d": "f1a27w2r",
|
|
89
105
|
"w3vfg9": "f1cpbl36"
|
|
90
106
|
},
|
|
91
107
|
"rtl": {
|
|
92
108
|
"Bv12yb3": ["fw97ye2", "fqbve9y"]
|
|
109
|
+
},
|
|
110
|
+
"error": {
|
|
111
|
+
"De3pzq": "f1w1hjie"
|
|
112
|
+
},
|
|
113
|
+
"warning": {
|
|
114
|
+
"De3pzq": "fbblncd"
|
|
115
|
+
},
|
|
116
|
+
"success": {
|
|
117
|
+
"De3pzq": "fowzhcx"
|
|
93
118
|
}
|
|
94
119
|
}, {
|
|
95
|
-
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".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;}", ".
|
|
120
|
+
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1u5hf6c{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}", ".f1w1hjie{background-color:var(--colorPaletteRedForeground1);}", ".fbblncd{background-color:var(--colorPaletteDarkOrangeForeground1);}", ".fowzhcx{background-color:var(--colorPaletteGreenForeground1);}"],
|
|
96
121
|
"m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
97
122
|
"m": "screen and (forced-colors: active)"
|
|
98
123
|
}]],
|
|
@@ -106,7 +131,9 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
106
131
|
export const useProgressStyles_unstable = state => {
|
|
107
132
|
const {
|
|
108
133
|
max,
|
|
134
|
+
shape,
|
|
109
135
|
thickness,
|
|
136
|
+
validationState,
|
|
110
137
|
value
|
|
111
138
|
} = state;
|
|
112
139
|
const rootStyles = useRootStyles();
|
|
@@ -114,10 +141,10 @@ export const useProgressStyles_unstable = state => {
|
|
|
114
141
|
const {
|
|
115
142
|
dir
|
|
116
143
|
} = useFluent();
|
|
117
|
-
state.root.className = mergeClasses(progressClassNames.root, rootStyles.root, rootStyles[thickness], state.root.className);
|
|
144
|
+
state.root.className = mergeClasses(progressClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
118
145
|
|
|
119
146
|
if (state.bar) {
|
|
120
|
-
state.bar.className = mergeClasses(progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, state.bar.className);
|
|
147
|
+
state.bar.className = mergeClasses(progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, validationState && barStyles[validationState], state.bar.className);
|
|
121
148
|
}
|
|
122
149
|
|
|
123
150
|
if (state.bar && value !== undefined) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Progress/useProgressStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAIA,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE,cADyD;EAE/D,GAAG,EAAE;AAF0D,CAA1D,C,CAKP;AACA;;AACA,MAAM,cAAc,GAAG,IAAvB;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,KADiB;EAEzB,KAAK,EAAE;AAFkB,CAA3B;AAKA,MAAM,qBAAqB,GAAG;EAC5B,MAAM;IACJ,IAAI,EAAE;EADF,CADsB;EAI5B,QAAQ;IACN,IAAI,EAAE;EADA;AAJoB,CAA9B;AAQA,MAAM,wBAAwB,GAAG;EAC/B,QAAQ;IACN,KAAK,EAAE;EADD,CADuB;EAI/B,MAAM;IACJ,KAAK,EAAE;EADH;AAJyB,CAAjC;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;
|
|
1
|
+
{"version":3,"sources":["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 },\n\n rtl: {\n animationName: indeterminateProgressRTL,\n },\n\n error: {\n backgroundColor: tokens.colorPaletteRedForeground1,\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenForeground1,\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/"}
|
|
@@ -20,9 +20,11 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
20
20
|
const useProgress_unstable = (props, ref) => {
|
|
21
21
|
// Props
|
|
22
22
|
const {
|
|
23
|
+
max = 1.0,
|
|
24
|
+
shape = 'rounded',
|
|
23
25
|
thickness = 'medium',
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
validationState,
|
|
27
|
+
value
|
|
26
28
|
} = props;
|
|
27
29
|
const root = react_utilities_1.getNativeElementProps('div', {
|
|
28
30
|
ref,
|
|
@@ -37,8 +39,10 @@ const useProgress_unstable = (props, ref) => {
|
|
|
37
39
|
});
|
|
38
40
|
const state = {
|
|
39
41
|
max,
|
|
42
|
+
shape,
|
|
40
43
|
thickness,
|
|
41
44
|
value,
|
|
45
|
+
validationState,
|
|
42
46
|
components: {
|
|
43
47
|
root: 'div',
|
|
44
48
|
bar: 'div'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Progress/useProgress.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG;EACA,MAAM;IAAE,
|
|
1
|
+
{"version":3,"sources":["components/Progress/useProgress.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,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,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,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;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","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/"}
|
|
@@ -53,6 +53,18 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
53
53
|
"tu2nte": "f1mcb20s",
|
|
54
54
|
"y0r1ed": "fek7wd8"
|
|
55
55
|
},
|
|
56
|
+
"rounded": {
|
|
57
|
+
"Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
|
|
58
|
+
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
|
59
|
+
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
|
60
|
+
"Btl43ni": ["fyu767a", "f1jar5jt"]
|
|
61
|
+
},
|
|
62
|
+
"rectangular": {
|
|
63
|
+
"Bbmb7ep": ["fzi6hpg", "fyowgf4"],
|
|
64
|
+
"Beyfa6y": ["fyowgf4", "fzi6hpg"],
|
|
65
|
+
"B7oj6ja": ["f3fg2lr", "f13av6d4"],
|
|
66
|
+
"Btl43ni": ["f13av6d4", "f3fg2lr"]
|
|
67
|
+
},
|
|
56
68
|
"medium": {
|
|
57
69
|
"Bqenvij": "f4t8t6x"
|
|
58
70
|
},
|
|
@@ -60,7 +72,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
60
72
|
"Bqenvij": "f6ywr7j"
|
|
61
73
|
}
|
|
62
74
|
}, {
|
|
63
|
-
"d": [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
|
|
75
|
+
"d": [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".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;}"],
|
|
64
76
|
"m": [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
|
|
65
77
|
"m": "screen and (forced-colors: active)"
|
|
66
78
|
}], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
|
|
@@ -77,7 +89,11 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
77
89
|
const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
78
90
|
"base": {
|
|
79
91
|
"De3pzq": "ftywsgz",
|
|
80
|
-
"Bpep1pd": "f1neahkh"
|
|
92
|
+
"Bpep1pd": "f1neahkh",
|
|
93
|
+
"Bbmb7ep": ["f1d9uwra", "fzibvwi"],
|
|
94
|
+
"Beyfa6y": ["fzibvwi", "f1d9uwra"],
|
|
95
|
+
"B7oj6ja": ["fuoumxm", "f1vtqnvc"],
|
|
96
|
+
"Btl43ni": ["f1vtqnvc", "fuoumxm"]
|
|
81
97
|
},
|
|
82
98
|
"medium": {
|
|
83
99
|
"Bqenvij": "f4t8t6x"
|
|
@@ -93,16 +109,25 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
93
109
|
"indeterminate": {
|
|
94
110
|
"B2u0y6b": "fa0wk36",
|
|
95
111
|
"qhf8xq": "f10pi13n",
|
|
96
|
-
"Bcmaq0h": ["
|
|
112
|
+
"Bcmaq0h": ["fpo0yib", "f1u5hf6c"],
|
|
97
113
|
"Bv12yb3": ["f1wk4z0g", "f1f62nrt"],
|
|
98
114
|
"vin17d": "f1a27w2r",
|
|
99
115
|
"w3vfg9": "f1cpbl36"
|
|
100
116
|
},
|
|
101
117
|
"rtl": {
|
|
102
118
|
"Bv12yb3": ["fw97ye2", "fqbve9y"]
|
|
119
|
+
},
|
|
120
|
+
"error": {
|
|
121
|
+
"De3pzq": "f1w1hjie"
|
|
122
|
+
},
|
|
123
|
+
"warning": {
|
|
124
|
+
"De3pzq": "fbblncd"
|
|
125
|
+
},
|
|
126
|
+
"success": {
|
|
127
|
+
"De3pzq": "fowzhcx"
|
|
103
128
|
}
|
|
104
129
|
}, {
|
|
105
|
-
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".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;}", ".
|
|
130
|
+
"d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1u5hf6c{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}", ".f1w1hjie{background-color:var(--colorPaletteRedForeground1);}", ".fbblncd{background-color:var(--colorPaletteDarkOrangeForeground1);}", ".fowzhcx{background-color:var(--colorPaletteGreenForeground1);}"],
|
|
106
131
|
"m": [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
107
132
|
"m": "screen and (forced-colors: active)"
|
|
108
133
|
}]],
|
|
@@ -116,7 +141,9 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
|
|
|
116
141
|
const useProgressStyles_unstable = state => {
|
|
117
142
|
const {
|
|
118
143
|
max,
|
|
144
|
+
shape,
|
|
119
145
|
thickness,
|
|
146
|
+
validationState,
|
|
120
147
|
value
|
|
121
148
|
} = state;
|
|
122
149
|
const rootStyles = useRootStyles();
|
|
@@ -124,10 +151,10 @@ const useProgressStyles_unstable = state => {
|
|
|
124
151
|
const {
|
|
125
152
|
dir
|
|
126
153
|
} = react_shared_contexts_1.useFluent_unstable();
|
|
127
|
-
state.root.className = react_1.mergeClasses(exports.progressClassNames.root, rootStyles.root, rootStyles[thickness], state.root.className);
|
|
154
|
+
state.root.className = react_1.mergeClasses(exports.progressClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
|
|
128
155
|
|
|
129
156
|
if (state.bar) {
|
|
130
|
-
state.bar.className = react_1.mergeClasses(exports.progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, state.bar.className);
|
|
157
|
+
state.bar.className = react_1.mergeClasses(exports.progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, validationState && barStyles[validationState], state.bar.className);
|
|
131
158
|
}
|
|
132
159
|
|
|
133
160
|
if (state.bar && value !== undefined) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Progress/useProgressStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAIa,OAAA,CAAA,kBAAA,GAAoD;EAC/D,IAAI,EAAE,cADyD;EAE/D,GAAG,EAAE;AAF0D,CAApD,C,CAKb;AACA;;AACA,MAAM,cAAc,GAAG,IAAvB;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,KADiB;EAEzB,KAAK,EAAE;AAFkB,CAA3B;AAKA,MAAM,qBAAqB,GAAG;EAC5B,MAAM;IACJ,IAAI,EAAE;EADF,CADsB;EAI5B,QAAQ;IACN,IAAI,EAAE;EADA;AAJoB,CAA9B;AAQA,MAAM,wBAAwB,GAAG;EAC/B,QAAQ;IACN,KAAK,EAAE;EADD,CADuB;EAI/B,MAAM;IACJ,KAAK,EAAE;EADH;AAJyB,CAAjC;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;
|
|
1
|
+
{"version":3,"sources":["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 },\n\n rtl: {\n animationName: indeterminateProgressRTL,\n },\n\n error: {\n backgroundColor: tokens.colorPaletteRedForeground1,\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeForeground1,\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenForeground1,\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/"}
|
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.3",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,21 +28,21 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.16",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-shared-contexts": "^9.0.
|
|
36
|
-
"@fluentui/react-theme": "^9.1.
|
|
37
|
-
"@fluentui/react-utilities": "^9.1.
|
|
38
|
-
"@griffel/react": "^1.4.
|
|
35
|
+
"@fluentui/react-shared-contexts": "^9.0.2",
|
|
36
|
+
"@fluentui/react-theme": "^9.1.1",
|
|
37
|
+
"@fluentui/react-utilities": "^9.1.2",
|
|
38
|
+
"@griffel/react": "^1.4.1",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
|
-
"@types/react": ">=16.8.0 <
|
|
43
|
-
"@types/react-dom": ">=16.8.0 <
|
|
44
|
-
"react": ">=16.8.0 <
|
|
45
|
-
"react-dom": ">=16.8.0 <
|
|
42
|
+
"@types/react": ">=16.8.0 <19.0.0",
|
|
43
|
+
"@types/react-dom": ">=16.8.0 <19.0.0",
|
|
44
|
+
"react": ">=16.8.0 <19.0.0",
|
|
45
|
+
"react-dom": ">=16.8.0 <19.0.0"
|
|
46
46
|
},
|
|
47
47
|
"beachball": {
|
|
48
48
|
"disallowedChangeTypes": [
|