From 279630052fdb89bfd52ea2a44a4fd1715c82765a Mon Sep 17 00:00:00 2001 From: Kanav Arora Date: Thu, 9 Nov 2023 19:48:51 +0530 Subject: [PATCH] 2294 feat(frontend): styling shortcut keys (#2336) * 2294 feat(frontend): styling shortcut keys * 2294 fix(front): pr requested changes * Fix component interface --------- Co-authored-by: Charles Bochet --- .../command-menu/components/CommandMenu.tsx | 16 +++-- .../components/CommandMenuItem.tsx | 9 ++- .../constants/commandMenuCommands.ts | 15 +++-- .../src/modules/command-menu/types/Command.ts | 3 +- .../menu-item/components/MenuItemCommand.tsx | 32 +++------- .../components/MenuItemCommandHotKeys.tsx | 62 +++++++++++++++++++ .../__stories__/MenuItemCommand.stories.tsx | 24 +++---- .../modules/ui/theme/constants/boxShadow.ts | 2 + 8 files changed, 111 insertions(+), 52 deletions(-) create mode 100644 front/src/modules/ui/navigation/menu-item/components/MenuItemCommandHotKeys.tsx diff --git a/front/src/modules/command-menu/components/CommandMenu.tsx b/front/src/modules/command-menu/components/CommandMenu.tsx index 190986e62c..8d76fd4bcd 100644 --- a/front/src/modules/command-menu/components/CommandMenu.tsx +++ b/front/src/modules/command-menu/components/CommandMenu.tsx @@ -88,13 +88,9 @@ export const CommandMenu = () => { const activities = activityData?.searchResults ?? []; const checkInShortcuts = (cmd: Command, search: string) => { - if (cmd.shortcuts && cmd.shortcuts.length > 0) { - return cmd.shortcuts - .join('') - .toLowerCase() - .includes(search.toLowerCase()); - } - return false; + return (cmd.firstHotKey + (cmd.secondHotKey ?? '')) + .toLowerCase() + .includes(search.toLowerCase()); }; const checkInLabels = (cmd: Command, search: string) => { @@ -144,7 +140,8 @@ export const CommandMenu = () => { Icon={cmd.Icon} label={cmd.label} onClick={cmd.onCommandClick} - shortcuts={cmd.shortcuts || []} + firstHotKey={cmd.firstHotKey} + secondHotKey={cmd.secondHotKey} /> ))} @@ -156,7 +153,8 @@ export const CommandMenu = () => { label={cmd.label} Icon={cmd.Icon} onClick={cmd.onCommandClick} - shortcuts={cmd.shortcuts || []} + firstHotKey={cmd.firstHotKey} + secondHotKey={cmd.secondHotKey} /> ))} diff --git a/front/src/modules/command-menu/components/CommandMenuItem.tsx b/front/src/modules/command-menu/components/CommandMenuItem.tsx index 53b1cf7fb2..29d2a4664f 100644 --- a/front/src/modules/command-menu/components/CommandMenuItem.tsx +++ b/front/src/modules/command-menu/components/CommandMenuItem.tsx @@ -12,7 +12,8 @@ export type CommandMenuItemProps = { key: string; onClick?: () => void; Icon?: IconComponent; - shortcuts?: Array; + firstHotKey?: string; + secondHotKey?: string; }; export const CommandMenuItem = ({ @@ -20,7 +21,8 @@ export const CommandMenuItem = ({ to, onClick, Icon, - shortcuts, + firstHotKey, + secondHotKey, }: CommandMenuItemProps) => { const navigate = useNavigate(); const { closeCommandMenu } = useCommandMenu(); @@ -46,7 +48,8 @@ export const CommandMenuItem = ({ ); diff --git a/front/src/modules/command-menu/constants/commandMenuCommands.ts b/front/src/modules/command-menu/constants/commandMenuCommands.ts index e0aba653f4..67089d82f8 100644 --- a/front/src/modules/command-menu/constants/commandMenuCommands.ts +++ b/front/src/modules/command-menu/constants/commandMenuCommands.ts @@ -13,35 +13,40 @@ export const commandMenuCommands: Command[] = [ to: '/people', label: 'Go to People', type: CommandType.Navigate, - shortcuts: ['G', 'P'], + firstHotKey: 'G', + secondHotKey: 'P', Icon: IconUser, }, { to: '/companies', label: 'Go to Companies', type: CommandType.Navigate, - shortcuts: ['G', 'C'], + firstHotKey: 'G', + secondHotKey: 'C', Icon: IconBuildingSkyscraper, }, { to: '/opportunities', label: 'Go to Opportunities', type: CommandType.Navigate, - shortcuts: ['G', 'O'], + firstHotKey: 'G', + secondHotKey: 'O', Icon: IconTargetArrow, }, { to: '/settings/profile', label: 'Go to Settings', type: CommandType.Navigate, - shortcuts: ['G', 'S'], + firstHotKey: 'G', + secondHotKey: 'S', Icon: IconSettings, }, { to: '/tasks', label: 'Go to Tasks', type: CommandType.Navigate, - shortcuts: ['G', 'T'], + firstHotKey: 'G', + secondHotKey: 'T', Icon: IconCheckbox, }, ]; diff --git a/front/src/modules/command-menu/types/Command.ts b/front/src/modules/command-menu/types/Command.ts index 59ca09d0d1..843a5294c5 100644 --- a/front/src/modules/command-menu/types/Command.ts +++ b/front/src/modules/command-menu/types/Command.ts @@ -10,6 +10,7 @@ export type Command = { label: string; type: CommandType.Navigate | CommandType.Create; Icon?: IconComponent; - shortcuts?: string[]; + firstHotKey?: string; + secondHotKey?: string; onCommandClick?: () => void; }; diff --git a/front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx b/front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx index ed69d7731f..1b89086cfe 100644 --- a/front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx +++ b/front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx @@ -9,6 +9,8 @@ import { StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; +import { MenuItemCommandHotKeys } from './MenuItemCommandHotKeys'; + const StyledMenuItemLabelText = styled(StyledMenuItemLabel)` color: ${({ theme }) => theme.font.color.primary}; `; @@ -25,14 +27,6 @@ const StyledBigIconContainer = styled.div` padding: ${({ theme }) => theme.spacing(1)}; `; -const StyledCommandText = styled.div` - color: ${({ theme }) => theme.font.color.light}; - - padding-left: ${({ theme }) => theme.spacing(2)}; - padding-right: ${({ theme }) => theme.spacing(2)}; - white-space: nowrap; -`; - const StyledMenuItemCommandContainer = styled(Command.Item)` --horizontal-padding: ${({ theme }) => theme.spacing(1)}; --vertical-padding: ${({ theme }) => theme.spacing(2)}; @@ -58,17 +52,6 @@ const StyledMenuItemCommandContainer = styled(Command.Item)` } &[data-selected='true'] { background: ${({ theme }) => theme.background.tertiary}; - /* Could be nice to add a caret like this for better accessibility in the future - But it needs to be consistend with other picker dropdown (e.g. company) - &:after { - background: ${({ theme }) => theme.background.quaternary}; - content: ''; - height: 100%; - left: 0; - position: absolute; - width: 3px; - z-index: ${({ theme }) => theme.lastLayerZIndex}; - } */ } &[data-disabled='true'] { color: ${({ theme }) => theme.font.color.light}; @@ -83,7 +66,8 @@ const StyledMenuItemCommandContainer = styled(Command.Item)` export type MenuItemCommandProps = { LeftIcon?: IconComponent; text: string; - command: string; + firstHotKey?: string; + secondHotKey?: string; className?: string; onClick?: () => void; }; @@ -91,7 +75,8 @@ export type MenuItemCommandProps = { export const MenuItemCommand = ({ LeftIcon, text, - command, + firstHotKey, + secondHotKey, className, onClick, }: MenuItemCommandProps) => { @@ -109,7 +94,10 @@ export const MenuItemCommand = ({ {text} - {command} + ); }; diff --git a/front/src/modules/ui/navigation/menu-item/components/MenuItemCommandHotKeys.tsx b/front/src/modules/ui/navigation/menu-item/components/MenuItemCommandHotKeys.tsx new file mode 100644 index 0000000000..bfebf4683b --- /dev/null +++ b/front/src/modules/ui/navigation/menu-item/components/MenuItemCommandHotKeys.tsx @@ -0,0 +1,62 @@ +import styled from '@emotion/styled'; + +const StyledCommandTextContainer = styled.div` + align-items: center; + display: flex; + flex-direction: row; + gap: ${({ theme }) => theme.spacing(1)}; + justify-content: center; +`; + +const StyledCommandText = styled.div` + color: ${({ theme }) => theme.font.color.light}; + padding-bottom: ${({ theme }) => theme.spacing(1)}; + padding-left: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(2)}; + padding-top: ${({ theme }) => theme.spacing(1)}; + white-space: nowrap; +`; + +const StyledCommandKey = styled.div` + align-items: center; + background-color: ${({ theme }) => theme.background.secondary}; + border: 1px solid ${({ theme }) => theme.border.color.strong}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + box-shadow: ${({ theme }) => theme.boxShadow.underline}; + display: flex; + flex-direction: column; + + height: ${({ theme }) => theme.spacing(5)}; + height: 18px; + justify-content: center; + text-align: center; + width: ${({ theme }) => theme.spacing(4)}; +`; + +export type MenuItemCommandHotKeysProps = { + firstHotKey?: string; + joinLabel?: string; + secondHotKey?: string; +}; + +export const MenuItemCommandHotKeys = ({ + firstHotKey, + secondHotKey, + joinLabel = 'then', +}: MenuItemCommandHotKeysProps) => { + return ( + + {firstHotKey && ( + + {firstHotKey} + {secondHotKey && ( + <> + {joinLabel} + {secondHotKey} + + )} + + )} + + ); +}; diff --git a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx index 922c4783b7..b4c871eab2 100644 --- a/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx +++ b/front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx @@ -20,14 +20,16 @@ type Story = StoryObj; export const Default: Story = { args: { text: 'First option', - command: '⌘ 1', + firstHotKey: '⌘', + secondHotKey: '1', }, render: (props) => ( @@ -37,12 +39,16 @@ export const Default: Story = { }; export const Catalog: CatalogStory = { - args: { LeftIcon: IconBell, text: 'Menu item', command: '⌘1' }, + args: { + text: 'Menu item', + firstHotKey: '⌘', + secondHotKey: '1', + }, argTypes: { className: { control: false }, }, parameters: { - pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] }, + pseudo: { hover: ['.hover'] }, catalog: { dimensions: [ { @@ -54,13 +60,6 @@ export const Catalog: CatalogStory = { labels: (withIcon: boolean) => withIcon ? 'With left icon' : 'Without left icon', }, - { - name: 'selected', - values: [true, false], - props: () => ({}), - labels: (selected: boolean) => - selected ? 'Selected' : 'Not selected', - }, { name: 'states', values: ['default', 'hover'], @@ -88,7 +87,8 @@ export const Catalog: CatalogStory = { diff --git a/front/src/modules/ui/theme/constants/boxShadow.ts b/front/src/modules/ui/theme/constants/boxShadow.ts index ddcb88e1b4..f31f2608e8 100644 --- a/front/src/modules/ui/theme/constants/boxShadow.ts +++ b/front/src/modules/ui/theme/constants/boxShadow.ts @@ -10,6 +10,7 @@ export const boxShadowLight = { grayScale.gray100, 0.12, )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`, + underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`, }; export const boxShadowDark = { @@ -22,4 +23,5 @@ export const boxShadowDark = { grayScale.gray100, 0.16, )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`, + underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`, };