@fluentui/react-persona 0.0.0-nightly-20230213-0421.1 → 0.0.0-nightly-20230215-0425.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/CHANGELOG.json +61 -13
  2. package/CHANGELOG.md +30 -9
  3. package/lib/components/Persona/usePersonaStyles.js +17 -31
  4. package/lib/components/Persona/usePersonaStyles.js.map +1 -1
  5. package/lib-commonjs/components/Persona/usePersonaStyles.js +16 -30
  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": "Mon, 13 Feb 2023 04:29:19 GMT",
6
- "tag": "@fluentui/react-persona_v0.0.0-nightly-20230213-0421.1",
7
- "version": "0.0.0-nightly-20230213-0421.1",
5
+ "date": "Wed, 15 Feb 2023 04:34:54 GMT",
6
+ "tag": "@fluentui/react-persona_v0.0.0-nightly-20230215-0425.1",
7
+ "version": "0.0.0-nightly-20230215-0425.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,32 +16,80 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-persona",
19
- "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230213-0421.1",
20
- "commit": "b306ca34a57a35c8e3430ace92e08726fc204aeb"
19
+ "comment": "Bump @fluentui/react-avatar to v0.0.0-nightly-20230215-0425.1",
20
+ "commit": "7c4ff90ebab59d72c7bcc133facb8399b17f2729"
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-20230213-0421.1",
26
- "commit": "b306ca34a57a35c8e3430ace92e08726fc204aeb"
25
+ "comment": "Bump @fluentui/react-badge to v0.0.0-nightly-20230215-0425.1",
26
+ "commit": "7c4ff90ebab59d72c7bcc133facb8399b17f2729"
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-20230213-0421.1",
32
- "commit": "b306ca34a57a35c8e3430ace92e08726fc204aeb"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230215-0425.1",
32
+ "commit": "7c4ff90ebab59d72c7bcc133facb8399b17f2729"
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-20230213-0421.1",
38
- "commit": "b306ca34a57a35c8e3430ace92e08726fc204aeb"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230215-0425.1",
38
+ "commit": "7c4ff90ebab59d72c7bcc133facb8399b17f2729"
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-20230213-0421.1",
44
- "commit": "b306ca34a57a35c8e3430ace92e08726fc204aeb"
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230215-0425.1",
44
+ "commit": "7c4ff90ebab59d72c7bcc133facb8399b17f2729"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Mon, 13 Feb 2023 23:43:13 GMT",
51
+ "tag": "@fluentui/react-persona_v9.1.11",
52
+ "version": "9.1.11",
53
+ "comments": {
54
+ "patch": [
55
+ {
56
+ "author": "seanmonahan@microsoft.com",
57
+ "package": "@fluentui/react-persona",
58
+ "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513",
59
+ "comment": "chore: update Persona to use makeResetStyles"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-persona",
64
+ "comment": "Bump @fluentui/react-avatar to v9.3.5",
65
+ "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui/react-persona",
70
+ "comment": "Bump @fluentui/react-badge to v9.0.25",
71
+ "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
72
+ },
73
+ {
74
+ "author": "beachball",
75
+ "package": "@fluentui/react-persona",
76
+ "comment": "Bump @fluentui/react-utilities to v9.5.3",
77
+ "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
78
+ }
79
+ ]
80
+ }
81
+ },
82
+ {
83
+ "date": "Mon, 13 Feb 2023 09:35:48 GMT",
84
+ "tag": "@fluentui/react-persona_v9.1.10",
85
+ "version": "9.1.10",
86
+ "comments": {
87
+ "patch": [
88
+ {
89
+ "author": "beachball",
90
+ "package": "@fluentui/react-persona",
91
+ "comment": "Bump @fluentui/react-avatar to v9.3.4",
92
+ "commit": "b24aed22677cb12a74f185feee89edefd1601b9a"
45
93
  }
46
94
  ]
47
95
  }
package/CHANGELOG.md CHANGED
@@ -1,22 +1,43 @@
1
1
  # Change Log - @fluentui/react-persona
2
2
 
3
- This log was last generated on Mon, 13 Feb 2023 04:29:19 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 15 Feb 2023 04:34:54 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20230213-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230213-0421.1)
7
+ ## [0.0.0-nightly-20230215-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v0.0.0-nightly-20230215-0425.1)
8
8
 
9
- Mon, 13 Feb 2023 04:29:19 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.9..@fluentui/react-persona_v0.0.0-nightly-20230213-0421.1)
9
+ Wed, 15 Feb 2023 04:34:54 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.11..@fluentui/react-persona_v0.0.0-nightly-20230215-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-20230213-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b306ca34a57a35c8e3430ace92e08726fc204aeb) by beachball)
16
- - Bump @fluentui/react-badge to v0.0.0-nightly-20230213-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b306ca34a57a35c8e3430ace92e08726fc204aeb) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20230213-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b306ca34a57a35c8e3430ace92e08726fc204aeb) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20230213-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b306ca34a57a35c8e3430ace92e08726fc204aeb) by beachball)
19
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230213-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b306ca34a57a35c8e3430ace92e08726fc204aeb) by beachball)
15
+ - Bump @fluentui/react-avatar to v0.0.0-nightly-20230215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/7c4ff90ebab59d72c7bcc133facb8399b17f2729) by beachball)
16
+ - Bump @fluentui/react-badge to v0.0.0-nightly-20230215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/7c4ff90ebab59d72c7bcc133facb8399b17f2729) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20230215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/7c4ff90ebab59d72c7bcc133facb8399b17f2729) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20230215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/7c4ff90ebab59d72c7bcc133facb8399b17f2729) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/7c4ff90ebab59d72c7bcc133facb8399b17f2729) by beachball)
20
+
21
+ ## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.11)
22
+
23
+ Mon, 13 Feb 2023 23:43:13 GMT
24
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.10..@fluentui/react-persona_v9.1.11)
25
+
26
+ ### Patches
27
+
28
+ - chore: update Persona to use makeResetStyles ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by seanmonahan@microsoft.com)
29
+ - Bump @fluentui/react-avatar to v9.3.5 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
30
+ - Bump @fluentui/react-badge to v9.0.25 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
31
+ - Bump @fluentui/react-utilities to v9.5.3 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
32
+
33
+ ## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.10)
34
+
35
+ Mon, 13 Feb 2023 09:35:48 GMT
36
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-persona_v9.1.9..@fluentui/react-persona_v9.1.10)
37
+
38
+ ### Patches
39
+
40
+ - Bump @fluentui/react-avatar to v9.3.4 ([PR #26800](https://github.com/microsoft/fluentui/pull/26800) by beachball)
20
41
 
21
42
  ## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-persona_v9.1.9)
22
43
 
package/lib/components/Persona/usePersonaStyles.js CHANGED
@@ -1,4 +1,4 @@
1
- import { __styles, mergeClasses } from '@griffel/react';
1
+ import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
2
2
  import { tokens, typographyStyles } from '@fluentui/react-theme';
3
3
  export const personaClassNames = {
4
4
  root: 'fui-Persona',
@@ -10,29 +10,23 @@ export const personaClassNames = {
10
10
  quaternaryText: 'fui-Persona__quaternaryText'
11
11
  };
12
12
  const avatarSpacing = `--fui-Persona__avatar--spacing`;
13
+ const useRootClassName = /*#__PURE__*/__resetStyles("rlroi9i", null, [".rlroi9i{display:inline-grid;grid-auto-rows:max-content;grid-auto-flow:column;justify-items:start;grid-template-columns:max-content [middle] auto;}"]);
13
14
  /**
14
15
  * Styles for the root slot
15
16
  */
16
17
  const useStyles = /*#__PURE__*/__styles({
17
- base: {
18
- mc9l5x: "fwk3njj",
19
- v29qe6: "fvtn1bl"
20
- },
21
18
  beforeAfterCenter: {
22
19
  wkccdc: "f1iantul"
23
20
  },
24
- after: {
25
- Bxotwcr: "f1u07yai",
26
- B7hvi0a: "f1m2n5bn",
27
- Budl1dq: "f1c1ms5d"
28
- },
21
+ after: {},
29
22
  before: {
30
- Bxotwcr: "f1u07yai",
31
23
  B7hvi0a: "f1tll2w5",
32
24
  Budl1dq: "ffvkwdr"
33
25
  },
34
26
  below: {
35
- B7hvi0a: "f1oiokrs"
27
+ Bxotwcr: "f1nkeedh",
28
+ B7hvi0a: "f1oiokrs",
29
+ Budl1dq: "f1emgwh2"
36
30
  },
37
31
  media: {
38
32
  Ijaq50: "f1hek2iy"
@@ -72,7 +66,7 @@ const useStyles = /*#__PURE__*/__styles({
72
66
  Ijaq50: "f1tuwaia"
73
67
  }
74
68
  }, {
75
- d: [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".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;}", ".fa4dipu{grid-row-start:span 6;}", ".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;}", ".f1ryq6si{margin-top:-2px;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
69
+ d: [".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1nkeedh{grid-auto-flow:unset;}", ".f1oiokrs{justify-items:center;}", ".f1emgwh2{grid-template-columns:unset;}", ".f1hek2iy{grid-row-start:span 5;}", ".fa4dipu{grid-row-start:span 6;}", ".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;}", ".f1ryq6si{margin-top:-2px;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
76
70
  });
77
71
  const useAvatarSpacingStyles = /*#__PURE__*/__styles({
78
72
  "extra-small": {
@@ -128,13 +122,14 @@ export const usePersonaStyles_unstable = state => {
128
122
  primaryTextClassName,
129
123
  optionalTextClassName
130
124
  } = useTextClassNames(state, alignToPrimary);
125
+ const rootClassName = useRootClassName();
131
126
  const styles = useStyles();
132
127
  const avatarSpacingStyles = useAvatarSpacingStyles();
133
128
  const presenceSpacingStyles = {
134
129
  ...avatarSpacingStyles,
135
130
  ...usePresenceSpacingStyles()
136
131
  };
137
- state.root.className = mergeClasses(personaClassNames.root, styles.base, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
132
+ state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
138
133
  if (state.avatar) {
139
134
  state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
140
135
  }
@@ -155,16 +150,9 @@ export const usePersonaStyles_unstable = state => {
155
150
  }
156
151
  return state;
157
152
  };
153
+ const usePrimaryTextBaseClassName = /*#__PURE__*/__resetStyles("rvj41k9", null, [".rvj41k9{display:block;color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
154
+ const useOptionalTextBaseClassName = /*#__PURE__*/__resetStyles("rp1pf9e", null, [".rp1pf9e{display:block;color:var(--colorNeutralForeground2);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
158
155
  const useTextStyles = /*#__PURE__*/__styles({
159
- base: {
160
- mc9l5x: "ftgm304"
161
- },
162
- primaryText: {
163
- sj55zd: "f19n0e5"
164
- },
165
- optionalText: {
166
- sj55zd: "fkfq4zb"
167
- },
168
156
  beforeAlignToPrimary: {
169
157
  Bw0ie65: "f1warjpf"
170
158
  },
@@ -190,7 +178,7 @@ const useTextStyles = /*#__PURE__*/__styles({
190
178
  Bg96gwp: "faaz57k"
191
179
  }
192
180
  }, {
193
- d: [".ftgm304{display:block;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
181
+ d: [".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
194
182
  });
195
183
  const useTextClassNames = (state, alignToPrimary) => {
196
184
  const {
@@ -198,16 +186,16 @@ const useTextClassNames = (state, alignToPrimary) => {
198
186
  size,
199
187
  textPosition
200
188
  } = state;
189
+ const primaryTextBaseClassName = usePrimaryTextBaseClassName();
190
+ const optionalTextBaseClassName = useOptionalTextBaseClassName();
201
191
  const textStyles = useTextStyles();
202
192
  let primaryTextSize;
203
193
  let alignToPrimaryClassName;
204
194
  if (presenceOnly) {
205
195
  if (size === 'extra-small') {
206
- primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;
196
+ primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
207
197
  } else if (size === 'extra-large' || size === 'huge') {
208
198
  primaryTextSize = textStyles.subtitle2;
209
- } else {
210
- primaryTextSize = textStyles.body1;
211
199
  }
212
200
  if (alignToPrimary) {
213
201
  if (textPosition === 'before') {
@@ -221,13 +209,11 @@ const useTextClassNames = (state, alignToPrimary) => {
221
209
  primaryTextSize = textStyles.subtitle2;
222
210
  } else if (size === 'extra-large') {
223
211
  primaryTextSize = textStyles.subtitle2;
224
- } else {
225
- primaryTextSize = textStyles.body1;
226
212
  }
227
213
  }
228
214
  return {
229
- primaryTextClassName: mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize, alignToPrimaryClassName),
230
- optionalTextClassName: mergeClasses(textStyles.base, textStyles.optionalText, !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1, alignToPrimaryClassName)
215
+ primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
216
+ optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
231
217
  };
232
218
  };
233
219
  //# sourceMappingURL=usePersonaStyles.js.map
package/lib/components/Persona/usePersonaStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"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","names":["mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useStyles","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","beforeAfterCenter","media","mediaBeforeAfterCenter","afterAlignToPrimary","beforeAlignToPrimary","primary","secondary","secondLineSpacing","tertiary","quaternary","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"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 beforeAfterCenter: {\n // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n gridTemplateRows:\n '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\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\n media: {\n gridRowStart: 'span 5',\n },\n\n mediaBeforeAfterCenter: {\n gridRowStart: 'span 6',\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 secondLineSpacing: {\n marginTop: '-2px',\n },\n\n primary: { gridRowStart: 'primary' },\n secondary: { gridRowStart: 'secondary' },\n tertiary: { gridRowStart: 'tertiary' },\n quaternary: { gridRowStart: 'quaternary' },\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 alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\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 alignBeforeAfterCenter && styles.beforeAfterCenter,\n styles[textPosition],\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\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 textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\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 alignBeforeAfterCenter && styles.primary,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n alignBeforeAfterCenter && styles.secondary,\n optionalTextClassName,\n styles.secondLineSpacing,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n alignBeforeAfterCenter && styles.tertiary,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n alignBeforeAfterCenter && styles.quaternary,\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"]}
1
+ {"version":3,"mappings":"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","names":["mergeClasses","tokens","typographyStyles","personaClassNames","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","useStyles","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","beforeAfterCenter","media","mediaBeforeAfterCenter","afterAlignToPrimary","beforeAlignToPrimary","primary","secondary","secondLineSpacing","tertiary","quaternary","usePrimaryTextBaseClassName","useOptionalTextBaseClassName","useTextStyles","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","caption1","subtitle2","body1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"sourcesContent":["import { makeResetStyles, 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\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridAutoRows: 'max-content',\n gridAutoFlow: 'column',\n justifyItems: 'start',\n gridTemplateColumns: 'max-content [middle] auto',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n beforeAfterCenter: {\n // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n gridTemplateRows:\n '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n },\n\n after: {\n // Intentionally empty\n },\n before: {\n justifyItems: 'end',\n gridTemplateColumns: 'auto [middle] max-content',\n },\n below: {\n gridAutoFlow: 'unset',\n justifyItems: 'center',\n gridTemplateColumns: 'unset',\n },\n\n media: {\n gridRowStart: 'span 5',\n },\n\n mediaBeforeAfterCenter: {\n gridRowStart: 'span 6',\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 secondLineSpacing: {\n marginTop: '-2px',\n },\n\n primary: { gridRowStart: 'primary' },\n secondary: { gridRowStart: 'secondary' },\n tertiary: { gridRowStart: 'tertiary' },\n quaternary: { gridRowStart: 'quaternary' },\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 alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const rootClassName = useRootClassName();\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(\n personaClassNames.root,\n rootClassName,\n alignBeforeAfterCenter && styles.beforeAfterCenter,\n styles[textPosition],\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\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 textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\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 alignBeforeAfterCenter && styles.primary,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n alignBeforeAfterCenter && styles.secondary,\n optionalTextClassName,\n styles.secondLineSpacing,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n alignBeforeAfterCenter && styles.tertiary,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n alignBeforeAfterCenter && styles.quaternary,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst usePrimaryTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n});\n\nconst useOptionalTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground2,\n ...typographyStyles.caption1,\n});\n\nconst useTextStyles = makeStyles({\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 primaryTextBaseClassName = usePrimaryTextBaseClassName();\n const optionalTextBaseClassName = useOptionalTextBaseClassName();\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.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\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 }\n }\n\n return {\n primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n optionalTextClassName: mergeClasses(\n optionalTextBaseClassName,\n !presenceOnly && size === 'huge' && textStyles.body1,\n alignToPrimaryClassName,\n ),\n };\n};\n"]}
package/lib-commonjs/components/Persona/usePersonaStyles.js CHANGED
@@ -16,29 +16,23 @@ exports.personaClassNames = {
16
16
  quaternaryText: 'fui-Persona__quaternaryText'
17
17
  };
18
18
  const avatarSpacing = `--fui-Persona__avatar--spacing`;
19
+ const useRootClassName = /*#__PURE__*/react_1.__resetStyles("rlroi9i", null, [".rlroi9i{display:inline-grid;grid-auto-rows:max-content;grid-auto-flow:column;justify-items:start;grid-template-columns:max-content [middle] auto;}"]);
19
20
  /**
20
21
  * Styles for the root slot
21
22
  */
22
23
  const useStyles = /*#__PURE__*/react_1.__styles({
23
- base: {
24
- mc9l5x: "fwk3njj",
25
- v29qe6: "fvtn1bl"
26
- },
27
24
  beforeAfterCenter: {
28
25
  wkccdc: "f1iantul"
29
26
  },
30
- after: {
31
- Bxotwcr: "f1u07yai",
32
- B7hvi0a: "f1m2n5bn",
33
- Budl1dq: "f1c1ms5d"
34
- },
27
+ after: {},
35
28
  before: {
36
- Bxotwcr: "f1u07yai",
37
29
  B7hvi0a: "f1tll2w5",
38
30
  Budl1dq: "ffvkwdr"
39
31
  },
40
32
  below: {
41
- B7hvi0a: "f1oiokrs"
33
+ Bxotwcr: "f1nkeedh",
34
+ B7hvi0a: "f1oiokrs",
35
+ Budl1dq: "f1emgwh2"
42
36
  },
43
37
  media: {
44
38
  Ijaq50: "f1hek2iy"
@@ -78,7 +72,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
78
72
  Ijaq50: "f1tuwaia"
79
73
  }
80
74
  }, {
81
- d: [".fwk3njj{display:inline-grid;}", ".fvtn1bl{grid-auto-rows:max-content;}", ".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".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;}", ".fa4dipu{grid-row-start:span 6;}", ".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;}", ".f1ryq6si{margin-top:-2px;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
75
+ d: [".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1nkeedh{grid-auto-flow:unset;}", ".f1oiokrs{justify-items:center;}", ".f1emgwh2{grid-template-columns:unset;}", ".f1hek2iy{grid-row-start:span 5;}", ".fa4dipu{grid-row-start:span 6;}", ".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;}", ".f1ryq6si{margin-top:-2px;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
82
76
  });
83
77
  const useAvatarSpacingStyles = /*#__PURE__*/react_1.__styles({
84
78
  "extra-small": {
@@ -134,13 +128,14 @@ const usePersonaStyles_unstable = state => {
134
128
  primaryTextClassName,
135
129
  optionalTextClassName
136
130
  } = useTextClassNames(state, alignToPrimary);
131
+ const rootClassName = useRootClassName();
137
132
  const styles = useStyles();
138
133
  const avatarSpacingStyles = useAvatarSpacingStyles();
139
134
  const presenceSpacingStyles = {
140
135
  ...avatarSpacingStyles,
141
136
  ...usePresenceSpacingStyles()
142
137
  };
143
- state.root.className = react_1.mergeClasses(exports.personaClassNames.root, styles.base, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
138
+ state.root.className = react_1.mergeClasses(exports.personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
144
139
  if (state.avatar) {
145
140
  state.avatar.className = react_1.mergeClasses(exports.personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
146
141
  }
@@ -162,16 +157,9 @@ const usePersonaStyles_unstable = state => {
162
157
  return state;
163
158
  };
164
159
  exports.usePersonaStyles_unstable = usePersonaStyles_unstable;
160
+ const usePrimaryTextBaseClassName = /*#__PURE__*/react_1.__resetStyles("rvj41k9", null, [".rvj41k9{display:block;color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
161
+ const useOptionalTextBaseClassName = /*#__PURE__*/react_1.__resetStyles("rp1pf9e", null, [".rp1pf9e{display:block;color:var(--colorNeutralForeground2);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
165
162
  const useTextStyles = /*#__PURE__*/react_1.__styles({
166
- base: {
167
- mc9l5x: "ftgm304"
168
- },
169
- primaryText: {
170
- sj55zd: "f19n0e5"
171
- },
172
- optionalText: {
173
- sj55zd: "fkfq4zb"
174
- },
175
163
  beforeAlignToPrimary: {
176
164
  Bw0ie65: "f1warjpf"
177
165
  },
@@ -197,7 +185,7 @@ const useTextStyles = /*#__PURE__*/react_1.__styles({
197
185
  Bg96gwp: "faaz57k"
198
186
  }
199
187
  }, {
200
- d: [".ftgm304{display:block;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
188
+ d: [".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
201
189
  });
202
190
  const useTextClassNames = (state, alignToPrimary) => {
203
191
  const {
@@ -205,16 +193,16 @@ const useTextClassNames = (state, alignToPrimary) => {
205
193
  size,
206
194
  textPosition
207
195
  } = state;
196
+ const primaryTextBaseClassName = usePrimaryTextBaseClassName();
197
+ const optionalTextBaseClassName = useOptionalTextBaseClassName();
208
198
  const textStyles = useTextStyles();
209
199
  let primaryTextSize;
210
200
  let alignToPrimaryClassName;
211
201
  if (presenceOnly) {
212
202
  if (size === 'extra-small') {
213
- primaryTextSize = state.numTextLines > 1 ? textStyles.body1 : textStyles.caption1;
203
+ primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
214
204
  } else if (size === 'extra-large' || size === 'huge') {
215
205
  primaryTextSize = textStyles.subtitle2;
216
- } else {
217
- primaryTextSize = textStyles.body1;
218
206
  }
219
207
  if (alignToPrimary) {
220
208
  if (textPosition === 'before') {
@@ -228,13 +216,11 @@ const useTextClassNames = (state, alignToPrimary) => {
228
216
  primaryTextSize = textStyles.subtitle2;
229
217
  } else if (size === 'extra-large') {
230
218
  primaryTextSize = textStyles.subtitle2;
231
- } else {
232
- primaryTextSize = textStyles.body1;
233
219
  }
234
220
  }
235
221
  return {
236
- primaryTextClassName: react_1.mergeClasses(textStyles.base, textStyles.primaryText, primaryTextSize, alignToPrimaryClassName),
237
- optionalTextClassName: react_1.mergeClasses(textStyles.base, textStyles.optionalText, !presenceOnly && size === 'huge' ? textStyles.body1 : textStyles.caption1, alignToPrimaryClassName)
222
+ primaryTextClassName: react_1.mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
223
+ optionalTextClassName: react_1.mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
238
224
  };
239
225
  };
240
226
  //# sourceMappingURL=usePersonaStyles.js.map
package/lib-commonjs/components/Persona/usePersonaStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":";;;;;;AAAA;AACA;AAIaA,yBAAiB,GAAiC;EAC7DC,IAAI,EAAE,aAAa;EACnBC,MAAM,EAAE,qBAAqB;EAC7BC,QAAQ,EAAE,uBAAuB;EACjCC,WAAW,EAAE,0BAA0B;EACvCC,aAAa,EAAE,4BAA4B;EAC3CC,YAAY,EAAE,2BAA2B;EACzCC,cAAc,EAAE;CACjB;AAED,MAAMC,aAAa,GAAG,gCAAgC;AAEtD;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA4D1B;AAEF,MAAMC,sBAAsB,gBAAGD,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA4BvC;AAEF,MAAME,wBAAwB,gBAAGF,gBAAU;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAIzC;AAEF;;;AAGO,MAAMG,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAM;IAAEC,YAAY;IAAEC,IAAI;IAAEC,aAAa;IAAEC;EAAY,CAAE,GAAGJ,KAAK;EAEjE,MAAMK,cAAc,GAAGJ,YAAY,IAAIE,aAAa,KAAK,OAAO,IAAID,IAAI,KAAK,aAAa,IAAIA,IAAI,KAAK,MAAM;EAC7G,MAAMI,sBAAsB,GAAGF,YAAY,KAAK,OAAO,IAAID,aAAa,KAAK,QAAQ;EACrF,MAAM;IAAEI,oBAAoB;IAAEC;EAAqB,CAAE,GAAGC,iBAAiB,CAACT,KAAK,EAAEK,cAAc,CAAC;EAEhG,MAAMK,MAAM,GAAGf,SAAS,EAAE;EAC1B,MAAMgB,mBAAmB,GAAGd,sBAAsB,EAAE;EACpD,MAAMe,qBAAqB,GAAG;IAAE,GAAGD,mBAAmB;IAAE,GAAGb,wBAAwB;EAAE,CAAE;EAEvFE,KAAK,CAACb,IAAI,CAAC0B,SAAS,GAAGjB,oBAAY,CACjCV,yBAAiB,CAACC,IAAI,EACtBuB,MAAM,CAACI,IAAI,EACXR,sBAAsB,IAAII,MAAM,CAACK,iBAAiB,EAClDL,MAAM,CAACN,YAAY,CAAC,EACpBJ,KAAK,CAACb,IAAI,CAAC0B,SAAS,CACrB;EAED,IAAIb,KAAK,CAACZ,MAAM,EAAE;IAChBY,KAAK,CAACZ,MAAM,CAACyB,SAAS,GAAGjB,oBAAY,CACnCV,yBAAiB,CAACE,MAAM,EACxBgB,YAAY,KAAK,OAAO,IAAIM,MAAM,CAACM,KAAK,EACxCV,sBAAsB,IAAII,MAAM,CAACO,sBAAsB,EACvDP,MAAM,CAACP,aAAa,CAAC,EACrBQ,mBAAmB,CAACT,IAAI,CAAC,EACzBS,mBAAmB,CAACP,YAAY,CAAC,EACjCJ,KAAK,CAACZ,MAAM,CAACyB,SAAS,CACvB;;EAGH,IAAIb,KAAK,CAACX,QAAQ,EAAE;IAClBW,KAAK,CAACX,QAAQ,CAACwB,SAAS,GAAGjB,oBAAY,CACrCV,yBAAiB,CAACG,QAAQ,EAC1Be,YAAY,KAAK,OAAO,IAAIM,MAAM,CAACM,KAAK,EACxCV,sBAAsB,IAAII,MAAM,CAACO,sBAAsB,EACvDP,MAAM,CAACP,aAAa,CAAC,EACrBS,qBAAqB,CAACV,IAAI,CAAC,EAC3BU,qBAAqB,CAACR,YAAY,CAAC,EACnCA,YAAY,KAAK,OAAO,IAAIC,cAAc,IAAIK,MAAM,CAACQ,mBAAmB,EACxEd,YAAY,KAAK,QAAQ,IAAIC,cAAc,IAAIK,MAAM,CAACS,oBAAoB,EAC1EnB,KAAK,CAACX,QAAQ,CAACwB,SAAS,CACzB;;EAGH,IAAIb,KAAK,CAACV,WAAW,EAAE;IACrBU,KAAK,CAACV,WAAW,CAACuB,SAAS,GAAGjB,oBAAY,CACxCV,yBAAiB,CAACI,WAAW,EAC7BgB,sBAAsB,IAAII,MAAM,CAACU,OAAO,EACxCb,oBAAoB,EACpBP,KAAK,CAACV,WAAW,CAACuB,SAAS,CAC5B;;EAGH,IAAIb,KAAK,CAACT,aAAa,EAAE;IACvBS,KAAK,CAACT,aAAa,CAACsB,SAAS,GAAGjB,oBAAY,CAC1CV,yBAAiB,CAACK,aAAa,EAC/Be,sBAAsB,IAAII,MAAM,CAACW,SAAS,EAC1Cb,qBAAqB,EACrBE,MAAM,CAACY,iBAAiB,EACxBtB,KAAK,CAACT,aAAa,CAACsB,SAAS,CAC9B;;EAGH,IAAIb,KAAK,CAACR,YAAY,EAAE;IACtBQ,KAAK,CAACR,YAAY,CAACqB,SAAS,GAAGjB,oBAAY,CACzCV,yBAAiB,CAACM,YAAY,EAC9Bc,sBAAsB,IAAII,MAAM,CAACa,QAAQ,EACzCf,qBAAqB,EACrBR,KAAK,CAACR,YAAY,CAACqB,SAAS,CAC7B;;EAGH,IAAIb,KAAK,CAACP,cAAc,EAAE;IACxBO,KAAK,CAACP,cAAc,CAACoB,SAAS,GAAGjB,oBAAY,CAC3CV,yBAAiB,CAACO,cAAc,EAChCa,sBAAsB,IAAII,MAAM,CAACc,UAAU,EAC3ChB,qBAAqB,EACrBR,KAAK,CAACP,cAAc,CAACoB,SAAS,CAC/B;;EAGH,OAAOb,KAAK;AACd,CAAC;AAnFYd,iCAAyB;AAqFtC,MAAMuC,aAAa,gBAAG7B,gBAAU;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAqB9B;AAEF,MAAMa,iBAAiB,GAAG,CACxBT,KAAmB,EACnBK,cAAuB,KAIrB;EACF,MAAM;IAAEJ,YAAY;IAAEC,IAAI;IAAEE;EAAY,CAAE,GAAGJ,KAAK;EAClD,MAAM0B,UAAU,GAAGD,aAAa,EAAE;EAElC,IAAIE,eAAe;EACnB,IAAIC,uBAAuB;EAE3B,IAAI3B,YAAY,EAAE;IAChB,IAAIC,IAAI,KAAK,aAAa,EAAE;MAC1ByB,eAAe,GAAG3B,KAAK,CAAC6B,YAAY,GAAG,CAAC,GAAGH,UAAU,CAACI,KAAK,GAAGJ,UAAU,CAACK,QAAQ;KAClF,MAAM,IAAI7B,IAAI,KAAK,aAAa,IAAIA,IAAI,KAAK,MAAM,EAAE;MACpDyB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM;MACLL,eAAe,GAAGD,UAAU,CAACI,KAAK;;IAGpC,IAAIzB,cAAc,EAAE;MAClB,IAAID,YAAY,KAAK,QAAQ,EAAE;QAC7BwB,uBAAuB,GAAGF,UAAU,CAACP,oBAAoB;OAC1D,MAAM,IAAIf,YAAY,KAAK,OAAO,EAAE;QACnCwB,uBAAuB,GAAGF,UAAU,CAACR,mBAAmB;;;GAG7D,MAAM;IACL,IAAIhB,IAAI,KAAK,MAAM,EAAE;MACnByB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM,IAAI9B,IAAI,KAAK,aAAa,EAAE;MACjCyB,eAAe,GAAGD,UAAU,CAACM,SAAS;KACvC,MAAM;MACLL,eAAe,GAAGD,UAAU,CAACI,KAAK;;;EAItC,OAAO;IACLvB,oBAAoB,EAAEX,oBAAY,CAChC8B,UAAU,CAACZ,IAAI,EACfY,UAAU,CAACpC,WAAW,EACtBqC,eAAe,EACfC,uBAAuB,CACxB;IACDpB,qBAAqB,EAAEZ,oBAAY,CACjC8B,UAAU,CAACZ,IAAI,EACfY,UAAU,CAACO,YAAY,EACvB,CAAChC,YAAY,IAAIC,IAAI,KAAK,MAAM,GAAGwB,UAAU,CAACI,KAAK,GAAGJ,UAAU,CAACK,QAAQ,EACzEH,uBAAuB;GAE1B;AACH,CAAC","names":["exports","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useStyles","react_1","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","styles","avatarSpacingStyles","presenceSpacingStyles","className","base","beforeAfterCenter","media","mediaBeforeAfterCenter","afterAlignToPrimary","beforeAlignToPrimary","primary","secondary","secondLineSpacing","tertiary","quaternary","useTextStyles","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","body1","caption1","subtitle2","optionalText"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"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 beforeAfterCenter: {\n // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n gridTemplateRows:\n '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\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\n media: {\n gridRowStart: 'span 5',\n },\n\n mediaBeforeAfterCenter: {\n gridRowStart: 'span 6',\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 secondLineSpacing: {\n marginTop: '-2px',\n },\n\n primary: { gridRowStart: 'primary' },\n secondary: { gridRowStart: 'secondary' },\n tertiary: { gridRowStart: 'tertiary' },\n quaternary: { gridRowStart: 'quaternary' },\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 alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\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 alignBeforeAfterCenter && styles.beforeAfterCenter,\n styles[textPosition],\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\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 textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\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 alignBeforeAfterCenter && styles.primary,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n alignBeforeAfterCenter && styles.secondary,\n optionalTextClassName,\n styles.secondLineSpacing,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n alignBeforeAfterCenter && styles.tertiary,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n alignBeforeAfterCenter && styles.quaternary,\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"]}
1
+ {"version":3,"mappings":"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","names":["exports","root","avatar","presence","primaryText","secondaryText","tertiaryText","quaternaryText","avatarSpacing","useRootClassName","react_1","useStyles","useAvatarSpacingStyles","usePresenceSpacingStyles","usePersonaStyles_unstable","state","presenceOnly","size","textAlignment","textPosition","alignToPrimary","alignBeforeAfterCenter","primaryTextClassName","optionalTextClassName","useTextClassNames","rootClassName","styles","avatarSpacingStyles","presenceSpacingStyles","className","beforeAfterCenter","media","mediaBeforeAfterCenter","afterAlignToPrimary","beforeAlignToPrimary","primary","secondary","secondLineSpacing","tertiary","quaternary","usePrimaryTextBaseClassName","useOptionalTextBaseClassName","useTextStyles","primaryTextBaseClassName","optionalTextBaseClassName","textStyles","primaryTextSize","alignToPrimaryClassName","numTextLines","caption1","subtitle2","body1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-persona/src/components/Persona/usePersonaStyles.ts"],"sourcesContent":["import { makeResetStyles, 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\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridAutoRows: 'max-content',\n gridAutoFlow: 'column',\n justifyItems: 'start',\n gridTemplateColumns: 'max-content [middle] auto',\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n beforeAfterCenter: {\n // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines\n gridTemplateRows:\n '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr',\n },\n\n after: {\n // Intentionally empty\n },\n before: {\n justifyItems: 'end',\n gridTemplateColumns: 'auto [middle] max-content',\n },\n below: {\n gridAutoFlow: 'unset',\n justifyItems: 'center',\n gridTemplateColumns: 'unset',\n },\n\n media: {\n gridRowStart: 'span 5',\n },\n\n mediaBeforeAfterCenter: {\n gridRowStart: 'span 6',\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 secondLineSpacing: {\n marginTop: '-2px',\n },\n\n primary: { gridRowStart: 'primary' },\n secondary: { gridRowStart: 'secondary' },\n tertiary: { gridRowStart: 'tertiary' },\n quaternary: { gridRowStart: 'quaternary' },\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 alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';\n const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);\n\n const rootClassName = useRootClassName();\n const styles = useStyles();\n const avatarSpacingStyles = useAvatarSpacingStyles();\n const presenceSpacingStyles = { ...avatarSpacingStyles, ...usePresenceSpacingStyles() };\n\n state.root.className = mergeClasses(\n personaClassNames.root,\n rootClassName,\n alignBeforeAfterCenter && styles.beforeAfterCenter,\n styles[textPosition],\n state.root.className,\n );\n\n if (state.avatar) {\n state.avatar.className = mergeClasses(\n personaClassNames.avatar,\n textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\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 textPosition !== 'below' && styles.media,\n alignBeforeAfterCenter && styles.mediaBeforeAfterCenter,\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 alignBeforeAfterCenter && styles.primary,\n primaryTextClassName,\n state.primaryText.className,\n );\n }\n\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n personaClassNames.secondaryText,\n alignBeforeAfterCenter && styles.secondary,\n optionalTextClassName,\n styles.secondLineSpacing,\n state.secondaryText.className,\n );\n }\n\n if (state.tertiaryText) {\n state.tertiaryText.className = mergeClasses(\n personaClassNames.tertiaryText,\n alignBeforeAfterCenter && styles.tertiary,\n optionalTextClassName,\n state.tertiaryText.className,\n );\n }\n\n if (state.quaternaryText) {\n state.quaternaryText.className = mergeClasses(\n personaClassNames.quaternaryText,\n alignBeforeAfterCenter && styles.quaternary,\n optionalTextClassName,\n state.quaternaryText.className,\n );\n }\n\n return state;\n};\n\nconst usePrimaryTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n});\n\nconst useOptionalTextBaseClassName = makeResetStyles({\n display: 'block',\n color: tokens.colorNeutralForeground2,\n ...typographyStyles.caption1,\n});\n\nconst useTextStyles = makeStyles({\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 primaryTextBaseClassName = usePrimaryTextBaseClassName();\n const optionalTextBaseClassName = useOptionalTextBaseClassName();\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.caption1;\n } else if (size === 'extra-large' || size === 'huge') {\n primaryTextSize = textStyles.subtitle2;\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 }\n }\n\n return {\n primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),\n optionalTextClassName: mergeClasses(\n optionalTextBaseClassName,\n !presenceOnly && size === 'huge' && textStyles.body1,\n alignToPrimaryClassName,\n ),\n };\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-persona",
3
- "version": "0.0.0-nightly-20230213-0421.1",
3
+ "version": "0.0.0-nightly-20230215-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,15 +27,15 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230213-0421.1",
30
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230215-0425.1",
31
31
  "@fluentui/scripts-api-extractor": "*",
32
32
  "@fluentui/scripts-tasks": "*"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-avatar": "0.0.0-nightly-20230213-0421.1",
36
- "@fluentui/react-badge": "0.0.0-nightly-20230213-0421.1",
37
- "@fluentui/react-theme": "0.0.0-nightly-20230213-0421.1",
38
- "@fluentui/react-utilities": "0.0.0-nightly-20230213-0421.1",
35
+ "@fluentui/react-avatar": "0.0.0-nightly-20230215-0425.1",
36
+ "@fluentui/react-badge": "0.0.0-nightly-20230215-0425.1",
37
+ "@fluentui/react-theme": "0.0.0-nightly-20230215-0425.1",
38
+ "@fluentui/react-utilities": "0.0.0-nightly-20230215-0425.1",
39
39
  "@griffel/react": "^1.5.2",
40
40
  "tslib": "^2.1.0"
41
41
  },