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

Sign up to get free protection for your applications and to get access to all the features.
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.