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);