diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index 940e110f441951..4ba18d54606c99 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -99,6 +99,7 @@ storiesOf('AvatarGroup Converged', module) { includeHighContrast: true, includeDarkMode: true, + includeRtl: true, }, ) .addStory( @@ -118,11 +119,13 @@ storiesOf('AvatarGroup Converged', module) { includeHighContrast: true, includeDarkMode: true, + includeRtl: true, }, ) .addStory('layoutPie', () => , { includeHighContrast: true, includeDarkMode: true, + includeRtl: true, }) .addStory('overflowIndicator', () => , { includeHighContrast: true, diff --git a/change/@fluentui-react-avatar-10737738-e331-4d53-9838-22a57b7fbd90.json b/change/@fluentui-react-avatar-10737738-e331-4d53-9838-22a57b7fbd90.json new file mode 100644 index 00000000000000..bf5559dd7d5016 --- /dev/null +++ b/change/@fluentui-react-avatar-10737738-e331-4d53-9838-22a57b7fbd90.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: AvatarGroup's pie layout places inline items correctly in rtl.", + "packageName": "@fluentui/react-avatar", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts index 6e8de49fd12a99..4411a1c80d66e4 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts @@ -1,6 +1,7 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { tokens, typographyStyles } from '@fluentui/react-theme'; import { useSizeStyles } from '../../Avatar'; +import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts'; import type { AvatarGroupItemSlots, AvatarGroupItemState } from './AvatarGroupItem.types'; import type { AvatarGroupProps } from '../../AvatarGroup'; import type { AvatarSizes } from '../../Avatar'; @@ -128,6 +129,33 @@ const usePieStyles = makeStyles({ transformOrigin: '0 0', }, }, + rtlSlices: { + // Two slices + // 1st of 2 items + '&:nth-of-type(1):nth-last-of-type(2)': { + clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`, + }, + // 2nd of 2 items + '&:nth-of-type(2):nth-last-of-type(1)': { + clipPath: `inset(0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)) 0 25%)`, + }, + + // Three slices + // 1st of 3 items + '&:nth-of-type(1):nth-last-of-type(3)': { + clipPath: `inset(0 25% 0 calc(25% + (var(${avatarGroupItemDividerWidthVar}) / 2)))`, + }, + // 2nd of 3 items + '&:nth-of-type(2):nth-last-of-type(2)': { + clipPath: `inset(0 var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0)`, + left: '0', + }, + // 3rd of 3 items + '&:nth-of-type(3):nth-last-of-type(1)': { + clipPath: `inset(var(${avatarGroupItemDividerWidthVar}) var(${avatarGroupItemDividerWidthVar}) 0 0)`, + left: '0', + }, + }, thick: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThick }, thicker: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThicker }, thickest: { [avatarGroupItemDividerWidthVar]: tokens.strokeWidthThickest }, @@ -138,6 +166,7 @@ const usePieStyles = makeStyles({ */ export const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): AvatarGroupItemState => { const { isOverflowItem, layout, size } = state; + const { dir } = useFluent(); const avatarStyles = useAvatarStyles(); const overflowLabelStyles = useOverflowLabelStyles(); @@ -166,6 +195,10 @@ export const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState): } rootClasses.push(pieStyles.slices); + + if (dir === 'rtl') { + rootClasses.push(pieStyles.rtlSlices); + } } } else { rootClasses.push(rootStyles.overflowItem);