@fluentui/react-divider 9.0.0-rc.9 → 9.0.2
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 +193 -1
- package/CHANGELOG.md +72 -2
- package/MIGRATION.md +20 -48
- package/README.md +25 -9
- package/Spec.md +2 -2
- package/dist/index.d.ts +0 -5
- package/lib/components/Divider/Divider.js.map +1 -1
- package/lib/components/Divider/renderDivider.js.map +1 -1
- package/lib/components/Divider/useDivider.js.map +1 -1
- package/lib/components/Divider/useDividerStyles.js +81 -86
- package/lib/components/Divider/useDividerStyles.js.map +1 -1
- package/lib/index.js +1 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Divider/Divider.js.map +1 -1
- package/lib-commonjs/components/Divider/renderDivider.js.map +1 -1
- package/lib-commonjs/components/Divider/useDivider.js.map +1 -1
- package/lib-commonjs/components/Divider/useDividerStyles.js +82 -87
- package/lib-commonjs/components/Divider/useDividerStyles.js.map +1 -1
- package/lib-commonjs/index.js +1 -8
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +6 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,199 @@
|
|
|
2
2
|
"name": "@fluentui/react-divider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 14 Jul 2022 17:03:28 GMT",
|
|
6
|
+
"tag": "@fluentui/react-divider_v9.0.2",
|
|
7
|
+
"version": "9.0.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-divider",
|
|
13
|
+
"commit": "422636fffd66758c1a6dd617063582d902b61927",
|
|
14
|
+
"comment": "docs: Replacing https://aka.ms/fluentui-storybook with https://react.fluentui.dev/ to point to the official documentation site."
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"patch": [
|
|
18
|
+
{
|
|
19
|
+
"author": "beachball",
|
|
20
|
+
"package": "@fluentui/react-divider",
|
|
21
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.1-0",
|
|
22
|
+
"commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "beachball",
|
|
26
|
+
"package": "@fluentui/react-divider",
|
|
27
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11",
|
|
28
|
+
"commit": "fd9308f35ec9b2c7f7fdbfce62f9a94ca00d6536"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"date": "Tue, 28 Jun 2022 17:39:48 GMT",
|
|
35
|
+
"tag": "@fluentui/react-divider_v9.0.1",
|
|
36
|
+
"version": "9.0.1",
|
|
37
|
+
"comments": {
|
|
38
|
+
"patch": [
|
|
39
|
+
{
|
|
40
|
+
"author": "lingfangao@hotmail.com",
|
|
41
|
+
"package": "@fluentui/react-divider",
|
|
42
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
|
|
43
|
+
"comment": "fix: Use caret dependency range for Griffel"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"author": "beachball",
|
|
47
|
+
"package": "@fluentui/react-divider",
|
|
48
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
|
|
49
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"date": "Tue, 28 Jun 2022 15:13:34 GMT",
|
|
56
|
+
"tag": "@fluentui/react-divider_v9.0.0",
|
|
57
|
+
"version": "9.0.0",
|
|
58
|
+
"comments": {
|
|
59
|
+
"prerelease": [
|
|
60
|
+
{
|
|
61
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
62
|
+
"package": "@fluentui/react-divider",
|
|
63
|
+
"commit": "09f58dcbef2306875046261dc0b7821283ccc287",
|
|
64
|
+
"comment": "chore: Using ::before and ::after instead of :before and :after."
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"author": "lingfangao@hotmail.com",
|
|
68
|
+
"package": "@fluentui/react-divider",
|
|
69
|
+
"commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
|
|
70
|
+
"comment": "Update 9.0.0-rc dependencies to use caret range"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"author": "lingfangao@hotmail.com",
|
|
74
|
+
"package": "@fluentui/react-divider",
|
|
75
|
+
"commit": "675acea49c97f10837ddee9b8c4350ca27750125",
|
|
76
|
+
"comment": "Bump Griffel dependencies"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
80
|
+
"package": "@fluentui/react-divider",
|
|
81
|
+
"commit": "79a3a86436a5194f83cdaf561cd04e24a9a07d78",
|
|
82
|
+
"comment": "README, spec and migration guide cleanup."
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"none": [
|
|
86
|
+
{
|
|
87
|
+
"author": "tristan.watanabe@gmail.com",
|
|
88
|
+
"package": "@fluentui/react-divider",
|
|
89
|
+
"commit": "b365ef88f8ccf64c5bd6e3a424f0196328627bb9",
|
|
90
|
+
"comment": "chore: Move Divider stories to folder with index entry."
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"author": "gcox@microsoft.com",
|
|
94
|
+
"package": "@fluentui/react-divider",
|
|
95
|
+
"commit": "ed08fb6d86fc74667a93db7d2cf43286aaa21faf",
|
|
96
|
+
"comment": "docs: Added upgrade guide for divider."
|
|
97
|
+
}
|
|
98
|
+
],
|
|
99
|
+
"patch": [
|
|
100
|
+
{
|
|
101
|
+
"author": "lingfangao@hotmail.com",
|
|
102
|
+
"package": "@fluentui/react-divider",
|
|
103
|
+
"commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
|
|
104
|
+
"comment": "feat: Initial 9.0.0 release"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"author": "beachball",
|
|
108
|
+
"package": "@fluentui/react-divider",
|
|
109
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0",
|
|
110
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"author": "beachball",
|
|
114
|
+
"package": "@fluentui/react-divider",
|
|
115
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0",
|
|
116
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"author": "beachball",
|
|
120
|
+
"package": "@fluentui/react-divider",
|
|
121
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
|
|
122
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
123
|
+
}
|
|
124
|
+
]
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"date": "Thu, 23 Jun 2022 14:25:31 GMT",
|
|
129
|
+
"tag": "@fluentui/react-divider_v9.0.0-rc.12",
|
|
130
|
+
"version": "9.0.0-rc.12",
|
|
131
|
+
"comments": {
|
|
132
|
+
"prerelease": [
|
|
133
|
+
{
|
|
134
|
+
"author": "beachball",
|
|
135
|
+
"package": "@fluentui/react-divider",
|
|
136
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
|
|
137
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
138
|
+
}
|
|
139
|
+
]
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"date": "Tue, 31 May 2022 21:28:39 GMT",
|
|
144
|
+
"tag": "@fluentui/react-divider_v9.0.0-rc.11",
|
|
145
|
+
"version": "9.0.0-rc.11",
|
|
146
|
+
"comments": {
|
|
147
|
+
"prerelease": [
|
|
148
|
+
{
|
|
149
|
+
"author": "olfedias@microsoft.com",
|
|
150
|
+
"package": "@fluentui/react-divider",
|
|
151
|
+
"commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
|
|
152
|
+
"comment": "chore: Update Griffel to latest version"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"author": "beachball",
|
|
156
|
+
"package": "@fluentui/react-divider",
|
|
157
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
|
|
158
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"author": "beachball",
|
|
162
|
+
"package": "@fluentui/react-divider",
|
|
163
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
|
|
164
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"date": "Mon, 23 May 2022 18:56:44 GMT",
|
|
171
|
+
"tag": "@fluentui/react-divider_v9.0.0-rc.10",
|
|
172
|
+
"version": "9.0.0-rc.10",
|
|
173
|
+
"comments": {
|
|
174
|
+
"prerelease": [
|
|
175
|
+
{
|
|
176
|
+
"author": "esteban.230@hotmail.com",
|
|
177
|
+
"package": "@fluentui/react-divider",
|
|
178
|
+
"commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
|
|
179
|
+
"comment": "Removing <componentName>ClassName exports."
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"author": "beachball",
|
|
183
|
+
"package": "@fluentui/react-divider",
|
|
184
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
|
|
185
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"author": "beachball",
|
|
189
|
+
"package": "@fluentui/react-divider",
|
|
190
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
|
|
191
|
+
"commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
|
|
192
|
+
}
|
|
193
|
+
]
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"date": "Mon, 23 May 2022 12:14:15 GMT",
|
|
6
198
|
"tag": "@fluentui/react-divider_v9.0.0-rc.9",
|
|
7
199
|
"version": "9.0.0-rc.9",
|
|
8
200
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,82 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-divider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 14 Jul 2022 17:03:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.2)
|
|
8
|
+
|
|
9
|
+
Thu, 14 Jul 2022 17:03:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.1..@fluentui/react-divider_v9.0.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
|
|
15
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.11 ([PR #23909](https://github.com/microsoft/fluentui/pull/23909) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.1)
|
|
18
|
+
|
|
19
|
+
Tue, 28 Jun 2022 17:39:48 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0..@fluentui/react-divider_v9.0.1)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
|
|
25
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
|
|
26
|
+
|
|
27
|
+
## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.0)
|
|
28
|
+
|
|
29
|
+
Tue, 28 Jun 2022 15:13:34 GMT
|
|
30
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-rc.12..@fluentui/react-divider_v9.0.0)
|
|
31
|
+
|
|
32
|
+
### Patches
|
|
33
|
+
|
|
34
|
+
- feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
|
|
35
|
+
- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
36
|
+
- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
37
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
38
|
+
|
|
39
|
+
### Changes
|
|
40
|
+
|
|
41
|
+
- chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
|
|
42
|
+
- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
|
|
43
|
+
- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
|
|
44
|
+
- README, spec and migration guide cleanup. ([PR #23439](https://github.com/microsoft/fluentui/pull/23439) by Humberto.Morimoto@microsoft.com)
|
|
45
|
+
|
|
46
|
+
## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.0-rc.12)
|
|
47
|
+
|
|
48
|
+
Thu, 23 Jun 2022 14:25:31 GMT
|
|
49
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-rc.11..@fluentui/react-divider_v9.0.0-rc.12)
|
|
50
|
+
|
|
51
|
+
### Changes
|
|
52
|
+
|
|
53
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
54
|
+
|
|
55
|
+
## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.0-rc.11)
|
|
56
|
+
|
|
57
|
+
Tue, 31 May 2022 21:28:39 GMT
|
|
58
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-rc.10..@fluentui/react-divider_v9.0.0-rc.11)
|
|
59
|
+
|
|
60
|
+
### Changes
|
|
61
|
+
|
|
62
|
+
- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
|
|
63
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
64
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
65
|
+
|
|
66
|
+
## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.0-rc.10)
|
|
67
|
+
|
|
68
|
+
Mon, 23 May 2022 18:56:44 GMT
|
|
69
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-rc.9..@fluentui/react-divider_v9.0.0-rc.10)
|
|
70
|
+
|
|
71
|
+
### Changes
|
|
72
|
+
|
|
73
|
+
- Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
|
|
74
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
75
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
|
|
76
|
+
|
|
7
77
|
## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.0-rc.9)
|
|
8
78
|
|
|
9
|
-
Mon, 23 May 2022 12:
|
|
79
|
+
Mon, 23 May 2022 12:14:15 GMT
|
|
10
80
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-rc.8..@fluentui/react-divider_v9.0.0-rc.9)
|
|
11
81
|
|
|
12
82
|
### Changes
|
package/MIGRATION.md
CHANGED
|
@@ -1,60 +1,32 @@
|
|
|
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
|
|
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
|
-
|
|
12
|
-
|
|
13
|
-
Properties that are still available are the `alignContent` and `vertical` with the same acceptable values that are currently defined.
|
|
7
|
+
- `styles` => NOT SUPPORTED - use `makeStyles` to create styles and apply them with the `className` prop.
|
|
8
|
+
- `theme` => NOT SUPPORTED - use `FluentProvider`
|
|
14
9
|
|
|
15
10
|
## Migration from v0
|
|
16
11
|
|
|
17
|
-
The v0 Divider
|
|
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.
|
|
12
|
+
The v0 `Divider` control supports a very similar set of props to the v9 `Divider` with a few differences that are outlined below:
|
|
20
13
|
|
|
21
|
-
|
|
14
|
+
- `content` => `children` of the `Divider`
|
|
15
|
+
- `fitted` => NOT SUPPORTED - use style customizations via `className` instead
|
|
16
|
+
- `important` => NOT SUPPORTED
|
|
22
17
|
|
|
23
18
|
## Property mapping
|
|
24
19
|
|
|
25
|
-
| v8 `Separator` | v0 `Divider` |
|
|
26
|
-
| -------------- | ------------ |
|
|
27
|
-
| alignContent
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
| - |
|
|
32
|
-
| - |
|
|
33
|
-
| - |
|
|
34
|
-
| - |
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
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
|
-
```
|
|
20
|
+
| v8 `Separator` | v0 `Divider` | v9 `Divider` |
|
|
21
|
+
| -------------- | ------------ | -------------- |
|
|
22
|
+
| `alignContent` | - | `alignContent` |
|
|
23
|
+
| - | - | `appearance` |
|
|
24
|
+
| - | `color` | |
|
|
25
|
+
| `children` | `content` | `children` |
|
|
26
|
+
| - | `fitted` | |
|
|
27
|
+
| - | `important` | |
|
|
28
|
+
| - | - | `inset` |
|
|
29
|
+
| - | `size` | |
|
|
30
|
+
| `styles` | - | |
|
|
31
|
+
| `theme` | - | |
|
|
32
|
+
| `vertical` | `vertical` | `vertical` |
|
package/README.md
CHANGED
|
@@ -1,23 +1,39 @@
|
|
|
1
1
|
# @fluentui/react-divider
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**Divider components for [Fluent UI](https://react.fluentui.dev/)**
|
|
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-
|
|
12
|
+
import { Divider } from '@fluentui/react-components';
|
|
17
13
|
```
|
|
18
14
|
|
|
19
|
-
|
|
15
|
+
### Examples
|
|
20
16
|
|
|
21
|
-
```
|
|
22
|
-
|
|
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://react.fluentui.dev/) 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
|
-
|
|
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](./
|
|
76
|
+
[See MIGRATION.md](./MIGRATION.md).
|
|
77
77
|
|
|
78
78
|
## Behaviors
|
|
79
79
|
|
package/dist/index.d.ts
CHANGED
|
@@ -10,11 +10,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
|
10
10
|
*/
|
|
11
11
|
export declare const Divider: ForwardRefComponent<DividerProps>;
|
|
12
12
|
|
|
13
|
-
/**
|
|
14
|
-
* @deprecated Use `dividerClassNames.root` instead.
|
|
15
|
-
*/
|
|
16
|
-
export declare const dividerClassName = "fui-Divider";
|
|
17
|
-
|
|
18
13
|
export declare const dividerClassNames: SlotClassNames<DividerSlots>;
|
|
19
14
|
|
|
20
15
|
export declare type DividerProps = ComponentProps<Partial<DividerSlots>> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
|
1
|
+
{"version":3,"sources":["components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EAEA,yBAAyB,CAAC,KAAD,CAAzB;EAEA,OAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CANyD,CAAnD;AAQP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from './renderDivider';\nimport { useDivider_unstable } from './useDivider';\nimport { useDividerStyles_unstable } from './useDividerStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { DividerProps } from './Divider.types';\n\n/**\n * A divider visually segments content into groups.\n */\nexport const Divider: ForwardRefComponent<DividerProps> = React.forwardRef((props, ref) => {\n const state = useDivider_unstable(props, ref);\n\n useDividerStyles_unstable(state);\n\n return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Divider/renderDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;
|
|
1
|
+
{"version":3,"sources":["components/Divider/renderDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QAAf,KAA4B,SAA5B,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAFJ,CADF;AAOD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { DividerSlots, DividerState } from './Divider.types';\n\n/**\n * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.\n */\nexport const renderDivider_unstable = (state: DividerState) => {\n const { slots, slotProps } = getSlots<DividerSlots>(state);\n return (\n <slots.root {...slotProps.root}>\n {slotProps.root.children !== undefined && (\n <slots.wrapper {...slotProps.wrapper}>{slotProps.root.children}</slots.wrapper>\n )}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Divider/useDivider.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA;;;;AAIG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;
|
|
1
|
+
{"version":3,"sources":["components/Divider/useDivider.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA;;;;AAIG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,YAAY,GAAG,QAAjB;IAA2B,UAAU,GAAG,SAAxC;IAAmD,KAAK,GAAG,KAA3D;IAAkE,QAAQ,GAAG,KAA7E;IAAoF;EAApF,IAAgG,KAAtG;EACA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAD,CAAvB;EAEA,OAAO;IACL;IACA,YAFK;IAGL,UAHK;IAIL,KAJK;IAKL,QALK;IAOL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE;IAFC,CARP;IAaL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,IAAI,EAAE,WAH2B;MAIjC,oBAAoB,QAAQ,GAAG,UAAH,GAAgB,YAJX;MAKjC,mBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;IALf,CAAR,CAbtB;IAoBL,OAAO,EAAE,gBAAgB,CAAC,OAAD,EAAU;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,EAAE,EAAE,SADQ;QAEZ,QAAQ,EAAE,KAAK,CAAC;MAFJ;IAFmB,CAAV;EApBpB,CAAP;AA4BD,CAhCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { DividerProps, DividerState } from './Divider.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - User-provided props to the Divider component.\n * @param ref - User-provided ref to be passed to the Divider component.\n */\nexport const useDivider_unstable = (props: DividerProps, ref: React.Ref<HTMLElement>): DividerState => {\n const { alignContent = 'center', appearance = 'default', inset = false, vertical = false, wrapper } = props;\n const dividerId = useId('divider-');\n\n return {\n // Props passed at the top-level\n alignContent,\n appearance,\n inset,\n vertical,\n\n // Slots definition\n components: {\n root: 'div',\n wrapper: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n ref,\n role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n }),\n wrapper: resolveShorthand(wrapper, {\n required: true,\n defaultProps: {\n id: dividerId,\n children: props.children,\n },\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|