@fluentui/react-persona 0.0.0-nightly-20221122-0421.1 → 0.0.0-nightly-20221124-0419.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 +13 -13
- package/CHANGELOG.md +9 -9
- package/dist/index.d.ts +2 -2
- package/lib/components/Persona/Persona.types.js.map +1 -1
- package/package.json +6 -6
- package/MIGRATION.md +0 -44
- package/Spec.md +0 -213
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-persona",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-persona_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Thu, 24 Nov 2022 04:26:28 GMT",
|
|
6
|
+
"tag": "@fluentui/react-persona_v0.0.0-nightly-20221124-0419.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221124-0419.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-persona",
|
|
19
|
-
"comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20221124-0419.1",
|
|
20
|
+
"commit": "c5f0f2cc509275dea7b8b8d5c8ea110b2fa556fa"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-persona",
|
|
25
|
-
"comment": "Bump @fluentui/react-badge to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20221124-0419.1",
|
|
26
|
+
"commit": "c5f0f2cc509275dea7b8b8d5c8ea110b2fa556fa"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-persona",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221124-0419.1",
|
|
32
|
+
"commit": "c5f0f2cc509275dea7b8b8d5c8ea110b2fa556fa"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-persona",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221124-0419.1",
|
|
38
|
+
"commit": "c5f0f2cc509275dea7b8b8d5c8ea110b2fa556fa"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-persona",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221124-0419.1",
|
|
44
|
+
"commit": "c5f0f2cc509275dea7b8b8d5c8ea110b2fa556fa"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-persona
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 24 Nov 2022 04:26:28 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-20221124-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20221124-0419.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.4..@fluentui/react-persona_v0.0.0-nightly-
|
|
9
|
+
Thu, 24 Nov 2022 04:26:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.4..@fluentui/react-persona_v0.0.0-nightly-20221124-0419.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-avatar to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-badge to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-avatar to v0.0.0-nightly-20221124-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/c5f0f2cc509275dea7b8b8d5c8ea110b2fa556fa) by beachball)
|
|
16
|
+
- Bump @fluentui/react-badge to v0.0.0-nightly-20221124-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/c5f0f2cc509275dea7b8b8d5c8ea110b2fa556fa) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221124-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/c5f0f2cc509275dea7b8b8d5c8ea110b2fa556fa) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221124-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/c5f0f2cc509275dea7b8b8d5c8ea110b2fa556fa) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221124-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/c5f0f2cc509275dea7b8b8d5c8ea110b2fa556fa) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.1.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.4)
|
|
22
22
|
|
package/dist/index.d.ts
CHANGED
|
@@ -70,8 +70,8 @@ export declare type PersonaSlots = {
|
|
|
70
70
|
/**
|
|
71
71
|
* The first line of text in the Persona, larger than the rest of the lines.
|
|
72
72
|
*
|
|
73
|
-
*
|
|
74
|
-
*
|
|
73
|
+
* `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is
|
|
74
|
+
* different than the `name` prop.
|
|
75
75
|
*/
|
|
76
76
|
primaryText?: Slot<'span'>;
|
|
77
77
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Persona.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/Persona.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type PersonaSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Avatar to display.\n *\n * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.\n */\n avatar?: Slot<typeof Avatar>;\n\n /**\n * PresenceBadge to display.\n *\n * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.\n */\n presence?: Slot<typeof PresenceBadge>;\n\n /**\n * The first line of text in the Persona, larger than the rest of the lines.\n *\n *
|
|
1
|
+
{"version":3,"file":"Persona.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/Persona.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type PersonaSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Avatar to display.\n *\n * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.\n */\n avatar?: Slot<typeof Avatar>;\n\n /**\n * PresenceBadge to display.\n *\n * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.\n */\n presence?: Slot<typeof PresenceBadge>;\n\n /**\n * The first line of text in the Persona, larger than the rest of the lines.\n *\n * `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is\n * different than the `name` prop.\n */\n primaryText?: Slot<'span'>;\n\n /**\n * The second line of text in the Persona.\n */\n secondaryText?: Slot<'span'>;\n\n /**\n * The third line of text in the Persona.\n */\n tertiaryText?: Slot<'span'>;\n\n /**\n * The fourth line of text in the Persona.\n */\n quaternaryText?: Slot<'span'>;\n};\n\n/**\n * Persona Props\n */\nexport type PersonaProps = ComponentProps<PersonaSlots> & {\n /**\n * The name of the person or entity represented by the Persona.\n *\n * When `primaryText` is not provided, this will be used as the default value for `primaryText`.\n */\n name?: string;\n\n /**\n * Whether to display only the presence.\n *\n * @default false\n */\n presenceOnly?: boolean;\n\n /**\n * The size of a Persona and its text.\n *\n * @default medium\n */\n size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n\n /**\n * The position of the text relative to the avatar/presence.\n *\n * @default after\n */\n textPosition?: 'after' | 'before' | 'below';\n\n /**\n * The vertical alignment of the text relative to the avatar/presence.\n *\n * @default start\n */\n textAlignment?: 'center' | 'start';\n};\n\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {\n /**\n * The number of text lines used.\n */\n numTextLines: number;\n };\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-persona",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20221124-0419.1",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221124-0419.1",
|
|
31
31
|
"@fluentui/scripts": "^1.0.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-avatar": "0.0.0-nightly-
|
|
35
|
-
"@fluentui/react-badge": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
34
|
+
"@fluentui/react-avatar": "0.0.0-nightly-20221124-0419.1",
|
|
35
|
+
"@fluentui/react-badge": "0.0.0-nightly-20221124-0419.1",
|
|
36
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221124-0419.1",
|
|
37
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221124-0419.1",
|
|
38
38
|
"@griffel/react": "^1.4.2",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|
package/MIGRATION.md
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
# Badge Migration
|
|
2
|
-
|
|
3
|
-
## Migration from v8
|
|
4
|
-
|
|
5
|
-
v8 offers a component equivalent to v9's `Persona`. However, the API is slightly different. The main difference is that v9's `Persona` does not handle the functionality of the `presence` and `avatar`. Instead, the `presence` and `avatar` are separate components that can be used in conjunction with `Persona`.
|
|
6
|
-
|
|
7
|
-
Here's how the API of v8's `Persona` compares to the one from v9's `Persona` component:
|
|
8
|
-
|
|
9
|
-
- `className` => `className`
|
|
10
|
-
- `coinProps` => Use `avatar`'s or `presence`'s slot props
|
|
11
|
-
- `componentRef` => NOT SUPPORTED - use `ref` instead
|
|
12
|
-
- `hidePersonaDetails` => Use the `Avatar` component for this case
|
|
13
|
-
- ```
|
|
14
|
-
|
|
15
|
-
```
|
|
16
|
-
- `imageShouldFadeIn` => NOT SUPPORTED
|
|
17
|
-
- `isOutOfOffice` => Use the `outOfOffice` prop of the `presence` slot. E.g.: `presence={{ outOfOffice: true }}`
|
|
18
|
-
- `presence` => Use the `status` prop of the `presence` slot. E.g.: `presence={{ status: 'away' }}`
|
|
19
|
-
- `presenceTitle` => NOT SUPPORTED
|
|
20
|
-
- `showOverflowTooltip` => NOT SUPPORTED
|
|
21
|
-
- `showUnknownPersonaCoin` => NOT SUPPORTED
|
|
22
|
-
- `styles` => Use style customization through `className` instead
|
|
23
|
-
|
|
24
|
-
## Property Mapping
|
|
25
|
-
|
|
26
|
-
| v8 `Persona` | v9 `Persona` |
|
|
27
|
-
| ------------------------ | -------------------------------------- |
|
|
28
|
-
| `coinProps` | `avatar` or `badge` slot props |
|
|
29
|
-
| `coinSize` | `size` in the `badge` or `avatar` slot |
|
|
30
|
-
| `className` | `className` |
|
|
31
|
-
| `componentRef` | `ref` |
|
|
32
|
-
| `hidePersonaDetails` | - |
|
|
33
|
-
| `imageShouldFadeIn` | - |
|
|
34
|
-
| `isOutOfOffice` | `status` in `presence` slot props |
|
|
35
|
-
| `optionalText` | `quaternaryText` |
|
|
36
|
-
| `presence` | `presence` |
|
|
37
|
-
| `presenceTitle` | - |
|
|
38
|
-
| `primaryText` | `primaryText` |
|
|
39
|
-
| `secondaryText` | `secondaryText` |
|
|
40
|
-
| `showOverflowTooltip` | - |
|
|
41
|
-
| `showUnknownPersonaCoin` | - |
|
|
42
|
-
| `styles` | `className` |
|
|
43
|
-
| `tertiaryText` | `tertiaryText` |
|
|
44
|
-
| `text` | `name` |
|
package/Spec.md
DELETED
|
@@ -1,213 +0,0 @@
|
|
|
1
|
-
# @fluentui/react-persona Spec
|
|
2
|
-
|
|
3
|
-
Convergence epic issue: #24213
|
|
4
|
-
|
|
5
|
-
## Background
|
|
6
|
-
|
|
7
|
-
A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge, or an Avatar with a PresenceBadge. This composite component is not a card, therefore it will not provide a visual board or a popup when the user hovers the Avatar.
|
|
8
|
-
|
|
9
|
-
Persona is used in PeoplePicker, Team's left rail and menus, chiclets, and Card.
|
|
10
|
-
|
|
11
|
-
## Prior Art
|
|
12
|
-
|
|
13
|
-
- OpenUI research: [Avatar/Persona](https://open-ui.org/components/avatar.research)
|
|
14
|
-
- v7/v8: [link](https://developer.microsoft.com/en-us/fluentui#/controls/web/persona)
|
|
15
|
-
- > Note: v8's Persona is a combination of v9's Persona and Avatar (v8's Persona has a sub-component PersonaCoin that would count as Avatar, but is not exposed.). In v9 we've taken the approach of having a single component Avatar and another component Persona.
|
|
16
|
-
- v0: Does not have equivalent component.
|
|
17
|
-
|
|
18
|
-
## Anatomy
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
### Avatar, PresenceBadge, and Avatar + PresenceBadge
|
|
23
|
-
|
|
24
|
-
v8's Persona has a sub-component `PersonaCoin`, the equivalent in v9 is an Avatar. Currently Avatar is able to display a PresenceBadge, but this behavior will be deprecated in favor of Persona having this behavior.
|
|
25
|
-
|
|
26
|
-
Persona has a slot for an `Avatar` and `PresenceBadge`, giving the user the ability to display an Avatar, a PresenceBadge, or Combine them into an Avatar with presence.
|
|
27
|
-
|
|
28
|
-
## Sample Code
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
Persona with Avatar:
|
|
33
|
-
|
|
34
|
-
```jsx
|
|
35
|
-
<Persona name="Kevin Sturgis" secondaryText="Software Engineer" />
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
Persona with PresenceBadge:
|
|
41
|
-
|
|
42
|
-
```jsx
|
|
43
|
-
<Persona presenceOnly name="Kevin Sturgis" presence={{ status: 'offline', outOfOffice: true }} />
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
Persona with Avatar + PresenceBadge:
|
|
49
|
-
|
|
50
|
-
```jsx
|
|
51
|
-
<Persona
|
|
52
|
-
name="Kevin Sturgis"
|
|
53
|
-
secondaryText="Software Engineer"
|
|
54
|
-
tertiaryText="Offline"
|
|
55
|
-
presence={{ status: 'offline', outOfOffice: true }}
|
|
56
|
-
/>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
## Variants
|
|
60
|
-
|
|
61
|
-
> I will refer to the avatar and presence as content.
|
|
62
|
-
|
|
63
|
-
There are three alignment variants:
|
|
64
|
-
|
|
65
|
-
- after: Content on the left and text on the right.
|
|
66
|
-
- below: Content on top and text on the bottom.
|
|
67
|
-
- before: Content on the right and text on the left.
|
|
68
|
-
|
|
69
|
-
There are 3 content variants:
|
|
70
|
-
|
|
71
|
-
- Avatar
|
|
72
|
-
- PresenceBadge
|
|
73
|
-
- Avatar + PresenceBadge
|
|
74
|
-
|
|
75
|
-
There are 2 sizing variants:
|
|
76
|
-
|
|
77
|
-
- scaled: When there is no specified size in the props of either `avatar` or `presence`, the content is resized based on the number of text lines used.
|
|
78
|
-
- fixed: When there is a specified size of either `avatar` or `presence`, the text lines are styled based on the size of the content.
|
|
79
|
-
|
|
80
|
-
## API
|
|
81
|
-
|
|
82
|
-
**Slots**
|
|
83
|
-
|
|
84
|
-
- `root`: The root slot for Persona.
|
|
85
|
-
- `avatar`: The Avatar to display and Persona's primary slot.
|
|
86
|
-
- `presence`: The PresenceBadge to display.
|
|
87
|
-
- `primaryText`: First line of text in Persona. By default its content will be the content of the `name` prop. It is highly encouraged to only use the `name` prop and only specify the content of `primaryText` when it is not a name.
|
|
88
|
-
- `secondaryText`: Second line of text in Persona.
|
|
89
|
-
- `tertiaryText`: Third line of text in Persona.
|
|
90
|
-
- `quaternaryText`: Fourth line of text in Persona.
|
|
91
|
-
|
|
92
|
-
**Types**
|
|
93
|
-
|
|
94
|
-
```ts
|
|
95
|
-
export type PersonaSlots = {
|
|
96
|
-
root: NonNullable<Slot<'div'>>;
|
|
97
|
-
|
|
98
|
-
/**
|
|
99
|
-
* Avatar to display.
|
|
100
|
-
*/
|
|
101
|
-
avatar?: Slot<typeof Avatar>;
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* PresenceBadge to display.
|
|
105
|
-
*/
|
|
106
|
-
presence?: Slot<typeof PresenceBadge>;
|
|
107
|
-
|
|
108
|
-
/**
|
|
109
|
-
* The first line of text in the Persona, larger than the rest of the lines.
|
|
110
|
-
*
|
|
111
|
-
* This defaults to the `name` prop, and it is recomended that you only set its value if it should be different from
|
|
112
|
-
* from the `name` prop.
|
|
113
|
-
*/
|
|
114
|
-
primaryText?: Slot<'span'>;
|
|
115
|
-
|
|
116
|
-
/**
|
|
117
|
-
* The second line of text in the Persona.
|
|
118
|
-
*/
|
|
119
|
-
secondaryText?: Slot<'span'>;
|
|
120
|
-
|
|
121
|
-
/**
|
|
122
|
-
* The third line of text in the Persona.
|
|
123
|
-
*/
|
|
124
|
-
tertiaryText?: Slot<'span'>;
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* The fourth line of text in the Persona.
|
|
128
|
-
*/
|
|
129
|
-
quaternaryText?: Slot<'span'>;
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* Persona Props
|
|
134
|
-
*/
|
|
135
|
-
export type PersonaProps = Omit<ComponentProps<PersonaSlots>, 'badge'> &
|
|
136
|
-
Pick<AvatarProps, 'name'> & {
|
|
137
|
-
/**
|
|
138
|
-
* Whether to display only the presence.
|
|
139
|
-
*
|
|
140
|
-
* @default false
|
|
141
|
-
*/
|
|
142
|
-
presenceOnly?: boolean;
|
|
143
|
-
|
|
144
|
-
/**
|
|
145
|
-
* Position the text will be rendered in.
|
|
146
|
-
*
|
|
147
|
-
* @default after
|
|
148
|
-
*/
|
|
149
|
-
textPosition?: 'before' | 'after' | 'below';
|
|
150
|
-
};
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
## Structure
|
|
154
|
-
|
|
155
|
-
To avoid the [issue](https://github.com/microsoft/fluentui/issues/23386) v8 has, a css grid will be used instead of a flexbox that requires a general wrapper and a text container wrapper.
|
|
156
|
-
|
|
157
|
-
- _**Internal**_
|
|
158
|
-
|
|
159
|
-
```jsx
|
|
160
|
-
const coin = (
|
|
161
|
-
<>
|
|
162
|
-
{!presenceOnly && slots.avatar && <slots.avatar {...slotProps.avatar} />}
|
|
163
|
-
{presenceOnly && slots.presence && <slots.presence {...slotProps.presence} />}
|
|
164
|
-
</>
|
|
165
|
-
);
|
|
166
|
-
|
|
167
|
-
return (
|
|
168
|
-
<slots.root {...slotProps.root}>
|
|
169
|
-
{(textPosition === 'after' || textPosition === 'below') && coin}
|
|
170
|
-
{slots.primaryText && <slots.primaryText {...slotProps.primaryText} />}
|
|
171
|
-
{slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}
|
|
172
|
-
{slots.tertiaryText && <slots.tertiaryText {...slotProps.tertiaryText} />}
|
|
173
|
-
{slots.quaternaryText && <slots.quaternaryText {...slotProps.quaternaryText} />}
|
|
174
|
-
{textPosition === 'before' && coin}
|
|
175
|
-
</slots.root>
|
|
176
|
-
);
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
- _**DOM**_
|
|
180
|
-
|
|
181
|
-
```html
|
|
182
|
-
<div class="fui-Persona">
|
|
183
|
-
<div {/* Avatar, PresenceBadge, or Avatar with PresenceBadge */} />
|
|
184
|
-
<span class="fui-Persona__primaryText">{/* name */}</span>
|
|
185
|
-
<span class="fui-Persona__secondaryText">Secondary Text</span>
|
|
186
|
-
<span class="fui-Persona__tertiaryText">Tertiary Text</span>
|
|
187
|
-
<span class="fui-Persona__quaternaryText">Quaternary Text</span>
|
|
188
|
-
</div>
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
## Migration
|
|
192
|
-
|
|
193
|
-
See [MIGRATION.md](./MIGRATION.md) for details.
|
|
194
|
-
|
|
195
|
-
## Behaviors
|
|
196
|
-
|
|
197
|
-
_Explain how the component will behave in use, including:_
|
|
198
|
-
|
|
199
|
-
- _Component States_
|
|
200
|
-
- There are no states for this component, it's a visual representation.
|
|
201
|
-
- _Interaction_
|
|
202
|
-
- _Keyboard_
|
|
203
|
-
- Doesn't receive focus.
|
|
204
|
-
- _Cursor_
|
|
205
|
-
- Doesn't interact with cursor.
|
|
206
|
-
- _Touch_
|
|
207
|
-
- Doesn't interact with touch.
|
|
208
|
-
- _Screen readers_
|
|
209
|
-
- Contents will be read based on dom order.
|
|
210
|
-
|
|
211
|
-
## Accessibility
|
|
212
|
-
|
|
213
|
-
- There's no need for `aria-*` or/and`role`. Avatar and Badge already accessible and the text labels won't need anything as well.
|