@fluentui/react-spinner 0.0.0-nightly-20220613-0426.1 → 0.0.0-nightly-20220616-0419.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +20 -7
- package/CHANGELOG.md +7 -6
- package/MIGRATION.md +21 -8
- package/README.md +20 -4
- package/Spec.md +2 -15
- package/package.json +5 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-spinner",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-spinner_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Thu, 16 Jun 2022 04:33:53 GMT",
|
|
6
|
+
"tag": "@fluentui/react-spinner_v0.0.0-nightly-20220616-0419.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220616-0419.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -13,17 +13,30 @@
|
|
|
13
13
|
"commit": "11db251a9eda2d067cb1262c37c7a6a4b5a1a016",
|
|
14
14
|
"comment": "fix: Move role attribute to root slot and update Spinner documentation"
|
|
15
15
|
},
|
|
16
|
+
{
|
|
17
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-spinner",
|
|
19
|
+
"commit": "95039a95033166fdd6c45478b1e9703302e17bb8"
|
|
20
|
+
},
|
|
16
21
|
{
|
|
17
22
|
"author": "beachball",
|
|
18
23
|
"package": "@fluentui/react-spinner",
|
|
19
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
24
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220616-0419.1",
|
|
25
|
+
"commit": "7df7f4212738a33683eca9068e0ddb3aec5fda16"
|
|
21
26
|
},
|
|
22
27
|
{
|
|
23
28
|
"author": "beachball",
|
|
24
29
|
"package": "@fluentui/react-spinner",
|
|
25
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
30
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220616-0419.1",
|
|
31
|
+
"commit": "7df7f4212738a33683eca9068e0ddb3aec5fda16"
|
|
32
|
+
}
|
|
33
|
+
],
|
|
34
|
+
"none": [
|
|
35
|
+
{
|
|
36
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
37
|
+
"package": "@fluentui/react-spinner",
|
|
38
|
+
"commit": "95039a95033166fdd6c45478b1e9703302e17bb8",
|
|
39
|
+
"comment": "docs: README, spec and migration guide cleanup."
|
|
27
40
|
}
|
|
28
41
|
]
|
|
29
42
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-spinner
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 16 Jun 2022 04:33:53 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20220616-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v0.0.0-nightly-20220616-0419.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-rc.5..@fluentui/react-spinner_v0.0.0-nightly-
|
|
9
|
+
Thu, 16 Jun 2022 04:33:53 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-rc.5..@fluentui/react-spinner_v0.0.0-nightly-20220616-0419.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- fix: Move role attribute to root slot and update Spinner documentation ([PR #23385](https://github.com/microsoft/fluentui/pull/23385) by ololubek@microsoft.com)
|
|
15
|
-
-
|
|
16
|
-
- Bump @fluentui/react-
|
|
15
|
+
- undefined ([PR #23503](https://github.com/microsoft/fluentui/pull/23503) by Humberto.Morimoto@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20220616-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/7df7f4212738a33683eca9068e0ddb3aec5fda16) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220616-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/7df7f4212738a33683eca9068e0ddb3aec5fda16) by beachball)
|
|
17
18
|
|
|
18
19
|
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-rc.5)
|
|
19
20
|
|
package/MIGRATION.md
CHANGED
|
@@ -1,13 +1,5 @@
|
|
|
1
1
|
# Spinner Migration
|
|
2
2
|
|
|
3
|
-
## Migration from v0
|
|
4
|
-
|
|
5
|
-
- `Loader`
|
|
6
|
-
- `inline` => Not supported.
|
|
7
|
-
- `labelPosition` => 'start' and 'end' changed to 'before' and 'after'
|
|
8
|
-
- `size` => There are the same number of sizes
|
|
9
|
-
- `delay` => Not supported.
|
|
10
|
-
|
|
11
3
|
## Migration from v8
|
|
12
4
|
|
|
13
5
|
- `Spinner`
|
|
@@ -15,3 +7,24 @@
|
|
|
15
7
|
- `ariaLive` => use `aria-live` instead.
|
|
16
8
|
- `componentRef` => use `ref` instead.
|
|
17
9
|
- `theme` => Not supported. Use a `ThemeProvider` control instead.
|
|
10
|
+
|
|
11
|
+
## Migration from v0
|
|
12
|
+
|
|
13
|
+
- `Loader`
|
|
14
|
+
- `delay` => Not supported.
|
|
15
|
+
- `inline` => Not supported.
|
|
16
|
+
- `labelPosition` => `labelPosition` => 'start' and 'end' changed to 'before' and 'after'
|
|
17
|
+
- `size` => `size` => There are the same number of sizes
|
|
18
|
+
|
|
19
|
+
## Property mapping
|
|
20
|
+
|
|
21
|
+
| v8 `Spinner` | v0 `Loader` | v9 `Spinner` |
|
|
22
|
+
| -------------- | --------------- | --------------- |
|
|
23
|
+
| `ariaLabel` | `aria-label` | `aria-label` |
|
|
24
|
+
| `ariaLive` | `aria-live` | `aria-live` |
|
|
25
|
+
| `componentRef` | `ref` | `ref` |
|
|
26
|
+
| | `delay` | |
|
|
27
|
+
| | `inline` | |
|
|
28
|
+
| | `labelPosition` | `labelPosition` |
|
|
29
|
+
| | `size` | `size` |
|
|
30
|
+
| `theme` | | |
|
package/README.md
CHANGED
|
@@ -1,24 +1,32 @@
|
|
|
1
1
|
# @fluentui/react-spinner
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**Spinner components for [Fluent UI React](https://aka.ms/fluentui-storybook)**
|
|
4
4
|
|
|
5
|
-
The Spinner is an outline of a circle which animates around itself indicating to the user that things are processing.
|
|
5
|
+
The Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. Spinners are typically indeterminate progress indicators that is used when it is unknown how long a task will take to complete. They can be various sizes, located inline with content or centered. They generally appear while an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.
|
|
6
6
|
|
|
7
7
|
## Usage
|
|
8
8
|
|
|
9
9
|
To import Spinner:
|
|
10
10
|
|
|
11
11
|
```js
|
|
12
|
-
import { Spinner } from '@fluentui/react-
|
|
12
|
+
import { Spinner } from '@fluentui/react-components';
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
### Examples
|
|
16
16
|
|
|
17
17
|
```js
|
|
18
18
|
<Spinner label="Loading..." />
|
|
19
|
-
<Spinner
|
|
19
|
+
<Spinner label="Loading..." appearance="inverted" />
|
|
20
|
+
<Spinner label="Loading..." size="large" />
|
|
20
21
|
```
|
|
21
22
|
|
|
23
|
+
See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
|
|
24
|
+
|
|
25
|
+
Alternatively, run Storybook locally with:
|
|
26
|
+
|
|
27
|
+
1. `yarn start`
|
|
28
|
+
2. Select `react-spinner` from the list.
|
|
29
|
+
|
|
22
30
|
#### Rendering Spinner without the animated circle
|
|
23
31
|
|
|
24
32
|
You can directly override the Spinner slot to render a Spinner without the animated circle, as shown below
|
|
@@ -27,3 +35,11 @@ You can directly override the Spinner slot to render a Spinner without the anima
|
|
|
27
35
|
<Spinner spinner={null} appearance="primary" label="Primary Spinner" />
|
|
28
36
|
<Spinner spinner={{style:{visibility: 'hidden'}}} appearance="inverted" label="Inverted Spinner" />
|
|
29
37
|
```
|
|
38
|
+
|
|
39
|
+
### Specification
|
|
40
|
+
|
|
41
|
+
See [SPEC.md](./SPEC.md).
|
|
42
|
+
|
|
43
|
+
### Migration Guide
|
|
44
|
+
|
|
45
|
+
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Spinner implementation.
|
package/Spec.md
CHANGED
|
@@ -68,8 +68,6 @@ The Spinner is represented as a circle with an arc of a darker shade rotating th
|
|
|
68
68
|
|
|
69
69
|
## API
|
|
70
70
|
|
|
71
|
-
From [Spinner.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-spinner/src/components/Spinner/Spinner.types.ts)
|
|
72
|
-
|
|
73
71
|
### Slots
|
|
74
72
|
|
|
75
73
|
- `root` - The root element of the Spinner. The html element is a `span`
|
|
@@ -78,18 +76,7 @@ From [Spinner.types.tsx](https://github.com/microsoft/fluentui/blob/master/packa
|
|
|
78
76
|
|
|
79
77
|
### Props
|
|
80
78
|
|
|
81
|
-
|
|
82
|
-
export type SpinnerProps = ComponentProps &
|
|
83
|
-
React.HTMLAttributes<HTMLElement> & {
|
|
84
|
-
/* The appearance of the Spinner*/
|
|
85
|
-
appearance?: 'primary' | 'inverted',
|
|
86
|
-
/* The labelPosition prop allows user to set the location of the label*/
|
|
87
|
-
labelPosition?: 'above' | 'below' | 'before' | 'after',
|
|
88
|
-
/* The size prop sets the size of the Spinner
|
|
89
|
-
* @defaultValue "medium"*/
|
|
90
|
-
size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge',
|
|
91
|
-
};
|
|
92
|
-
```
|
|
79
|
+
See API at [Spinner.types.tsx](./src/components/Spinner/Spinner.types.ts).
|
|
93
80
|
|
|
94
81
|
## Structure
|
|
95
82
|
|
|
@@ -109,7 +96,7 @@ export type SpinnerProps = ComponentProps &
|
|
|
109
96
|
|
|
110
97
|
## Migration
|
|
111
98
|
|
|
112
|
-
See [MIGRATION.md]().
|
|
99
|
+
See [MIGRATION.md](./MIGRATION.md).
|
|
113
100
|
|
|
114
101
|
## Behaviors
|
|
115
102
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-spinner",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220616-0419.1",
|
|
4
4
|
"description": "Spinner component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20220616-0419.0",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220616-0419.0",
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20220616-0419.1",
|
|
37
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220616-0419.1",
|
|
38
38
|
"@griffel/react": "1.1.0",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|