@fluentui/react-divider 0.0.0-nightly-20220607-0421.1 → 0.0.0-nightly-20220610-0420.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.
Files changed (6) hide show
  1. package/CHANGELOG.json +11 -5
  2. package/CHANGELOG.md +6 -5
  3. package/MIGRATION.md +21 -48
  4. package/README.md +25 -9
  5. package/Spec.md +2 -2
  6. package/package.json +4 -4
package/CHANGELOG.json CHANGED
@@ -2,16 +2,22 @@
2
2
  "name": "@fluentui/react-divider",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 07 Jun 2022 04:34:28 GMT",
6
- "tag": "@fluentui/react-divider_v0.0.0-nightly-20220607-0421.1",
7
- "version": "0.0.0-nightly-20220607-0421.1",
5
+ "date": "Fri, 10 Jun 2022 04:35:06 GMT",
6
+ "tag": "@fluentui/react-divider_v0.0.0-nightly-20220610-0420.1",
7
+ "version": "0.0.0-nightly-20220610-0420.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
+ {
11
+ "author": "Humberto.Morimoto@microsoft.com",
12
+ "package": "@fluentui/react-divider",
13
+ "commit": "79a3a86436a5194f83cdaf561cd04e24a9a07d78",
14
+ "comment": "README, spec and migration guide cleanup."
15
+ },
10
16
  {
11
17
  "author": "beachball",
12
18
  "package": "@fluentui/react-divider",
13
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220607-0421.1",
14
- "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
19
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220610-0420.1",
20
+ "commit": "f6d5f8cebb6e0b532670f90508886c9c033cd443"
15
21
  }
16
22
  ]
17
23
  }
package/CHANGELOG.md CHANGED
@@ -1,17 +1,18 @@
1
1
  # Change Log - @fluentui/react-divider
2
2
 
3
- This log was last generated on Tue, 07 Jun 2022 04:34:28 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 10 Jun 2022 04:35:06 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220607-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v0.0.0-nightly-20220607-0421.1)
7
+ ## [0.0.0-nightly-20220610-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v0.0.0-nightly-20220610-0420.1)
8
8
 
9
- Tue, 07 Jun 2022 04:34:28 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-rc.11..@fluentui/react-divider_v0.0.0-nightly-20220607-0421.1)
9
+ Fri, 10 Jun 2022 04:35:06 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-rc.11..@fluentui/react-divider_v0.0.0-nightly-20220610-0420.1)
11
11
 
12
12
  ### Changes
13
13
 
14
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
14
+ - README, spec and migration guide cleanup. ([PR #23439](https://github.com/microsoft/fluentui/pull/23439) by Humberto.Morimoto@microsoft.com)
15
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220610-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/f6d5f8cebb6e0b532670f90508886c9c033cd443) by beachball)
15
16
 
16
17
  ## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.0-rc.11)
17
18
 
package/MIGRATION.md CHANGED
@@ -1,60 +1,33 @@
1
1
  # Divider Migration
2
2
 
3
- ## STATUS: WIP 🚧
4
-
5
- This Migration guide is a work in progress and is not yet ready for use.
6
-
7
3
  ## Migration from v8
8
4
 
9
- The existing `Separator` control supports the `content` property as well as children nodes. The `content` property has been removed and now only supports children.
5
+ The v8 `Separator` control supports a very similar set of props to the v9 `Divider` with a few differences that are outlined below:
10
6
 
11
- With the new converged capabilities, both the `styles` and `theme` properties are no longer supported.
12
-
13
- Properties that are still available are the `alignContent` and `vertical` with the same acceptable values that are currently defined.
7
+ - `content` => `children` of the `Divider`
8
+ - `styles` => NOT SUPPORTED - use new styling system via `FluentProvider`
9
+ - `theme` => NOT SUPPORTED
14
10
 
15
11
  ## Migration from v0
16
12
 
17
- The v0 Divider is close to the converged Divider. Again, as with the Separator control, the `content` property in the converged component is not supported.
18
-
19
- Also, from design discussion, the converged component does not support the `size` component as it is redundant as it can be replicated through using the `borderSize` property and if needed, update the `fontSize` property to match desired style.
13
+ The v0 `Divider` control supports a very similar set of props to the v9 `Divider` with a few differences that are outlined below:
20
14
 
21
- The `fitted` property also is not in use as by default the `Divider` can use the standard `margin` | `marginLeft` | `marginRight` | `marginTop` | `marginBottom` properties to adjust as needed. The default margin for the divider is 0.
15
+ - `content` => `children` of the `Divider`
16
+ - `fitted` => NOT SUPPORTED - use style customizations via `className` instead
17
+ - `important` => NOT SUPPORTED
22
18
 
23
19
  ## Property mapping
24
20
 
25
- | v8 `Separator` | v0 `Divider` | Converged `Divider` |
26
- | -------------- | ------------ | --------------------- |
27
- | alignContent | - | alignContent |
28
- | vertical | vertical | vertical |
29
- | theme | - | (tokens) |
30
- | styles | - | (tokens) |
31
- | - | color | color |
32
- | - | size | fontSize & borderSize |
33
- | - | important | important |
34
- | - | fitted | margin properties |
35
- | - | - | inset |
36
- | - | - | borderStyle |
37
- | - | - | borderSize |
38
- | - | - | appearance |
39
-
40
- ## Examples
41
-
42
- ```
43
- <Divider content="My Content">
44
- <Divider>My Content</Divider>
45
- ```
46
-
47
- _Note:_ The property theme from the separator control has been removed
48
-
49
- ```
50
- <Separator theme={myTheme}>
51
- <Divider /> /* Handled by the theme provider */
52
- ```
53
-
54
- _Note:_ The property styles from the separator control has been removed and now uses the inherent react style mechanics
55
-
56
- ```
57
- <Separator styles={myStyles}>
58
- <Divider style={{ direction:ltr }}/>
59
- /* Handled by the theme provider / Tokens */
60
- ```
21
+ | v8 `Separator` | v0 `Divider` | v9 `Divider` |
22
+ | -------------- | ------------ | -------------- |
23
+ | `alignContent` | - | `alignContent` |
24
+ | - | - | `appearance` |
25
+ | - | `color` | |
26
+ | `content` | `content` | `children` |
27
+ | - | `fitted` | |
28
+ | - | `important` | |
29
+ | - | - | `inset` |
30
+ | - | `size` | |
31
+ | `styles` | - | |
32
+ | `theme` | - | |
33
+ | `vertical` | `vertical` | `vertical` |
package/README.md CHANGED
@@ -1,23 +1,39 @@
1
1
  # @fluentui/react-divider
2
2
 
3
- **React Divider components for [Fluent UI](https://dev.microsoft.com/fluentui)**
3
+ **Divider components for [Fluent UI](https://aka.ms/fluentui-storybook)**
4
4
 
5
5
  The Divider component represents a visual separator, that may contain content. A Divider can be vertical or horizontal.
6
6
 
7
- ## STATUS: WIP 🚧
8
-
9
- 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.
10
-
11
7
  ## Usage
12
8
 
13
9
  To import Divider:
14
10
 
15
11
  ```js
16
- import { Divider } from '@fluentui/react-divider';
12
+ import { Divider } from '@fluentui/react-components';
17
13
  ```
18
14
 
19
- Once the Divider component graduates to a production release, the component will be available at:
15
+ ### Examples
20
16
 
21
- ```js
22
- import { Divider } from '@fluentui/react-components';
17
+ ```jsx
18
+ <Divider />
19
+ <Divider>This is a divider</Divider>
20
+ <Divider alignContent="center">This is a divider</Divider>
21
+ <Divider appearance="subtle">This is a divider</Divider>
22
+ <Divider inset>This is a divider</Divider>
23
+ <Divider vertical>This is a divider</Divider>
23
24
  ```
25
+
26
+ See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
27
+
28
+ Alternatively, run Storybook locally with:
29
+
30
+ 1. `yarn start`
31
+ 2. Select `react-divider` from the list.
32
+
33
+ ### Specification
34
+
35
+ See [SPEC.md](./SPEC.md).
36
+
37
+ ### Migration Guide
38
+
39
+ If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Divider implementation.
package/Spec.md CHANGED
@@ -59,7 +59,7 @@ The `Divider` component has four appearance variants:
59
59
 
60
60
  ## API
61
61
 
62
- From [Divider.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-divider/src/components/Divider/Divider.types.ts)
62
+ See API at [Divider.types.tsx](./src/components/Divider/Divider.types.ts).
63
63
 
64
64
  ## HTML Structure
65
65
 
@@ -73,7 +73,7 @@ From [Divider.types.tsx](https://github.com/microsoft/fluentui/blob/master/packa
73
73
 
74
74
  ## Migration
75
75
 
76
- [See MIGRATION.md](./Migration.md)
76
+ [See MIGRATION.md](./MIGRATION.md).
77
77
 
78
78
  ## Behaviors
79
79
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-divider",
3
- "version": "0.0.0-nightly-20220607-0421.1",
3
+ "version": "0.0.0-nightly-20220610-0420.1",
4
4
  "description": "Fluent UI component to visually separate content.",
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-20220607-0421.0",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220610-0420.0",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "@griffel/react": "1.1.0",
36
- "@fluentui/react-theme": "0.0.0-nightly-20220607-0421.0",
37
- "@fluentui/react-utilities": "0.0.0-nightly-20220607-0421.1",
36
+ "@fluentui/react-theme": "0.0.0-nightly-20220610-0420.0",
37
+ "@fluentui/react-utilities": "0.0.0-nightly-20220610-0420.1",
38
38
  "tslib": "^2.1.0"
39
39
  },
40
40
  "peerDependencies": {