@fluentui/react-avatar 9.2.4 → 9.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +179 -1
- package/CHANGELOG.md +42 -2
- package/README-AvatarGroup.md +0 -10
- package/lib/components/Avatar/useAvatarStyles.js +83 -87
- package/lib/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js +5 -96
- package/lib/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js +3 -1
- package/lib/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +1 -1
- package/lib/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Avatar/useAvatarStyles.js +83 -87
- package/lib-commonjs/components/Avatar/useAvatarStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js +5 -96
- package/lib-commonjs/components/AvatarGroupItem/useAvatarGroupItemStyles.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js +3 -1
- package/lib-commonjs/components/AvatarGroupPopover/renderAvatarGroupPopover.js.map +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js +1 -1
- package/lib-commonjs/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.js.map +1 -1
- package/lib-commonjs/index.js +9 -9
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +15 -14
- package/MIGRATION.md +0 -106
- package/SPEC-AvatarGroup.md +0 -203
- package/SPEC.md +0 -172
|
@@ -84,83 +84,14 @@ const useOverflowLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
|
84
84
|
|
|
85
85
|
|
|
86
86
|
const useStackStyles = /*#__PURE__*/react_1.__styles({
|
|
87
|
-
"base": {
|
|
88
|
-
"Bsft5z2": "f1iwjod4",
|
|
89
|
-
"E3zdtr": "f1mdlcz9",
|
|
90
|
-
"ap17g6": "f15zbnnk",
|
|
91
|
-
"B0n5ga8": "f1de97fc",
|
|
92
|
-
"s924m2": ["fnkdar3", "f1rue1y9"],
|
|
93
|
-
"B1q35kw": "f6bjq4p",
|
|
94
|
-
"Gp14am": ["f1rue1y9", "fnkdar3"],
|
|
95
|
-
"B3778ie": ["fprarqb", "f14vs0nd"],
|
|
96
|
-
"d9w3h3": ["f14vs0nd", "fprarqb"],
|
|
97
|
-
"Bl18szs": ["f1gtfqs9", "f18zvfd9"],
|
|
98
|
-
"B4j8arr": ["f18zvfd9", "f1gtfqs9"],
|
|
99
|
-
"Bm2nyyq": "f8rth92",
|
|
100
|
-
"Barhvk9": ["flthirb", "ftkbnf5"],
|
|
101
|
-
"Bw17bha": "f1lh990p",
|
|
102
|
-
"vfts7": ["ftkbnf5", "flthirb"],
|
|
103
|
-
"qx5q1e": "f1dpauah"
|
|
104
|
-
},
|
|
105
|
-
"overflowButton": {
|
|
106
|
-
"Bc0dv0h": "f1o149bd",
|
|
107
|
-
"Bt0nq95": ["f1xgvrhv", "f34pcxu"],
|
|
108
|
-
"Bte176d": "f9nu0bd",
|
|
109
|
-
"Buo7p3s": ["f34pcxu", "f1xgvrhv"]
|
|
110
|
-
},
|
|
111
87
|
"thick": {
|
|
112
|
-
"
|
|
113
|
-
"Dlnsje": "f5o33kw",
|
|
114
|
-
"Eqx8gd": ["f5kz84h", "f8jassg"],
|
|
115
|
-
"bn5sak": "f1oigyhu",
|
|
116
|
-
"xrcqlc": "fozawe0",
|
|
117
|
-
"Ihftqj": ["f15gmigz", "f11o3tup"],
|
|
118
|
-
"Bcgy8vk": "f14pi962",
|
|
119
|
-
"Bhxzhr1": ["f11o3tup", "f15gmigz"]
|
|
88
|
+
"E5pizo": "foiuzp5"
|
|
120
89
|
},
|
|
121
90
|
"thicker": {
|
|
122
|
-
"
|
|
123
|
-
"Dlnsje": "f5o33kw",
|
|
124
|
-
"Eqx8gd": ["f1f2c3j3", "f1g5d141"],
|
|
125
|
-
"bn5sak": "f1vvl5ts",
|
|
126
|
-
"xrcqlc": "f1gbh4dy",
|
|
127
|
-
"Ihftqj": ["f1os6oqe", "f4y7ea8"],
|
|
128
|
-
"Bcgy8vk": "f1a3lyng",
|
|
129
|
-
"Bhxzhr1": ["f4y7ea8", "f1os6oqe"]
|
|
91
|
+
"E5pizo": "f1x6o7w7"
|
|
130
92
|
},
|
|
131
93
|
"thickest": {
|
|
132
|
-
"
|
|
133
|
-
"Dlnsje": "f5o33kw",
|
|
134
|
-
"Eqx8gd": ["fueot05", "f1mir6xb"],
|
|
135
|
-
"bn5sak": "f1izs6vq",
|
|
136
|
-
"xrcqlc": "f15ae8rs",
|
|
137
|
-
"Ihftqj": ["f1c7xjog", "fn35eni"],
|
|
138
|
-
"Bcgy8vk": "f9v1pvc",
|
|
139
|
-
"Bhxzhr1": ["fn35eni", "f1c7xjog"]
|
|
140
|
-
},
|
|
141
|
-
"borderThin": {
|
|
142
|
-
"a2br6o": "fe2wxzu",
|
|
143
|
-
"Dlnsje": "fcr18t3",
|
|
144
|
-
"Eqx8gd": ["fhjhgwu", "fh9v7u1"],
|
|
145
|
-
"bn5sak": "f1mqssek"
|
|
146
|
-
},
|
|
147
|
-
"borderThick": {
|
|
148
|
-
"a2br6o": "f19rfb2x",
|
|
149
|
-
"Dlnsje": "fk4cr37",
|
|
150
|
-
"Eqx8gd": ["foc71j7", "f1xoeo06"],
|
|
151
|
-
"bn5sak": "fd6iyyb"
|
|
152
|
-
},
|
|
153
|
-
"borderThicker": {
|
|
154
|
-
"a2br6o": "f1byqz6t",
|
|
155
|
-
"Dlnsje": "fdqxnrd",
|
|
156
|
-
"Eqx8gd": ["f1x8rm7i", "ftx9300"],
|
|
157
|
-
"bn5sak": "f13zu3lb"
|
|
158
|
-
},
|
|
159
|
-
"borderThickest": {
|
|
160
|
-
"a2br6o": "f1i9snzy",
|
|
161
|
-
"Dlnsje": "f19z50l7",
|
|
162
|
-
"Eqx8gd": ["f1fgc9m6", "f1d4bgoy"],
|
|
163
|
-
"bn5sak": "fkll7mr"
|
|
94
|
+
"E5pizo": "f2aml1u"
|
|
164
95
|
},
|
|
165
96
|
"xxs": {
|
|
166
97
|
"jhia2w": ["f1cjco14", "f13dxjc9"]
|
|
@@ -175,11 +106,7 @@ const useStackStyles = /*#__PURE__*/react_1.__styles({
|
|
|
175
106
|
"jhia2w": ["flv48ch", "fnh1ydj"]
|
|
176
107
|
}
|
|
177
108
|
}, {
|
|
178
|
-
"d": [".
|
|
179
|
-
"m": [["@media (forced-colors: active){.f1dpauah::after{forced-color-adjust:none;}}", {
|
|
180
|
-
"m": "(forced-colors: active)"
|
|
181
|
-
}]],
|
|
182
|
-
"f": [".f1o149bd:focus::after{border-top-color:transparent;}", ".f1xgvrhv:focus::after{border-right-color:transparent;}", ".f34pcxu:focus::after{border-left-color:transparent;}", ".f9nu0bd:focus::after{border-bottom-color:transparent;}"]
|
|
109
|
+
"d": [".foiuzp5{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground2);}", ".f1x6o7w7{box-shadow:0 0 0 var(--strokeWidthThicker) var(--colorNeutralBackground2);}", ".f2aml1u{box-shadow:0 0 0 var(--strokeWidthThickest) var(--colorNeutralBackground2);}", ".f1cjco14:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXXS));}", ".f13dxjc9:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXXS));}", ".f15p6bln:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalXS));}", ".f1bab3ru:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalXS));}", ".f1v53ncc:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalS));}", ".f17pu8r8:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalS));}", ".flv48ch:not(:first-child){margin-left:calc(-1 * var(--spacingHorizontalL));}", ".fnh1ydj:not(:first-child){margin-right:calc(-1 * var(--spacingHorizontalL));}"]
|
|
183
110
|
});
|
|
184
111
|
/**
|
|
185
112
|
* Styles for the spread layout
|
|
@@ -300,37 +227,19 @@ exports.useAvatarGroupItemStyles_unstable = useAvatarGroupItemStyles_unstable;
|
|
|
300
227
|
* needed for each layout.
|
|
301
228
|
*/
|
|
302
229
|
|
|
303
|
-
const useGroupChildClassName = (layout, size
|
|
230
|
+
const useGroupChildClassName = (layout, size) => {
|
|
304
231
|
const stackStyles = useStackStyles();
|
|
305
232
|
const spreadStyles = useSpreadStyles();
|
|
306
233
|
const layoutClasses = [];
|
|
307
234
|
|
|
308
235
|
if (size) {
|
|
309
236
|
if (layout === 'stack') {
|
|
310
|
-
layoutClasses.push(stackStyles.base);
|
|
311
|
-
|
|
312
237
|
if (size < 56) {
|
|
313
238
|
layoutClasses.push(stackStyles.thick);
|
|
314
239
|
} else if (size < 72) {
|
|
315
240
|
layoutClasses.push(stackStyles.thicker);
|
|
316
241
|
} else {
|
|
317
242
|
layoutClasses.push(stackStyles.thickest);
|
|
318
|
-
} // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width
|
|
319
|
-
// since the ::after pseudo-element doesn't take the overflowButton's border for its size.
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
if (isOverflowButton) {
|
|
323
|
-
layoutClasses.push(stackStyles.overflowButton);
|
|
324
|
-
|
|
325
|
-
if (size < 36) {
|
|
326
|
-
layoutClasses.push(stackStyles.borderThin);
|
|
327
|
-
} else if (size < 56) {
|
|
328
|
-
layoutClasses.push(stackStyles.borderThick);
|
|
329
|
-
} else if (size < 72) {
|
|
330
|
-
layoutClasses.push(stackStyles.borderThicker);
|
|
331
|
-
} else {
|
|
332
|
-
layoutClasses.push(stackStyles.borderThickest);
|
|
333
|
-
}
|
|
334
243
|
}
|
|
335
244
|
|
|
336
245
|
if (size < 24) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSizes } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative',\n },\n overflowItem: {\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n },\n nonOverflowItem: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute',\n },\n pie: {\n ...shorthands.borderRadius(0),\n },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n base: {\n '&::after': {\n content: \"''\",\n position: 'absolute',\n display: 'inline-flex',\n // Border is used instead of outline due to a bug in webkit browsers where border-radius is ignored in outline.\n ...shorthands.borderColor(tokens.colorNeutralBackground2),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n },\n },\n },\n overflowButton: {\n '&:focus::after': {\n ...shorthands.borderColor('transparent'),\n },\n },\n thick: {\n '&::after': {\n width: '100%',\n height: '100%',\n left: `calc(-1 * ${tokens.strokeWidthThick})`,\n top: `calc(-1 * ${tokens.strokeWidthThick})`,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n thicker: {\n '&::after': {\n width: '100%',\n height: '100%',\n left: `calc(-1 * ${tokens.strokeWidthThicker})`,\n top: `calc(-1 * ${tokens.strokeWidthThicker})`,\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n thickest: {\n '&::after': {\n width: '100%',\n height: '100%',\n left: `calc(-1 * ${tokens.strokeWidthThickest})`,\n top: `calc(-1 * ${tokens.strokeWidthThickest})`,\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n borderThin: {\n '&::after': {\n width: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n height: `calc(100% + ${tokens.strokeWidthThin} * 2)`,\n left: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n top: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,\n },\n },\n borderThick: {\n '&::after': {\n width: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n height: `calc(100% + ${tokens.strokeWidthThick} * 2)`,\n left: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n top: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,\n },\n },\n borderThicker: {\n '&::after': {\n width: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n height: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,\n left: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n top: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,\n },\n },\n borderThickest: {\n '&::after': {\n width: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n height: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,\n left: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n top: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,\n },\n },\n xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n base: {\n position: 'absolute',\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%',\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n },\n thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n const { isOverflowItem, layout, size } = state;\n\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size);\n\n const rootClasses = [rootStyles.base];\n\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n\n rootClasses.push(pieStyles.slices);\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n state.avatar.className = mergeClasses(\n avatarGroupItemClassNames.avatar,\n !isOverflowItem && avatarStyles.nonOverflowItem,\n layout === 'pie' && avatarStyles.pie,\n state.avatar.className,\n );\n\n if (state.overflowLabel) {\n state.overflowLabel.className = mergeClasses(\n avatarGroupItemClassNames.overflowLabel,\n overflowLabelStyles.base,\n state.overflowLabel.className,\n );\n }\n\n return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (\n layout: AvatarGroupProps['layout'],\n size: AvatarSizes,\n isOverflowButton?: boolean,\n): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\n layoutClasses.push(stackStyles.base);\n\n if (size < 56) {\n layoutClasses.push(stackStyles.thick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.thicker);\n } else {\n layoutClasses.push(stackStyles.thickest);\n }\n\n // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width\n // since the ::after pseudo-element doesn't take the overflowButton's border for its size.\n if (isOverflowButton) {\n layoutClasses.push(stackStyles.overflowButton);\n\n if (size < 36) {\n layoutClasses.push(stackStyles.borderThin);\n } else if (size < 56) {\n layoutClasses.push(stackStyles.borderThick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.borderThicker);\n } else {\n layoutClasses.push(stackStyles.borderThickest);\n }\n }\n\n if (size < 24) {\n layoutClasses.push(stackStyles.xxs);\n } else if (size < 48) {\n layoutClasses.push(stackStyles.xs);\n } else if (size < 96) {\n layoutClasses.push(stackStyles.s);\n } else {\n layoutClasses.push(stackStyles.l);\n }\n } else if (layout === 'spread') {\n if (size < 20) {\n layoutClasses.push(spreadStyles.s);\n } else if (size < 32) {\n layoutClasses.push(spreadStyles.mNudge);\n } else if (size < 64) {\n layoutClasses.push(spreadStyles.l);\n } else {\n layoutClasses.push(spreadStyles.xl);\n }\n }\n }\n\n return mergeClasses(...layoutClasses);\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useSizeStyles } from '../../Avatar';\nimport type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types';\nimport type { AvatarGroupProps } from '../../AvatarGroup';\nimport type { AvatarSizes } from '../../Avatar';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots> = {\n root: 'fui-AvatarGroupItem',\n avatar: 'fui-AvatarGroupItem__avatar',\n overflowLabel: 'fui-AvatarGroupItem__overflowLabel',\n};\n\nconst avatarGroupItemDividerWidthVar = '--fuiAvatarGroupItem__divider--width';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n flexShrink: 0,\n position: 'relative',\n },\n overflowItem: {\n ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS),\n },\n nonOverflowItem: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n});\n\n/**\n * Styles for the avatar slot\n */\nconst useAvatarStyles = makeStyles({\n nonOverflowItem: {\n position: 'absolute',\n },\n pie: {\n ...shorthands.borderRadius(0),\n },\n});\n\n/**\n * Styles for the label slot\n */\nconst useOverflowLabelStyles = makeStyles({\n base: {\n marginLeft: tokens.spacingHorizontalS,\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n },\n});\n\n/**\n * Styles for the stack layout\n */\nconst useStackStyles = makeStyles({\n thick: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,\n },\n thicker: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,\n },\n thickest: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,\n },\n xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },\n xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },\n s: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalS})` } },\n l: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalL})` } },\n});\n\n/**\n * Styles for the spread layout\n */\nconst useSpreadStyles = makeStyles({\n s: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalS } },\n mNudge: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalMNudge } },\n m: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalM } },\n l: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalL } },\n xl: { '&:not(:first-child)': { marginLeft: tokens.spacingHorizontalXL } },\n});\n\n/**\n * Styles for the pie layout\n */\nconst usePieStyles = makeStyles({\n base: {\n position: 'absolute',\n },\n slices: {\n // Two slices\n // 1st of 2 items\n '&:nth-of-type(1):nth-last-of-type(2)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 2 items\n '&:nth-of-type(2):nth-last-of-type(1)': {\n clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`,\n left: '25%',\n },\n\n // Three slices\n // 1st of 3 items\n '&:nth-of-type(1):nth-last-of-type(3)': {\n clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`,\n left: '-25%',\n },\n // 2nd of 3 items\n '&:nth-of-type(2):nth-last-of-type(2)': {\n // Since the two AvatarGroupItems on the right are scaled by 0.5, the divider width should not be halved.\n clipPath: `inset(0 0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n // 3rd of 3 items\n '&:nth-of-type(3):nth-last-of-type(1)': {\n clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) 0 0 var(${avatarGroupItemDividerWidthVar}))`,\n left: '50%',\n top: '50%',\n transform: 'scale(0.5)',\n transformOrigin: '0 0',\n },\n },\n thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick },\n thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker },\n thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest },\n});\n\n/**\n * Apply styling to the AvatarGroupItem slots based on the state\n */\nexport const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => {\n const { isOverflowItem, layout, size } = state;\n\n const avatarStyles = useAvatarStyles();\n const overflowLabelStyles = useOverflowLabelStyles();\n const pieStyles = usePieStyles();\n const rootStyles = useRootStyles();\n const sizeStyles = useSizeStyles();\n\n const groupChildClassName = useGroupChildClassName(layout, size);\n\n const rootClasses = [rootStyles.base];\n\n if (!isOverflowItem) {\n rootClasses.push(rootStyles.nonOverflowItem);\n rootClasses.push(groupChildClassName);\n rootClasses.push(sizeStyles[size]);\n\n if (layout === 'pie') {\n rootClasses.push(pieStyles.base);\n\n if (size < 56) {\n rootClasses.push(pieStyles.thick);\n } else if (size < 72) {\n rootClasses.push(pieStyles.thicker);\n } else {\n rootClasses.push(pieStyles.thickest);\n }\n\n rootClasses.push(pieStyles.slices);\n }\n } else {\n rootClasses.push(rootStyles.overflowItem);\n }\n\n state.root.className = mergeClasses(avatarGroupItemClassNames.root, ...rootClasses, state.root.className);\n\n state.avatar.className = mergeClasses(\n avatarGroupItemClassNames.avatar,\n !isOverflowItem && avatarStyles.nonOverflowItem,\n layout === 'pie' && avatarStyles.pie,\n state.avatar.className,\n );\n\n if (state.overflowLabel) {\n state.overflowLabel.className = mergeClasses(\n avatarGroupItemClassNames.overflowLabel,\n overflowLabelStyles.base,\n state.overflowLabel.className,\n );\n }\n\n return state;\n};\n\n/**\n * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines\n * needed for each layout.\n */\nexport const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSizes): string => {\n const stackStyles = useStackStyles();\n const spreadStyles = useSpreadStyles();\n const layoutClasses = [];\n\n if (size) {\n if (layout === 'stack') {\n if (size < 56) {\n layoutClasses.push(stackStyles.thick);\n } else if (size < 72) {\n layoutClasses.push(stackStyles.thicker);\n } else {\n layoutClasses.push(stackStyles.thickest);\n }\n\n if (size < 24) {\n layoutClasses.push(stackStyles.xxs);\n } else if (size < 48) {\n layoutClasses.push(stackStyles.xs);\n } else if (size < 96) {\n layoutClasses.push(stackStyles.s);\n } else {\n layoutClasses.push(stackStyles.l);\n }\n } else if (layout === 'spread') {\n if (size < 20) {\n layoutClasses.push(spreadStyles.s);\n } else if (size < 32) {\n layoutClasses.push(spreadStyles.mNudge);\n } else if (size < 64) {\n layoutClasses.push(spreadStyles.l);\n } else {\n layoutClasses.push(spreadStyles.xl);\n }\n }\n }\n\n return mergeClasses(...layoutClasses);\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -23,7 +23,9 @@ const renderAvatarGroupPopover_unstable = (state, contextValues) => {
|
|
|
23
23
|
slotProps
|
|
24
24
|
} = react_utilities_1.getSlots(state);
|
|
25
25
|
return React.createElement(slots.root, { ...slotProps.root
|
|
26
|
-
}, React.createElement(react_popover_1.PopoverTrigger,
|
|
26
|
+
}, React.createElement(react_popover_1.PopoverTrigger, {
|
|
27
|
+
disableButtonEnhancement: true
|
|
28
|
+
}, React.createElement(slots.tooltip, { ...slotProps.tooltip
|
|
27
29
|
}, React.createElement(slots.triggerButton, { ...slotProps.triggerButton
|
|
28
30
|
}))), React.createElement(slots.popoverSurface, { ...slotProps.popoverSurface
|
|
29
31
|
}, React.createElement(AvatarGroupContext_1.AvatarGroupProvider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACI,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,aAF+C,KAG7C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAkC,KAAlC,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,cAAD,EAAe,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAIA;;AAEG;;;AACI,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,aAF+C,KAG7C;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAkC,KAAlC,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,eAAA,CAAA,cAAD,EAAe;IAAC,wBAAwB,EAAA;EAAzB,CAAf,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,aAAP,EAAoB,EAAA,GAAK,SAAS,CAAC;EAAf,CAApB,CADF,CADF,CADF,EAME,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,cAAP,EAAqB,EAAA,GAAK,SAAS,CAAC;EAAf,CAArB,EACE,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,mBAAD,EAAoB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAApB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADF,CADF,CANF,CADF;AAcD,CApBM;;AAAM,OAAA,CAAA,iCAAA,GAAiC,iCAAjC","sourcesContent":["import * as React from 'react';\nimport { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';\nimport { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';\nimport { TooltipProps } from '@fluentui/react-tooltip';\nimport type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';\n\n/**\n * Render the final JSX of AvatarGroupPopover\n */\nexport const renderAvatarGroupPopover_unstable = (\n state: AvatarGroupPopoverState,\n contextValues: AvatarGroupContextValues,\n) => {\n const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);\n\n return (\n <slots.root {...(slotProps.root as PopoverProps)}>\n <PopoverTrigger disableButtonEnhancement>\n <slots.tooltip {...(slotProps.tooltip as TooltipProps)}>\n <slots.triggerButton {...slotProps.triggerButton} />\n </slots.tooltip>\n </PopoverTrigger>\n <slots.popoverSurface {...slotProps.popoverSurface}>\n <AvatarGroupProvider value={contextValues.avatarGroup}>\n <slots.content {...slotProps.content} />\n </AvatarGroupProvider>\n </slots.popoverSurface>\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -255,7 +255,7 @@ const useAvatarGroupPopoverStyles_unstable = state => {
|
|
|
255
255
|
const triggerButtonStyles = useTriggerButtonStyles();
|
|
256
256
|
const contentStyles = useContentStyles();
|
|
257
257
|
const popoverSurfaceStyles = usePopoverSurfaceStyles();
|
|
258
|
-
const groupChildClassName = useAvatarGroupItemStyles_1.useGroupChildClassName(layout, size
|
|
258
|
+
const groupChildClassName = useAvatarGroupItemStyles_1.useGroupChildClassName(layout, size);
|
|
259
259
|
const triggerButtonClasses = [];
|
|
260
260
|
|
|
261
261
|
if (size < 36) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots> = {\n root: 'fui-AvatarGroupPopover',\n content: 'fui-AvatarGroupPopover__content',\n popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',\n tooltip: 'fui-AvatarGroupPopover__tooltip',\n triggerButton: 'fui-AvatarGroupPopover__triggerButton',\n};\n\n/**\n * Styles for the content slot.\n */\nconst useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n ...shorthands.margin('0'),\n ...shorthands.padding('0'),\n },\n});\n\n/**\n * Styles for the popoverSurface slot.\n */\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n ...shorthands.overflow('hidden', 'scroll'),\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n width: '220px',\n },\n});\n\n/**\n * Styles for the triggerButton slot.\n */\nconst useTriggerButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.padding(0),\n\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n }),\n\n states: {\n '&:hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n '&:active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */\nexport const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverState): AvatarGroupPopoverState => {\n const { indicator, size, layout, popoverOpen } = state;\n const sizeStyles = useSizeStyles();\n const triggerButtonStyles = useTriggerButtonStyles();\n const contentStyles = useContentStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n const groupChildClassName = useGroupChildClassName(layout, size, true);\n\n const triggerButtonClasses = [];\n\n if (size < 36) {\n triggerButtonClasses.push(triggerButtonStyles.borderThin);\n } else if (size < 56) {\n triggerButtonClasses.push(triggerButtonStyles.borderThick);\n } else if (size < 72) {\n triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n }\n\n if (indicator === 'count') {\n if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n } else if (size <= 28) {\n triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n } else if (size <= 96) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n triggerButtonClasses.push(triggerButtonStyles.icon12);\n } else if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.icon16);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.icon20);\n } else if (size <= 48) {\n triggerButtonClasses.push(triggerButtonStyles.icon24);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.icon28);\n } else if (size <= 72) {\n triggerButtonClasses.push(triggerButtonStyles.icon32);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.icon48);\n }\n }\n\n state.triggerButton.className = mergeClasses(\n avatarGroupPopoverClassNames.triggerButton,\n groupChildClassName,\n sizeStyles[size],\n triggerButtonStyles.base,\n layout === 'pie' && triggerButtonStyles.pie,\n triggerButtonStyles.focusIndicator,\n layout !== 'pie' && triggerButtonStyles.states,\n layout !== 'pie' && popoverOpen && triggerButtonStyles.selected,\n ...triggerButtonClasses,\n state.triggerButton.className,\n );\n\n state.content.className = mergeClasses(\n avatarGroupPopoverClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n\n state.popoverSurface.className = mergeClasses(\n avatarGroupPopoverClassNames.popoverSurface,\n popoverSurfaceStyles.base,\n state.popoverSurface.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useGroupChildClassName } from '../AvatarGroupItem/useAvatarGroupItemStyles';\nimport { useSizeStyles } from '../Avatar/useAvatarStyles';\nimport type { AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarGroupPopoverClassNames: SlotClassNames<AvatarGroupPopoverSlots> = {\n root: 'fui-AvatarGroupPopover',\n content: 'fui-AvatarGroupPopover__content',\n popoverSurface: 'fui-AvatarGroupPopover__popoverSurface',\n tooltip: 'fui-AvatarGroupPopover__tooltip',\n triggerButton: 'fui-AvatarGroupPopover__triggerButton',\n};\n\n/**\n * Styles for the content slot.\n */\nconst useContentStyles = makeStyles({\n base: {\n listStyleType: 'none',\n ...shorthands.margin('0'),\n ...shorthands.padding('0'),\n },\n});\n\n/**\n * Styles for the popoverSurface slot.\n */\nconst usePopoverSurfaceStyles = makeStyles({\n base: {\n maxHeight: '220px',\n minHeight: '80px',\n ...shorthands.overflow('hidden', 'scroll'),\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n width: '220px',\n },\n});\n\n/**\n * Styles for the triggerButton slot.\n */\nconst useTriggerButtonStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.padding(0),\n\n // Match color to Avatar's outline color.\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('CanvasText'),\n },\n },\n\n pie: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n color: 'transparent',\n },\n\n focusIndicator: createCustomFocusIndicatorStyle({\n ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),\n }),\n\n states: {\n '&:hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n '&:active': {\n color: tokens.colorNeutralForeground1Pressed,\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n\n selected: {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n icon12: { fontSize: '12px' },\n icon16: { fontSize: '16px' },\n icon20: { fontSize: '20px' },\n icon24: { fontSize: '24px' },\n icon28: { fontSize: '28px' },\n icon32: { fontSize: '32px' },\n icon48: { fontSize: '48px' },\n caption2Strong: { ...typographyStyles.caption2Strong },\n caption1Strong: { ...typographyStyles.caption1Strong },\n body1Strong: { ...typographyStyles.body1Strong },\n subtitle2: { ...typographyStyles.subtitle2 },\n subtitle1: { ...typographyStyles.subtitle1 },\n title3: { ...typographyStyles.title3 },\n borderThin: { ...shorthands.borderWidth(tokens.strokeWidthThin) },\n borderThick: { ...shorthands.borderWidth(tokens.strokeWidthThick) },\n borderThicker: { ...shorthands.borderWidth(tokens.strokeWidthThicker) },\n borderThickest: { ...shorthands.borderWidth(tokens.strokeWidthThickest) },\n});\n\n/**\n * Apply styling to the AvatarGroupPopover slots based on the state\n */\nexport const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverState): AvatarGroupPopoverState => {\n const { indicator, size, layout, popoverOpen } = state;\n const sizeStyles = useSizeStyles();\n const triggerButtonStyles = useTriggerButtonStyles();\n const contentStyles = useContentStyles();\n const popoverSurfaceStyles = usePopoverSurfaceStyles();\n const groupChildClassName = useGroupChildClassName(layout, size);\n\n const triggerButtonClasses = [];\n\n if (size < 36) {\n triggerButtonClasses.push(triggerButtonStyles.borderThin);\n } else if (size < 56) {\n triggerButtonClasses.push(triggerButtonStyles.borderThick);\n } else if (size < 72) {\n triggerButtonClasses.push(triggerButtonStyles.borderThicker);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.borderThickest);\n }\n\n if (indicator === 'count') {\n if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.caption2Strong);\n } else if (size <= 28) {\n triggerButtonClasses.push(triggerButtonStyles.caption1Strong);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.body1Strong);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle2);\n } else if (size <= 96) {\n triggerButtonClasses.push(triggerButtonStyles.subtitle1);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.title3);\n }\n } else {\n if (size <= 16) {\n triggerButtonClasses.push(triggerButtonStyles.icon12);\n } else if (size <= 24) {\n triggerButtonClasses.push(triggerButtonStyles.icon16);\n } else if (size <= 40) {\n triggerButtonClasses.push(triggerButtonStyles.icon20);\n } else if (size <= 48) {\n triggerButtonClasses.push(triggerButtonStyles.icon24);\n } else if (size <= 56) {\n triggerButtonClasses.push(triggerButtonStyles.icon28);\n } else if (size <= 72) {\n triggerButtonClasses.push(triggerButtonStyles.icon32);\n } else {\n triggerButtonClasses.push(triggerButtonStyles.icon48);\n }\n }\n\n state.triggerButton.className = mergeClasses(\n avatarGroupPopoverClassNames.triggerButton,\n groupChildClassName,\n sizeStyles[size],\n triggerButtonStyles.base,\n layout === 'pie' && triggerButtonStyles.pie,\n triggerButtonStyles.focusIndicator,\n layout !== 'pie' && triggerButtonStyles.states,\n layout !== 'pie' && popoverOpen && triggerButtonStyles.selected,\n ...triggerButtonClasses,\n state.triggerButton.className,\n );\n\n state.content.className = mergeClasses(\n avatarGroupPopoverClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n\n state.popoverSurface.className = mergeClasses(\n avatarGroupPopoverClassNames.popoverSurface,\n popoverSurfaceStyles.base,\n state.popoverSurface.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useAvatarGroupContext_unstable = exports.useAvatarContext = exports.AvatarGroupProvider = exports.AvatarContextProvider = exports.useAvatarGroupPopover_unstable = exports.useAvatarGroupPopoverStyles_unstable = exports.renderAvatarGroupPopover_unstable = exports.avatarGroupPopoverClassNames = exports.AvatarGroupPopover = exports.useAvatarGroupItem_unstable = exports.useAvatarGroupItemStyles_unstable = exports.renderAvatarGroupItem_unstable = exports.avatarGroupItemClassNames = exports.AvatarGroupItem = exports.useAvatarGroup_unstable = exports.useAvatarGroupStyles_unstable = exports.useAvatarGroupContextValues = exports.renderAvatarGroup_unstable = exports.avatarGroupClassNames = exports.AvatarGroup = exports.partitionAvatarGroupItems = exports.getInitials = exports.useAvatar_unstable = exports.useAvatarStyles_unstable = exports.renderAvatar_unstable = exports.avatarClassNames = exports.Avatar = void 0;
|
|
7
7
|
|
|
8
8
|
var Avatar_1 = /*#__PURE__*/require("./Avatar");
|
|
9
9
|
|
|
@@ -160,28 +160,28 @@ Object.defineProperty(exports, "useAvatarGroupPopover_unstable", {
|
|
|
160
160
|
|
|
161
161
|
var index_2 = /*#__PURE__*/require("./contexts/index");
|
|
162
162
|
|
|
163
|
-
Object.defineProperty(exports, "
|
|
163
|
+
Object.defineProperty(exports, "AvatarContextProvider", {
|
|
164
164
|
enumerable: true,
|
|
165
165
|
get: function () {
|
|
166
|
-
return index_2.
|
|
166
|
+
return index_2.AvatarContextProvider;
|
|
167
167
|
}
|
|
168
168
|
});
|
|
169
|
-
Object.defineProperty(exports, "
|
|
169
|
+
Object.defineProperty(exports, "AvatarGroupProvider", {
|
|
170
170
|
enumerable: true,
|
|
171
171
|
get: function () {
|
|
172
|
-
return index_2.
|
|
172
|
+
return index_2.AvatarGroupProvider;
|
|
173
173
|
}
|
|
174
174
|
});
|
|
175
|
-
Object.defineProperty(exports, "
|
|
175
|
+
Object.defineProperty(exports, "useAvatarContext", {
|
|
176
176
|
enumerable: true,
|
|
177
177
|
get: function () {
|
|
178
|
-
return index_2.
|
|
178
|
+
return index_2.useAvatarContext;
|
|
179
179
|
}
|
|
180
180
|
});
|
|
181
|
-
Object.defineProperty(exports, "
|
|
181
|
+
Object.defineProperty(exports, "useAvatarGroupContext_unstable", {
|
|
182
182
|
enumerable: true,
|
|
183
183
|
get: function () {
|
|
184
|
-
return index_2.
|
|
184
|
+
return index_2.useAvatarGroupContext_unstable;
|
|
185
185
|
}
|
|
186
186
|
});
|
|
187
187
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-avatar/src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-avatar/src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n Avatar,\n avatarClassNames,\n renderAvatar_unstable,\n useAvatarStyles_unstable,\n useAvatar_unstable,\n} from './Avatar';\nexport type { AvatarNamedColor, AvatarProps, AvatarSlots, AvatarState, AvatarSizes } from './Avatar';\nexport { getInitials, partitionAvatarGroupItems } from './utils/index';\nexport type { PartitionAvatarGroupItems, PartitionAvatarGroupItemsOptions } from './utils/index';\nexport {\n AvatarGroup,\n avatarGroupClassNames,\n renderAvatarGroup_unstable,\n useAvatarGroupContextValues,\n useAvatarGroupStyles_unstable,\n useAvatarGroup_unstable,\n} from './AvatarGroup';\nexport type {\n AvatarGroupProps,\n AvatarGroupSlots,\n AvatarGroupState,\n AvatarGroupContextValue,\n AvatarGroupContextValues,\n} from './AvatarGroup';\nexport {\n AvatarGroupItem,\n avatarGroupItemClassNames,\n renderAvatarGroupItem_unstable,\n useAvatarGroupItemStyles_unstable,\n useAvatarGroupItem_unstable,\n} from './AvatarGroupItem';\nexport type { AvatarGroupItemProps, AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem';\nexport {\n AvatarGroupPopover,\n avatarGroupPopoverClassNames,\n renderAvatarGroupPopover_unstable,\n useAvatarGroupPopoverStyles_unstable,\n useAvatarGroupPopover_unstable,\n} from './AvatarGroupPopover';\nexport type { AvatarGroupPopoverProps, AvatarGroupPopoverSlots, AvatarGroupPopoverState } from './AvatarGroupPopover';\nexport {\n AvatarContextProvider,\n AvatarGroupProvider,\n useAvatarContext,\n useAvatarGroupContext_unstable,\n} from './contexts/index';\nexport type { AvatarContextValue } from './contexts/index';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-avatar",
|
|
3
|
-
"version": "9.2.
|
|
3
|
+
"version": "9.2.6",
|
|
4
4
|
"description": "React components for building Microsoft web experiences.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
|
-
"typings": "dist/index.d.ts",
|
|
7
|
+
"typings": "./dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -29,21 +29,21 @@
|
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
|
31
31
|
"@fluentui/react-conformance": "*",
|
|
32
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
32
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.18",
|
|
33
33
|
"@fluentui/scripts": "^1.0.0",
|
|
34
34
|
"es6-weak-map": "^2.0.2"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@fluentui/react-badge": "^9.0.
|
|
38
|
-
"@fluentui/react-context-selector": "^9.
|
|
37
|
+
"@fluentui/react-badge": "^9.0.12",
|
|
38
|
+
"@fluentui/react-context-selector": "^9.1.1",
|
|
39
39
|
"@fluentui/react-icons": "^2.0.175",
|
|
40
|
-
"@fluentui/react-popover": "^9.
|
|
41
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
42
|
-
"@fluentui/react-tabster": "^9.
|
|
43
|
-
"@fluentui/react-theme": "^9.1.
|
|
44
|
-
"@fluentui/react-tooltip": "^9.
|
|
45
|
-
"@fluentui/react-utilities": "^9.1
|
|
46
|
-
"@griffel/react": "^1.4.
|
|
40
|
+
"@fluentui/react-popover": "^9.3.1",
|
|
41
|
+
"@fluentui/react-shared-contexts": "^9.1.1",
|
|
42
|
+
"@fluentui/react-tabster": "^9.3.0",
|
|
43
|
+
"@fluentui/react-theme": "^9.1.2",
|
|
44
|
+
"@fluentui/react-tooltip": "^9.1.1",
|
|
45
|
+
"@fluentui/react-utilities": "^9.2.1",
|
|
46
|
+
"@griffel/react": "^1.4.2",
|
|
47
47
|
"tslib": "^2.1.0"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
@@ -61,9 +61,10 @@
|
|
|
61
61
|
},
|
|
62
62
|
"exports": {
|
|
63
63
|
".": {
|
|
64
|
-
"types": "./
|
|
64
|
+
"types": "./dist/index.d.ts",
|
|
65
65
|
"import": "./lib/index.js",
|
|
66
66
|
"require": "./lib-commonjs/index.js"
|
|
67
|
-
}
|
|
67
|
+
},
|
|
68
|
+
"./package.json": "./package.json"
|
|
68
69
|
}
|
|
69
70
|
}
|
package/MIGRATION.md
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
# Avatar Migration
|
|
2
|
-
|
|
3
|
-
## Migration from v8
|
|
4
|
-
|
|
5
|
-
The existing `Persona` control supports many more props than the `Avatar` control: notably the extra display text to the side of the image. As such, Avatar is only a direct replacement for `Persona` in cases where it was only being used to display the image (`hidePersonaDetails` is true). To fully replace `Persona`, `Avatar` needs to be used in conjunction with another component that displays additional content.
|
|
6
|
-
|
|
7
|
-
In cases where migration is possible, the following props will need to be renamed:
|
|
8
|
-
|
|
9
|
-
- `text` => `name`
|
|
10
|
-
- `size` converted from an enum to a number, and not all previous sizes are supported:
|
|
11
|
-
- `PersonaSize.size8` => Not Supported. Use the `PresenceBadge` component since this size of Persona only displays the badge.
|
|
12
|
-
- `PersonaSize.size16` => Not Supported. Use `size={20}`, and optionally add `style={{ width: '16px', height: '16px' }}` if the exact size is needed.
|
|
13
|
-
- `PersonaSize.size24` => `size={24}`
|
|
14
|
-
- `PersonaSize.size28` => `size={28}`
|
|
15
|
-
- `PersonaSize.size32` => `size={32}`
|
|
16
|
-
- `PersonaSize.size40` => `size={40}`
|
|
17
|
-
- `PersonaSize.size48` => `size={48}`
|
|
18
|
-
- `PersonaSize.size56` => `size={56}`
|
|
19
|
-
- `PersonaSize.size72` => `size={72}`
|
|
20
|
-
- `PersonaSize.size100` => Not Supported. Use `size={96}`, and optionally add `style={{ width: '100px', height: '100px' }}` if the exact size is needed.
|
|
21
|
-
- `PersonaSize.size120` => `size={120}`
|
|
22
|
-
- `coinSize` => Use `size`
|
|
23
|
-
- `imageUrl` => `image={{ src: '...' }}`
|
|
24
|
-
- `imageAlt` => The Avatar's `aria-label` can be used.
|
|
25
|
-
- `imageInitials` => `initials`
|
|
26
|
-
- `presence` => `badge` (see the `PresenceBadge` component for more details)
|
|
27
|
-
- `PersonaPresence.none` => (Default)
|
|
28
|
-
- `PersonaPresence.away` => `badge={{ status: 'away' }}`
|
|
29
|
-
- `PersonaPresence.blocked` => Not Supported.
|
|
30
|
-
- `PersonaPresence.busy` => `badge={{ status: 'busy' }}`
|
|
31
|
-
- `PersonaPresence.dnd` => `badge={{ status: 'doNotDisturb' }}`
|
|
32
|
-
- `PersonaPresence.offline` => `badge={{ status: 'offline' }}`
|
|
33
|
-
- `PersonaPresence.online` => `badge={{ status: 'available' }}`
|
|
34
|
-
- `presenceColors` => Not Supported. However, the badge can be styled using CSS. E.g. `badge={{ style: { color: '...' } }}`
|
|
35
|
-
- `presenceTitle` => Not Supported.
|
|
36
|
-
- `isOutOfOffice` => `badge={{ status: ..., outOfOffice: true }}`
|
|
37
|
-
- `showUnknownPersonaCoin` => Not Supported. An approximation is: `icon={<QuestionRegular />}`
|
|
38
|
-
- `initialsColor` => `color="colorful"`, or specify a color by name like `color="darkRed"`
|
|
39
|
-
- `showInitialsUntilImageLoad` => Not Supported. This is always true for `Avatar`.
|
|
40
|
-
- `imageShouldFadeIn` => Not Supported. Add a CSS class to the image if desired: `image={{ className: 'myFadeInClass' }}`
|
|
41
|
-
- `imageShouldStartVisible` => Not Supported. This is always true for `Avatar`.
|
|
42
|
-
- `onPhotoLoadingStateChange` => Add event listeners to the image slot for the `<img>` events: `image={{ onLoad: ..., onError: ... }}`
|
|
43
|
-
- `onRender*` => Avatar's slots allow render functions, such as `image={(Component, props) => <Component {...props} />}`
|
|
44
|
-
- To render a square image, use `shape="square"`.
|
|
45
|
-
|
|
46
|
-
## Migration from v0
|
|
47
|
-
|
|
48
|
-
The v0 Avatar maps more closely to the converged Avatar.
|
|
49
|
-
|
|
50
|
-
- `variables` => Replaced by theme
|
|
51
|
-
- `design` => Replaced by theme
|
|
52
|
-
- `accessibility` => Not needed
|
|
53
|
-
- `size` is converted from `SizeValue` to a number:
|
|
54
|
-
- `size="smallest"` => `size={20}`
|
|
55
|
-
- `size="smaller"` => `size={24}`
|
|
56
|
-
- `size="small"` => `size={28}`
|
|
57
|
-
- `size="medium"` => `size={32}`
|
|
58
|
-
- `size="large"` => `size={44}`
|
|
59
|
-
- `size="larger"` => `size={64}`
|
|
60
|
-
- `size="largest"` => `size={96}`
|
|
61
|
-
- `getInitials` => Set the initials directly: `initials={getInitials(name)}`
|
|
62
|
-
- `as` => Only allows `as="span"` (which is the default)
|
|
63
|
-
|
|
64
|
-
## Property mapping
|
|
65
|
-
|
|
66
|
-
| v8 `Persona` | v0 `Avatar` | v9 `Avatar` |
|
|
67
|
-
| ---------------------------- | ------------------ | --------------------------------------- |
|
|
68
|
-
| `text` | `name` | `name` |
|
|
69
|
-
| `size` (PersonaSize enum) | `size` (SizeValue) | `size` (number) |
|
|
70
|
-
| `coinSize` | - | - |
|
|
71
|
-
| `imageUrl` | `image` (slot) | `src` prop of the `image` slot |
|
|
72
|
-
| `imageAlt` | - | `aria-label` |
|
|
73
|
-
| `imageInitials` | `label` (slot) | `initials` (slot) |
|
|
74
|
-
| - | `getInitials` | - |
|
|
75
|
-
| `presence` | `status` (slot) | `badge` (slot) |
|
|
76
|
-
| `presenceColors` | - | - |
|
|
77
|
-
| `presenceTitle` | - | - |
|
|
78
|
-
| `initialsColor` | - | `color` |
|
|
79
|
-
| | - | `idForColor` |
|
|
80
|
-
| - | `icon` (slot) | `icon` (slot) |
|
|
81
|
-
| `showUnknownPersonaCoin` | - | - |
|
|
82
|
-
| `className` | `className` | `className` |
|
|
83
|
-
| - | `square` | `shape` |
|
|
84
|
-
| - | - | `active` |
|
|
85
|
-
| - | - | `activeAppearance` |
|
|
86
|
-
| - | `styles` | (theme) |
|
|
87
|
-
| - | `variables` | (theme) |
|
|
88
|
-
| - | `design` | (theme) |
|
|
89
|
-
| - | `accessibility` | - |
|
|
90
|
-
| - | `as` | - |
|
|
91
|
-
| `secondaryText` | - | - |
|
|
92
|
-
| `showSecondaryText` | - | - |
|
|
93
|
-
| `tertiaryText` | - | - |
|
|
94
|
-
| `optionalText` | - | - |
|
|
95
|
-
| `isOutOfOffice` | - | `outOfOffice` prop of the `badge` slot |
|
|
96
|
-
| `hidePersonaDetails` | - | - |
|
|
97
|
-
| `showInitialsUntilImageLoad` | - | - |
|
|
98
|
-
| `imageShouldFadeIn` | - | - |
|
|
99
|
-
| `imageShouldStartVisible` | - | - |
|
|
100
|
-
| `onPhotoLoadingStateChange` | - | `image={{ onLoad: ..., onError: ... }}` |
|
|
101
|
-
| `onRenderInitials` | - | Render function for the `initials` slot |
|
|
102
|
-
| `onRenderPersonaCoin` | - | Render function for the Avatar |
|
|
103
|
-
| `onRenderPrimaryText` | - | - |
|
|
104
|
-
| `onRenderSecondaryText` | - | - |
|
|
105
|
-
| `onRenderTertiaryText` | - | - |
|
|
106
|
-
| `onRenderOptionalText` | - | - |
|