diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 10679db5d5253..9250654932340 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -18,6 +18,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### Fixes +- `ChatMessage` action menu is moved horizontally at the start in RTL. @silviuaavram ([#26378](https://github.com/microsoft/fluentui/pull/26378)) + ## [v0.66.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.66.0) (2023-01-06) [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-northstar_v0.65.0..@fluentui/react-northstar_v0.66.0) diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx index 32ad0a8768500..3c9a4b369b440 100644 --- a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx +++ b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx @@ -336,6 +336,7 @@ export const ChatMessage = (React.forwardRef(( const popperRef = React.useRef(); const { targetRef: actionsMenuTargetRef, containerRef: actionsMenuRef } = usePopper({ align: 'end', + rtl: context.rtl, position: 'above', positionFixed: overflow, diff --git a/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx index ffd1a2ee92503..eb3a01e91c9ba 100644 --- a/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx +++ b/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx @@ -1,9 +1,23 @@ +import * as React from 'react'; + import { handlesAccessibility, implementsShorthandProp, isConformant } from 'test/specs/commonTests'; import { ChatMessage } from 'src/components/Chat/ChatMessage'; import { Text } from 'src/components/Text/Text'; +import { usePopper } from 'src/utils/positioner'; +import { LikeIcon } from '@fluentui/react-icons-northstar'; import { ChatMessageDetails } from 'src/components/Chat/ChatMessageDetails'; import { ChatMessageContent } from 'src/components/Chat/ChatMessageContent'; +import { mountWithProvider, EmptyThemeProvider } from 'test/utils'; + +jest.mock('src/utils/positioner', () => { + const actualPositioner = jest.requireActual('src/utils/positioner'); + + return { + ...actualPositioner, + usePopper: jest.fn().mockReturnValue(actualPositioner.usePopper), + }; +}); const chatMessageImplementsShorthandProp = implementsShorthandProp(ChatMessage); @@ -24,4 +38,47 @@ describe('ChatMessage', () => { describe('accessibility', () => { handlesAccessibility(ChatMessage); }); + + describe('rtl', () => { + beforeEach(() => jest.clearAllMocks()); + + function render(wrappingComponent?: React.ComponentType) { + const actionMenu = { + iconOnly: true, + items: [ + { + key: 'like', + icon: , + title: 'Like', + }, + ], + }; + + mountWithProvider( + , + { wrappingComponent }, + ); + } + it('should pass rtl parameter as true to usePopper in RTL', () => { + const RTLProvider = props => ; + render(RTLProvider); + + expect(usePopper).toHaveBeenCalledTimes(1); + expect(usePopper).toHaveBeenCalledWith(expect.objectContaining({ rtl: true })); + }); + + it('should pass rtl parameter as undefined to usePopper in LTR', () => { + render(); + + expect(usePopper).toHaveBeenCalledTimes(1); + expect(usePopper).toHaveBeenCalledWith(expect.objectContaining({ rtl: undefined })); + }); + }); });