@fluentui/react-progress 9.0.0-alpha.1 → 9.0.0-alpha.3
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 +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": [
|