@fluentui/react-card 0.0.0-nightly-20220503-0421.1 → 0.0.0-nightly-20220506-0417.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.
- package/CHANGELOG.json +112 -16
- package/CHANGELOG.md +39 -10
- package/Spec.md +20 -16
- package/dist/index.d.ts +21 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Card/Card.types.js.map +1 -1
- package/lib/components/Card/useCard.js +13 -4
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +13 -4
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/package.json +9 -8
- package/lib/Card.d.ts +0 -1
- package/lib/CardFooter.d.ts +0 -1
- package/lib/CardHeader.d.ts +0 -1
- package/lib/CardPreview.d.ts +0 -1
- package/lib/components/Card/Card.d.ts +0 -6
- package/lib/components/Card/Card.types.d.ts +0 -15
- package/lib/components/Card/index.d.ts +0 -5
- package/lib/components/Card/renderCard.d.ts +0 -5
- package/lib/components/Card/useCard.d.ts +0 -12
- package/lib/components/Card/useCardStyles.d.ts +0 -11
- package/lib/components/CardFooter/CardFooter.d.ts +0 -6
- package/lib/components/CardFooter/CardFooter.types.d.ts +0 -13
- package/lib/components/CardFooter/index.d.ts +0 -5
- package/lib/components/CardFooter/renderCardFooter.d.ts +0 -5
- package/lib/components/CardFooter/useCardFooter.d.ts +0 -12
- package/lib/components/CardFooter/useCardFooterStyles.d.ts +0 -11
- package/lib/components/CardHeader/CardHeader.d.ts +0 -6
- package/lib/components/CardHeader/CardHeader.types.d.ts +0 -17
- package/lib/components/CardHeader/index.d.ts +0 -5
- package/lib/components/CardHeader/renderCardHeader.d.ts +0 -5
- package/lib/components/CardHeader/useCardHeader.d.ts +0 -12
- package/lib/components/CardHeader/useCardHeaderStyles.d.ts +0 -11
- package/lib/components/CardPreview/CardPreview.d.ts +0 -6
- package/lib/components/CardPreview/CardPreview.types.d.ts +0 -13
- package/lib/components/CardPreview/index.d.ts +0 -5
- package/lib/components/CardPreview/renderCardPreview.d.ts +0 -5
- package/lib/components/CardPreview/useCardPreview.d.ts +0 -12
- package/lib/components/CardPreview/useCardPreviewStyles.d.ts +0 -11
- package/lib/index.d.ts +0 -8
- package/lib-commonjs/Card.d.ts +0 -1
- package/lib-commonjs/CardFooter.d.ts +0 -1
- package/lib-commonjs/CardHeader.d.ts +0 -1
- package/lib-commonjs/CardPreview.d.ts +0 -1
- package/lib-commonjs/components/Card/Card.d.ts +0 -6
- package/lib-commonjs/components/Card/Card.types.d.ts +0 -15
- package/lib-commonjs/components/Card/index.d.ts +0 -5
- package/lib-commonjs/components/Card/renderCard.d.ts +0 -5
- package/lib-commonjs/components/Card/useCard.d.ts +0 -12
- package/lib-commonjs/components/Card/useCardStyles.d.ts +0 -11
- package/lib-commonjs/components/CardFooter/CardFooter.d.ts +0 -6
- package/lib-commonjs/components/CardFooter/CardFooter.types.d.ts +0 -13
- package/lib-commonjs/components/CardFooter/index.d.ts +0 -5
- package/lib-commonjs/components/CardFooter/renderCardFooter.d.ts +0 -5
- package/lib-commonjs/components/CardFooter/useCardFooter.d.ts +0 -12
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.d.ts +0 -11
- package/lib-commonjs/components/CardHeader/CardHeader.d.ts +0 -6
- package/lib-commonjs/components/CardHeader/CardHeader.types.d.ts +0 -17
- package/lib-commonjs/components/CardHeader/index.d.ts +0 -5
- package/lib-commonjs/components/CardHeader/renderCardHeader.d.ts +0 -5
- package/lib-commonjs/components/CardHeader/useCardHeader.d.ts +0 -12
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.d.ts +0 -11
- package/lib-commonjs/components/CardPreview/CardPreview.d.ts +0 -6
- package/lib-commonjs/components/CardPreview/CardPreview.types.d.ts +0 -13
- package/lib-commonjs/components/CardPreview/index.d.ts +0 -5
- package/lib-commonjs/components/CardPreview/renderCardPreview.d.ts +0 -5
- package/lib-commonjs/components/CardPreview/useCardPreview.d.ts +0 -12
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.d.ts +0 -11
- package/lib-commonjs/index.d.ts +0 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-card_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 06 May 2022 04:27:17 GMT",
|
|
6
|
+
"tag": "@fluentui/react-card_v0.0.0-nightly-20220506-0417.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220506-0417.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,40 +16,98 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-card",
|
|
19
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220506-0417.1",
|
|
20
|
+
"commit": "1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-card",
|
|
25
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220506-0417.1",
|
|
26
|
+
"commit": "1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-card",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220506-0417.1",
|
|
32
|
+
"commit": "1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-card",
|
|
37
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220506-0417.1",
|
|
38
|
+
"commit": "1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-card",
|
|
43
|
-
"comment": "Bump @fluentui/react-text to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220506-0417.1",
|
|
44
|
+
"commit": "1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-card",
|
|
49
|
-
"comment": "Bump @fluentui/react-button to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220506-0417.1",
|
|
50
|
+
"commit": "1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559"
|
|
51
51
|
}
|
|
52
|
-
]
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"date": "Thu, 05 May 2022 18:26:29 GMT",
|
|
57
|
+
"tag": "@fluentui/react-card_v9.0.0-beta.14",
|
|
58
|
+
"version": "9.0.0-beta.14",
|
|
59
|
+
"comments": {
|
|
60
|
+
"prerelease": [
|
|
61
|
+
{
|
|
62
|
+
"author": "39736248+andrefcdias@users.noreply.github.com",
|
|
63
|
+
"package": "@fluentui/react-card",
|
|
64
|
+
"commit": "6f5126ab390def986bda1c95c1540c20e8b0ddd9",
|
|
65
|
+
"comment": "Added new `focusMode` property to control the focus behavior inside of the component"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-card",
|
|
70
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
|
|
71
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-card",
|
|
76
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.9",
|
|
77
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-card",
|
|
82
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
|
|
83
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-card",
|
|
88
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
|
|
89
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-card",
|
|
94
|
+
"comment": "Bump @fluentui/react-text to v9.0.0-rc.8",
|
|
95
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-card",
|
|
100
|
+
"comment": "Bump @fluentui/react-button to v9.0.0-rc.9",
|
|
101
|
+
"commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"date": "Wed, 04 May 2022 13:26:38 GMT",
|
|
108
|
+
"tag": "@fluentui/react-card_v9.0.0-beta.13",
|
|
109
|
+
"version": "9.0.0-beta.13",
|
|
110
|
+
"comments": {
|
|
53
111
|
"none": [
|
|
54
112
|
{
|
|
55
113
|
"author": "tristan.watanabe@gmail.com",
|
|
@@ -57,6 +115,44 @@
|
|
|
57
115
|
"commit": "b8dde556ff82051c140074a3140e83bfdd56f4dc",
|
|
58
116
|
"comment": "react-card: Move to new common folder."
|
|
59
117
|
}
|
|
118
|
+
],
|
|
119
|
+
"prerelease": [
|
|
120
|
+
{
|
|
121
|
+
"author": "martinhochel@microsoft.com",
|
|
122
|
+
"package": "@fluentui/react-card",
|
|
123
|
+
"commit": "fd41e5b15e3a2f08245cd4e4bbcc0f07a367ce3b",
|
|
124
|
+
"comment": "feat: ship rolluped only dts"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"author": "beachball",
|
|
128
|
+
"package": "@fluentui/react-card",
|
|
129
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
|
|
130
|
+
"commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"author": "beachball",
|
|
134
|
+
"package": "@fluentui/react-card",
|
|
135
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.8",
|
|
136
|
+
"commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"author": "beachball",
|
|
140
|
+
"package": "@fluentui/react-card",
|
|
141
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
|
|
142
|
+
"commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"author": "beachball",
|
|
146
|
+
"package": "@fluentui/react-card",
|
|
147
|
+
"comment": "Bump @fluentui/react-text to v9.0.0-rc.7",
|
|
148
|
+
"commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"author": "beachball",
|
|
152
|
+
"package": "@fluentui/react-card",
|
|
153
|
+
"comment": "Bump @fluentui/react-button to v9.0.0-rc.8",
|
|
154
|
+
"commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
|
|
155
|
+
}
|
|
60
156
|
]
|
|
61
157
|
}
|
|
62
158
|
},
|
package/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,52 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-card
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 06 May 2022 04:27:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20220506-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220506-0417.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.
|
|
9
|
+
Fri, 06 May 2022 04:27:17 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.14..@fluentui/react-card_v0.0.0-nightly-20220506-0417.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
|
|
15
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-text to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-button to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220506-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20220506-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20220506-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220506-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559) by beachball)
|
|
19
|
+
- Bump @fluentui/react-text to v0.0.0-nightly-20220506-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559) by beachball)
|
|
20
|
+
- Bump @fluentui/react-button to v0.0.0-nightly-20220506-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/1dbdfe3544ed01dff3baaf5d6b96d3cc8ec5e559) by beachball)
|
|
21
|
+
|
|
22
|
+
## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.14)
|
|
23
|
+
|
|
24
|
+
Thu, 05 May 2022 18:26:29 GMT
|
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.13..@fluentui/react-card_v9.0.0-beta.14)
|
|
26
|
+
|
|
27
|
+
### Changes
|
|
28
|
+
|
|
29
|
+
- Added new `focusMode` property to control the focus behavior inside of the component ([PR #22312](https://github.com/microsoft/fluentui/pull/22312) by 39736248+andrefcdias@users.noreply.github.com)
|
|
30
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
31
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
32
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
33
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
34
|
+
- Bump @fluentui/react-text to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
35
|
+
- Bump @fluentui/react-button to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
|
|
36
|
+
|
|
37
|
+
## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.13)
|
|
38
|
+
|
|
39
|
+
Wed, 04 May 2022 13:26:38 GMT
|
|
40
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.12..@fluentui/react-card_v9.0.0-beta.13)
|
|
41
|
+
|
|
42
|
+
### Changes
|
|
43
|
+
|
|
44
|
+
- feat: ship rolluped only dts ([PR #22708](https://github.com/microsoft/fluentui/pull/22708) by martinhochel@microsoft.com)
|
|
45
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
46
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.8 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
47
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
48
|
+
- Bump @fluentui/react-text to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
49
|
+
- Bump @fluentui/react-button to v9.0.0-rc.8 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
|
|
21
50
|
|
|
22
51
|
## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.12)
|
|
23
52
|
|
package/Spec.md
CHANGED
|
@@ -102,17 +102,17 @@ Card goes for a more structural and generic approach to a card component and is
|
|
|
102
102
|
|
|
103
103
|
#### API
|
|
104
104
|
|
|
105
|
-
| Property | Values | Default | Purpose
|
|
106
|
-
| ----------- | ------------------------------------------------------------------------------------ | ---------- |
|
|
107
|
-
| orientation | `vertical`, `horizontal` | `vertical` | Orientation of the card
|
|
108
|
-
| size | `smallest`, `smaller`, `small`, `medium`, `large` | `medium` | Define the minimum size of the card. Smaller sizes only apply to horizontal card
|
|
109
|
-
| scale | `fixed`, `auto-width`, `auto-height`, `auto`, `fluid-width`, `fluid-height`, `fluid` | `auto` | Manages how the card handles it's scaling depending on the content
|
|
110
|
-
| appearance | `filled`, `filled-alternative`, `outline`, `subtle` | `filled` | Define the appearance of the card
|
|
111
|
-
| selectable | boolean | false | Makes the card selectable by adding a checkbox to the _Actions_ area
|
|
112
|
-
| selected | boolean | false | Set to `true` if card is selected
|
|
113
|
-
| expandable | boolean | false | Allow card to expand to show whole content
|
|
114
|
-
| disabled | boolean | false | Makes the card and card selection disabled (not propagated to children)
|
|
115
|
-
|
|
|
105
|
+
| Property | Values | Default | Purpose |
|
|
106
|
+
| ----------- | ------------------------------------------------------------------------------------ | ---------- | -------------------------------------------------------------------------------- |
|
|
107
|
+
| orientation | `vertical`, `horizontal` | `vertical` | Orientation of the card |
|
|
108
|
+
| size | `smallest`, `smaller`, `small`, `medium`, `large` | `medium` | Define the minimum size of the card. Smaller sizes only apply to horizontal card |
|
|
109
|
+
| scale | `fixed`, `auto-width`, `auto-height`, `auto`, `fluid-width`, `fluid-height`, `fluid` | `auto` | Manages how the card handles it's scaling depending on the content |
|
|
110
|
+
| appearance | `filled`, `filled-alternative`, `outline`, `subtle` | `filled` | Define the appearance of the card |
|
|
111
|
+
| selectable | boolean | false | Makes the card selectable by adding a checkbox to the _Actions_ area |
|
|
112
|
+
| selected | boolean | false | Set to `true` if card is selected |
|
|
113
|
+
| expandable | boolean | false | Allow card to expand to show whole content |
|
|
114
|
+
| disabled | boolean | false | Makes the card and card selection disabled (not propagated to children) |
|
|
115
|
+
| focusMode | `off`, `no-tab`, `tab-exit`, `tab-only` | `off` | Sets the focus behavior for the card. |
|
|
116
116
|
|
|
117
117
|
#### `scale` property
|
|
118
118
|
|
|
@@ -124,19 +124,23 @@ Card goes for a more structural and generic approach to a card component and is
|
|
|
124
124
|
- `fluid-height`: `height` is set to `100%`.
|
|
125
125
|
- `fluid`: `width` and `height` are set to `100%`.
|
|
126
126
|
|
|
127
|
-
#### `
|
|
127
|
+
#### `focusMode` property
|
|
128
128
|
|
|
129
|
-
The three allowed focus behaviours (
|
|
129
|
+
The three allowed focus behaviours (`no-tab`, `tab-exit`, `tab-only`) map to the behaviors provided by Tabster.
|
|
130
130
|
|
|
131
|
-
- `
|
|
131
|
+
- `off`
|
|
132
|
+
|
|
133
|
+
The card will not focusable.
|
|
134
|
+
|
|
135
|
+
- `no-tab` (`trapFocus` in Tabster)
|
|
132
136
|
|
|
133
137
|
This behaviour traps the focus inside of the Card when pressing the `Enter` key and will only release focus when pressing the `Escape` key.
|
|
134
138
|
|
|
135
|
-
- `
|
|
139
|
+
- `tab-exit` (`limited` in Tabster)
|
|
136
140
|
|
|
137
141
|
This behaviour traps the focus inside of the Card when pressing the `Enter` key but will release focus when pressing the `Tab` key on the last inner element.
|
|
138
142
|
|
|
139
|
-
- `
|
|
143
|
+
- `tab-only` (`unlimited` in Tabster)
|
|
140
144
|
|
|
141
145
|
This behaviour will cycle through all elements inside of the Card when pressing the `Tab` key and then release focus after the last inner element.
|
|
142
146
|
|
package/dist/index.d.ts
CHANGED
|
@@ -19,6 +19,27 @@ export declare const cardClassNames: SlotClassNames<CardSlots>;
|
|
|
19
19
|
|
|
20
20
|
export declare type CardCommons = {
|
|
21
21
|
appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
|
|
22
|
+
/**
|
|
23
|
+
* Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.
|
|
24
|
+
*
|
|
25
|
+
* `off`
|
|
26
|
+
* The card will not focusable.
|
|
27
|
+
*
|
|
28
|
+
* `no-tab`
|
|
29
|
+
* This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when
|
|
30
|
+
* pressing the Escape key.
|
|
31
|
+
*
|
|
32
|
+
* `tab-exit`
|
|
33
|
+
* This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing
|
|
34
|
+
* the Tab key on the last inner element.
|
|
35
|
+
*
|
|
36
|
+
* `tab-only`
|
|
37
|
+
* This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
|
|
38
|
+
* after the last inner element.
|
|
39
|
+
*
|
|
40
|
+
* @defaultvalue off
|
|
41
|
+
*/
|
|
42
|
+
focusMode: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
|
|
22
43
|
};
|
|
23
44
|
|
|
24
45
|
/**
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n root: Slot<'div'>;\n};\n\nexport type CardCommons = {\n appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & CardCommons;\n"]}
|
|
1
|
+
{"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n root: Slot<'div'>;\n};\n\nexport type CardCommons = {\n appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n /**\n * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\n *\n * `off`\n * The card will not focusable.\n *\n * `no-tab`\n * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n * pressing the Escape key.\n *\n * `tab-exit`\n * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n * the Tab key on the last inner element.\n *\n * `tab-only`\n * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n * after the last inner element.\n *\n * @defaultvalue off\n */\n focusMode: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & CardCommons;\n"]}
|
|
@@ -11,20 +11,29 @@ import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
export const useCard_unstable = (props, ref) => {
|
|
14
|
-
const groupperAttrs = useFocusableGroup({
|
|
15
|
-
tabBehavior: 'limitedTrapFocus'
|
|
16
|
-
});
|
|
17
14
|
const {
|
|
18
|
-
appearance = 'filled'
|
|
15
|
+
appearance = 'filled',
|
|
16
|
+
focusMode = 'off'
|
|
19
17
|
} = props;
|
|
18
|
+
const focusMap = {
|
|
19
|
+
off: undefined,
|
|
20
|
+
'no-tab': 'limitedTrapFocus',
|
|
21
|
+
'tab-exit': 'limited',
|
|
22
|
+
'tab-only': 'unlimited'
|
|
23
|
+
};
|
|
24
|
+
const groupperAttrs = useFocusableGroup({
|
|
25
|
+
tabBehavior: focusMap[focusMode]
|
|
26
|
+
});
|
|
20
27
|
return {
|
|
21
28
|
appearance,
|
|
29
|
+
focusMode,
|
|
22
30
|
components: {
|
|
23
31
|
root: 'div'
|
|
24
32
|
},
|
|
25
33
|
root: getNativeElementProps(props.as || 'div', {
|
|
26
34
|
ref,
|
|
27
35
|
role: 'group',
|
|
36
|
+
tabIndex: focusMode !== 'off' ? 0 : undefined,
|
|
28
37
|
...groupperAttrs,
|
|
29
38
|
...props
|
|
30
39
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM,
|
|
1
|
+
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG;AAArC,MAA+C,KAArD;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,kBAFK;AAGf,gBAAY,SAHG;AAIf,gBAAY;AAJG,GAAjB;AAOA,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE,QAAQ,CAAC,SAAD;AADiB,GAAD,CAAvC;AAIA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,SAFK;AAIL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAJP;AAKL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,MAAA,QAAQ,EAAE,SAAS,KAAK,KAAd,GAAsB,CAAtB,GAA0B,SAHS;AAI7C,SAAG,aAJ0C;AAK7C,SAAG;AAL0C,KAApB;AALtB,GAAP;AAaD,CA3BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limitedTrapFocus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n return {\n appearance,\n focusMode,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n tabIndex: focusMode !== 'off' ? 0 : undefined,\n ...groupperAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -20,20 +20,29 @@ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
const useCard_unstable = (props, ref) => {
|
|
23
|
-
const groupperAttrs = react_tabster_1.useFocusableGroup({
|
|
24
|
-
tabBehavior: 'limitedTrapFocus'
|
|
25
|
-
});
|
|
26
23
|
const {
|
|
27
|
-
appearance = 'filled'
|
|
24
|
+
appearance = 'filled',
|
|
25
|
+
focusMode = 'off'
|
|
28
26
|
} = props;
|
|
27
|
+
const focusMap = {
|
|
28
|
+
off: undefined,
|
|
29
|
+
'no-tab': 'limitedTrapFocus',
|
|
30
|
+
'tab-exit': 'limited',
|
|
31
|
+
'tab-only': 'unlimited'
|
|
32
|
+
};
|
|
33
|
+
const groupperAttrs = react_tabster_1.useFocusableGroup({
|
|
34
|
+
tabBehavior: focusMap[focusMode]
|
|
35
|
+
});
|
|
29
36
|
return {
|
|
30
37
|
appearance,
|
|
38
|
+
focusMode,
|
|
31
39
|
components: {
|
|
32
40
|
root: 'div'
|
|
33
41
|
},
|
|
34
42
|
root: react_utilities_1.getNativeElementProps(props.as || 'div', {
|
|
35
43
|
ref,
|
|
36
44
|
role: 'group',
|
|
45
|
+
tabIndex: focusMode !== 'off' ? 0 : undefined,
|
|
37
46
|
...groupperAttrs,
|
|
38
47
|
...props
|
|
39
48
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM,
|
|
1
|
+
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG;AAArC,MAA+C,KAArD;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,kBAFK;AAGf,gBAAY,SAHG;AAIf,gBAAY;AAJG,GAAjB;AAOA,QAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE,QAAQ,CAAC,SAAD;AADiB,GAAlB,CAAtB;AAIA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,SAFK;AAIL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAJP;AAKL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,MAAA,QAAQ,EAAE,SAAS,KAAK,KAAd,GAAsB,CAAtB,GAA0B,SAHS;AAI7C,SAAG,aAJ0C;AAK7C,SAAG;AAL0C,KAAzC;AALD,GAAP;AAaD,CA3BM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limitedTrapFocus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n return {\n appearance,\n focusMode,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n tabIndex: focusMode !== 'off' ? 0 : undefined,\n ...groupperAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220506-0417.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
|
6
6
|
"main": "lib-commonjs/index.js",
|
|
7
7
|
"module": "lib/index.js",
|
|
8
|
-
"typings": "
|
|
8
|
+
"typings": "dist/index.d.ts",
|
|
9
9
|
"sideEffects": false,
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"bundle-size": "bundle-size measure",
|
|
18
18
|
"clean": "just-scripts clean",
|
|
19
19
|
"code-style": "just-scripts code-style",
|
|
20
|
+
"e2e": "e2e",
|
|
20
21
|
"just": "just-scripts",
|
|
21
22
|
"lint": "just-scripts lint",
|
|
22
23
|
"start": "yarn storybook",
|
|
@@ -29,16 +30,16 @@
|
|
|
29
30
|
"devDependencies": {
|
|
30
31
|
"@fluentui/eslint-plugin": "*",
|
|
31
32
|
"@fluentui/react-conformance": "*",
|
|
32
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
33
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20220506-0417.1",
|
|
33
34
|
"@fluentui/scripts": "^1.0.0",
|
|
34
|
-
"@fluentui/react-text": "0.0.0-nightly-
|
|
35
|
-
"@fluentui/react-button": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-text": "0.0.0-nightly-20220506-0417.1",
|
|
36
|
+
"@fluentui/react-button": "0.0.0-nightly-20220506-0417.1"
|
|
36
37
|
},
|
|
37
38
|
"dependencies": {
|
|
38
39
|
"@griffel/react": "1.0.3",
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
41
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
40
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220506-0417.1",
|
|
41
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20220506-0417.1",
|
|
42
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220506-0417.1",
|
|
42
43
|
"tslib": "^2.1.0"
|
|
43
44
|
},
|
|
44
45
|
"peerDependencies": {
|
package/lib/Card.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Card/index';
|
package/lib/CardFooter.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/CardFooter/index';
|
package/lib/CardHeader.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/CardHeader/index';
|
package/lib/CardPreview.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/CardPreview/index';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { CardProps } from './Card.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* A card provides scaffolding for hosting actions and content for a single topic.
|
|
5
|
-
*/
|
|
6
|
-
export declare const Card: ForwardRefComponent<CardProps>;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
-
export declare type CardSlots = {
|
|
3
|
-
root: Slot<'div'>;
|
|
4
|
-
};
|
|
5
|
-
export declare type CardCommons = {
|
|
6
|
-
appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Card Props
|
|
10
|
-
*/
|
|
11
|
-
export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
|
|
12
|
-
/**
|
|
13
|
-
* State used in rendering Card
|
|
14
|
-
*/
|
|
15
|
-
export declare type CardState = ComponentState<CardSlots> & CardCommons;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { CardProps, CardState } from './Card.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render Card.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useCardStyles_unstable,
|
|
7
|
-
* before being passed to renderCard_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of Card
|
|
10
|
-
* @param ref - reference to root HTMLElement of Card
|
|
11
|
-
*/
|
|
12
|
-
export declare const useCard_unstable: (props: CardProps, ref: React.Ref<HTMLElement>) => CardState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { CardSlots, CardState } from './Card.types';
|
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `cardClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const cardClassName = "fui-Card";
|
|
7
|
-
export declare const cardClassNames: SlotClassNames<CardSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the Card slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useCardStyles_unstable: (state: CardState) => CardState;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { CardFooterProps } from './CardFooter.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Component to render Button actions in a Card component.
|
|
5
|
-
*/
|
|
6
|
-
export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
-
export declare type CardFooterSlots = {
|
|
3
|
-
root: Slot<'div'>;
|
|
4
|
-
action?: Slot<'div'>;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* CardFooter props
|
|
8
|
-
*/
|
|
9
|
-
export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
|
|
10
|
-
/**
|
|
11
|
-
* State used in rendering CardFooter
|
|
12
|
-
*/
|
|
13
|
-
export declare type CardFooterState = ComponentState<CardFooterSlots>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { CardFooterProps, CardFooterState } from './CardFooter.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render CardFooter.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useCardFooterStyles_unstable,
|
|
7
|
-
* before being passed to renderCardFooter_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of CardFooter
|
|
10
|
-
* @param ref - reference to root HTMLElement of CardFooter
|
|
11
|
-
*/
|
|
12
|
-
export declare const useCardFooter_unstable: (props: CardFooterProps, ref: React.Ref<HTMLElement>) => CardFooterState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
-
import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `cardFooterClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const cardFooterClassName = "fui-CardFooter";
|
|
7
|
-
export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the CardFooter slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useCardFooterStyles_unstable: (state: CardFooterState) => CardFooterState;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { CardHeaderProps } from './CardHeader.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Component to render an image, text and an action in a Card component.
|
|
5
|
-
*/
|
|
6
|
-
export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
-
export declare type CardHeaderSlots = {
|
|
3
|
-
root: Slot<'div'>;
|
|
4
|
-
image: Slot<'div'>;
|
|
5
|
-
content?: Slot<'div'>;
|
|
6
|
-
header: Slot<'span'>;
|
|
7
|
-
description: Slot<'span'>;
|
|
8
|
-
action?: Slot<'div'>;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* CardHeader props
|
|
12
|
-
*/
|
|
13
|
-
export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
|
|
14
|
-
/**
|
|
15
|
-
* State used in rendering CardHeader
|
|
16
|
-
*/
|
|
17
|
-
export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { CardHeaderProps, CardHeaderState } from './CardHeader.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render CardHeader.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
|
|
7
|
-
* before being passed to renderCardHeader_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of CardHeader
|
|
10
|
-
* @param ref - reference to root HTMLElement of CardHeader
|
|
11
|
-
*/
|
|
12
|
-
export declare const useCardHeader_unstable: (props: CardHeaderProps, ref: React.Ref<HTMLElement>) => CardHeaderState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
-
import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `cardHeaderClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const cardHeaderClassName = "fui-CardHeader";
|
|
7
|
-
export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the CardHeader slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => CardHeaderState;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { CardPreviewProps } from './CardPreview.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Component to render image previews of documents or articles in a Card component.
|
|
5
|
-
*/
|
|
6
|
-
export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
-
export declare type CardPreviewSlots = {
|
|
3
|
-
root: Slot<'div'>;
|
|
4
|
-
logo?: Slot<'div'>;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* CardPreview props
|
|
8
|
-
*/
|
|
9
|
-
export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
|
|
10
|
-
/**
|
|
11
|
-
* State used in rendering CardPreview
|
|
12
|
-
*/
|
|
13
|
-
export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { CardPreviewProps, CardPreviewState } from './CardPreview.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render CardPreview.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
|
|
7
|
-
* before being passed to renderCardPreview_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of CardPreview
|
|
10
|
-
* @param ref - reference to root HTMLElement of CardPreview
|
|
11
|
-
*/
|
|
12
|
-
export declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React.Ref<HTMLElement>) => CardPreviewState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
-
import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `cardPreviewClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const cardPreviewClassName = "fui-CardPreview";
|
|
7
|
-
export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the CardPreview slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;
|
package/lib/index.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export { Card, cardClassName, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable, } from './Card';
|
|
2
|
-
export type { CardCommons, CardProps, CardSlots, CardState } from './Card';
|
|
3
|
-
export { CardFooter, cardFooterClassName, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable, } from './CardFooter';
|
|
4
|
-
export type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';
|
|
5
|
-
export { CardHeader, cardHeaderClassName, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable, } from './CardHeader';
|
|
6
|
-
export type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';
|
|
7
|
-
export { CardPreview, cardPreviewClassName, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable, } from './CardPreview';
|
|
8
|
-
export type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';
|
package/lib-commonjs/Card.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/Card/index';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/CardFooter/index';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/CardHeader/index';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components/CardPreview/index';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { CardProps } from './Card.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* A card provides scaffolding for hosting actions and content for a single topic.
|
|
5
|
-
*/
|
|
6
|
-
export declare const Card: ForwardRefComponent<CardProps>;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
-
export declare type CardSlots = {
|
|
3
|
-
root: Slot<'div'>;
|
|
4
|
-
};
|
|
5
|
-
export declare type CardCommons = {
|
|
6
|
-
appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Card Props
|
|
10
|
-
*/
|
|
11
|
-
export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
|
|
12
|
-
/**
|
|
13
|
-
* State used in rendering Card
|
|
14
|
-
*/
|
|
15
|
-
export declare type CardState = ComponentState<CardSlots> & CardCommons;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { CardProps, CardState } from './Card.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render Card.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useCardStyles_unstable,
|
|
7
|
-
* before being passed to renderCard_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of Card
|
|
10
|
-
* @param ref - reference to root HTMLElement of Card
|
|
11
|
-
*/
|
|
12
|
-
export declare const useCard_unstable: (props: CardProps, ref: React.Ref<HTMLElement>) => CardState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { CardSlots, CardState } from './Card.types';
|
|
2
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `cardClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const cardClassName = "fui-Card";
|
|
7
|
-
export declare const cardClassNames: SlotClassNames<CardSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the Card slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useCardStyles_unstable: (state: CardState) => CardState;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { CardFooterProps } from './CardFooter.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Component to render Button actions in a Card component.
|
|
5
|
-
*/
|
|
6
|
-
export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
-
export declare type CardFooterSlots = {
|
|
3
|
-
root: Slot<'div'>;
|
|
4
|
-
action?: Slot<'div'>;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* CardFooter props
|
|
8
|
-
*/
|
|
9
|
-
export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
|
|
10
|
-
/**
|
|
11
|
-
* State used in rendering CardFooter
|
|
12
|
-
*/
|
|
13
|
-
export declare type CardFooterState = ComponentState<CardFooterSlots>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { CardFooterProps, CardFooterState } from './CardFooter.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render CardFooter.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useCardFooterStyles_unstable,
|
|
7
|
-
* before being passed to renderCardFooter_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of CardFooter
|
|
10
|
-
* @param ref - reference to root HTMLElement of CardFooter
|
|
11
|
-
*/
|
|
12
|
-
export declare const useCardFooter_unstable: (props: CardFooterProps, ref: React.Ref<HTMLElement>) => CardFooterState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
-
import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `cardFooterClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const cardFooterClassName = "fui-CardFooter";
|
|
7
|
-
export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the CardFooter slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useCardFooterStyles_unstable: (state: CardFooterState) => CardFooterState;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { CardHeaderProps } from './CardHeader.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Component to render an image, text and an action in a Card component.
|
|
5
|
-
*/
|
|
6
|
-
export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
-
export declare type CardHeaderSlots = {
|
|
3
|
-
root: Slot<'div'>;
|
|
4
|
-
image: Slot<'div'>;
|
|
5
|
-
content?: Slot<'div'>;
|
|
6
|
-
header: Slot<'span'>;
|
|
7
|
-
description: Slot<'span'>;
|
|
8
|
-
action?: Slot<'div'>;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* CardHeader props
|
|
12
|
-
*/
|
|
13
|
-
export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
|
|
14
|
-
/**
|
|
15
|
-
* State used in rendering CardHeader
|
|
16
|
-
*/
|
|
17
|
-
export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { CardHeaderProps, CardHeaderState } from './CardHeader.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render CardHeader.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
|
|
7
|
-
* before being passed to renderCardHeader_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of CardHeader
|
|
10
|
-
* @param ref - reference to root HTMLElement of CardHeader
|
|
11
|
-
*/
|
|
12
|
-
export declare const useCardHeader_unstable: (props: CardHeaderProps, ref: React.Ref<HTMLElement>) => CardHeaderState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
-
import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `cardHeaderClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const cardHeaderClassName = "fui-CardHeader";
|
|
7
|
-
export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the CardHeader slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useCardHeaderStyles_unstable: (state: CardHeaderState) => CardHeaderState;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { CardPreviewProps } from './CardPreview.types';
|
|
2
|
-
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
3
|
-
/**
|
|
4
|
-
* Component to render image previews of documents or articles in a Card component.
|
|
5
|
-
*/
|
|
6
|
-
export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
|
2
|
-
export declare type CardPreviewSlots = {
|
|
3
|
-
root: Slot<'div'>;
|
|
4
|
-
logo?: Slot<'div'>;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* CardPreview props
|
|
8
|
-
*/
|
|
9
|
-
export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
|
|
10
|
-
/**
|
|
11
|
-
* State used in rendering CardPreview
|
|
12
|
-
*/
|
|
13
|
-
export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { CardPreviewProps, CardPreviewState } from './CardPreview.types';
|
|
3
|
-
/**
|
|
4
|
-
* Create the state required to render CardPreview.
|
|
5
|
-
*
|
|
6
|
-
* The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
|
|
7
|
-
* before being passed to renderCardPreview_unstable.
|
|
8
|
-
*
|
|
9
|
-
* @param props - props from this instance of CardPreview
|
|
10
|
-
* @param ref - reference to root HTMLElement of CardPreview
|
|
11
|
-
*/
|
|
12
|
-
export declare const useCardPreview_unstable: (props: CardPreviewProps, ref: React.Ref<HTMLElement>) => CardPreviewState;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
2
|
-
import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated Use `cardPreviewClassNames.root` instead.
|
|
5
|
-
*/
|
|
6
|
-
export declare const cardPreviewClassName = "fui-CardPreview";
|
|
7
|
-
export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
|
|
8
|
-
/**
|
|
9
|
-
* Apply styling to the CardPreview slots based on the state
|
|
10
|
-
*/
|
|
11
|
-
export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;
|
package/lib-commonjs/index.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export { Card, cardClassName, cardClassNames, renderCard_unstable, useCardStyles_unstable, useCard_unstable, } from './Card';
|
|
2
|
-
export type { CardCommons, CardProps, CardSlots, CardState } from './Card';
|
|
3
|
-
export { CardFooter, cardFooterClassName, cardFooterClassNames, renderCardFooter_unstable, useCardFooterStyles_unstable, useCardFooter_unstable, } from './CardFooter';
|
|
4
|
-
export type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';
|
|
5
|
-
export { CardHeader, cardHeaderClassName, cardHeaderClassNames, renderCardHeader_unstable, useCardHeaderStyles_unstable, useCardHeader_unstable, } from './CardHeader';
|
|
6
|
-
export type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';
|
|
7
|
-
export { CardPreview, cardPreviewClassName, cardPreviewClassNames, renderCardPreview_unstable, useCardPreviewStyles_unstable, useCardPreview_unstable, } from './CardPreview';
|
|
8
|
-
export type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';
|