From f6f9caf9e6b0c6e91ce36eee8b4ac1221d2d5230 Mon Sep 17 00:00:00 2001 From: Saheb Giri <47132373+iamsahebgiri@users.noreply.github.com> Date: Mon, 3 Apr 2023 19:04:11 +0530 Subject: [PATCH] fix: now user can navigate using arrow keys (#681) --- .../command-palette/change-issue-assignee.tsx | 3 +- .../command-palette/change-issue-priority.tsx | 3 +- .../command-palette/change-issue-state.tsx | 3 +- .../command-palette/command-pallette.tsx | 81 ++++++------------- apps/app/styles/command-pallette.css | 7 +- 5 files changed, 33 insertions(+), 64 deletions(-) diff --git a/apps/app/components/command-palette/change-issue-assignee.tsx b/apps/app/components/command-palette/change-issue-assignee.tsx index 54e9a4f21..09f597e2e 100644 --- a/apps/app/components/command-palette/change-issue-assignee.tsx +++ b/apps/app/components/command-palette/change-issue-assignee.tsx @@ -98,8 +98,7 @@ export const ChangeIssueAssignee: React.FC = ({ setIsPaletteOpen, issue } handleIssueAssignees(option.value)} - className="focus:bg-slate-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" > {option.content} diff --git a/apps/app/components/command-palette/change-issue-priority.tsx b/apps/app/components/command-palette/change-issue-priority.tsx index 4c8661131..b6eca1df8 100644 --- a/apps/app/components/command-palette/change-issue-priority.tsx +++ b/apps/app/components/command-palette/change-issue-priority.tsx @@ -60,8 +60,7 @@ export const ChangeIssuePriority: React.FC = ({ setIsPaletteOpen, issue } handleIssueState(priority)} - className="focus:bg-slate-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
{getPriorityIcon(priority)} diff --git a/apps/app/components/command-palette/change-issue-state.tsx b/apps/app/components/command-palette/change-issue-state.tsx index a2d06050d..2eef56193 100644 --- a/apps/app/components/command-palette/change-issue-state.tsx +++ b/apps/app/components/command-palette/change-issue-state.tsx @@ -75,8 +75,7 @@ export const ChangeIssueState: React.FC = ({ setIsPaletteOpen, issue }) = handleIssueState(state.id)} - className="focus:bg-slate-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
{getStateGroupIcon(state.group, "16", "16", state.color)} diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx index fd32e7ce1..650ab5a65 100644 --- a/apps/app/components/command-palette/command-pallette.tsx +++ b/apps/app/components/command-palette/command-pallette.tsx @@ -492,8 +492,7 @@ export const CommandPalette: React.FC = () => { setIsPaletteOpen(false); }} value={value} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -519,8 +518,7 @@ export const CommandPalette: React.FC = () => { setSearchTerm(""); setPages([...pages, "change-issue-state"]); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -533,8 +531,7 @@ export const CommandPalette: React.FC = () => { setSearchTerm(""); setPages([...pages, "change-issue-priority"]); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -547,8 +544,7 @@ export const CommandPalette: React.FC = () => { setSearchTerm(""); setPages([...pages, "change-issue-assignee"]); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -560,8 +556,7 @@ export const CommandPalette: React.FC = () => { handleIssueAssignees(user.id); setSearchTerm(""); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
{issueDetails?.assignees.includes(user.id) ? ( @@ -578,11 +573,7 @@ export const CommandPalette: React.FC = () => {
- +
Delete issue @@ -593,8 +584,7 @@ export const CommandPalette: React.FC = () => { setIsPaletteOpen(false); copyIssueUrlToClipboard(); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -604,11 +594,7 @@ export const CommandPalette: React.FC = () => { )} - +
Create new issue @@ -621,8 +607,7 @@ export const CommandPalette: React.FC = () => {
@@ -638,8 +623,7 @@ export const CommandPalette: React.FC = () => {
@@ -652,8 +636,7 @@ export const CommandPalette: React.FC = () => {
@@ -664,11 +647,7 @@ export const CommandPalette: React.FC = () => { - +
Create new view @@ -686,8 +665,7 @@ export const CommandPalette: React.FC = () => { setSearchTerm(""); setPages([...pages, "settings"]); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -698,8 +676,7 @@ export const CommandPalette: React.FC = () => {
@@ -716,8 +693,7 @@ export const CommandPalette: React.FC = () => { }); document.dispatchEvent(e); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -729,8 +705,7 @@ export const CommandPalette: React.FC = () => { setIsPaletteOpen(false); window.open("https://docs.plane.so/", "_blank"); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -742,8 +717,7 @@ export const CommandPalette: React.FC = () => { setIsPaletteOpen(false); window.open("https://discord.com/invite/A92xrEGCge", "_blank"); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -758,8 +732,7 @@ export const CommandPalette: React.FC = () => { "_blank" ); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -771,8 +744,7 @@ export const CommandPalette: React.FC = () => { setIsPaletteOpen(false); (window as any).$crisp.push(["do", "chat:open"]); }} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -787,8 +759,7 @@ export const CommandPalette: React.FC = () => { <> goToSettings()} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -797,8 +768,7 @@ export const CommandPalette: React.FC = () => { goToSettings("members")} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -807,8 +777,7 @@ export const CommandPalette: React.FC = () => { goToSettings("billing")} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -817,8 +786,7 @@ export const CommandPalette: React.FC = () => { goToSettings("integrations")} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
@@ -827,8 +795,7 @@ export const CommandPalette: React.FC = () => { goToSettings("import-export")} - className="focus:bg-gray-200 focus:outline-none" - tabIndex={0} + className="focus:outline-none" >
diff --git a/apps/app/styles/command-pallette.css b/apps/app/styles/command-pallette.css index 00f4e6483..c28486f45 100644 --- a/apps/app/styles/command-pallette.css +++ b/apps/app/styles/command-pallette.css @@ -31,5 +31,10 @@ } [cmdk-item]:hover { - background-color: rgb(243 244 246); + background-color: rgb(229 231 235); } + + +[aria-selected="true"] { + background-color: rgb(229 231 235); +} \ No newline at end of file