From ddf9554af1d12430af67c7fb1cea89f1142e53dd Mon Sep 17 00:00:00 2001 From: dougfabris Date: Mon, 22 Jan 2024 17:04:43 -0300 Subject: [PATCH 1/3] feat: add keyboard navigation --- .../client/components/Page/PageHeader.tsx | 6 ++--- .../hooks/roomActions/useThreadRoomAction.tsx | 8 +++---- .../client/views/room/Header/Header.tsx | 6 ++--- .../room/Header/Omnichannel/BackButton.tsx | 4 ++-- .../Omnichannel/OmnichannelRoomHeader.tsx | 6 ++--- .../QuickActions/QuickActionOptions.tsx | 4 ++-- .../Omnichannel/QuickActions/QuickActions.tsx | 10 ++++---- .../Header/Omnichannel/VoipRoomHeader.tsx | 6 ++--- .../client/views/room/Header/RoomHeader.tsx | 6 ++--- .../room/Header/RoomToolbox/RoomToolbox.tsx | 6 ++--- .../meteor/client/views/room/RoomNotFound.tsx | 6 ++--- .../tests/e2e/channel-management.spec.ts | 23 +++++++++++++++++++ .../tests/e2e/page-objects/home-channel.ts | 8 +++++++ packages/ui-client/package.json | 2 ++ .../Header/HeaderToolbar/HeaderToolbar.tsx | 16 +++++++++++++ .../HeaderToolbarAction.tsx} | 4 ++-- .../HeaderToolbarActionBadge.tsx} | 4 ++-- .../HeaderToolbarDivider.tsx} | 4 ++-- .../components/Header/HeaderToolbar/index.ts | 4 ++++ .../Header/HeaderToolbox/HeaderToolbox.tsx | 10 -------- .../components/Header/HeaderToolbox/index.ts | 4 ---- .../ui-client/src/components/Header/index.ts | 2 +- yarn.lock | 2 ++ 23 files changed, 96 insertions(+), 55 deletions(-) create mode 100644 packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx rename packages/ui-client/src/components/Header/{HeaderToolbox/HeaderToolboxAction.tsx => HeaderToolbar/HeaderToolbarAction.tsx} (78%) rename packages/ui-client/src/components/Header/{HeaderToolbox/HeaderToolboxActionBadge.tsx => HeaderToolbar/HeaderToolbarActionBadge.tsx} (71%) rename packages/ui-client/src/components/Header/{HeaderToolbox/HeaderToolboxDivider.tsx => HeaderToolbar/HeaderToolbarDivider.tsx} (51%) create mode 100644 packages/ui-client/src/components/Header/HeaderToolbar/index.ts delete mode 100644 packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolbox.tsx delete mode 100644 packages/ui-client/src/components/Header/HeaderToolbox/index.ts diff --git a/apps/meteor/client/components/Page/PageHeader.tsx b/apps/meteor/client/components/Page/PageHeader.tsx index 25d20381e52e..1a2f53739c9a 100644 --- a/apps/meteor/client/components/Page/PageHeader.tsx +++ b/apps/meteor/client/components/Page/PageHeader.tsx @@ -1,5 +1,5 @@ import { Box, IconButton } from '@rocket.chat/fuselage'; -import { HeaderToolbox, useDocumentTitle } from '@rocket.chat/ui-client'; +import { HeaderToolbar, useDocumentTitle } from '@rocket.chat/ui-client'; import { useLayout, useTranslation } from '@rocket.chat/ui-contexts'; import type { FC, ComponentProps, ReactNode } from 'react'; import React, { useContext } from 'react'; @@ -31,9 +31,9 @@ const PageHeader: FC = ({ children = undefined, title, onClickB > {isMobile && ( - + - + )} {onClickBack && } diff --git a/apps/meteor/client/hooks/roomActions/useThreadRoomAction.tsx b/apps/meteor/client/hooks/roomActions/useThreadRoomAction.tsx index dc72ef26c66b..92cc93e339fd 100644 --- a/apps/meteor/client/hooks/roomActions/useThreadRoomAction.tsx +++ b/apps/meteor/client/hooks/roomActions/useThreadRoomAction.tsx @@ -1,5 +1,5 @@ import type { BadgeProps } from '@rocket.chat/fuselage'; -import { HeaderToolboxAction, HeaderToolboxActionBadge } from '@rocket.chat/ui-client'; +import { HeaderToolbarAction, HeaderToolbarActionBadge } from '@rocket.chat/ui-client'; import { useSetting } from '@rocket.chat/ui-contexts'; import React, { lazy, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -46,7 +46,7 @@ export const useThreadRoomAction = () => { tabComponent: Threads, order: 2, renderToolboxItem: ({ id, className, index, icon, title, toolbox: { tab }, action, disabled, tooltip }) => ( - { disabled={disabled} tooltip={tooltip} > - {!!unread && {unread}} - + {!!unread && {unread}} + ), }; }, [enabled, t, unread, variant]); diff --git a/apps/meteor/client/views/room/Header/Header.tsx b/apps/meteor/client/views/room/Header/Header.tsx index cb8dabce3d48..08023e9cc59f 100644 --- a/apps/meteor/client/views/room/Header/Header.tsx +++ b/apps/meteor/client/views/room/Header/Header.tsx @@ -1,6 +1,6 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { isVoipRoom } from '@rocket.chat/core-typings'; -import { HeaderToolbox } from '@rocket.chat/ui-client'; +import { HeaderToolbar } from '@rocket.chat/ui-client'; import { useLayout } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React, { lazy, memo, useMemo } from 'react'; @@ -22,9 +22,9 @@ const Header = ({ room }: HeaderProps): ReactElement | null => { const slots = useMemo( () => ({ start: isMobile && ( - + - + ), }), [isMobile], diff --git a/apps/meteor/client/views/room/Header/Omnichannel/BackButton.tsx b/apps/meteor/client/views/room/Header/Omnichannel/BackButton.tsx index 75869011b083..31a913ecec7b 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/BackButton.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/BackButton.tsx @@ -1,5 +1,5 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { HeaderToolboxAction } from '@rocket.chat/ui-client'; +import { HeaderToolbarAction } from '@rocket.chat/ui-client'; import { useRouter, useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; @@ -26,5 +26,5 @@ export const BackButton = ({ routeName }: { routeName?: string }): ReactElement } }); - return ; + return ; }; diff --git a/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeader.tsx b/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeader.tsx index 8405ef43bf5c..89b70c1ed220 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeader.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeader.tsx @@ -1,4 +1,4 @@ -import { HeaderToolbox } from '@rocket.chat/ui-client'; +import { HeaderToolbar } from '@rocket.chat/ui-client'; import { useLayout, useRouter } from '@rocket.chat/ui-contexts'; import type { FC } from 'react'; import React, { useCallback, useMemo } from 'react'; @@ -40,10 +40,10 @@ const OmnichannelRoomHeader: FC = ({ slots: parentSl () => ({ ...parentSlot, start: (!!isMobile || currentRouteName === 'omnichannel-directory' || currentRouteName === 'omnichannel-current-chats') && ( - + {isMobile && } - + ), posContent: , }), diff --git a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx index c591e615042c..b26a4d36e248 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActionOptions.tsx @@ -1,6 +1,6 @@ import type { IOmnichannelRoom } from '@rocket.chat/core-typings'; import { Box, Dropdown, Option } from '@rocket.chat/fuselage'; -import { HeaderToolboxAction } from '@rocket.chat/ui-client'; +import { HeaderToolbarAction } from '@rocket.chat/ui-client'; import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo, useRef } from 'react'; @@ -26,7 +26,7 @@ const QuickActionOptions = ({ options, room, action, ...props }: QuickActionOpti return ( <> - toggle()} secondary={isVisible} {...props} /> + toggle()} secondary={isVisible} {...props} /> {isVisible && ( {options.map(({ id, label, validate }) => { diff --git a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx index b46a07555c62..3ebf79b81d44 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/QuickActions/QuickActions.tsx @@ -1,5 +1,5 @@ import type { Box } from '@rocket.chat/fuselage'; -import { HeaderToolbox, HeaderToolboxAction, HeaderToolboxDivider } from '@rocket.chat/ui-client'; +import { HeaderToolbar, HeaderToolbarAction, HeaderToolbarDivider } from '@rocket.chat/ui-client'; import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; @@ -18,7 +18,7 @@ const QuickActions = ({ className }: QuickActionsProps) => { const { quickActions, actionDefault } = useQuickActions(); return ( - + {quickActions.map(({ id, color, icon, title, action = actionDefault, options }, index) => { const props = { id, @@ -36,10 +36,10 @@ const QuickActions = ({ className }: QuickActionsProps) => { return ; } - return ; + return ; })} - {quickActions.length > 0 && } - + {quickActions.length > 0 && } + ); }; diff --git a/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx b/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx index ea0a1575d301..c4c5a63a00c1 100644 --- a/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx +++ b/apps/meteor/client/views/room/Header/Omnichannel/VoipRoomHeader.tsx @@ -1,5 +1,5 @@ import type { IVoipRoom } from '@rocket.chat/core-typings'; -import { HeaderToolbox } from '@rocket.chat/ui-client'; +import { HeaderToolbar } from '@rocket.chat/ui-client'; import { useLayout, useRouter } from '@rocket.chat/ui-contexts'; import type { FC } from 'react'; import React, { useCallback, useMemo } from 'react'; @@ -29,10 +29,10 @@ const VoipRoomHeader: FC = ({ slots: parentSlot, room }) => () => ({ ...parentSlot, start: (!!isMobile || currentRouteName === 'omnichannel-directory') && ( - + {isMobile && } {currentRouteName === 'omnichannel-directory' && } - + ), }), [isMobile, currentRouteName, parentSlot], diff --git a/apps/meteor/client/views/room/Header/RoomHeader.tsx b/apps/meteor/client/views/room/Header/RoomHeader.tsx index 08e935683613..36745bc0ae8d 100644 --- a/apps/meteor/client/views/room/Header/RoomHeader.tsx +++ b/apps/meteor/client/views/room/Header/RoomHeader.tsx @@ -1,6 +1,6 @@ import type { IRoom } from '@rocket.chat/core-typings'; import { isRoomFederated } from '@rocket.chat/core-typings'; -import { Header, HeaderAvatar, HeaderContent, HeaderContentRow, HeaderSubtitle, HeaderToolbox } from '@rocket.chat/ui-client'; +import { Header, HeaderAvatar, HeaderContent, HeaderContentRow, HeaderSubtitle, HeaderToolbar } from '@rocket.chat/ui-client'; import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { Suspense } from 'react'; @@ -63,11 +63,11 @@ const RoomHeader = ({ room, topic = '', slots = {} }: RoomHeaderProps) => { {slots?.posContent} - + {slots?.toolbox?.pre} {slots?.toolbox?.content || } {slots?.toolbox?.pos} - + {slots?.end} diff --git a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx b/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx index 17f80a490064..a12dcb25b826 100644 --- a/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx +++ b/apps/meteor/client/views/room/Header/RoomToolbox/RoomToolbox.tsx @@ -1,6 +1,6 @@ import type { Box } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import { HeaderToolboxAction, HeaderToolboxDivider } from '@rocket.chat/ui-client'; +import { HeaderToolbarAction, HeaderToolbarDivider } from '@rocket.chat/ui-client'; import { useLayout, useTranslation } from '@rocket.chat/ui-contexts'; import type { ComponentProps } from 'react'; import React, { memo } from 'react'; @@ -60,7 +60,7 @@ const RoomToolbox = ({ className }: RoomToolboxProps) => { const renderDefaultToolboxItem: RoomToolboxActionConfig['renderToolboxItem'] = useMutableCallback( ({ id, className, index, icon, title, toolbox: { tab }, action, disabled, tooltip }) => { return ( - { return ( <> {featuredActions.map(mapToToolboxItem)} - {featuredActions.length > 0 && } + {featuredActions.length > 0 && } {visibleActions.map(mapToToolboxItem)} {(normalActions.length > 6 || !roomToolboxExpanded) && !!hiddenActions.length && ( diff --git a/apps/meteor/client/views/room/RoomNotFound.tsx b/apps/meteor/client/views/room/RoomNotFound.tsx index f91189bc137e..941d490f0886 100644 --- a/apps/meteor/client/views/room/RoomNotFound.tsx +++ b/apps/meteor/client/views/room/RoomNotFound.tsx @@ -1,5 +1,5 @@ import { Box } from '@rocket.chat/fuselage'; -import { Header, HeaderToolbox } from '@rocket.chat/ui-client'; +import { Header, HeaderToolbar } from '@rocket.chat/ui-client'; import { useLayout, useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; @@ -17,9 +17,9 @@ const RoomNotFound = (): ReactElement => { header={ isMobile && (
- + - +
) } diff --git a/apps/meteor/tests/e2e/channel-management.spec.ts b/apps/meteor/tests/e2e/channel-management.spec.ts index 7cad1be43cbf..6bf7084ac494 100644 --- a/apps/meteor/tests/e2e/channel-management.spec.ts +++ b/apps/meteor/tests/e2e/channel-management.spec.ts @@ -22,6 +22,29 @@ test.describe.serial('channel-management', () => { await page.goto('/home'); }); + test('should navigate on toolbar using arrow keys', async ({ page }) => { + await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.content.sendMessage('hello composer'); + await poHomeChannel.roomHeaderFavoriteBtn.focus(); + + await page.keyboard.press('Tab'); + await page.keyboard.press('ArrowRight'); + await page.keyboard.press('ArrowRight'); + + await expect(poHomeChannel.roomHeaderToolbar.getByRole('button', { name: 'Threads' })).toBeFocused(); + }); + + test('should move the focus away from toolbar using tab key', async ({ page }) => { + await poHomeChannel.sidenav.openChat(targetChannel); + await poHomeChannel.content.sendMessage('hello composer'); + await poHomeChannel.roomHeaderFavoriteBtn.focus(); + + await page.keyboard.press('Tab'); + await page.keyboard.press('Tab'); + + await expect(poHomeChannel.roomHeaderToolbar.getByRole('button', { name: 'Call' })).not.toBeFocused(); + }); + test('expect add "user1" to "targetChannel"', async () => { await poHomeChannel.sidenav.openChat(targetChannel); await poHomeChannel.tabs.btnTabMembers.click(); diff --git a/apps/meteor/tests/e2e/page-objects/home-channel.ts b/apps/meteor/tests/e2e/page-objects/home-channel.ts index 78b044fa48fe..278256b7b0b1 100644 --- a/apps/meteor/tests/e2e/page-objects/home-channel.ts +++ b/apps/meteor/tests/e2e/page-objects/home-channel.ts @@ -48,4 +48,12 @@ export class HomeChannel { get composerToolbarActions(): Locator { return this.page.locator('[role=toolbar][aria-label="Composer Primary Actions"] button'); } + + get roomHeaderFavoriteBtn(): Locator { + return this.page.getByRole('button', { name: 'Favorite' }); + } + + get roomHeaderToolbar(): Locator { + return this.page.locator('[role=toolbar][aria-label="Primary Room actions"]'); + } } diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json index b2abbcbf00f2..552a7507ea47 100644 --- a/packages/ui-client/package.json +++ b/packages/ui-client/package.json @@ -4,6 +4,7 @@ "private": true, "devDependencies": { "@babel/core": "~7.22.20", + "@react-aria/toolbar": "^3.0.0-beta.1", "@rocket.chat/css-in-js": "~0.31.25", "@rocket.chat/fuselage": "^0.44.2", "@rocket.chat/fuselage-hooks": "^0.33.0", @@ -57,6 +58,7 @@ "/dist" ], "peerDependencies": { + "@react-aria/toolbar": "*", "@rocket.chat/css-in-js": "*", "@rocket.chat/fuselage": "*", "@rocket.chat/fuselage-hooks": "*", diff --git a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx new file mode 100644 index 000000000000..909814926c55 --- /dev/null +++ b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbar.tsx @@ -0,0 +1,16 @@ +import { useToolbar } from '@react-aria/toolbar'; +import { ButtonGroup } from '@rocket.chat/fuselage'; +import { type ComponentProps, useRef } from 'react'; + +const HeaderToolbar = (props: ComponentProps) => { + const ref = useRef(null); + const { toolbarProps } = useToolbar(props, ref); + + return ( + + {props.children} + + ); +}; + +export default HeaderToolbar; diff --git a/packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolboxAction.tsx b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx similarity index 78% rename from packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolboxAction.tsx rename to packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx index 48db84657959..36a124ece5ab 100644 --- a/packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolboxAction.tsx +++ b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarAction.tsx @@ -1,7 +1,7 @@ import { IconButton } from '@rocket.chat/fuselage'; import { forwardRef } from 'react'; -const HeaderToolboxAction = forwardRef(function HeaderToolboxAction( +const HeaderToolbarAction = forwardRef(function HeaderToolbarAction( { id, icon, action, index, title, 'data-tooltip': tooltip, ...props }, ref, ) { @@ -22,4 +22,4 @@ const HeaderToolboxAction = forwardRef(function HeaderTo ); }); -export default HeaderToolboxAction; +export default HeaderToolbarAction; diff --git a/packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolboxActionBadge.tsx b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx similarity index 71% rename from packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolboxActionBadge.tsx rename to packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx index d8da9762de9c..57f26b06bfd7 100644 --- a/packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolboxActionBadge.tsx +++ b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarActionBadge.tsx @@ -2,7 +2,7 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Badge } from '@rocket.chat/fuselage'; import type { ComponentProps, FC } from 'react'; -const HeaderToolboxActionBadge: FC> = (props) => ( +const HeaderToolbarActionActionBadge: FC> = (props) => ( > = (props) => ( ); -export default HeaderToolboxActionBadge; +export default HeaderToolbarActionActionBadge; diff --git a/packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolboxDivider.tsx b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx similarity index 51% rename from packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolboxDivider.tsx rename to packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx index 9d7041490a62..52bb2d21222f 100644 --- a/packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolboxDivider.tsx +++ b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx @@ -1,6 +1,6 @@ import { Divider } from '@rocket.chat/fuselage'; import type { ReactElement } from 'react'; -const HeaderToolboxDivider = (): ReactElement => ; +const HeaderToolbarDivider = (): ReactElement => ; -export default HeaderToolboxDivider; +export default HeaderToolbarDivider; diff --git a/packages/ui-client/src/components/Header/HeaderToolbar/index.ts b/packages/ui-client/src/components/Header/HeaderToolbar/index.ts new file mode 100644 index 000000000000..933f03d658c0 --- /dev/null +++ b/packages/ui-client/src/components/Header/HeaderToolbar/index.ts @@ -0,0 +1,4 @@ +export { default as HeaderToolbar } from './HeaderToolbar'; +export { default as HeaderToolbarAction } from './HeaderToolbarAction'; +export { default as HeaderToolbarActionBadge } from './HeaderToolbarActionBadge'; +export { default as HeaderToolbarDivider } from './HeaderToolbarDivider'; diff --git a/packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolbox.tsx b/packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolbox.tsx deleted file mode 100644 index e4b5ba67e5dc..000000000000 --- a/packages/ui-client/src/components/Header/HeaderToolbox/HeaderToolbox.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Box, ButtonGroup } from '@rocket.chat/fuselage'; -import type { FC, ComponentProps } from 'react'; - -const HeaderToolbox: FC> = (props) => ( - - - -); - -export default HeaderToolbox; diff --git a/packages/ui-client/src/components/Header/HeaderToolbox/index.ts b/packages/ui-client/src/components/Header/HeaderToolbox/index.ts deleted file mode 100644 index 7632bbd1a537..000000000000 --- a/packages/ui-client/src/components/Header/HeaderToolbox/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default as HeaderToolbox } from './HeaderToolbox'; -export { default as HeaderToolboxAction } from './HeaderToolboxAction'; -export { default as HeaderToolboxActionBadge } from './HeaderToolboxActionBadge'; -export { default as HeaderToolboxDivider } from './HeaderToolboxDivider'; diff --git a/packages/ui-client/src/components/Header/index.ts b/packages/ui-client/src/components/Header/index.ts index 675bdbba9de9..b8d62fb777f9 100644 --- a/packages/ui-client/src/components/Header/index.ts +++ b/packages/ui-client/src/components/Header/index.ts @@ -8,4 +8,4 @@ export { default as HeaderState } from './HeaderState'; export { default as HeaderSubtitle } from './HeaderSubtitle'; export * from './HeaderTag'; export { default as HeaderTitle } from './HeaderTitle'; -export * from './HeaderToolbox'; +export * from './HeaderToolbar'; diff --git a/yarn.lock b/yarn.lock index 535a69f809a3..3d3b0f32cf02 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10449,6 +10449,7 @@ __metadata: resolution: "@rocket.chat/ui-client@workspace:packages/ui-client" dependencies: "@babel/core": ~7.22.20 + "@react-aria/toolbar": ^3.0.0-beta.1 "@rocket.chat/css-in-js": ~0.31.25 "@rocket.chat/fuselage": ^0.44.2 "@rocket.chat/fuselage-hooks": ^0.33.0 @@ -10486,6 +10487,7 @@ __metadata: ts-jest: ~29.1.1 typescript: ~5.3.2 peerDependencies: + "@react-aria/toolbar": "*" "@rocket.chat/css-in-js": "*" "@rocket.chat/fuselage": "*" "@rocket.chat/fuselage-hooks": "*" From 3741a79b16223bd6eeccf79598c7cd8ff8213230 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Mon, 22 Jan 2024 17:11:06 -0300 Subject: [PATCH 2/3] chore: changeset --- .changeset/blue-tomatoes-retire.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 .changeset/blue-tomatoes-retire.md diff --git a/.changeset/blue-tomatoes-retire.md b/.changeset/blue-tomatoes-retire.md new file mode 100644 index 000000000000..2e8ac9419e6a --- /dev/null +++ b/.changeset/blue-tomatoes-retire.md @@ -0,0 +1,8 @@ +--- +"@rocket.chat/meteor": minor +"@rocket.chat/ui-client": minor +--- + +Room header keyboard navigability + +![Kapture 2024-01-22 at 11 33 14](https://github.com/RocketChat/Rocket.Chat/assets/27704687/f116c1e6-4ec7-4175-a01b-fa98eade2416) From 079729b60587e9925ba4c16111d9d3d2d0d99ce4 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Mon, 22 Jan 2024 19:29:45 -0300 Subject: [PATCH 3/3] chore: nojo --- .../src/components/Header/Header.stories.tsx | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/ui-client/src/components/Header/Header.stories.tsx b/packages/ui-client/src/components/Header/Header.stories.tsx index 364f442fa1d1..22cdecb20038 100644 --- a/packages/ui-client/src/components/Header/Header.stories.tsx +++ b/packages/ui-client/src/components/Header/Header.stories.tsx @@ -10,9 +10,9 @@ import { HeaderContent, HeaderContentRow, HeaderIcon, - HeaderToolbox, - HeaderToolboxAction, - HeaderToolboxActionBadge, + HeaderToolbar, + HeaderToolbarAction, + HeaderToolbarActionBadge, HeaderTitle, HeaderState, HeaderSubtitle, @@ -25,8 +25,8 @@ export default { title: 'Components/Header', component: Header, subcomponents: { - HeaderToolbox, - HeaderToolboxAction, + HeaderToolbar, + HeaderToolbarAction, HeaderAvatar, HeaderContent, HeaderContentRow, @@ -103,19 +103,19 @@ export const Default = () => ( {room.name} - - - - - + + + + + ); export const WithBurger = () => (
- - - + + + {avatar} @@ -129,11 +129,11 @@ export const WithBurger = () => ( {room.name} - - - - - + + + + +
); @@ -150,17 +150,17 @@ export const WithActionBadge = () => ( {room.name} - - - 1 - - - 2 - - - 99 - - - + + + 1 + + + 2 + + + 99 + + + );