@fluentui/react-progress 9.0.0-alpha.6 → 9.0.0-alpha.7

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 +34 -1
  2. package/CHANGELOG.md +14 -2
  3. package/package.json +4 -4
  4. package/MIGRATION.md +0 -26
  5. package/Spec.md +0 -124
package/CHANGELOG.json CHANGED
@@ -2,7 +2,40 @@
2
2
  "name": "@fluentui/react-progress",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 17 Nov 2022 23:02:41 GMT",
5
+ "date": "Mon, 05 Dec 2022 18:25:26 GMT",
6
+ "tag": "@fluentui/react-progress_v9.0.0-alpha.7",
7
+ "version": "9.0.0-alpha.7",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "tristan.watanabe@gmail.com",
12
+ "package": "@fluentui/react-progress",
13
+ "commit": "77b8194cfeefddf753b473be572233fc5defe186",
14
+ "comment": "chore: Migrate to new package structure."
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-progress",
19
+ "comment": "Bump @fluentui/react-field to v9.0.0-alpha.10",
20
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-progress",
25
+ "comment": "Bump @fluentui/react-shared-contexts to v9.1.2",
26
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-progress",
31
+ "comment": "Bump @fluentui/react-theme to v9.1.3",
32
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
33
+ }
34
+ ]
35
+ }
36
+ },
37
+ {
38
+ "date": "Thu, 17 Nov 2022 23:05:44 GMT",
6
39
  "tag": "@fluentui/react-progress_v9.0.0-alpha.6",
7
40
  "version": "9.0.0-alpha.6",
8
41
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,24 @@
1
1
  # Change Log - @fluentui/react-progress
2
2
 
3
- This log was last generated on Thu, 17 Nov 2022 23:02:41 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 05 Dec 2022 18:25:26 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.7)
8
+
9
+ Mon, 05 Dec 2022 18:25:26 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.6..@fluentui/react-progress_v9.0.0-alpha.7)
11
+
12
+ ### Changes
13
+
14
+ - chore: Migrate to new package structure. ([PR #25744](https://github.com/microsoft/fluentui/pull/25744) by tristan.watanabe@gmail.com)
15
+ - Bump @fluentui/react-field to v9.0.0-alpha.10 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
16
+ - Bump @fluentui/react-shared-contexts to v9.1.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
17
+ - Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
18
+
7
19
  ## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.6)
8
20
 
9
- Thu, 17 Nov 2022 23:02:41 GMT
21
+ Thu, 17 Nov 2022 23:05:44 GMT
10
22
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.5..@fluentui/react-progress_v9.0.0-alpha.6)
11
23
 
12
24
  ### Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-progress",
3
- "version": "9.0.0-alpha.6",
3
+ "version": "9.0.0-alpha.7",
4
4
  "description": "Progress component for FluentUI v9",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -31,9 +31,9 @@
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-field": "9.0.0-alpha.9",
35
- "@fluentui/react-shared-contexts": "^9.1.1",
36
- "@fluentui/react-theme": "^9.1.2",
34
+ "@fluentui/react-field": "9.0.0-alpha.10",
35
+ "@fluentui/react-shared-contexts": "^9.1.2",
36
+ "@fluentui/react-theme": "^9.1.3",
37
37
  "@fluentui/react-utilities": "^9.2.2",
38
38
  "@griffel/react": "^1.4.2",
39
39
  "tslib": "^2.1.0"
package/MIGRATION.md DELETED
@@ -1,26 +0,0 @@
1
- # Progress Migration
2
-
3
- ## Migration from v8
4
-
5
- v8 offers a component equivalent to v9's `Progress`. However, the API is slightly different. The main difference is that v9's `Progress` does not have the `label` or `description` props. Instead, the `label` and `hint` are located in the `ProgressField` that can be used in conjunction with `Progress`.
6
-
7
- Here's how the API of v8's `Progress` compares to the one from v9's `Progress` component:
8
-
9
- - `className` => `className`
10
- - `description` => Use `ProgressField` to use the `hint` prop
11
- - `label` => Use `ProgressField` to use the `label` prop
12
- - `onRenderProgress` => NOT SUPPORTED
13
- - `percentComplete` => Use the `value` prop
14
- - `progressHidden` => NOT SUPPORTED
15
- - `styles` => Use style customization through `className` instead
16
-
17
- ## Property Mapping
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` |
package/Spec.md DELETED
@@ -1,124 +0,0 @@
1
- # @fluentui/react-progress Spec
2
-
3
- ## Background
4
-
5
- The `Progress` component is used to display the current progress of an operation flow, or show that an operation is currently being executed.
6
-
7
- ## Prior Art
8
-
9
- ### Open UI
10
-
11
- | Library | Component Name | Spec Link | Notes |
12
- | ----------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
13
- | Ant Design | Progress | [Progress](https://ant.design/components/progress/) | Specifies the type, a combined progress component |
14
- | Atlassian Design | Progress bar | [ProgressBar](https://atlassian.design/components/progress-bar/success-progress-bar/examples) | Defaults to determinate state, which turns green when value reaches 1. Has an indeterminate state |
15
- | Bootstrap | Progress | [Progress](https://getbootstrap.com/docs/4.3/components/progress/) | Allows for multiple different animation styles on the same Progress bar |
16
- | Carbon Design | Progress Indicator | [ProgressIndicator](https://react.carbondesignsystem.com/?path=/story/components-progressindicator--default) | Determinate Progress that has steps, similar to a Slider |
17
- | Fast | Progress | [Progress](https://explore.fast.design/components/fast-progress) | Combined Progress and Spinner component, has a determinate and indeterminate state |
18
- | Lightning Design System | Progress Bar | [ProgressBar](https://www.lightningdesignsystem.com/components/progress-bar/) | Has a vertical bar, only determinate, and can specify progress step |
19
- | Semantic UI | Progress | [Progress](https://semantic-ui.com/modules/progress.html#indicating) | Allows for success and error states, default rounded edges. No indeterminate form |
20
-
21
- ### Comparison of v8 and v0
22
-
23
- The existing components are:
24
-
25
- - v8
26
- - `ProgressIndicator`
27
- - v0
28
-
29
- ## Sample Code
30
-
31
- Basic example:
32
-
33
- ```jsx
34
- import { Progress } from '@fluentui/react-progress';
35
-
36
- function App() {
37
- return <Progress thickness="large" />;
38
- }
39
- ```
40
-
41
- ## Variants
42
-
43
- - Indeterminate Progress
44
- - The default Progress that animates indefinitely
45
- - Determinate Progress
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.
50
-
51
- #### Adding Label and Description with ProgressField
52
-
53
- There is a `ProgressField` component that adds a `label`, validation state(`success`, `warning`, `error`), and hint text to the `Progress`.
54
- You can use it like so:
55
-
56
- ```jsx
57
- import * as React from 'react';
58
- import type { ProgressFieldProps } from '@fluentui/react-field';
59
- import { ProgressField } from '@fluentui/react-field';
60
-
61
- export const Default = (props: ProgressFieldProps) => (
62
- <ProgressField
63
- label="Example Progress field"
64
- value={0.75}
65
- validationState="success"
66
- validationMessage="This is a success message"
67
- hint="This is a hint message"
68
- {...props}
69
- />
70
- );
71
- ```
72
-
73
- ### Shape
74
-
75
- The Progress is represented as a rounded rectangular area with an inner animated bar that either travels across the area indefinitely or animates up till a specified point
76
-
77
- ## API
78
-
79
- ### Slots
80
-
81
- - `root` - The root element of the Progress, which also serves as the track for the Progress bar. The html element is a `div`
82
- - `bar` - The div element that gets animated into a Progress bar. The html element is `div`
83
-
84
- ### Props
85
-
86
- See API at [Progress.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-progress/src/components/Progress/Progress.types.ts).
87
-
88
- ## Structure
89
-
90
- ```html
91
- <div class="fui-Progress">
92
- <!-- Bar for Progress -->
93
- <div class="fui-Progess__bar" />
94
- </div>
95
- ```
96
-
97
- ## Migration
98
-
99
- See [MIGRATION.md](./MIGRATION.md).
100
-
101
- ## Behaviors
102
-
103
- ### States
104
-
105
- - **Display** - The Progress will use the following priority:
106
-
107
- - Specifying the `value` prop will alter the Progress from `indeterminate` to `determinate`.
108
- - The component also has `rtl` support and will animate the progress bar from right to left if set.
109
-
110
- ### Interaction
111
-
112
- The Progress is non-interactive.
113
-
114
- - **Keyboard** - Not keyboard focusable.
115
- - **Mouse**
116
-
117
- - Click: No action
118
-
119
- - **Touch** - Nothing
120
-
121
- ## Accessibility
122
-
123
- - The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`.
124
- - When `reduced-motion` is active, the `indeterminate` `Progress` will animate only once. Use `ProgressField` to add a `description` and `hint` message to the `Progress` bar.