dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-18 07:39:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: add trigger with proper a11y

Browse Source
This commit is contained in:
Charis Lam committed 2024-07-11 18:41:42 -04:00
1 parent 93570ca78c
commit ee5bb8a6b8
10 files changed
+73 -58
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/design-system/content/docs/components/commandmenu.mdx
+8 -7
View File
@@ -15,9 +15,9 @@ import {
CommandInput,
CommandList,
CommandMenu,
CommandMenuTrigger as CommandMenuTriggerPrimitive,
CommandProvider,
useRegisterCommands,
useSetCommandMenuOpen,
} from 'ui-patterns/CommandMenu'
```
@@ -42,17 +42,18 @@ function Commands() {
}
function CommandMenuTrigger() {
const setOpen = useSetCommandMenuOpen()
return <Button onClick={() => setOpen(true)}>Open command menu</Button>
return (
<CommandMenuTriggerPrimitive>
<Button>Open command menu</Button>
</CommandMenuTriggerPrimitive>
)
}
export function CommandMenuDemo() {
export default function CommandMenuDemo() {
return (
<CommandProvider openKey="j">
<CommandMenuTrigger />
<Commands />
<CommandMenu>
<CommandMenu trigger={<CommandMenuTrigger />}>
<CommandInput />
<CommandList />
</CommandMenu>
apps/design-system/registry/default/example/commandmenu-conditional.tsx
+11 -10
View File
@@ -4,9 +4,9 @@ import {
CommandInput,
CommandList,
CommandMenu,
CommandMenuTrigger as CommandMenuTriggerPrimitive,
CommandProvider,
useRegisterCommands,
useSetCommandMenuOpen,
} from 'ui-patterns/CommandMenu'
function Commands() {
@@ -48,22 +48,23 @@ function Commands() {
}
function CommandMenuTrigger() {
const setOpen = useSetCommandMenuOpen()
return <Button onClick={() => setOpen(true)}>Open command menu</Button>
return (
<CommandMenuTriggerPrimitive>
<Button>Open command menu</Button>
</CommandMenuTriggerPrimitive>
)
}
export default function CommandMenuDemo() {
return (
<CommandProvider openKey="j">
<CommandProvider openKey="">
<div className="flex flex-col gap-2">
<CommandMenuTrigger />
<CommandMenu trigger={<CommandMenuTrigger />}>
<CommandInput />
<CommandList />
</CommandMenu>
<Commands />
</div>
<CommandMenu>
<CommandInput />
<CommandList />
</CommandMenu>
</CommandProvider>
)
}
apps/design-system/registry/default/example/commandmenu-demo.tsx
+7 -6
View File
@@ -3,9 +3,9 @@ import {
CommandInput,
CommandList,
CommandMenu,
CommandMenuTrigger as CommandMenuTriggerPrimitive,
CommandProvider,
useRegisterCommands,
useSetCommandMenuOpen,
} from 'ui-patterns/CommandMenu'
function Commands() {
@@ -28,17 +28,18 @@ function Commands() {
}
function CommandMenuTrigger() {
const setOpen = useSetCommandMenuOpen()
return <Button onClick={() => setOpen(true)}>Open command menu</Button>
return (
<CommandMenuTriggerPrimitive>
<Button>Open command menu</Button>
</CommandMenuTriggerPrimitive>
)
}
export default function CommandMenuDemo() {
return (
<CommandProvider openKey="j">
<CommandMenuTrigger />
<Commands />
<CommandMenu>
<CommandMenu trigger={<CommandMenuTrigger />}>
<CommandInput />
<CommandList />
</CommandMenu>
apps/design-system/registry/default/example/commandmenu-force.tsx
+7 -6
View File
@@ -3,9 +3,9 @@ import {
CommandInput,
CommandList,
CommandMenu,
CommandMenuTrigger as CommandMenuTriggerPrimitive,
CommandProvider,
useRegisterCommands,
useSetCommandMenuOpen,
} from 'ui-patterns/CommandMenu'
function Commands() {
@@ -40,17 +40,18 @@ function Commands() {
}
function CommandMenuTrigger() {
const setOpen = useSetCommandMenuOpen()
return <Button onClick={() => setOpen(true)}>Open command menu</Button>
return (
<CommandMenuTriggerPrimitive>
<Button>Open command menu</Button>
</CommandMenuTriggerPrimitive>
)
}
export default function CommandMenuDemo() {
return (
<CommandProvider openKey="">
<CommandMenuTrigger />
<Commands />
<CommandMenu>
<CommandMenu trigger={<CommandMenuTrigger />}>
<CommandInput />
<CommandList />
</CommandMenu>
apps/design-system/registry/default/example/commandmenu-hidden.tsx
+7 -6
View File
@@ -3,9 +3,9 @@ import {
CommandInput,
CommandList,
CommandMenu,
CommandMenuTrigger as CommandMenuTriggerPrimitive,
CommandProvider,
useRegisterCommands,
useSetCommandMenuOpen,
} from 'ui-patterns/CommandMenu'
function Commands() {
@@ -27,17 +27,18 @@ function Commands() {
}
function CommandMenuTrigger() {
const setOpen = useSetCommandMenuOpen()
return <Button onClick={() => setOpen(true)}>Open command menu</Button>
return (
<CommandMenuTriggerPrimitive>
<Button>Open command menu</Button>
</CommandMenuTriggerPrimitive>
)
}
export default function CommandMenuDemo() {
return (
<CommandProvider openKey="">
<CommandMenuTrigger />
<Commands />
<CommandMenu>
<CommandMenu trigger={<CommandMenuTrigger />}>
<CommandInput />
<CommandList />
</CommandMenu>
apps/design-system/registry/default/example/commandmenu-icon.tsx
+7 -6
View File
@@ -4,9 +4,9 @@ import {
CommandInput,
CommandList,
CommandMenu,
CommandMenuTrigger as CommandMenuTriggerPrimitive,
CommandProvider,
useRegisterCommands,
useSetCommandMenuOpen,
} from 'ui-patterns/CommandMenu'
function Commands() {
@@ -23,17 +23,18 @@ function Commands() {
}
function CommandMenuTrigger() {
const setOpen = useSetCommandMenuOpen()
return <Button onClick={() => setOpen(true)}>Open command menu</Button>
return (
<CommandMenuTriggerPrimitive>
<Button>Open command menu</Button>
</CommandMenuTriggerPrimitive>
)
}
export default function CommandMenuDemo() {
return (
<CommandProvider openKey="">
<CommandMenuTrigger />
<Commands />
<CommandMenu>
<CommandMenu trigger={<CommandMenuTrigger />}>
<CommandInput />
<CommandList />
</CommandMenu>
apps/design-system/registry/default/example/commandmenu-subpage-custom.tsx
+7 -6
View File
@@ -5,11 +5,11 @@ import {
CommandInput,
CommandList,
CommandMenu,
CommandMenuTrigger as CommandMenuTriggerPrimitive,
CommandProvider,
PageType,
useRegisterCommands,
useRegisterPage,
useSetCommandMenuOpen,
useSetPage,
} from 'ui-patterns/CommandMenu'
@@ -45,17 +45,18 @@ function Commands() {
}
function CommandMenuTrigger() {
const setOpen = useSetCommandMenuOpen()
return <Button onClick={() => setOpen(true)}>Open command menu</Button>
return (
<CommandMenuTriggerPrimitive>
<Button>Open command menu</Button>
</CommandMenuTriggerPrimitive>
)
}
export default function CommandMenuDemo() {
return (
<CommandProvider openKey="">
<CommandMenuTrigger />
<Commands />
<CommandMenu>
<CommandMenu trigger={<CommandMenuTrigger />}>
<CommandInput />
<CommandList />
</CommandMenu>
apps/design-system/registry/default/example/commandmenu-subpage.tsx
+7 -6
View File
@@ -4,11 +4,11 @@ import {
CommandInput,
CommandList,
CommandMenu,
CommandMenuTrigger as CommandMenuTriggerPrimitive,
CommandProvider,
PageType,
useRegisterCommands,
useRegisterPage,
useSetCommandMenuOpen,
useSetPage,
} from 'ui-patterns/CommandMenu'
@@ -53,17 +53,18 @@ function Commands() {
}
function CommandMenuTrigger() {
const setOpen = useSetCommandMenuOpen()
return <Button onClick={() => setOpen(true)}>Open command menu</Button>
return (
<CommandMenuTriggerPrimitive>
<Button>Open command menu</Button>
</CommandMenuTriggerPrimitive>
)
}
export default function CommandMenuDemo() {
return (
<CommandProvider openKey="">
<CommandMenuTrigger />
<Commands />
<CommandMenu>
<CommandMenu trigger={<CommandMenuTrigger />}>
<CommandInput />
<CommandList />
</CommandMenu>
packages/ui-patterns/CommandMenu/api/CommandMenu.tsx
+11 -4
View File
@@ -1,10 +1,10 @@
'use client'
import { AlertTriangle, ArrowLeft } from 'lucide-react'
import { type PropsWithChildren, forwardRef } from 'react'
import { type PropsWithChildren, type ReactNode, forwardRef, memo } from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import { Button, Command_Shadcn_, Dialog, DialogContent, cn } from 'ui'
import { Button, Command_Shadcn_, Dialog, DialogContent, DialogTrigger, cn } from 'ui'
import { useCurrentPage, usePageComponent, usePopPage } from './hooks/pagesHooks'
import { useQuery, useSetQuery } from './hooks/queryHooks'
@@ -82,7 +82,13 @@ function PageSwitch({ children }: PropsWithChildren) {
return PageComponent ? <PageComponent /> : <CommandWrapper>{children}</CommandWrapper>
}
function CommandMenu({ children }: PropsWithChildren) {
interface CommandMenuProps extends PropsWithChildren {
trigger?: ReactNode
}
const CommandMenuTrigger = memo(DialogTrigger)
function CommandMenu({ children, trigger }: CommandMenuProps) {
const open = useCommandMenuOpen()
const setOpen = useSetCommandMenuOpen()
@@ -96,6 +102,7 @@ function CommandMenu({ children }: PropsWithChildren) {
return (
<Dialog open={open} onOpenChange={setOpen}>
{trigger}
<DialogContent
hideClose
onInteractOutside={() => setOpen(false)}
@@ -114,4 +121,4 @@ function CommandMenu({ children }: PropsWithChildren) {
)
}
export { Breadcrumb, CommandMenu, CommandWrapper }
export { Breadcrumb, CommandMenu, CommandMenuTrigger, CommandWrapper }
packages/ui-patterns/CommandMenu/index.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
export * from './api/Badges'
export { CommandInput } from './api/CommandInput'
export { CommandList } from './api/CommandList'
export { Breadcrumb, CommandMenu, CommandWrapper } from './api/CommandMenu'
export { Breadcrumb, CommandMenu, CommandMenuTrigger, CommandWrapper } from './api/CommandMenu'
export { CommandProvider } from './api/CommandProvider'
export { TextHighlighter, TextHighlighterBase } from './api/TextHighlighter'
export * from './api/hooks/commandsHooks'