@fluentui/react-avatar 9.2.5 → 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 +102 -1
- package/CHANGELOG.md +24 -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/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/index.js +9 -9
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +14 -13
- package/MIGRATION.md +0 -106
- package/SPEC-AvatarGroup.md +0 -203
- package/SPEC.md +0 -172
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\n\n//\n// TODO: All animation constants should go to theme or globals?\n// https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665\n\nconst animationDuration = {\n duration50: '50ms',\n duration100: '100ms',\n duration150: '150ms',\n duration200: '200ms',\n duration300: '300ms',\n duration400: '400ms',\n duration500: '500ms',\n};\n\nconst animationTiming = {\n ultraFast: animationDuration.duration50,\n faster: animationDuration.duration100,\n fast: animationDuration.duration150,\n normal: animationDuration.duration200,\n slow: animationDuration.duration300,\n slower: animationDuration.duration400,\n ultraSlow: animationDuration.duration500,\n};\n\nconst animationLines = {\n decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',\n decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',\n decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',\n accelerateMax: 'cubic-bezier(1.00,0.00,1.00,1.00)',\n accelerateMid: 'cubic-bezier(0.90,0.10,1.00,0.20)',\n accelerateMin: 'cubic-bezier(0.80,0.00,0.78,1.00)',\n maxEasyEase: 'cubic-bezier(0.80,0.00,0.20,1.00)',\n easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',\n linear: 'linear',\n};\n\nconst animations = {\n fastOutSlowInMax: animationLines.decelerateMax,\n fastOutSlowInMid: animationLines.decelerateMid,\n fastOutSlowInMin: animationLines.decelerateMin,\n slowOutFastInMax: animationLines.accelerateMax,\n slowOutFastInMid: animationLines.accelerateMid,\n slowOutFastInMin: animationLines.accelerateMin,\n fastEase: animationLines.maxEasyEase,\n normalEase: animationLines.easyEase,\n nullEasing: animationLines.linear,\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n textCaption2Strong: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightSemibold,\n },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderColor(tokens.colorBrandBackgroundStatic),\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.faster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${animationTiming.ultraSlow}, ${animationTiming.slower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n image: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n ...shorthands.borderRadius('inherit'),\n objectFit: 'cover',\n verticalAlign: 'top',\n },\n\n iconInitials: {\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n ...shorthands.borderRadius('inherit'),\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});\n\nexport const useSizeStyles = makeStyles({\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n rootClasses.push(styles.textBody1Strong);\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n styles.iconInitials,\n iconSizeClass,\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const avatarClassNames: SlotClassNames<AvatarSlots> = {\n root: 'fui-Avatar',\n image: 'fui-Avatar__image',\n initials: 'fui-Avatar__initials',\n icon: 'fui-Avatar__icon',\n badge: 'fui-Avatar__badge',\n};\n\nconst animations = {\n fastOutSlowInMax: tokens.curveDecelerateMax,\n fastOutSlowInMid: tokens.curveDecelerateMid,\n fastOutSlowInMin: tokens.curveDecelerateMin,\n slowOutFastInMax: tokens.curveAccelerateMax,\n slowOutFastInMid: tokens.curveAccelerateMid,\n slowOutFastInMin: tokens.curveAccelerateMin,\n fastEase: tokens.curveEasyEaseMax,\n normalEase: tokens.curveEasyEase,\n nullEasing: tokens.curveLinear,\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'inline-block',\n flexShrink: 0,\n position: 'relative',\n verticalAlign: 'middle',\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fontFamily: tokens.fontFamilyBase,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n textCaption2Strong: {\n fontSize: tokens.fontSizeBase100,\n fontWeight: tokens.fontWeightSemibold,\n },\n textCaption1Strong: { fontSize: tokens.fontSizeBase200 },\n textBody1Strong: { fontSize: tokens.fontSizeBase300 },\n textSubtitle2: { fontSize: tokens.fontSizeBase400 },\n textSubtitle1: { fontSize: tokens.fontSizeBase500 },\n textTitle: { fontSize: tokens.fontSizeBase600 },\n\n squareSmall: {\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n squareMedium: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n squareLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n squareXLarge: {\n ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n },\n\n activeOrInactive: {\n transform: 'perspective(1px)', // Work-around for text pixel snapping at the end of the animation\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n\n ...shorthands.borderRadius('inherit'),\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastEase}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n ring: {\n '::before': {\n ...shorthands.borderStyle('solid'),\n },\n },\n ringThick: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThick})`),\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n },\n },\n ringThicker: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThicker})`),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n },\n },\n ringThickest: {\n '::before': {\n ...shorthands.margin(`calc(-2 * ${tokens.strokeWidthThickest})`),\n ...shorthands.borderWidth(tokens.strokeWidthThickest),\n },\n },\n\n shadow4: { '::before': { boxShadow: tokens.shadow4 } },\n shadow8: { '::before': { boxShadow: tokens.shadow8 } },\n shadow16: { '::before': { boxShadow: tokens.shadow16 } },\n shadow28: { '::before': { boxShadow: tokens.shadow28 } },\n\n inactive: {\n opacity: '0.8',\n transform: 'scale(0.875)',\n\n transitionProperty: 'transform, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationFaster}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n\n '::before': {\n ...shorthands.margin(0),\n opacity: 0,\n\n transitionProperty: 'margin, opacity',\n transitionDuration: `${tokens.durationUltraSlow}, ${tokens.durationSlower}`,\n transitionDelay: `${animations.fastOutSlowInMin}, ${animations.nullEasing}`,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n\n badge: {\n position: 'absolute',\n bottom: 0,\n right: 0,\n boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,\n },\n badgeLarge: {\n boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,\n },\n\n image: {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n\n ...shorthands.borderRadius('inherit'),\n objectFit: 'cover',\n verticalAlign: 'top',\n },\n\n iconInitials: {\n position: 'absolute',\n boxSizing: 'border-box',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n lineHeight: '1',\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'center',\n textAlign: 'center',\n userSelect: 'none',\n ...shorthands.borderRadius('inherit'),\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});\n\nexport const useSizeStyles = makeStyles({\n 16: { width: '16px', height: '16px' },\n 20: { width: '20px', height: '20px' },\n 24: { width: '24px', height: '24px' },\n 28: { width: '28px', height: '28px' },\n 32: { width: '32px', height: '32px' },\n 36: { width: '36px', height: '36px' },\n 40: { width: '40px', height: '40px' },\n 48: { width: '48px', height: '48px' },\n 56: { width: '56px', height: '56px' },\n 64: { width: '64px', height: '64px' },\n 72: { width: '72px', height: '72px' },\n 96: { width: '96px', height: '96px' },\n 120: { width: '120px', height: '120px' },\n 128: { width: '128px', height: '128px' },\n});\n\nconst useColorStyles = makeStyles({\n neutral: {\n color: tokens.colorNeutralForeground3,\n backgroundColor: tokens.colorNeutralBackground6,\n // The ::before element is the ring when active\n '::before': { color: tokens.colorBrandStroke1 },\n },\n brand: {\n color: tokens.colorNeutralForegroundStaticInverted,\n backgroundColor: tokens.colorBrandBackgroundStatic,\n '::before': { color: tokens.colorBrandStroke1 },\n },\n 'dark-red': {\n color: tokens.colorPaletteDarkRedForeground2,\n backgroundColor: tokens.colorPaletteDarkRedBackground2,\n '::before': { color: tokens.colorPaletteDarkRedBorderActive },\n },\n cranberry: {\n color: tokens.colorPaletteCranberryForeground2,\n backgroundColor: tokens.colorPaletteCranberryBackground2,\n '::before': { color: tokens.colorPaletteCranberryBorderActive },\n },\n red: {\n color: tokens.colorPaletteRedForeground2,\n backgroundColor: tokens.colorPaletteRedBackground2,\n '::before': { color: tokens.colorPaletteRedBorderActive },\n },\n pumpkin: {\n color: tokens.colorPalettePumpkinForeground2,\n backgroundColor: tokens.colorPalettePumpkinBackground2,\n '::before': { color: tokens.colorPalettePumpkinBorderActive },\n },\n peach: {\n color: tokens.colorPalettePeachForeground2,\n backgroundColor: tokens.colorPalettePeachBackground2,\n '::before': { color: tokens.colorPalettePeachBorderActive },\n },\n marigold: {\n color: tokens.colorPaletteMarigoldForeground2,\n backgroundColor: tokens.colorPaletteMarigoldBackground2,\n '::before': { color: tokens.colorPaletteMarigoldBorderActive },\n },\n gold: {\n color: tokens.colorPaletteGoldForeground2,\n backgroundColor: tokens.colorPaletteGoldBackground2,\n '::before': { color: tokens.colorPaletteGoldBorderActive },\n },\n brass: {\n color: tokens.colorPaletteBrassForeground2,\n backgroundColor: tokens.colorPaletteBrassBackground2,\n '::before': { color: tokens.colorPaletteBrassBorderActive },\n },\n brown: {\n color: tokens.colorPaletteBrownForeground2,\n backgroundColor: tokens.colorPaletteBrownBackground2,\n '::before': { color: tokens.colorPaletteBrownBorderActive },\n },\n forest: {\n color: tokens.colorPaletteForestForeground2,\n backgroundColor: tokens.colorPaletteForestBackground2,\n '::before': { color: tokens.colorPaletteForestBorderActive },\n },\n seafoam: {\n color: tokens.colorPaletteSeafoamForeground2,\n backgroundColor: tokens.colorPaletteSeafoamBackground2,\n '::before': { color: tokens.colorPaletteSeafoamBorderActive },\n },\n 'dark-green': {\n color: tokens.colorPaletteDarkGreenForeground2,\n backgroundColor: tokens.colorPaletteDarkGreenBackground2,\n '::before': { color: tokens.colorPaletteDarkGreenBorderActive },\n },\n 'light-teal': {\n color: tokens.colorPaletteLightTealForeground2,\n backgroundColor: tokens.colorPaletteLightTealBackground2,\n '::before': { color: tokens.colorPaletteLightTealBorderActive },\n },\n teal: {\n color: tokens.colorPaletteTealForeground2,\n backgroundColor: tokens.colorPaletteTealBackground2,\n '::before': { color: tokens.colorPaletteTealBorderActive },\n },\n steel: {\n color: tokens.colorPaletteSteelForeground2,\n backgroundColor: tokens.colorPaletteSteelBackground2,\n '::before': { color: tokens.colorPaletteSteelBorderActive },\n },\n blue: {\n color: tokens.colorPaletteBlueForeground2,\n backgroundColor: tokens.colorPaletteBlueBackground2,\n '::before': { color: tokens.colorPaletteBlueBorderActive },\n },\n 'royal-blue': {\n color: tokens.colorPaletteRoyalBlueForeground2,\n backgroundColor: tokens.colorPaletteRoyalBlueBackground2,\n '::before': { color: tokens.colorPaletteRoyalBlueBorderActive },\n },\n cornflower: {\n color: tokens.colorPaletteCornflowerForeground2,\n backgroundColor: tokens.colorPaletteCornflowerBackground2,\n '::before': { color: tokens.colorPaletteCornflowerBorderActive },\n },\n navy: {\n color: tokens.colorPaletteNavyForeground2,\n backgroundColor: tokens.colorPaletteNavyBackground2,\n '::before': { color: tokens.colorPaletteNavyBorderActive },\n },\n lavender: {\n color: tokens.colorPaletteLavenderForeground2,\n backgroundColor: tokens.colorPaletteLavenderBackground2,\n '::before': { color: tokens.colorPaletteLavenderBorderActive },\n },\n purple: {\n color: tokens.colorPalettePurpleForeground2,\n backgroundColor: tokens.colorPalettePurpleBackground2,\n '::before': { color: tokens.colorPalettePurpleBorderActive },\n },\n grape: {\n color: tokens.colorPaletteGrapeForeground2,\n backgroundColor: tokens.colorPaletteGrapeBackground2,\n '::before': { color: tokens.colorPaletteGrapeBorderActive },\n },\n lilac: {\n color: tokens.colorPaletteLilacForeground2,\n backgroundColor: tokens.colorPaletteLilacBackground2,\n '::before': { color: tokens.colorPaletteLilacBorderActive },\n },\n pink: {\n color: tokens.colorPalettePinkForeground2,\n backgroundColor: tokens.colorPalettePinkBackground2,\n '::before': { color: tokens.colorPalettePinkBorderActive },\n },\n magenta: {\n color: tokens.colorPaletteMagentaForeground2,\n backgroundColor: tokens.colorPaletteMagentaBackground2,\n '::before': { color: tokens.colorPaletteMagentaBorderActive },\n },\n plum: {\n color: tokens.colorPalettePlumForeground2,\n backgroundColor: tokens.colorPalettePlumBackground2,\n '::before': { color: tokens.colorPalettePlumBorderActive },\n },\n beige: {\n color: tokens.colorPaletteBeigeForeground2,\n backgroundColor: tokens.colorPaletteBeigeBackground2,\n '::before': { color: tokens.colorPaletteBeigeBorderActive },\n },\n mink: {\n color: tokens.colorPaletteMinkForeground2,\n backgroundColor: tokens.colorPaletteMinkBackground2,\n '::before': { color: tokens.colorPaletteMinkBorderActive },\n },\n platinum: {\n color: tokens.colorPalettePlatinumForeground2,\n backgroundColor: tokens.colorPalettePlatinumBackground2,\n '::before': { color: tokens.colorPalettePlatinumBorderActive },\n },\n anchor: {\n color: tokens.colorPaletteAnchorForeground2,\n backgroundColor: tokens.colorPaletteAnchorBackground2,\n '::before': { color: tokens.colorPaletteAnchorBorderActive },\n },\n});\n\nexport const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {\n const { size, shape, active, activeAppearance, color } = state;\n\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const colorStyles = useColorStyles();\n\n const rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];\n\n if (size <= 24) {\n rootClasses.push(styles.textCaption2Strong);\n } else if (size <= 28) {\n rootClasses.push(styles.textCaption1Strong);\n } else if (size <= 40) {\n rootClasses.push(styles.textBody1Strong);\n } else if (size <= 56) {\n rootClasses.push(styles.textSubtitle2);\n } else if (size <= 96) {\n rootClasses.push(styles.textSubtitle1);\n } else {\n rootClasses.push(styles.textTitle);\n }\n\n if (shape === 'square') {\n if (size <= 24) {\n rootClasses.push(styles.squareSmall);\n } else if (size <= 48) {\n rootClasses.push(styles.squareMedium);\n } else if (size <= 72) {\n rootClasses.push(styles.squareLarge);\n } else {\n rootClasses.push(styles.squareXLarge);\n }\n }\n\n if (active === 'active' || active === 'inactive') {\n rootClasses.push(styles.activeOrInactive);\n\n if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {\n rootClasses.push(styles.ring);\n\n if (size <= 48) {\n rootClasses.push(styles.ringThick);\n } else if (size <= 64) {\n rootClasses.push(styles.ringThicker);\n } else {\n rootClasses.push(styles.ringThickest);\n }\n }\n\n if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {\n if (size <= 28) {\n rootClasses.push(styles.shadow4);\n } else if (size <= 48) {\n rootClasses.push(styles.shadow8);\n } else if (size <= 64) {\n rootClasses.push(styles.shadow16);\n } else {\n rootClasses.push(styles.shadow28);\n }\n }\n\n // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them\n if (active === 'inactive') {\n rootClasses.push(styles.inactive);\n }\n }\n\n state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);\n\n if (state.badge) {\n state.badge.className = mergeClasses(\n avatarClassNames.badge,\n styles.badge,\n size >= 64 && styles.badgeLarge,\n state.badge.className,\n );\n }\n\n if (state.image) {\n state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);\n }\n\n if (state.initials) {\n state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);\n }\n\n if (state.icon) {\n let iconSizeClass;\n if (size <= 16) {\n iconSizeClass = styles.icon12;\n } else if (size <= 24) {\n iconSizeClass = styles.icon16;\n } else if (size <= 40) {\n iconSizeClass = styles.icon20;\n } else if (size <= 48) {\n iconSizeClass = styles.icon24;\n } else if (size <= 56) {\n iconSizeClass = styles.icon28;\n } else if (size <= 72) {\n iconSizeClass = styles.icon32;\n } else {\n iconSizeClass = styles.icon48;\n }\n\n state.icon.className = mergeClasses(\n avatarClassNames.icon,\n styles.iconInitials,\n iconSizeClass,\n state.icon.className,\n );\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,20 +29,20 @@
|
|
|
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.1.
|
|
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.3.
|
|
41
|
-
"@fluentui/react-shared-contexts": "^9.1.
|
|
42
|
-
"@fluentui/react-tabster": "^9.
|
|
43
|
-
"@fluentui/react-theme": "^9.1.
|
|
44
|
-
"@fluentui/react-tooltip": "^9.1.
|
|
45
|
-
"@fluentui/react-utilities": "^9.2.
|
|
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
46
|
"@griffel/react": "^1.4.2",
|
|
47
47
|
"tslib": "^2.1.0"
|
|
48
48
|
},
|
|
@@ -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` | - | - |
|
package/SPEC-AvatarGroup.md
DELETED
|
@@ -1,203 +0,0 @@
|
|
|
1
|
-
# AvatarGroup Spec
|
|
2
|
-
|
|
3
|
-
## Background
|
|
4
|
-
|
|
5
|
-
AvatarGroup represents a group of multiple people or entities by taking care of the arrangement of individual Avatars in a spread, stack, or pie layout.
|
|
6
|
-
|
|
7
|
-
## Prior Art
|
|
8
|
-
|
|
9
|
-
### OpenUI
|
|
10
|
-
|
|
11
|
-
There's no current research in OpenUI's website.
|
|
12
|
-
|
|
13
|
-
| Library | Name | Notes |
|
|
14
|
-
| ------------------------------------------------------------------------------------- | ------------ | --------------------------------------------------------------------------------------------- |
|
|
15
|
-
| [Fluent UI v8](https://developer.microsoft.com/en-us/fluentui#/controls/web/facepile) | Facepile | Receives list of `IFacepilePersona` to represent each avatar. |
|
|
16
|
-
| [Attlassian](https://atlassian.design/components/avatar-group/examples) | Avatar group | Component uses data prop, which is a list of "entries" to represent each avatar in the group. |
|
|
17
|
-
| [Ant Design](https://ant.design/components/avatar/) | Avatar.Group | Uses subcomponent `<Avatar.Group>` to group the avatars given as children. |
|
|
18
|
-
| [Primer React](https://primer.style/react/AvatarStack) | AvatarStack | Acts similar to a FlexBox, avatars are given as children and grouped. |
|
|
19
|
-
|
|
20
|
-
### Comparison v8 and v0
|
|
21
|
-
|
|
22
|
-
There's only one existent component similar to AvatarGroup in v8 `Facepile`. v0 doesn't have an equivalent of this component.
|
|
23
|
-
|
|
24
|
-
- v8 [Facepile](https://developer.microsoft.com/en-us/fluentui#/controls/web/facepile): Only offers spread layout and offers three overflow indicator styles.
|
|
25
|
-
|
|
26
|
-
## Epic issue: [#22240](https://github.com/microsoft/fluentui/issues/22240)
|
|
27
|
-
|
|
28
|
-
## Sample Code
|
|
29
|
-
|
|
30
|
-
```jsx
|
|
31
|
-
const names = [
|
|
32
|
-
'Johnie McConnell',
|
|
33
|
-
'Allan Munger',
|
|
34
|
-
'Erik Nason',
|
|
35
|
-
'Kristin Patterson',
|
|
36
|
-
'Daisy Phillips',
|
|
37
|
-
'Carole Poland',
|
|
38
|
-
'Carlos Slattery',
|
|
39
|
-
'Robert Tolbert',
|
|
40
|
-
'Kevin Sturgis',
|
|
41
|
-
'Charlotte Waltson',
|
|
42
|
-
'Elliot Woodward',
|
|
43
|
-
];
|
|
44
|
-
|
|
45
|
-
const AvatarGroup = () => {
|
|
46
|
-
const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names });
|
|
47
|
-
|
|
48
|
-
return (
|
|
49
|
-
<AvatarGroup {...props}>
|
|
50
|
-
{inlineItems.map(name => (
|
|
51
|
-
<AvatarGroupItem name={name} key={name} />
|
|
52
|
-
))}
|
|
53
|
-
<AvatarGroupPopover>
|
|
54
|
-
{overflowItems.map(name => (
|
|
55
|
-
<AvatarGroupItem name={name} key={name} />
|
|
56
|
-
))}
|
|
57
|
-
</AvatarGroupPopover>
|
|
58
|
-
</AvatarGroup>
|
|
59
|
-
);
|
|
60
|
-
};
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
## Variants
|
|
64
|
-
|
|
65
|
-
There are three layout variants in AvatarGroup:
|
|
66
|
-
|
|
67
|
-
- Spread layout (Default): Avatars are spaced evenly.
|
|
68
|
-
- Stack layout: Avatars are overlapped evenly.
|
|
69
|
-
- Pie layout: Avatars are "cut" in a pie design. When there are two Avatars inline, the Avatars will be cut in half and placed side by side. When there are three Avatars inline, the first Avatar will be cut in half and other two will be downscaled by 50%.
|
|
70
|
-
- The pie layout must have 3 or less Avatars inline and all Avatars must repeat in the `AvatarGroupPopover`. This is handled by `partitionAvatarGroupItems`.
|
|
71
|
-
- If `partitionAvatarGroupItems` is used, the `spread` and `stack` layouts will have a maximum of 5 avatars before overflowing by default. This can be overridden via the `maxAvatars` option in `partitionAvatarGroupItems`.
|
|
72
|
-
|
|
73
|
-
## API
|
|
74
|
-
|
|
75
|
-
See [AvatarGroup.types.ts](./src/components/AvatarGroup/AvatarGroup.types.ts), [AvatarGroupPopover.types.ts](./src/components/AvatarGroupPopover/AvatarGroupPopover.types.ts) and [AvatarGroupItem.types.ts](./src/components/AvatarGroupItem/AvatarGroupItem.types.ts) for more details.
|
|
76
|
-
|
|
77
|
-
- `size`: Group size will override the children's current size. This is to ensure that the `AvatarGroup`'s spacing is correct because it changes depending on the group size.
|
|
78
|
-
- `AvatarGroupPopover`: All Avatars in `AvatarGroupPopover` will have a size of 24 and have a wrapper to apply stylings.
|
|
79
|
-
- AvatarGroupItem `color`: Can be overridden by providing a specific color on a given avatar.
|
|
80
|
-
|
|
81
|
-
#### Color override example:
|
|
82
|
-
|
|
83
|
-
In this example, the first AvatarGroupItem will have a `darkRed` color, while all the other Avatars have their color assigned by Avatar.
|
|
84
|
-
|
|
85
|
-
```jsx
|
|
86
|
-
<AvatarGroup>
|
|
87
|
-
<AvatarGroupItem color="darkRed" name="Katri Athokas" />
|
|
88
|
-
<AvatarGroupItem name="Elvia Atkins" />
|
|
89
|
-
<AvatarGroupItem name="Cameron Evans" />
|
|
90
|
-
<AvatarGroupItem name="Wanda Howard" />
|
|
91
|
-
<AvatarGroupItem name="Mona Kane" />
|
|
92
|
-
</AvatarGroup>
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
## Structure
|
|
96
|
-
|
|
97
|
-
- _**Public**_
|
|
98
|
-
|
|
99
|
-
```jsx
|
|
100
|
-
<AvatarGroup layout="spread" size={32}>
|
|
101
|
-
<AvatarGroupItem name="Katri Athokas" />
|
|
102
|
-
<AvatarGroupItem name="Elvia Atkins" />
|
|
103
|
-
<AvatarGroupItem name="Cameron Evans" />
|
|
104
|
-
<AvatarGroupItem name="Wanda Howard" />
|
|
105
|
-
<AvatarGroupPopover>
|
|
106
|
-
<AvatarGroupItem name="Mona Kane" />
|
|
107
|
-
<AvatarGroupItem name="Kristin Patterson" />
|
|
108
|
-
<AvatarGroupItem name="Elliot Woodward" />
|
|
109
|
-
<AvatarGroupItem name="Charlotte Waltson" />
|
|
110
|
-
</AvatarGroupPopover>
|
|
111
|
-
</AvatarGroup>
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
- _**Internal**_
|
|
115
|
-
|
|
116
|
-
```jsx
|
|
117
|
-
// AvatarGroup
|
|
118
|
-
<AvatarGroupProvider value={contextValues.avatarGroup}>
|
|
119
|
-
<slots.root {...slotProps.root} />
|
|
120
|
-
</AvatarGroupProvider>
|
|
121
|
-
|
|
122
|
-
// AvatarGroupPopover
|
|
123
|
-
<slots.root {...(slotProps.root as PopoverProps)}>
|
|
124
|
-
<PopoverTrigger>
|
|
125
|
-
<slots.tooltip {...(slotProps.tooltip as TooltipProps)}>
|
|
126
|
-
<slots.triggerButton {...slotProps.triggerButton} />
|
|
127
|
-
</slots.tooltip>
|
|
128
|
-
</PopoverTrigger>
|
|
129
|
-
<slots.popoverSurface {...slotProps.popoverSurface}>
|
|
130
|
-
<AvatarGroupProvider value={contextValues.avatarGroup}>
|
|
131
|
-
<slots.content {...slotProps.content} />
|
|
132
|
-
</AvatarGroupProvider>
|
|
133
|
-
</slots.popoverSurface>
|
|
134
|
-
</slots.root>
|
|
135
|
-
|
|
136
|
-
// AvatarGroupItem
|
|
137
|
-
<slots.root {...slotProps.root}>
|
|
138
|
-
<slots.avatar {...slotProps.avatar} />
|
|
139
|
-
{state.isOverflowItem && <slots.overflowLabel {...slotProps.overflowLabel} />}
|
|
140
|
-
</slots.root>
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
- _**DOM** - how the component will be rendered as HTML elements_
|
|
144
|
-
|
|
145
|
-
```html
|
|
146
|
-
<div className="fui-AvatarGroup" role="group">
|
|
147
|
-
<div class="fui-AvatarGroupItem">
|
|
148
|
-
<Avatar />
|
|
149
|
-
</div>
|
|
150
|
-
<div class="fui-AvatarGroupItem">
|
|
151
|
-
<Avatar />
|
|
152
|
-
</div>
|
|
153
|
-
<button>+1</button>
|
|
154
|
-
</div>
|
|
155
|
-
|
|
156
|
-
// on document.body
|
|
157
|
-
<div class="fui-AvatarGroupPopover" role="dialog" aria-label="Overflow">
|
|
158
|
-
<ul>
|
|
159
|
-
<li class="fui-AvatarGroupItem">
|
|
160
|
-
<Avatar />
|
|
161
|
-
<label />
|
|
162
|
-
</li>
|
|
163
|
-
<li class="fui-AvatarGroupItem">
|
|
164
|
-
<Avatar />
|
|
165
|
-
<label />
|
|
166
|
-
</li>
|
|
167
|
-
</ul>
|
|
168
|
-
</div>
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
## Migration
|
|
172
|
-
|
|
173
|
-
See [v8 to v9 migration guide](https://react.fluentui.dev/?path=/docs/concepts-upgrading-from-v8-components-avatargroup-upgrade--page) for details.
|
|
174
|
-
|
|
175
|
-
## Behaviors
|
|
176
|
-
|
|
177
|
-
_Explain how the component will behave in use, including:_
|
|
178
|
-
|
|
179
|
-
- _AvatarGroupPopover Component States_
|
|
180
|
-
|
|
181
|
-
- _Keyboard_: `triggerButton` can be interacted with the keyboard and when enter is pressed a popover that traps focus on the PopoverSurface will be rendered.
|
|
182
|
-
- _Cursor_ and _Touch_: When overflow indicator is clicked, the popover is displayed with the avatars that overflow. When the overflow indicator is hovered, a tooltip will read `View more people.`.
|
|
183
|
-
- _Screen readers_:
|
|
184
|
-
- When the `triggerButton` is focused, its content will be read.
|
|
185
|
-
|
|
186
|
-
- _AvatarGroupItem Component States_
|
|
187
|
-
- _Screen readers_:
|
|
188
|
-
- When AvatarGroupItem is rendered inline, logic is handled by `Avatar` component.
|
|
189
|
-
- When AvatarGroupItem is rendered inside AvatarGroupPopover, the label is disabled via `aria-label` and `Avatar` will handle the screen reader.
|
|
190
|
-
|
|
191
|
-
## Accessibility
|
|
192
|
-
|
|
193
|
-
Base accessibility information is included in the design document. After the spec is filled and reviewed, outcomes from it need to be communicated to design and incorporated in the design document.
|
|
194
|
-
|
|
195
|
-
- There's no native element for this component.
|
|
196
|
-
|
|
197
|
-
- `AvatarGroup` will have a role of `group`.
|
|
198
|
-
- Only the `popoverTrigger` will be focusable by the keyboard.
|
|
199
|
-
- There are no live-regions in `AvatarGroup`.
|
|
200
|
-
- A Tooltip will appear when the `popoverTrigger` is hovered or focused.
|
|
201
|
-
- Focus will only be trapped when the `popoverTrigger` is triggered.
|
|
202
|
-
- The label rendered along with the Avatar inside AvatarGroupPopover is disabled via `aria-label`.
|
|
203
|
-
- A `<ul>` with role list is rendered inside the PopoverSurface.
|