Skip to content

chore: Sidebar toolbar keyboard navigation #31846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ggazzo merged 2 commits into from
Feb 28, 2024
Merged

chore: Sidebar toolbar keyboard navigation #31846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad4b352
chore: sidebar toolbar spacing
dougfabris Feb 27, 2024
9143891
Merge branch 'develop' into chore/sidebar-toolbar
kodiakhq[bot] Feb 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions apps/meteor/client/sidebar/header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Sidebar } from '@rocket.chat/fuselage';
import { useUser, useTranslation } from '@rocket.chat/ui-contexts';
import { useTranslation, useUser } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { memo } from 'react';

import SidebarHeaderToolbar from './SidebarHeaderToolbar';
import UserAvatarWithStatus from './UserAvatarWithStatus';
import UserMenu from './UserMenu';
import Administration from './actions/Administration';
Expand All @@ -26,7 +27,7 @@ const Header = (): ReactElement => {
return (
<Sidebar.TopBar.Section>
{user ? <UserMenu user={user} /> : <UserAvatarWithStatus />}
<Sidebar.TopBar.Actions>
<SidebarHeaderToolbar aria-label={t('Sidebar_actions')}>
<Home title={t('Home')} />
<Search title={t('Search')} />
{user && (
Expand All @@ -38,7 +39,7 @@ const Header = (): ReactElement => {
</>
)}
{!user && <Login title={t('Login')} />}
</Sidebar.TopBar.Actions>
</SidebarHeaderToolbar>
</Sidebar.TopBar.Section>
);
};
Expand Down
5 changes: 3 additions & 2 deletions apps/meteor/client/sidebar/header/HeaderUnstable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useUserId, useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { memo } from 'react';

import SidebarHeaderToolbar from './SidebarHeaderToolbar';
import CreateRoom from './actions/CreateRoom';
import Directory from './actions/Directory';
import Login from './actions/Login';
Expand All @@ -15,7 +16,7 @@ const HeaderUnstable = (): ReactElement => {

return (
<Sidebar.TopBar.Section>
<Sidebar.TopBar.Actions align='end'>
<SidebarHeaderToolbar align='end' aria-label={t('Sidebar_actions')}>
<Search title={t('Search')} />
{uid && (
<>
Expand All @@ -25,7 +26,7 @@ const HeaderUnstable = (): ReactElement => {
</>
)}
{!uid && <Login title={t('Login')} />}
</Sidebar.TopBar.Actions>
</SidebarHeaderToolbar>
</Sidebar.TopBar.Section>
);
};
Expand Down
13 changes: 13 additions & 0 deletions apps/meteor/client/sidebar/header/SidebarHeaderToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { useToolbar } from '@react-aria/toolbar';
import { TopBarActions } from '@rocket.chat/fuselage';
import type { ComponentProps } from 'react';
import React, { useRef } from 'react';

const SidebarHeaderToolbar = (props: ComponentProps<typeof TopBarActions>) => {
const ref = useRef(null);
const { toolbarProps } = useToolbar(props, ref);

return <TopBarActions small ref={ref} {...toolbarProps} {...props} />;
};

export default SidebarHeaderToolbar;
9 changes: 5 additions & 4 deletions apps/meteor/client/sidebar/sections/OmnichannelSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React, { memo } from 'react';
import { useIsCallEnabled, useIsCallReady } from '../../contexts/CallContext';
import { useIsOverMacLimit } from '../../hooks/omnichannel/useIsOverMacLimit';
import { useOmnichannelShowQueueLink } from '../../hooks/omnichannel/useOmnichannelShowQueueLink';
import SidebarHeaderToolbar from '../header/SidebarHeaderToolbar';
import { OverMacLimitSection } from './OverMacLimitSection';
import { OmniChannelCallDialPad, OmnichannelCallToggle, OmnichannelLivechatToggle } from './actions';

Expand Down Expand Up @@ -38,9 +39,9 @@ const OmnichannelSection = () => {
<>
{isWorkspaceOverMacLimit && <OverMacLimitSection />}

<Sidebar.TopBar.ToolBox className='omnichannel-sidebar'>
<Sidebar.TopBar.Section aria-label={t('Omnichannel_actions')} className='omnichannel-sidebar'>
<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
<Sidebar.TopBar.Actions>
<SidebarHeaderToolbar>
{showOmnichannelQueueLink && (
<Sidebar.TopBar.Action icon='queue' data-tooltip={t('Queue')} onClick={(): void => handleRoute('queue')} />
)}
Expand All @@ -55,8 +56,8 @@ const OmnichannelSection = () => {
/>
)}
{isCallReady && <OmniChannelCallDialPad />}
</Sidebar.TopBar.Actions>
</Sidebar.TopBar.ToolBox>
</SidebarHeaderToolbar>
</Sidebar.TopBar.Section>
</>
);
};
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@
"@rocket.chat/favicon": "workspace:^",
"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.2",
"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.3",
"@rocket.chat/fuselage": "^0.47.1",
"@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/fuselage-polyfills": "~0.31.25",
"@rocket.chat/fuselage-toastbar": "~0.31.25",
Expand Down
2 changes: 1 addition & 1 deletion ee/packages/ui-theming/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"private": true,
"devDependencies": {
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/fuselage": "^0.47.1",
"@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/icons": "^0.33.0",
"@rocket.chat/ui-contexts": "workspace:~",
Expand Down
2 changes: 1 addition & 1 deletion packages/fuselage-ui-kit/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
"@babel/preset-typescript": "~7.22.15",
"@rocket.chat/apps-engine": "1.41.0",
"@rocket.chat/eslint-config": "workspace:^",
"@rocket.chat/fuselage": "^0.47.1",
"@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/fuselage-polyfills": "~0.31.25",
"@rocket.chat/icons": "^0.33.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/gazzodown/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@rocket.chat/core-typings": "workspace:^",
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/fuselage": "^0.47.1",
"@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-tokens": "~0.32.0",
"@rocket.chat/message-parser": "workspace:^",
"@rocket.chat/styled": "~0.31.25",
Expand Down
2 changes: 2 additions & 0 deletions packages/i18n/src/locales/en.i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3162,6 +3162,7 @@
"Livechat_offline_message_sent": "Livechat offline message sent",
"Livechat_OfflineMessageToChannel_enabled": "Send Livechat offline messages to a channel",
"Omnichannel_chat_closed_due_to_inactivity": "The chat was automatically closed because we haven't received any reply from {{guest}} in {{timeout}} seconds",
"Omnichannel_actions": "Omnichannel actions",
"Omnichannel_on_hold_chat_resumed": "On Hold Chat Resumed: {{comment}}",
"Omnichannel_on_hold_chat_automatically": "The chat was automatically resumed from On Hold upon receiving a new message from {{guest}}",
"Omnichannel_on_hold_chat_resumed_manually": "The chat was manually resumed from On Hold by {{user}}",
Expand Down Expand Up @@ -4816,6 +4817,7 @@
"Show_or_hide_the_user_roles_of_message_authors": "Show or hide the user roles of message authors.",
"Show_or_hide_the_username_of_message_authors": "Show or hide the username of message authors.",
"Sidebar": "Sidebar",
"Sidebar_actions": "Sidebar actions",
"Sidebar_list_mode": "Sidebar Channel List Mode",
"Sign_in_to_start_talking": "Sign in to start talking",
"Sign_in_with__provider__": "Sign in with {{provider}}",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-avatar/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"private": true,
"devDependencies": {
"@babel/core": "~7.22.20",
"@rocket.chat/fuselage": "^0.47.1",
"@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/ui-contexts": "workspace:^",
"@types/babel__core": "~7.20.3",
"@types/react": "~17.0.69",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@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.47.1",
"@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/icons": "^0.33.0",
"@rocket.chat/mock-providers": "workspace:^",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-composer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@react-aria/toolbar": "^3.0.0-beta.1",
"@rocket.chat/eslint-config": "workspace:^",
"@rocket.chat/fuselage": "^0.47.1",
"@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/icons": "^0.33.0",
"@storybook/addon-actions": "~6.5.16",
"@storybook/addon-docs": "~6.5.16",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-video-conf/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/eslint-config": "workspace:^",
"@rocket.chat/fuselage": "^0.47.1",
"@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/icons": "^0.33.0",
"@rocket.chat/styled": "~0.31.25",
Expand Down
2 changes: 1 addition & 1 deletion packages/uikit-playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@codemirror/tooltip": "^0.19.16",
"@lezer/highlight": "^1.1.6",
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/fuselage": "^0.47.1",
"@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/fuselage-polyfills": "~0.31.25",
"@rocket.chat/fuselage-toastbar": "^0.31.25",
Expand Down
26 changes: 13 additions & 13 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8717,7 +8717,7 @@ __metadata:
"@babel/preset-typescript": ~7.22.15
"@rocket.chat/apps-engine": 1.41.0
"@rocket.chat/eslint-config": "workspace:^"
"@rocket.chat/fuselage": ^0.47.1
"@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/fuselage-polyfills": ~0.31.25
"@rocket.chat/gazzodown": "workspace:^"
Expand Down Expand Up @@ -8772,9 +8772,9 @@ __metadata:
languageName: unknown
linkType: soft

"@rocket.chat/fuselage@npm:^0.47.1":
version: 0.47.1
resolution: "@rocket.chat/fuselage@npm:0.47.1"
"@rocket.chat/fuselage@npm:^0.48.0":
version: 0.48.0
resolution: "@rocket.chat/fuselage@npm:0.48.0"
dependencies:
"@rocket.chat/css-in-js": ^0.31.25
"@rocket.chat/css-supports": ^0.31.25
Expand All @@ -8792,7 +8792,7 @@ __metadata:
react: ^17.0.2
react-dom: ^17.0.2
react-virtuoso: 1.2.4
checksum: d812e4ed52b53372268b4f5d396fb8d6aeb3f46a4f7e276642edf287ca2038f88e2a6d8bc0264f95fee1772aadc849419f7695e35cc6a278111efcbc18e1472d
checksum: d82121b6e6d0fa6ea204d8cbd2cc32460c4ca3585c05a1a1d908250c9150ed52edfd0acc75520cb29c6bd81a8671dc7d91f427913bcc4364a14b4eacd4bd2bf4
languageName: node
linkType: hard

Expand All @@ -8803,7 +8803,7 @@ __metadata:
"@babel/core": ~7.22.20
"@rocket.chat/core-typings": "workspace:^"
"@rocket.chat/css-in-js": ~0.31.25
"@rocket.chat/fuselage": ^0.47.1
"@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-tokens": ~0.32.0
"@rocket.chat/message-parser": "workspace:^"
"@rocket.chat/styled": ~0.31.25
Expand Down Expand Up @@ -9158,7 +9158,7 @@ __metadata:
"@rocket.chat/favicon": "workspace:^"
"@rocket.chat/forked-matrix-appservice-bridge": ^4.0.2
"@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.3
"@rocket.chat/fuselage": ^0.47.1
"@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/fuselage-polyfills": ~0.31.25
"@rocket.chat/fuselage-toastbar": ~0.31.25
Expand Down Expand Up @@ -10037,7 +10037,7 @@ __metadata:
resolution: "@rocket.chat/ui-avatar@workspace:packages/ui-avatar"
dependencies:
"@babel/core": ~7.22.20
"@rocket.chat/fuselage": ^0.47.1
"@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/ui-contexts": "workspace:^"
"@types/babel__core": ~7.20.3
"@types/react": ~17.0.69
Expand All @@ -10063,7 +10063,7 @@ __metadata:
"@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.47.1
"@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/icons": ^0.33.0
"@rocket.chat/mock-providers": "workspace:^"
Expand Down Expand Up @@ -10116,7 +10116,7 @@ __metadata:
"@babel/core": ~7.22.20
"@react-aria/toolbar": ^3.0.0-beta.1
"@rocket.chat/eslint-config": "workspace:^"
"@rocket.chat/fuselage": ^0.47.1
"@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/icons": ^0.33.0
"@storybook/addon-actions": ~6.5.16
"@storybook/addon-docs": ~6.5.16
Expand Down Expand Up @@ -10208,7 +10208,7 @@ __metadata:
resolution: "@rocket.chat/ui-theming@workspace:ee/packages/ui-theming"
dependencies:
"@rocket.chat/css-in-js": ~0.31.25
"@rocket.chat/fuselage": ^0.47.1
"@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/icons": ^0.33.0
"@rocket.chat/ui-contexts": "workspace:~"
Expand Down Expand Up @@ -10251,7 +10251,7 @@ __metadata:
"@rocket.chat/css-in-js": ~0.31.25
"@rocket.chat/emitter": ~0.31.25
"@rocket.chat/eslint-config": "workspace:^"
"@rocket.chat/fuselage": ^0.47.1
"@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/icons": ^0.33.0
"@rocket.chat/styled": ~0.31.25
Expand Down Expand Up @@ -10296,7 +10296,7 @@ __metadata:
"@codemirror/tooltip": ^0.19.16
"@lezer/highlight": ^1.1.6
"@rocket.chat/css-in-js": ~0.31.25
"@rocket.chat/fuselage": ^0.47.1
"@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/fuselage-polyfills": ~0.31.25
"@rocket.chat/fuselage-toastbar": ^0.31.25
Expand Down