@fluentui/react-spinner 9.0.11 → 9.0.12

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.
Files changed (5) hide show
  1. package/CHANGELOG.json +28 -1
  2. package/CHANGELOG.md +13 -2
  3. package/package.json +3 -3
  4. package/MIGRATION.md +0 -30
  5. package/Spec.md +0 -122
package/CHANGELOG.json CHANGED
@@ -2,7 +2,34 @@
2
2
  "name": "@fluentui/react-spinner",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 17 Nov 2022 23:02:44 GMT",
5
+ "date": "Mon, 05 Dec 2022 18:25:28 GMT",
6
+ "tag": "@fluentui/react-spinner_v9.0.12",
7
+ "version": "9.0.12",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "tristan.watanabe@gmail.com",
12
+ "package": "@fluentui/react-spinner",
13
+ "commit": "5874b65a2be89f82ab07baab183f6b19ca9af239",
14
+ "comment": "chore: Migrate to new package structure."
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-spinner",
19
+ "comment": "Bump @fluentui/react-theme to v9.1.3",
20
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-spinner",
25
+ "comment": "Bump @fluentui/react-label to v9.0.12",
26
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Thu, 17 Nov 2022 23:05:47 GMT",
6
33
  "tag": "@fluentui/react-spinner_v9.0.11",
7
34
  "version": "9.0.11",
8
35
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,23 @@
1
1
  # Change Log - @fluentui/react-spinner
2
2
 
3
- This log was last generated on Thu, 17 Nov 2022 23:02:44 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 05 Dec 2022 18:25:28 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.12)
8
+
9
+ Mon, 05 Dec 2022 18:25:28 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.11..@fluentui/react-spinner_v9.0.12)
11
+
12
+ ### Patches
13
+
14
+ - chore: Migrate to new package structure. ([PR #25814](https://github.com/microsoft/fluentui/pull/25814) by tristan.watanabe@gmail.com)
15
+ - Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
16
+ - Bump @fluentui/react-label to v9.0.12 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
17
+
7
18
  ## [9.0.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.11)
8
19
 
9
- Thu, 17 Nov 2022 23:02:44 GMT
20
+ Thu, 17 Nov 2022 23:05:47 GMT
10
21
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.10..@fluentui/react-spinner_v9.0.11)
11
22
 
12
23
  ### Patches
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-spinner",
3
- "version": "9.0.11",
3
+ "version": "9.0.12",
4
4
  "description": "Spinner component for Fluent UI React",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -31,8 +31,8 @@
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-theme": "^9.1.2",
35
- "@fluentui/react-label": "^9.0.11",
34
+ "@fluentui/react-theme": "^9.1.3",
35
+ "@fluentui/react-label": "^9.0.12",
36
36
  "@fluentui/react-utilities": "^9.2.2",
37
37
  "@griffel/react": "^1.4.2",
38
38
  "tslib": "^2.1.0"
package/MIGRATION.md DELETED
@@ -1,30 +0,0 @@
1
- # Spinner Migration
2
-
3
- ## Migration from v8
4
-
5
- - `Spinner`
6
- - `ariaLabel` => use `aria-label` instead.
7
- - `ariaLive` => use `aria-live` instead.
8
- - `componentRef` => use `ref` instead.
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/Spec.md DELETED
@@ -1,122 +0,0 @@
1
- # @fluentui/react-spinner Spec
2
-
3
- ## Background
4
-
5
- A Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. Spinner is typically an indeterminate ProgressIndicator 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
-
7
- ## Prior Art
8
-
9
- ### Open UI
10
-
11
- | Library | Component Name | Spec Link | Notes |
12
- | ----------------------- | ------------------ | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
13
- | Chakra UI | `CircularProgress` | [CircularProgress](https://chakra-ui.com/docs/feedback/circular-progress) | `CircularProgress` has determinate and indeterminate forms, with props that give user the ability to change size, value, line thickness, and a min and max value, and add a label |
14
- | Material UI | `CircularProgress` | [CircularProgress](https://mui.com/components/progress/#progress) | `CircularProgress` has determinate and indeterminate, allows users to change color, add value, and add a label |
15
- | Carbon | `InlineLoading` | [InlineLoading](https://www.carbondesignsystem.com/components/inline-loading/usage) | `InlineLoading` only has an indeterminate form, with four states: `inactive`, `active`, `finished`, `error` |
16
- | FluentUI Northstar | `Loader` | [Loader](https://fluentsite.z22.web.core.windows.net/0.57.0/components/loader/definition) | `Loader` has a `delay` prop that specifies how long to wait before the `Loader` is visible on the page. You can also render a custom svg as the image, and use the `as` prop to choose whether to render the loader as a string or a component. Other props include `inline`, `label`, and `size` |
17
- | Latitude Design System | `Loader` | [Loader](https://www.flexport.com/design/components/loaders#Loader) | This is a simple loader that allows users to modify size and whether the loader is inline |
18
- | Orbit | `Loading` | [Loading](https://orbit.kiwi/components/progress-indicators/loading/) | Simple loader with animation and text |
19
- | Elastic UI | `LoadingSpinner` | [LoadingSpinner](https://elastic.github.io/eui/#/display/loading#spinner) | Simple spinner |
20
- | Adobe Spectrum | `ProgressCircle` | [ProgressCircle](https://spectrum.adobe.com/page/progress-circle/) | It has a default and an over background state. It also has a min and max value setting, as well as a size, determinate, and indeterminate |
21
- | Ant Design | `Spin` | [Spin](https://ant.design/components/spin/) | Can change size, add a delay, and render a custom spinner |
22
- | Atlassian Design System | `Spinner` | [Spinner](https://atlassian.design/components/spinner/examples) | Has a default Spinner, with ability to change size(there are preset size options, with the ability to render the spinner with a custom size). Can also delay the Spinner, and use present animations such as `FadeIn` |
23
- | Base Web | `Spinner` | [Spinner](https://baseweb.design/components/spinner#api) | Started out with a simple Spinner with a size, color, and title prop, but adds an override prop that lets you customize the look and feel of the Spinner |
24
- | Blueprint | `Spinner` | [Spinner](https://blueprintjs.com/docs/#core/components/spinner) | Has a value prop to allow for determinate or indeterminate Spinners, and a size prop with preset sizes provided as an ENUM |
25
- | Evergreen Design System | `Spinner` | [Spinner](https://evergreen.segment.com/components/spinner) | Default Spinner that allows you to change size and add a delay, as well as render it centered in a div |
26
- | Fabric | `Spinner` | [Spinner](https://developer.microsoft.com/en-us/fluentui#/controls/web/spinner) | This Spinner has specific aria attributes as props as well as label and size props to modify the default Spinner |
27
- | GitLab Design System | `Spinner` | [Spinner](https://design.gitlab.com/components/spinner) | Can change size, color, and set inline. Comes with a default 100ms delay |
28
- | Paste | `Spinner` | [Spinner](https://paste.twilio.design/components/spinner/#paste-docs-content-area) | Contains many elements present in other design systems' Spinners: delay, size, color, and as props. Notably, no determinate or indeterminate forms |
29
- | Primer | `Spinner` | [Spinner](https://primer.style/react/Spinner) | Default Spinner with a size prop |
30
- | Garden | `Spinner` | [Spinner](https://garden.zendesk.com/components/spinner) | Default Spinner with color and size prop |
31
- | Polaris | `Spinner` | [Spinner](https://polaris.shopify.com/components/feedback-indicators/spinner) | Default Spinner with a size prop, with preset small and large values |
32
- | Lightning Design System | `Spinner` | [Spinner](https://react.lightningdesignsystem.com/components/spinners/) | A more robust indeterminate Spinner with props that allow the Spinner to be rendered in a container, add styling to said container, inline the Spinner, and change the size |
33
-
34
- ### Comparison of v8 and v0
35
-
36
- The existing components are:
37
-
38
- - v8
39
- - `Spinner`
40
- - v0
41
- - `Loader`
42
- - Both `Spinner` and `Loader` have very similar props
43
- - `Loader` has `delay`, while `Spinner` has aria props exposed for accessibility.
44
-
45
- ## Sample Code
46
-
47
- Basic examples:
48
-
49
- ```jsx=
50
- import { Spinner } from "@fluentui/react-spinner";
51
-
52
- function App() {
53
- return (
54
- <Spinner size="medium" label="Loading" />
55
- )
56
- }
57
-
58
- ```
59
-
60
- ## Variants
61
-
62
- - Indeterminate Spinner
63
- - The default Spinner that spins around indefinitely
64
-
65
- ### Shape
66
-
67
- The Spinner is represented as a circle with an arc of a darker shade rotating the circumfrence
68
-
69
- ## API
70
-
71
- ### Slots
72
-
73
- - `root` - The root element of the Spinner. The html element is a `span`
74
- - `loader` - The svg element that gets animated into a Spinner. The html element is `svg`
75
- - `label` - The text shown with the Spinner. This uses the `Text` control
76
-
77
- ### Props
78
-
79
- See API at [Spinner.types.tsx](./src/components/Spinner/Spinner.types.ts).
80
-
81
- ## Structure
82
-
83
- ```html
84
- <span class="fui-Spinner">
85
- <!-- Label for Spinner -->
86
- <span className="fui-Spinner__label">Loading...</span>
87
- <span className="fui-Spinner__spinner">
88
- <!-- Svg that receives the animation. Classnames are used for animation -->
89
- <svg role="progressbar" className="fui-Spinner__Progressbar">
90
- <circle className="fui-Spinner__Track" />
91
- <circle className="fui-Spinner__Tail" />
92
- </svg>
93
- </span>
94
- </span>
95
- ```
96
-
97
- ## Migration
98
-
99
- See [MIGRATION.md](./MIGRATION.md).
100
-
101
- ## Behaviors
102
-
103
- ### States
104
-
105
- - **Display** - The Spinner will use the following priority:
106
-
107
- - Adding the `inverted` will alter the way that the Spinner is displayed.
108
-
109
- ### Interaction
110
-
111
- The Spinner is non-interactive.
112
-
113
- - **Keyboard** - Not keyboard focusable.
114
- - **Mouse**
115
-
116
- - Click: No action
117
-
118
- - **Touch** - Nothing
119
-
120
- ## Accessibility
121
-
122
- When reduced motion, is active the `indeterminate` `Spinner` will rotate once and then stop animating.