@fluentui/react-card 9.0.0-beta.23 → 9.0.0-beta.25
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 +153 -5
- package/CHANGELOG.md +34 -6
- package/MIGRATION.md +323 -0
- package/README.md +65 -3
- package/assets/app_logo.svg +9 -0
- package/assets/avatar_colin.svg +13 -0
- package/assets/card-example.png +0 -0
- package/assets/excel_logo.svg +24 -0
- package/assets/logo2.svg +11 -0
- package/assets/logo3.svg +17 -0
- package/assets/office1.png +0 -0
- package/assets/office2.png +0 -0
- package/lib/components/Card/useCardStyles.js +31 -29
- package/lib/components/Card/useCardStyles.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.js +31 -29
- package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
- package/package.json +9 -9
- package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,155 @@
|
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 15 Sep 2022 09:45:19 GMT",
|
|
6
|
+
"tag": "@fluentui/react-card_v9.0.0-beta.25",
|
|
7
|
+
"version": "9.0.0-beta.25",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "martinhochel@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-card",
|
|
13
|
+
"commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
|
|
14
|
+
"comment": "chore: update package scaffold"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "martinhochel@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-card",
|
|
19
|
+
"commit": "ba9444d594f3a960cc590eae5237c08bf7c5a07f",
|
|
20
|
+
"comment": "chore: consume cypress.config from it's package boundary"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"prerelease": [
|
|
24
|
+
{
|
|
25
|
+
"author": "olfedias@microsoft.com",
|
|
26
|
+
"package": "@fluentui/react-card",
|
|
27
|
+
"commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
|
|
28
|
+
"comment": "chore: Update Griffel to latest version"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "beachball",
|
|
32
|
+
"package": "@fluentui/react-card",
|
|
33
|
+
"comment": "Bump @fluentui/react-utilities to v9.1.0",
|
|
34
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-card",
|
|
39
|
+
"comment": "Bump @fluentui/react-tabster to v9.1.1",
|
|
40
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"author": "beachball",
|
|
44
|
+
"package": "@fluentui/react-card",
|
|
45
|
+
"comment": "Bump @fluentui/react-theme to v9.1.0",
|
|
46
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"author": "beachball",
|
|
50
|
+
"package": "@fluentui/react-card",
|
|
51
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
|
|
52
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"author": "beachball",
|
|
56
|
+
"package": "@fluentui/react-card",
|
|
57
|
+
"comment": "Bump @fluentui/react-text to v9.1.0",
|
|
58
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"author": "beachball",
|
|
62
|
+
"package": "@fluentui/react-card",
|
|
63
|
+
"comment": "Bump @fluentui/react-button to v9.1.1",
|
|
64
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"date": "Wed, 03 Aug 2022 16:03:40 GMT",
|
|
71
|
+
"tag": "@fluentui/react-card_v9.0.0-beta.24",
|
|
72
|
+
"version": "9.0.0-beta.24",
|
|
73
|
+
"comments": {
|
|
74
|
+
"none": [
|
|
75
|
+
{
|
|
76
|
+
"author": "marcosmoura@microsoft.com",
|
|
77
|
+
"package": "@fluentui/react-card",
|
|
78
|
+
"commit": "8d0180b3bbaad7459257fb8bf7f2235953d12eec",
|
|
79
|
+
"comment": "docs(react-card): create migration guide from v0 to v9"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"author": "popatudor@microsoft.com",
|
|
83
|
+
"package": "@fluentui/react-card",
|
|
84
|
+
"commit": "59610d4c795d76a580fbb9391e20cf1249408555",
|
|
85
|
+
"comment": {
|
|
86
|
+
"title": "",
|
|
87
|
+
"value": ""
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"author": "39736248+andrefcdias@users.noreply.github.com",
|
|
92
|
+
"package": "@fluentui/react-card",
|
|
93
|
+
"commit": "770a741091a1f5d1f3b6d4bbfecdd29e333fef9c",
|
|
94
|
+
"comment": "chore: add missing Card components to Storybook"
|
|
95
|
+
}
|
|
96
|
+
],
|
|
97
|
+
"prerelease": [
|
|
98
|
+
{
|
|
99
|
+
"author": "miroslav.stastny@microsoft.com",
|
|
100
|
+
"package": "@fluentui/react-card",
|
|
101
|
+
"commit": "08563664778fd80284561d3c9d254307a0a32362",
|
|
102
|
+
"comment": "chore: Bump Griffel dependencies"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"author": "beachball",
|
|
106
|
+
"package": "@fluentui/react-card",
|
|
107
|
+
"comment": "Bump @fluentui/react-tabster to v9.1.0",
|
|
108
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"author": "beachball",
|
|
112
|
+
"package": "@fluentui/react-card",
|
|
113
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
|
|
114
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"author": "beachball",
|
|
118
|
+
"package": "@fluentui/react-card",
|
|
119
|
+
"comment": "Bump @fluentui/react-text to v9.0.4",
|
|
120
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"author": "beachball",
|
|
124
|
+
"package": "@fluentui/react-card",
|
|
125
|
+
"comment": "Bump @fluentui/react-button to v9.1.0",
|
|
126
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"date": "Fri, 15 Jul 2022 18:27:26 GMT",
|
|
133
|
+
"tag": "@fluentui/react-card_v9.0.0-beta.23",
|
|
134
|
+
"version": "9.0.0-beta.23",
|
|
135
|
+
"comments": {
|
|
136
|
+
"none": [
|
|
137
|
+
{
|
|
138
|
+
"author": "39736248+andrefcdias@users.noreply.github.com",
|
|
139
|
+
"package": "@fluentui/react-card",
|
|
140
|
+
"commit": "447b211fec38e4320b13c5ee2f7449c188f8183c",
|
|
141
|
+
"comment": "docs: add missing info to README"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"author": "39736248+andrefcdias@users.noreply.github.com",
|
|
145
|
+
"package": "@fluentui/react-card",
|
|
146
|
+
"commit": "640408c5aef9c3037f5f6bc08069ff9d9141a7ee",
|
|
147
|
+
"comment": "chore: add templates to stories"
|
|
148
|
+
}
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"date": "Thu, 14 Jul 2022 21:21:09 GMT",
|
|
6
154
|
"tag": "@fluentui/react-card_v9.0.0-beta.23",
|
|
7
155
|
"version": "9.0.0-beta.23",
|
|
8
156
|
"comments": {
|
|
@@ -17,25 +165,25 @@
|
|
|
17
165
|
"author": "beachball",
|
|
18
166
|
"package": "@fluentui/react-card",
|
|
19
167
|
"comment": "Bump @fluentui/react-utilities to v9.0.2",
|
|
20
|
-
"commit": "
|
|
168
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
21
169
|
},
|
|
22
170
|
{
|
|
23
171
|
"author": "beachball",
|
|
24
172
|
"package": "@fluentui/react-card",
|
|
25
173
|
"comment": "Bump @fluentui/react-tabster to v9.0.3",
|
|
26
|
-
"commit": "
|
|
174
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
27
175
|
},
|
|
28
176
|
{
|
|
29
177
|
"author": "beachball",
|
|
30
178
|
"package": "@fluentui/react-card",
|
|
31
179
|
"comment": "Bump @fluentui/react-text to v9.0.3",
|
|
32
|
-
"commit": "
|
|
180
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
33
181
|
},
|
|
34
182
|
{
|
|
35
183
|
"author": "beachball",
|
|
36
184
|
"package": "@fluentui/react-card",
|
|
37
185
|
"comment": "Bump @fluentui/react-button to v9.0.3",
|
|
38
|
-
"commit": "
|
|
186
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
39
187
|
}
|
|
40
188
|
]
|
|
41
189
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,49 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-card
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 15 Sep 2022 09:45:19 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-beta.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.25)
|
|
8
|
+
|
|
9
|
+
Thu, 15 Sep 2022 09:45:19 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.24..@fluentui/react-card_v9.0.0-beta.25)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
19
|
+
- Bump @fluentui/react-text to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
20
|
+
- Bump @fluentui/react-button to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
21
|
+
|
|
22
|
+
## [9.0.0-beta.24](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.24)
|
|
23
|
+
|
|
24
|
+
Wed, 03 Aug 2022 16:03:40 GMT
|
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.23..@fluentui/react-card_v9.0.0-beta.24)
|
|
26
|
+
|
|
27
|
+
### Changes
|
|
28
|
+
|
|
29
|
+
- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
|
|
30
|
+
- Bump @fluentui/react-tabster to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
31
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
32
|
+
- Bump @fluentui/react-text to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
33
|
+
- Bump @fluentui/react-button to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
34
|
+
|
|
7
35
|
## [9.0.0-beta.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.23)
|
|
8
36
|
|
|
9
|
-
Thu, 14 Jul 2022 21:
|
|
37
|
+
Thu, 14 Jul 2022 21:21:09 GMT
|
|
10
38
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.22..@fluentui/react-card_v9.0.0-beta.23)
|
|
11
39
|
|
|
12
40
|
### Changes
|
|
13
41
|
|
|
14
42
|
- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-utilities to v9.0.2 ([PR #
|
|
16
|
-
- Bump @fluentui/react-tabster to v9.0.3 ([PR #
|
|
17
|
-
- Bump @fluentui/react-text to v9.0.3 ([PR #
|
|
18
|
-
- Bump @fluentui/react-button to v9.0.3 ([PR #
|
|
43
|
+
- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
44
|
+
- Bump @fluentui/react-tabster to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
45
|
+
- Bump @fluentui/react-text to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
46
|
+
- Bump @fluentui/react-button to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
19
47
|
|
|
20
48
|
## [9.0.0-beta.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.22)
|
|
21
49
|
|
package/MIGRATION.md
ADDED
|
@@ -0,0 +1,323 @@
|
|
|
1
|
+
- [Migration from v0](#migration-from-v0)
|
|
2
|
+
- [Card](#card)
|
|
3
|
+
- [Property Mapping](#property-mapping)
|
|
4
|
+
- [Props that remain as is](#props-that-remain-as-is)
|
|
5
|
+
- [Props no longer supported with an equivalent functionality](#props-no-longer-supported-with-an-equivalent-functionality)
|
|
6
|
+
- [Props no longer supported](#props-no-longer-supported)
|
|
7
|
+
- [CardHeader](#cardheader)
|
|
8
|
+
- [Property Mapping](#property-mapping-1)
|
|
9
|
+
- [Props that remain as is](#props-that-remain-as-is-1)
|
|
10
|
+
- [Props no longer supported with an equivalent functionality](#props-no-longer-supported-with-an-equivalent-functionality-1)
|
|
11
|
+
- [Props no longer supported](#props-no-longer-supported-1)
|
|
12
|
+
- [CardBody](#cardbody)
|
|
13
|
+
- [CardPreview](#cardpreview)
|
|
14
|
+
- [Property Mapping](#property-mapping-2)
|
|
15
|
+
- [Props that remain as is](#props-that-remain-as-is-2)
|
|
16
|
+
- [Props no longer supported with an equivalent functionality](#props-no-longer-supported-with-an-equivalent-functionality-2)
|
|
17
|
+
- [Props no longer supported](#props-no-longer-supported-2)
|
|
18
|
+
- [Example](#example)
|
|
19
|
+
- [Before](#before)
|
|
20
|
+
- [After](#after)
|
|
21
|
+
- [CardColumn](#cardcolumn)
|
|
22
|
+
- [CardExpandableBox](#cardexpandablebox)
|
|
23
|
+
- [CardTopControls](#cardtopcontrols)
|
|
24
|
+
- [CardFooter](#cardfooter)
|
|
25
|
+
- [Property Mapping](#property-mapping-3)
|
|
26
|
+
- [Props that remain as is](#props-that-remain-as-is-3)
|
|
27
|
+
- [Props no longer supported with an equivalent functionality](#props-no-longer-supported-with-an-equivalent-functionality-3)
|
|
28
|
+
- [Props no longer supported](#props-no-longer-supported-3)
|
|
29
|
+
- [Migration from v8](#migration-from-v8)
|
|
30
|
+
|
|
31
|
+
# Migration from v0
|
|
32
|
+
|
|
33
|
+
## Card
|
|
34
|
+
|
|
35
|
+
### Property Mapping
|
|
36
|
+
|
|
37
|
+
| v0 - `Card` | v9 - `Card` |
|
|
38
|
+
| -------------- | ------------- |
|
|
39
|
+
| `acessibility` | - |
|
|
40
|
+
| - | `appearance` |
|
|
41
|
+
| `as` | `as` |
|
|
42
|
+
| `centered` | - |
|
|
43
|
+
| `className` | `className` |
|
|
44
|
+
| `compact` | - |
|
|
45
|
+
| `design` | - |
|
|
46
|
+
| `disabled` | - |
|
|
47
|
+
| `elevated` | - |
|
|
48
|
+
| `expandable` | - |
|
|
49
|
+
| `fluid` | - |
|
|
50
|
+
| - | `focusMode` |
|
|
51
|
+
| `ghost` | - |
|
|
52
|
+
| `inverted` | - |
|
|
53
|
+
| `key` | - |
|
|
54
|
+
| - | `orientation` |
|
|
55
|
+
| `ref` | - |
|
|
56
|
+
| - | `root` slot |
|
|
57
|
+
| `selected` | - |
|
|
58
|
+
| `size` | `size` |
|
|
59
|
+
| `styles` | - |
|
|
60
|
+
| `variables` | - |
|
|
61
|
+
|
|
62
|
+
### Props that remain as is
|
|
63
|
+
|
|
64
|
+
- `as`
|
|
65
|
+
- `className`
|
|
66
|
+
- `key`
|
|
67
|
+
- `ref`
|
|
68
|
+
- `size` => The size options are now reduced: `'small' | 'medium' | 'large'`
|
|
69
|
+
|
|
70
|
+
### Props no longer supported with an equivalent functionality
|
|
71
|
+
|
|
72
|
+
- `accessibility` => Override accessibility behavior by composing the `Card` how you want
|
|
73
|
+
- `compact` => Instead, use `size="small"`
|
|
74
|
+
- `ghost` => Instead, use `appearance="subtle"`
|
|
75
|
+
- `inverted` => Instead, use `appearance="filled-alternative"`
|
|
76
|
+
|
|
77
|
+
### Props no longer supported
|
|
78
|
+
|
|
79
|
+
- `centered` => Can be achieved by overriding the styles of the Card component:
|
|
80
|
+
|
|
81
|
+
```jsx
|
|
82
|
+
import * as React from 'react';
|
|
83
|
+
import { makeStyles } from '@fluentui/react-components';
|
|
84
|
+
import { Card } from '@fluentui/react-components/unstable';
|
|
85
|
+
|
|
86
|
+
const useStyles = makeStyles({
|
|
87
|
+
centeredCard: {
|
|
88
|
+
justifyItems: 'center',
|
|
89
|
+
},
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
export const CenteredCard = () => {
|
|
93
|
+
const styles = useStyles();
|
|
94
|
+
|
|
95
|
+
return (
|
|
96
|
+
<Card className={styles.centeredCard}>
|
|
97
|
+
<p>Lorem ipsum dolor sit amet.</p>
|
|
98
|
+
</Card>
|
|
99
|
+
);
|
|
100
|
+
};
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
- `disabled` => No equivalent functionality. Can be created by overriding the styles.
|
|
104
|
+
- `elevated` => All cards are now elevated by default. To change that, use the `appearance` property.
|
|
105
|
+
- `expandable` => No equivalent functionality.
|
|
106
|
+
- `fluid` => All cards are fluid by default. To change that, use a parent container with a defined size:
|
|
107
|
+
|
|
108
|
+
```jsx
|
|
109
|
+
import * as React from 'react';
|
|
110
|
+
import { makeStyles } from '@fluentui/react-components';
|
|
111
|
+
import { Card } from '@fluentui/react-components/unstable';
|
|
112
|
+
|
|
113
|
+
const useStyles = makeStyles({
|
|
114
|
+
parent: {
|
|
115
|
+
width: '500px',
|
|
116
|
+
},
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
export const SizedCard = () => {
|
|
120
|
+
const styles = useStyles();
|
|
121
|
+
|
|
122
|
+
return (
|
|
123
|
+
<div className={styles.parent}>
|
|
124
|
+
<Card>
|
|
125
|
+
<p>Lorem ipsum dolor sit amet.</p>
|
|
126
|
+
</Card>
|
|
127
|
+
</div>
|
|
128
|
+
);
|
|
129
|
+
};
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
- `selected` => No equivalent functionality.
|
|
133
|
+
|
|
134
|
+
## CardHeader
|
|
135
|
+
|
|
136
|
+
### Property Mapping
|
|
137
|
+
|
|
138
|
+
| v0 - `Cardheader` | v9 - `Cardheader` |
|
|
139
|
+
| ----------------- | ------------------ |
|
|
140
|
+
| `acessibility` | - |
|
|
141
|
+
| - | `root` slot |
|
|
142
|
+
| - | `image` slot |
|
|
143
|
+
| - | `header` slot |
|
|
144
|
+
| - | `description` slot |
|
|
145
|
+
| - | `action` slot |
|
|
146
|
+
| `as` | - |
|
|
147
|
+
| `className` | - |
|
|
148
|
+
| `design` | - |
|
|
149
|
+
| `fitted` | - |
|
|
150
|
+
| `key` | - |
|
|
151
|
+
| `ref` | - |
|
|
152
|
+
| `styles` | - |
|
|
153
|
+
| `variables` | - |
|
|
154
|
+
|
|
155
|
+
### Props that remain as is
|
|
156
|
+
|
|
157
|
+
- `as`
|
|
158
|
+
- `className`
|
|
159
|
+
- `key`
|
|
160
|
+
- `ref`
|
|
161
|
+
|
|
162
|
+
### Props no longer supported with an equivalent functionality
|
|
163
|
+
|
|
164
|
+
- `accessibility` => Override accessibility behavior by composing the `CardHeader` how you want
|
|
165
|
+
|
|
166
|
+
### Props no longer supported
|
|
167
|
+
|
|
168
|
+
- `design`
|
|
169
|
+
- `fitted`
|
|
170
|
+
- `styles`
|
|
171
|
+
- `variables`
|
|
172
|
+
|
|
173
|
+
## CardBody
|
|
174
|
+
|
|
175
|
+
This component is no longer supported. Instead, pass any content under the main Card component.
|
|
176
|
+
|
|
177
|
+
Before:
|
|
178
|
+
|
|
179
|
+
```jsx
|
|
180
|
+
import * as React from 'react';
|
|
181
|
+
import { Card, CardBody } from '@fluentui/react-northstar';
|
|
182
|
+
|
|
183
|
+
export const CardBodyExample = () => (
|
|
184
|
+
<Card elevated aria-roledescription="card with image and text">
|
|
185
|
+
<CardBody fitted>
|
|
186
|
+
<p>Lorem ipsum dolor sit amet.</p>
|
|
187
|
+
</CardBody>
|
|
188
|
+
</Card>
|
|
189
|
+
);
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
After:
|
|
193
|
+
|
|
194
|
+
```jsx
|
|
195
|
+
import * as React from 'react';
|
|
196
|
+
import { Card } from '@fluentui/react-components/unstable';
|
|
197
|
+
|
|
198
|
+
export const CardBodyExample = () => (
|
|
199
|
+
<Card>
|
|
200
|
+
<p>Lorem ipsum dolor sit amet.</p>
|
|
201
|
+
</Card>
|
|
202
|
+
);
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## CardPreview
|
|
206
|
+
|
|
207
|
+
### Property Mapping
|
|
208
|
+
|
|
209
|
+
| v0 - `CardPreview` | v9 - `CardPreview` |
|
|
210
|
+
| ------------------ | ------------------ |
|
|
211
|
+
| `acessibility` | - |
|
|
212
|
+
| `as` | - |
|
|
213
|
+
| `className` | - |
|
|
214
|
+
| `design` | - |
|
|
215
|
+
| `fitted` | - |
|
|
216
|
+
| `horizontal` | - |
|
|
217
|
+
| - | `logo` slot |
|
|
218
|
+
| `key` | - |
|
|
219
|
+
| `ref` | - |
|
|
220
|
+
| - | `root` slot |
|
|
221
|
+
| `styles` | - |
|
|
222
|
+
| `variables` | - |
|
|
223
|
+
|
|
224
|
+
### Props that remain as is
|
|
225
|
+
|
|
226
|
+
- `as`
|
|
227
|
+
- `className`
|
|
228
|
+
- `key`
|
|
229
|
+
- `ref`
|
|
230
|
+
|
|
231
|
+
### Props no longer supported with an equivalent functionality
|
|
232
|
+
|
|
233
|
+
- `accessibility` => Override accessibility behavior by composing the `CardPreview` how you want
|
|
234
|
+
|
|
235
|
+
### Props no longer supported
|
|
236
|
+
|
|
237
|
+
- `design`
|
|
238
|
+
- `fitted`
|
|
239
|
+
- `horizontal`
|
|
240
|
+
- `styles`
|
|
241
|
+
- `variables`
|
|
242
|
+
|
|
243
|
+
### Example
|
|
244
|
+
|
|
245
|
+
#### Before
|
|
246
|
+
|
|
247
|
+
```jsx
|
|
248
|
+
import * as React from 'react';
|
|
249
|
+
import { Card, CardPreview, Image } from '@fluentui/react-northstar';
|
|
250
|
+
|
|
251
|
+
export const CardPreviewExample = () => (
|
|
252
|
+
<Card aria-roledescription="image card">
|
|
253
|
+
<CardPreview>
|
|
254
|
+
<Image fluid src="https://url-of.the/image.jpg" alt="Preview of a Word document" />
|
|
255
|
+
</CardPreview>
|
|
256
|
+
</Card>
|
|
257
|
+
);
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
#### After
|
|
261
|
+
|
|
262
|
+
```jsx
|
|
263
|
+
import * as React from 'react';
|
|
264
|
+
import { Card, CardPreview } from '@fluentui/react-components/unstable';
|
|
265
|
+
|
|
266
|
+
export const CardPreviewExample = () => (
|
|
267
|
+
<Card>
|
|
268
|
+
<CardPreview>
|
|
269
|
+
<img src="https://url-of.the/image.jpg" alt="Preview of a Word document" />
|
|
270
|
+
</CardPreview>
|
|
271
|
+
</Card>
|
|
272
|
+
);
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
## CardColumn
|
|
276
|
+
|
|
277
|
+
This component is no longer supported.
|
|
278
|
+
|
|
279
|
+
## CardExpandableBox
|
|
280
|
+
|
|
281
|
+
This component is no longer supported.
|
|
282
|
+
|
|
283
|
+
## CardTopControls
|
|
284
|
+
|
|
285
|
+
This component is no longer supported.
|
|
286
|
+
|
|
287
|
+
## CardFooter
|
|
288
|
+
|
|
289
|
+
### Property Mapping
|
|
290
|
+
|
|
291
|
+
| v0 - `CardFooter` | v9 - `CardFooter` |
|
|
292
|
+
| ----------------- | ----------------- |
|
|
293
|
+
| `acessibility` | - |
|
|
294
|
+
| `as` | - |
|
|
295
|
+
| `className` | - |
|
|
296
|
+
| `design` | - |
|
|
297
|
+
| `fitted` | - |
|
|
298
|
+
| `key` | - |
|
|
299
|
+
| `ref` | - |
|
|
300
|
+
| `styles` | - |
|
|
301
|
+
| `variables` | - |
|
|
302
|
+
|
|
303
|
+
### Props that remain as is
|
|
304
|
+
|
|
305
|
+
- `as`
|
|
306
|
+
- `className`
|
|
307
|
+
- `key`
|
|
308
|
+
- `ref`
|
|
309
|
+
|
|
310
|
+
### Props no longer supported with an equivalent functionality
|
|
311
|
+
|
|
312
|
+
- `accessibility` => Override accessibility behavior by composing the `CardFooter` how you want
|
|
313
|
+
|
|
314
|
+
### Props no longer supported
|
|
315
|
+
|
|
316
|
+
- `design`
|
|
317
|
+
- `fitted`
|
|
318
|
+
- `styles`
|
|
319
|
+
- `variables`
|
|
320
|
+
|
|
321
|
+
# Migration from v8
|
|
322
|
+
|
|
323
|
+
WIP
|
package/README.md
CHANGED
|
@@ -1,13 +1,75 @@
|
|
|
1
1
|
# @fluentui/react-card [ALPHA]
|
|
2
2
|
|
|
3
|
-
**React Card components for [Fluent UI React](https://
|
|
3
|
+
**React Card components for [Fluent UI React](https://react.fluentui.dev)**
|
|
4
4
|
|
|
5
5
|
**⚠️ Please note that functionality is still being added to this package. Due to lockstep versioning, the version of this package is aligned with the others in _react-components_.**
|
|
6
6
|
|
|
7
|
-
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.
|
|
7
|
+
These are not production-ready components and **should never be used in a product**. This space is useful for testing new components whose APIs might change before final release.
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
8
10
|
|
|
9
11
|
To import React Card components:
|
|
10
12
|
|
|
11
13
|
```js
|
|
12
|
-
import {
|
|
14
|
+
import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-components/unstable';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Example Card usage:
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
|
|
23
|
+
import { Button, Body1, Caption1 } from '@fluentui/react-components';
|
|
24
|
+
import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components/unstable';
|
|
25
|
+
|
|
26
|
+
const App = () => (
|
|
27
|
+
<>
|
|
28
|
+
<Card>
|
|
29
|
+
<CardHeader
|
|
30
|
+
image={
|
|
31
|
+
<img
|
|
32
|
+
src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/avatar_elvia.svg"
|
|
33
|
+
alt="Face of a person"
|
|
34
|
+
/>
|
|
35
|
+
}
|
|
36
|
+
header={
|
|
37
|
+
<Body1>
|
|
38
|
+
<b>Elvia Atkins</b> mentioned you
|
|
39
|
+
</Body1>
|
|
40
|
+
}
|
|
41
|
+
description={<Caption1>5h ago · About us - Overview</Caption1>}
|
|
42
|
+
/>
|
|
43
|
+
<CardPreview
|
|
44
|
+
logo={
|
|
45
|
+
<img
|
|
46
|
+
src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/word_logo.svg"
|
|
47
|
+
alt="Microsoft Word logo"
|
|
48
|
+
/>
|
|
49
|
+
}
|
|
50
|
+
>
|
|
51
|
+
<img
|
|
52
|
+
src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/doc_template.png"
|
|
53
|
+
alt="Preview of a Word document"
|
|
54
|
+
/>
|
|
55
|
+
</CardPreview>
|
|
56
|
+
<CardFooter>
|
|
57
|
+
<Button icon={<ArrowReply16Regular />}>Reply</Button>
|
|
58
|
+
<Button icon={<Share16Regular />}>Share</Button>
|
|
59
|
+
</CardFooter>
|
|
60
|
+
</Card>
|
|
61
|
+
</>
|
|
62
|
+
);
|
|
13
63
|
```
|
|
64
|
+
|
|
65
|
+
## Specification
|
|
66
|
+
|
|
67
|
+
See the [Spec.md](./Spec.md) file for background information on the design/engineering decisions of the component.
|
|
68
|
+
|
|
69
|
+
## API
|
|
70
|
+
|
|
71
|
+
For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-card--default).
|
|
72
|
+
|
|
73
|
+
## Migration
|
|
74
|
+
|
|
75
|
+
For migration information, have a look at the [migration guide](./MIGRATION.md).
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
2
|
+
<rect width="192" height="192" rx="4" fill="url(#pattern0)"/>
|
|
3
|
+
<defs>
|
|
4
|
+
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
|
5
|
+
<use xlink:href="#image0_6503_14249" transform="scale(0.00520833)"/>
|
|
6
|
+
</pattern>
|
|
7
|
+
<image id="image0_6503_14249" width="192" height="192" xlink:href="data:image/png;base64,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"/>
|
|
8
|
+
</defs>
|
|
9
|
+
</svg>
|