@fluentui/react-persona 0.0.0-nightly-20221202-0421.1 → 0.0.0-nightly-20221206-0425.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.json +58 -13
  2. package/CHANGELOG.md +23 -9
  3. package/lib/components/Persona/usePersonaStyles.js +8 -9
  4. package/lib/components/Persona/usePersonaStyles.js.map +1 -1
  5. package/lib-commonjs/components/Persona/usePersonaStyles.js +8 -9
  6. package/lib-commonjs/components/Persona/usePersonaStyles.js.map +1 -1
  7. package/package.json +6 -6
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-persona",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 02 Dec 2022 04:28:36 GMT",
6
- "tag": "@fluentui/react-persona_v0.0.0-nightly-20221202-0421.1",
7
- "version": "0.0.0-nightly-20221202-0421.1",
5
+ "date": "Tue, 06 Dec 2022 04:34:11 GMT",
6
+ "tag": "@fluentui/react-persona_v0.0.0-nightly-20221206-0425.1",
7
+ "version": "0.0.0-nightly-20221206-0425.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,32 +16,77 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-persona",
19
- "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20221202-0421.1",
20
- "commit": "75656dfc8f17078b2f1a22a8eef751f8833a9592"
19
+ "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20221206-0425.1",
20
+ "commit": "cba335fb1b101ee6144b18fc6829d42654de779d"
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-20221202-0421.1",
26
- "commit": "75656dfc8f17078b2f1a22a8eef751f8833a9592"
25
+ "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20221206-0425.1",
26
+ "commit": "cba335fb1b101ee6144b18fc6829d42654de779d"
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-20221202-0421.1",
32
- "commit": "75656dfc8f17078b2f1a22a8eef751f8833a9592"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221206-0425.1",
32
+ "commit": "cba335fb1b101ee6144b18fc6829d42654de779d"
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-20221202-0421.1",
38
- "commit": "75656dfc8f17078b2f1a22a8eef751f8833a9592"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221206-0425.1",
38
+ "commit": "cba335fb1b101ee6144b18fc6829d42654de779d"
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-20221202-0421.1",
44
- "commit": "75656dfc8f17078b2f1a22a8eef751f8833a9592"
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221206-0425.1",
44
+ "commit": "cba335fb1b101ee6144b18fc6829d42654de779d"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Mon, 05 Dec 2022 18:29:26 GMT",
51
+ "tag": "@fluentui/react-persona_v9.1.0-beta.5",
52
+ "version": "9.1.0-beta.5",
53
+ "comments": {
54
+ "prerelease": [
55
+ {
56
+ "author": "esteban.230@hotmail.com",
57
+ "package": "@fluentui/react-persona",
58
+ "commit": "df99a7d82e3ca707300a079e0050db218d6cfcce",
59
+ "comment": "chore: Updating Persona's docs to match implementation."
60
+ },
61
+ {
62
+ "author": "tristan.watanabe@gmail.com",
63
+ "package": "@fluentui/react-persona",
64
+ "commit": "fafaced9e47597c8ae38d68518887926082986cb",
65
+ "comment": "chore: Migrate to new package structure."
66
+ },
67
+ {
68
+ "author": "esteban.230@hotmail.com",
69
+ "package": "@fluentui/react-persona",
70
+ "commit": "7f4466d1f16a45c6268d540ccd6c088e0c79dfbb",
71
+ "comment": "fix: Make Persona's text wrap when overflowing its container."
72
+ },
73
+ {
74
+ "author": "beachball",
75
+ "package": "@fluentui/react-persona",
76
+ "comment": "Bump @fluentui/react-avatar to v9.2.8",
77
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
78
+ },
79
+ {
80
+ "author": "beachball",
81
+ "package": "@fluentui/react-persona",
82
+ "comment": "Bump @fluentui/react-badge to v9.0.14",
83
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
84
+ },
85
+ {
86
+ "author": "beachball",
87
+ "package": "@fluentui/react-persona",
88
+ "comment": "Bump @fluentui/react-theme to v9.1.3",
89
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
45
90
  }
46
91
  ]
47
92
  }
package/CHANGELOG.md CHANGED
@@ -1,22 +1,36 @@
1
1
  # Change Log - @fluentui/react-persona
2
2
 
3
- This log was last generated on Fri, 02 Dec 2022 04:28:36 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 06 Dec 2022 04:34:11 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20221202-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20221202-0421.1)
7
+ ## [0.0.0-nightly-20221206-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20221206-0425.1)
8
8
 
9
- Fri, 02 Dec 2022 04:28:36 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-20221202-0421.1)
9
+ Tue, 06 Dec 2022 04:34:11 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.5..@fluentui/react-persona_v0.0.0-nightly-20221206-0425.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-20221202-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/75656dfc8f17078b2f1a22a8eef751f8833a9592) by beachball)
16
- - Bump @fluentui/react-badge to v0.0.0-nightly-20221202-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/75656dfc8f17078b2f1a22a8eef751f8833a9592) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20221202-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/75656dfc8f17078b2f1a22a8eef751f8833a9592) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20221202-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/75656dfc8f17078b2f1a22a8eef751f8833a9592) by beachball)
19
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221202-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/75656dfc8f17078b2f1a22a8eef751f8833a9592) by beachball)
15
+ - Bump @fluentui/react-avatar to v0.0.0-nightly-20221206-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/cba335fb1b101ee6144b18fc6829d42654de779d) by beachball)
16
+ - Bump @fluentui/react-badge to v0.0.0-nightly-20221206-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/cba335fb1b101ee6144b18fc6829d42654de779d) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20221206-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/cba335fb1b101ee6144b18fc6829d42654de779d) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20221206-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/cba335fb1b101ee6144b18fc6829d42654de779d) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221206-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/cba335fb1b101ee6144b18fc6829d42654de779d) by beachball)
20
+
21
+ ## [9.1.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.5)
22
+
23
+ Mon, 05 Dec 2022 18:29:26 GMT
24
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.0-beta.4..@fluentui/react-persona_v9.1.0-beta.5)
25
+
26
+ ### Changes
27
+
28
+ - chore: Updating Persona's docs to match implementation. ([PR #25770](https://github.com/microsoft/fluentui/pull/25770) by esteban.230@hotmail.com)
29
+ - chore: Migrate to new package structure. ([PR #25737](https://github.com/microsoft/fluentui/pull/25737) by tristan.watanabe@gmail.com)
30
+ - fix: Make Persona's text wrap when overflowing its container. ([PR #25880](https://github.com/microsoft/fluentui/pull/25880) by esteban.230@hotmail.com)
31
+ - Bump @fluentui/react-avatar to v9.2.8 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
32
+ - Bump @fluentui/react-badge to v9.0.14 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
33
+ - Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
20
34
 
21
35
  ## [9.1.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.0-beta.4)
22
36
 
package/lib/components/Persona/usePersonaStyles.js CHANGED
@@ -17,16 +17,17 @@ const avatarSpacing = `--fui-Persona__avatar--spacing`;
17
17
  const useStyles = /*#__PURE__*/__styles({
18
18
  "base": {
19
19
  "mc9l5x": "fwk3njj",
20
- "t4k1zu": "f4wu0r3",
21
20
  "v29qe6": "fvtn1bl"
22
21
  },
23
22
  "after": {
24
23
  "Bxotwcr": "f1u07yai",
25
- "B7hvi0a": "f1m2n5bn"
24
+ "B7hvi0a": "f1m2n5bn",
25
+ "Budl1dq": "f1c1ms5d"
26
26
  },
27
27
  "before": {
28
28
  "Bxotwcr": "f1u07yai",
29
- "B7hvi0a": "f1tll2w5"
29
+ "B7hvi0a": "f1tll2w5",
30
+ "Budl1dq": "ffvkwdr"
30
31
  },
31
32
  "below": {
32
33
  "B7hvi0a": "f1oiokrs"
@@ -40,9 +41,6 @@ const useStyles = /*#__PURE__*/__styles({
40
41
  "center": {
41
42
  "qb2dma": "f7nlbp4"
42
43
  },
43
- "alignToPrimary": {
44
- "Budl1dq": "fv2o0x6"
45
- },
46
44
  "afterAlignToPrimary": {
47
45
  "qb2dma": "f7nlbp4",
48
46
  "Ijaq50": "f1rnkkuc",
@@ -54,7 +52,7 @@ const useStyles = /*#__PURE__*/__styles({
54
52
  "Br312pm": "fwu52yu"
55
53
  }
56
54
  }, {
57
- "d": [".fwk3njj{display:inline-grid;}", ".f4wu0r3{grid-auto-columns:max-content;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1tll2w5{justify-items:end;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".fv2o0x6{grid-template-columns:max-content [middle] max-content;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}"]
55
+ "d": [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1c1ms5d{grid-template-columns:max-content [middle] auto;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}"]
58
56
  });
59
57
 
60
58
  const useAvatarSpacingStyles = /*#__PURE__*/__styles({
@@ -103,11 +101,12 @@ const usePresenceSpacingStyles = /*#__PURE__*/__styles({
103
101
 
104
102
  export const usePersonaStyles_unstable = state => {
105
103
  const {
104
+ presenceOnly,
106
105
  size,
107
106
  textAlignment,
108
107
  textPosition
109
108
  } = state;
110
- const alignToPrimary = textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
109
+ const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
111
110
  const {
112
111
  primaryTextClassName,
113
112
  optionalTextClassName
@@ -117,7 +116,7 @@ export const usePersonaStyles_unstable = state => {
117
116
  const presenceSpacingStyles = { ...avatarSpacingStyles,
118
117
  ...usePresenceSpacingStyles()
119
118
  };
120
- state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], textPosition !== 'below' && alignToPrimary && styles.alignToPrimary, state.root.className);
119
+ state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);
121
120
 
122
121
  if (state.avatar) {
123
122
  state.avatar.className = mergeClasses(personaClassNames.avatar, styles.coin, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
package/lib/components/Persona/usePersonaStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n root: 'fui-Persona',\n avatar: 'fui-Persona__avatar',\n presence: 'fui-Persona__presence',\n primaryText: 'fui-Persona__primaryText',\n secondaryText: 'fui-Persona__secondaryText',\n tertiaryText: 'fui-Persona__tertiaryText',\n quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridAutoColumns: 'max-content',\n gridAutoRows: 'max-content',\n },\n after: {\n gridAutoFlow: 'column',\n justifyItems: 'start',\n },\n before: {\n gridAutoFlow: 'column',\n justifyItems: 'end',\n },\n below: {\n justifyItems: 'center',\n },\n coin: {\n gridRowStart: 'span 5',\n },\n\n start: {\n alignSelf: 'start',\n },\n center: {\n alignSelf: 'center',\n },\n\n // These alignToPrimary styles are needed due to presence being too small to center with the primary text.\n alignToPrimary: {\n gridTemplateColumns: `max-content [middle] max-content`,\n },\n afterAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnEnd: 'middle',\n },\n beforeAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnStart: 'middle',\n },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n 'extra-small': {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n small: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n medium: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n large: {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n 'extra-large': {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n huge: {\n [avatarSpacing]: tokens.spacingHorizontalM,\n },\n after: {\n marginRight: `var(${avatarSpacing})`,\n },\n below: {\n marginBottom: `var(${avatarSpacing})`,\n },\n before: {\n marginLeft: `var(${avatarSpacing})`,\n },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n small: {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n const { size, textAlignment, textPosition } = state;\n const alignToPrimary = textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(\n personaClassNames.root,\n styles.base,\n styles[textPosition],\n textPosition !== 'below' && alignToPrimary && styles.alignToPrimary,\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n styles.coin,\n styles[textAlignment],\n avatarSpacingStyles[size],\n avatarSpacingStyles[textPosition],\n state.avatar.className,\n );\n }\n\n if (state.presence) {\n state.presence.className = mergeClasses(\n personaClassNames.presence,\n styles.coin,\n styles[textAlignment],\n presenceSpacingStyles[size],\n presenceSpacingStyles[textPosition],\n textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n state.presence.className,\n );\n }\n\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n personaClassNames.primaryText,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n optionalTextClassName,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst useTextStyles = makeStyles({\n base: {\n display: 'block',\n },\n primaryText: {\n color: tokens.colorNeutralForeground1,\n },\n optionalText: {\n color: tokens.colorNeutralForeground2,\n },\n\n beforeAlignToPrimary: {\n gridColumnEnd: 'middle',\n },\n afterAlignToPrimary: {\n gridColumnStart: 'middle',\n },\n\n body1: typographyStyles.body1,\n caption1: typographyStyles.caption1,\n subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n state: PersonaState,\n alignToPrimary: boolean,\n): {\n primaryTextClassName: string;\n optionalTextClassName: string;\n} => {\n const { presenceOnly, size, textPosition } = state;\n const textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\n }\n\n if (alignToPrimary) {\n if (textPosition === 'before') {\n alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n } else if (textPosition === 'after') {\n alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n }\n }\n } else {\n if (size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else if (size === 'extra-large') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(\n textStyles.base,\n textStyles.primaryText,\n primaryTextSize,\n alignToPrimaryClassName,\n ),\n optionalTextClassName: mergeClasses(\n textStyles.base,\n textStyles.optionalText,\n !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n root: 'fui-Persona',\n avatar: 'fui-Persona__avatar',\n presence: 'fui-Persona__presence',\n primaryText: 'fui-Persona__primaryText',\n secondaryText: 'fui-Persona__secondaryText',\n tertiaryText: 'fui-Persona__tertiaryText',\n quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridAutoRows: 'max-content',\n },\n\n after: {\n gridAutoFlow: 'column',\n justifyItems: 'start',\n gridTemplateColumns: 'max-content [middle] auto',\n },\n before: {\n gridAutoFlow: 'column',\n justifyItems: 'end',\n gridTemplateColumns: 'auto [middle] max-content',\n },\n below: {\n justifyItems: 'center',\n },\n coin: {\n gridRowStart: 'span 5',\n },\n\n start: {\n alignSelf: 'start',\n },\n center: {\n alignSelf: 'center',\n },\n\n afterAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnEnd: 'middle',\n },\n beforeAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnStart: 'middle',\n },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n 'extra-small': {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n small: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n medium: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n large: {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n 'extra-large': {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n huge: {\n [avatarSpacing]: tokens.spacingHorizontalM,\n },\n after: {\n marginRight: `var(${avatarSpacing})`,\n },\n below: {\n marginBottom: `var(${avatarSpacing})`,\n },\n before: {\n marginLeft: `var(${avatarSpacing})`,\n },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n small: {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n const { presenceOnly, size, textAlignment, textPosition } = state;\n\n const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n styles.coin,\n styles[textAlignment],\n avatarSpacingStyles[size],\n avatarSpacingStyles[textPosition],\n state.avatar.className,\n );\n }\n\n if (state.presence) {\n state.presence.className = mergeClasses(\n personaClassNames.presence,\n styles.coin,\n styles[textAlignment],\n presenceSpacingStyles[size],\n presenceSpacingStyles[textPosition],\n textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n state.presence.className,\n );\n }\n\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n personaClassNames.primaryText,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n optionalTextClassName,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst useTextStyles = makeStyles({\n base: {\n display: 'block',\n },\n primaryText: {\n color: tokens.colorNeutralForeground1,\n },\n optionalText: {\n color: tokens.colorNeutralForeground2,\n },\n\n beforeAlignToPrimary: {\n gridColumnEnd: 'middle',\n },\n afterAlignToPrimary: {\n gridColumnStart: 'middle',\n },\n\n body1: typographyStyles.body1,\n caption1: typographyStyles.caption1,\n subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n state: PersonaState,\n alignToPrimary: boolean,\n): {\n primaryTextClassName: string;\n optionalTextClassName: string;\n} => {\n const { presenceOnly, size, textPosition } = state;\n const textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\n }\n\n if (alignToPrimary) {\n if (textPosition === 'before') {\n alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n } else if (textPosition === 'after') {\n alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n }\n }\n } else {\n if (size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else if (size === 'extra-large') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(\n textStyles.base,\n textStyles.primaryText,\n primaryTextSize,\n alignToPrimaryClassName,\n ),\n optionalTextClassName: mergeClasses(\n textStyles.base,\n textStyles.optionalText,\n !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"sourceRoot":""}
package/lib-commonjs/components/Persona/usePersonaStyles.js CHANGED
@@ -26,16 +26,17 @@ const avatarSpacing = `--fui-Persona__avatar--spacing`;
26
26
  const useStyles = /*#__PURE__*/react_1.__styles({
27
27
  "base": {
28
28
  "mc9l5x": "fwk3njj",
29
- "t4k1zu": "f4wu0r3",
30
29
  "v29qe6": "fvtn1bl"
31
30
  },
32
31
  "after": {
33
32
  "Bxotwcr": "f1u07yai",
34
- "B7hvi0a": "f1m2n5bn"
33
+ "B7hvi0a": "f1m2n5bn",
34
+ "Budl1dq": "f1c1ms5d"
35
35
  },
36
36
  "before": {
37
37
  "Bxotwcr": "f1u07yai",
38
- "B7hvi0a": "f1tll2w5"
38
+ "B7hvi0a": "f1tll2w5",
39
+ "Budl1dq": "ffvkwdr"
39
40
  },
40
41
  "below": {
41
42
  "B7hvi0a": "f1oiokrs"
@@ -49,9 +50,6 @@ const useStyles = /*#__PURE__*/react_1.__styles({
49
50
  "center": {
50
51
  "qb2dma": "f7nlbp4"
51
52
  },
52
- "alignToPrimary": {
53
- "Budl1dq": "fv2o0x6"
54
- },
55
53
  "afterAlignToPrimary": {
56
54
  "qb2dma": "f7nlbp4",
57
55
  "Ijaq50": "f1rnkkuc",
@@ -63,7 +61,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
63
61
  "Br312pm": "fwu52yu"
64
62
  }
65
63
  }, {
66
- "d": [".fwk3njj{display:inline-grid;}", ".f4wu0r3{grid-auto-columns:max-content;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1tll2w5{justify-items:end;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".fv2o0x6{grid-template-columns:max-content [middle] max-content;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}"]
64
+ "d": [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1u07yai{grid-auto-flow:column;}", ".f1m2n5bn{justify-items:start;}", ".f1c1ms5d{grid-template-columns:max-content [middle] auto;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1oiokrs{justify-items:center;}", ".f1hek2iy{grid-row-start:span 5;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}"]
67
65
  });
68
66
 
69
67
  const useAvatarSpacingStyles = /*#__PURE__*/react_1.__styles({
@@ -112,11 +110,12 @@ const usePresenceSpacingStyles = /*#__PURE__*/react_1.__styles({
112
110
 
113
111
  const usePersonaStyles_unstable = state => {
114
112
  const {
113
+ presenceOnly,
115
114
  size,
116
115
  textAlignment,
117
116
  textPosition
118
117
  } = state;
119
- const alignToPrimary = textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
118
+ const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
120
119
  const {
121
120
  primaryTextClassName,
122
121
  optionalTextClassName
@@ -126,7 +125,7 @@ const usePersonaStyles_unstable = state => {
126
125
  const presenceSpacingStyles = { ...avatarSpacingStyles,
127
126
  ...usePresenceSpacingStyles()
128
127
  };
129
- state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, styles[textPosition], textPosition !== 'below' && alignToPrimary && styles.alignToPrimary, state.root.className);
128
+ state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, styles[textPosition], state.root.className);
130
129
 
131
130
  if (state.avatar) {
132
131
  state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, styles.coin, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
package/lib-commonjs/components/Persona/usePersonaStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n root: 'fui-Persona',\n avatar: 'fui-Persona__avatar',\n presence: 'fui-Persona__presence',\n primaryText: 'fui-Persona__primaryText',\n secondaryText: 'fui-Persona__secondaryText',\n tertiaryText: 'fui-Persona__tertiaryText',\n quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridAutoColumns: 'max-content',\n gridAutoRows: 'max-content',\n },\n after: {\n gridAutoFlow: 'column',\n justifyItems: 'start',\n },\n before: {\n gridAutoFlow: 'column',\n justifyItems: 'end',\n },\n below: {\n justifyItems: 'center',\n },\n coin: {\n gridRowStart: 'span 5',\n },\n\n start: {\n alignSelf: 'start',\n },\n center: {\n alignSelf: 'center',\n },\n\n // These alignToPrimary styles are needed due to presence being too small to center with the primary text.\n alignToPrimary: {\n gridTemplateColumns: `max-content [middle] max-content`,\n },\n afterAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnEnd: 'middle',\n },\n beforeAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnStart: 'middle',\n },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n 'extra-small': {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n small: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n medium: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n large: {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n 'extra-large': {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n huge: {\n [avatarSpacing]: tokens.spacingHorizontalM,\n },\n after: {\n marginRight: `var(${avatarSpacing})`,\n },\n below: {\n marginBottom: `var(${avatarSpacing})`,\n },\n before: {\n marginLeft: `var(${avatarSpacing})`,\n },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n small: {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n const { size, textAlignment, textPosition } = state;\n const alignToPrimary = textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(\n personaClassNames.root,\n styles.base,\n styles[textPosition],\n textPosition !== 'below' && alignToPrimary && styles.alignToPrimary,\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n styles.coin,\n styles[textAlignment],\n avatarSpacingStyles[size],\n avatarSpacingStyles[textPosition],\n state.avatar.className,\n );\n }\n\n if (state.presence) {\n state.presence.className = mergeClasses(\n personaClassNames.presence,\n styles.coin,\n styles[textAlignment],\n presenceSpacingStyles[size],\n presenceSpacingStyles[textPosition],\n textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n state.presence.className,\n );\n }\n\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n personaClassNames.primaryText,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n optionalTextClassName,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst useTextStyles = makeStyles({\n base: {\n display: 'block',\n },\n primaryText: {\n color: tokens.colorNeutralForeground1,\n },\n optionalText: {\n color: tokens.colorNeutralForeground2,\n },\n\n beforeAlignToPrimary: {\n gridColumnEnd: 'middle',\n },\n afterAlignToPrimary: {\n gridColumnStart: 'middle',\n },\n\n body1: typographyStyles.body1,\n caption1: typographyStyles.caption1,\n subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n state: PersonaState,\n alignToPrimary: boolean,\n): {\n primaryTextClassName: string;\n optionalTextClassName: string;\n} => {\n const { presenceOnly, size, textPosition } = state;\n const textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\n }\n\n if (alignToPrimary) {\n if (textPosition === 'before') {\n alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n } else if (textPosition === 'after') {\n alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n }\n }\n } else {\n if (size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else if (size === 'extra-large') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(\n textStyles.base,\n textStyles.primaryText,\n primaryTextSize,\n alignToPrimaryClassName,\n ),\n optionalTextClassName: mergeClasses(\n textStyles.base,\n textStyles.optionalText,\n !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"sourceRoot":""}
1
+ {"version":3,"sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { PersonaSlots, PersonaState } from './Persona.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const personaClassNames: SlotClassNames<PersonaSlots> = {\n root: 'fui-Persona',\n avatar: 'fui-Persona__avatar',\n presence: 'fui-Persona__presence',\n primaryText: 'fui-Persona__primaryText',\n secondaryText: 'fui-Persona__secondaryText',\n tertiaryText: 'fui-Persona__tertiaryText',\n quaternaryText: 'fui-Persona__quaternaryText',\n};\n\nconst avatarSpacing = `--fui-Persona__avatar--spacing`;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n base: {\n display: 'inline-grid',\n gridAutoRows: 'max-content',\n },\n\n after: {\n gridAutoFlow: 'column',\n justifyItems: 'start',\n gridTemplateColumns: 'max-content [middle] auto',\n },\n before: {\n gridAutoFlow: 'column',\n justifyItems: 'end',\n gridTemplateColumns: 'auto [middle] max-content',\n },\n below: {\n justifyItems: 'center',\n },\n coin: {\n gridRowStart: 'span 5',\n },\n\n start: {\n alignSelf: 'start',\n },\n center: {\n alignSelf: 'center',\n },\n\n afterAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnEnd: 'middle',\n },\n beforeAlignToPrimary: {\n alignSelf: 'center',\n gridRowStart: 'unset',\n gridColumnStart: 'middle',\n },\n});\n\nconst useAvatarSpacingStyles = makeStyles({\n 'extra-small': {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n small: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n medium: {\n [avatarSpacing]: tokens.spacingHorizontalS,\n },\n large: {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n 'extra-large': {\n [avatarSpacing]: tokens.spacingHorizontalMNudge,\n },\n huge: {\n [avatarSpacing]: tokens.spacingHorizontalM,\n },\n after: {\n marginRight: `var(${avatarSpacing})`,\n },\n below: {\n marginBottom: `var(${avatarSpacing})`,\n },\n before: {\n marginLeft: `var(${avatarSpacing})`,\n },\n});\n\nconst usePresenceSpacingStyles = makeStyles({\n small: {\n [avatarSpacing]: tokens.spacingHorizontalSNudge,\n },\n});\n\n/**\n * Apply styling to the Persona slots based on the state\n */\nexport const usePersonaStyles_unstable = (state: PersonaState): PersonaState => {\n const { presenceOnly, size, textAlignment, textPosition } = state;\n\n const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(personaClassNames.root, styles.base, styles[textPosition], state.root.className);\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n styles.coin,\n styles[textAlignment],\n avatarSpacingStyles[size],\n avatarSpacingStyles[textPosition],\n state.avatar.className,\n );\n }\n\n if (state.presence) {\n state.presence.className = mergeClasses(\n personaClassNames.presence,\n styles.coin,\n styles[textAlignment],\n presenceSpacingStyles[size],\n presenceSpacingStyles[textPosition],\n textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary,\n textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary,\n state.presence.className,\n );\n }\n\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n personaClassNames.primaryText,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n optionalTextClassName,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst useTextStyles = makeStyles({\n base: {\n display: 'block',\n },\n primaryText: {\n color: tokens.colorNeutralForeground1,\n },\n optionalText: {\n color: tokens.colorNeutralForeground2,\n },\n\n beforeAlignToPrimary: {\n gridColumnEnd: 'middle',\n },\n afterAlignToPrimary: {\n gridColumnStart: 'middle',\n },\n\n body1: typographyStyles.body1,\n caption1: typographyStyles.caption1,\n subtitle2: typographyStyles.subtitle2,\n});\n\nconst useTextClassNames = (\n state: PersonaState,\n alignToPrimary: boolean,\n): {\n primaryTextClassName: string;\n optionalTextClassName: string;\n} => {\n const { presenceOnly, size, textPosition } = state;\n const textStyles = useTextStyles();\n\n let primaryTextSize;\n let alignToPrimaryClassName;\n\n if (presenceOnly) {\n if (size === 'extra-small') {\n primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\n }\n\n if (alignToPrimary) {\n if (textPosition === 'before') {\n alignToPrimaryClassName = textStyles.beforeAlignToPrimary;\n } else if (textPosition === 'after') {\n alignToPrimaryClassName = textStyles.afterAlignToPrimary;\n }\n }\n } else {\n if (size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\n } else if (size === 'extra-large') {\n primaryTextSize = textStyles.subtitle2;\n } else {\n primaryTextSize = textStyles.body1;\n }\n }\n\n return {\n primaryTextClassName: mergeClasses(\n textStyles.base,\n textStyles.primaryText,\n primaryTextSize,\n alignToPrimaryClassName,\n ),\n optionalTextClassName: mergeClasses(\n textStyles.base,\n textStyles.optionalText,\n !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1,\n alignToPrimaryClassName,\n ),\n };\n};\n"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-persona",
3
- "version": "0.0.0-nightly-20221202-0421.1",
3
+ "version": "0.0.0-nightly-20221206-0425.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-20221202-0421.1",
30
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221206-0425.1",
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-avatar": "0.0.0-nightly-20221202-0421.1",
35
- "@fluentui/react-badge": "0.0.0-nightly-20221202-0421.1",
36
- "@fluentui/react-theme": "0.0.0-nightly-20221202-0421.1",
37
- "@fluentui/react-utilities": "0.0.0-nightly-20221202-0421.1",
34
+ "@fluentui/react-avatar": "0.0.0-nightly-20221206-0425.1",
35
+ "@fluentui/react-badge": "0.0.0-nightly-20221206-0425.1",
36
+ "@fluentui/react-theme": "0.0.0-nightly-20221206-0425.1",
37
+ "@fluentui/react-utilities": "0.0.0-nightly-20221206-0425.1",
38
38
  "@griffel/react": "^1.4.2",
39
39
  "tslib": "^2.1.0"
40
40
  },