diff --git a/.changeset/sidebar-aria-current-page.md b/.changeset/sidebar-aria-current-page.md new file mode 100644 index 000000000..becea91cd --- /dev/null +++ b/.changeset/sidebar-aria-current-page.md @@ -0,0 +1,5 @@ +--- +'@baseplate-dev/react-generators': patch +--- + +Add aria-[current=page] as a supported active state to the sidebar menu button component, in addition to the existing data-[active=true] attribute. diff --git a/examples/blog-with-auth/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx b/examples/blog-with-auth/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx index 862bab446..4d2ecf6fe 100644 --- a/examples/blog-with-auth/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx +++ b/examples/blog-with-auth/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx @@ -31,7 +31,7 @@ export function AppSidebar(): React.ReactElement { {/* TPL_SIDEBAR_LINKS:START */} - + Home diff --git a/examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx b/examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx index 6ba26fe63..cd0788192 100644 --- a/examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx +++ b/examples/blog-with-auth/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx @@ -34,6 +34,7 @@ import { * https://ui.shadcn.com/docs/components/sidebar * * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561) + * - Added aria-[current=page] as a supported active state to the sidebar menu button */ const SIDEBAR_COOKIE_NAME = 'sidebar_state'; @@ -516,7 +517,7 @@ function SidebarMenuItem({ } const sidebarMenuButtonVariants = cva( - 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', + 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', { variants: { variant: { @@ -618,7 +619,7 @@ function SidebarMenuAction({ 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover && - 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', + 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', className, )} {...props} @@ -636,7 +637,7 @@ function SidebarMenuBadge({ data-sidebar="menu-badge" className={cn( 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none', - 'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', + 'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', @@ -740,7 +741,7 @@ function SidebarMenuSubButton({ data-active={isActive} className={cn( 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground', - 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', + 'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', diff --git a/examples/blog-with-auth/apps/admin/src/components/layouts/app-sidebar.tsx b/examples/blog-with-auth/apps/admin/src/components/layouts/app-sidebar.tsx index 862bab446..4d2ecf6fe 100644 --- a/examples/blog-with-auth/apps/admin/src/components/layouts/app-sidebar.tsx +++ b/examples/blog-with-auth/apps/admin/src/components/layouts/app-sidebar.tsx @@ -31,7 +31,7 @@ export function AppSidebar(): React.ReactElement { {/* TPL_SIDEBAR_LINKS:START */} - + Home diff --git a/examples/blog-with-auth/apps/admin/src/components/ui/sidebar.tsx b/examples/blog-with-auth/apps/admin/src/components/ui/sidebar.tsx index 6ba26fe63..cd0788192 100644 --- a/examples/blog-with-auth/apps/admin/src/components/ui/sidebar.tsx +++ b/examples/blog-with-auth/apps/admin/src/components/ui/sidebar.tsx @@ -34,6 +34,7 @@ import { * https://ui.shadcn.com/docs/components/sidebar * * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561) + * - Added aria-[current=page] as a supported active state to the sidebar menu button */ const SIDEBAR_COOKIE_NAME = 'sidebar_state'; @@ -516,7 +517,7 @@ function SidebarMenuItem({ } const sidebarMenuButtonVariants = cva( - 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', + 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', { variants: { variant: { @@ -618,7 +619,7 @@ function SidebarMenuAction({ 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover && - 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', + 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', className, )} {...props} @@ -636,7 +637,7 @@ function SidebarMenuBadge({ data-sidebar="menu-badge" className={cn( 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none', - 'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', + 'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', @@ -740,7 +741,7 @@ function SidebarMenuSubButton({ data-active={isActive} className={cn( 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground', - 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', + 'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', diff --git a/examples/todo-with-auth0/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx b/examples/todo-with-auth0/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx index e86bac2a2..54db2b6ca 100644 --- a/examples/todo-with-auth0/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx +++ b/examples/todo-with-auth0/apps/admin/baseplate/generated/src/components/layouts/app-sidebar.tsx @@ -32,7 +32,7 @@ export function AppSidebar(): React.ReactElement { {/* TPL_SIDEBAR_LINKS:START */} - + Home diff --git a/examples/todo-with-auth0/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx b/examples/todo-with-auth0/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx index 6ba26fe63..cd0788192 100644 --- a/examples/todo-with-auth0/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx +++ b/examples/todo-with-auth0/apps/admin/baseplate/generated/src/components/ui/sidebar.tsx @@ -34,6 +34,7 @@ import { * https://ui.shadcn.com/docs/components/sidebar * * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561) + * - Added aria-[current=page] as a supported active state to the sidebar menu button */ const SIDEBAR_COOKIE_NAME = 'sidebar_state'; @@ -516,7 +517,7 @@ function SidebarMenuItem({ } const sidebarMenuButtonVariants = cva( - 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', + 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', { variants: { variant: { @@ -618,7 +619,7 @@ function SidebarMenuAction({ 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover && - 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', + 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', className, )} {...props} @@ -636,7 +637,7 @@ function SidebarMenuBadge({ data-sidebar="menu-badge" className={cn( 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none', - 'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', + 'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', @@ -740,7 +741,7 @@ function SidebarMenuSubButton({ data-active={isActive} className={cn( 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground', - 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', + 'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', diff --git a/examples/todo-with-auth0/apps/admin/src/components/layouts/app-sidebar.tsx b/examples/todo-with-auth0/apps/admin/src/components/layouts/app-sidebar.tsx index e86bac2a2..54db2b6ca 100644 --- a/examples/todo-with-auth0/apps/admin/src/components/layouts/app-sidebar.tsx +++ b/examples/todo-with-auth0/apps/admin/src/components/layouts/app-sidebar.tsx @@ -32,7 +32,7 @@ export function AppSidebar(): React.ReactElement { {/* TPL_SIDEBAR_LINKS:START */} - + Home diff --git a/examples/todo-with-auth0/apps/admin/src/components/ui/sidebar.tsx b/examples/todo-with-auth0/apps/admin/src/components/ui/sidebar.tsx index 6ba26fe63..cd0788192 100644 --- a/examples/todo-with-auth0/apps/admin/src/components/ui/sidebar.tsx +++ b/examples/todo-with-auth0/apps/admin/src/components/ui/sidebar.tsx @@ -34,6 +34,7 @@ import { * https://ui.shadcn.com/docs/components/sidebar * * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561) + * - Added aria-[current=page] as a supported active state to the sidebar menu button */ const SIDEBAR_COOKIE_NAME = 'sidebar_state'; @@ -516,7 +517,7 @@ function SidebarMenuItem({ } const sidebarMenuButtonVariants = cva( - 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', + 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', { variants: { variant: { @@ -618,7 +619,7 @@ function SidebarMenuAction({ 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover && - 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', + 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', className, )} {...props} @@ -636,7 +637,7 @@ function SidebarMenuBadge({ data-sidebar="menu-badge" className={cn( 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none', - 'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', + 'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', @@ -740,7 +741,7 @@ function SidebarMenuSubButton({ data-active={isActive} className={cn( 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground', - 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', + 'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', diff --git a/examples/todo-with-auth0/apps/backend/baseplate/generated/package.json b/examples/todo-with-auth0/apps/backend/baseplate/generated/package.json index 315303b7a..aea0aee34 100644 --- a/examples/todo-with-auth0/apps/backend/baseplate/generated/package.json +++ b/examples/todo-with-auth0/apps/backend/baseplate/generated/package.json @@ -88,7 +88,6 @@ "eslint-plugin-perfectionist": "4.15.0", "eslint-plugin-unicorn": "60.0.0", "globals": "16.4.0", - "ioredis-mock": "8.13.0", "pg-connection-string": "2.6.4", "pino-pretty": "13.0.0", "prettier": "3.6.2", diff --git a/examples/todo-with-auth0/apps/backend/package.json b/examples/todo-with-auth0/apps/backend/package.json index 1d8f412bc..fb273fd7a 100644 --- a/examples/todo-with-auth0/apps/backend/package.json +++ b/examples/todo-with-auth0/apps/backend/package.json @@ -88,7 +88,6 @@ "eslint-plugin-perfectionist": "4.15.0", "eslint-plugin-unicorn": "60.0.0", "globals": "16.4.0", - "ioredis-mock": "8.13.0", "pg-connection-string": "2.6.4", "pino-pretty": "13.0.0", "prettier": "3.6.2", diff --git a/examples/todo-with-auth0/apps/web/baseplate/generated/src/components/ui/sidebar.tsx b/examples/todo-with-auth0/apps/web/baseplate/generated/src/components/ui/sidebar.tsx index 6ba26fe63..cd0788192 100644 --- a/examples/todo-with-auth0/apps/web/baseplate/generated/src/components/ui/sidebar.tsx +++ b/examples/todo-with-auth0/apps/web/baseplate/generated/src/components/ui/sidebar.tsx @@ -34,6 +34,7 @@ import { * https://ui.shadcn.com/docs/components/sidebar * * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561) + * - Added aria-[current=page] as a supported active state to the sidebar menu button */ const SIDEBAR_COOKIE_NAME = 'sidebar_state'; @@ -516,7 +517,7 @@ function SidebarMenuItem({ } const sidebarMenuButtonVariants = cva( - 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', + 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', { variants: { variant: { @@ -618,7 +619,7 @@ function SidebarMenuAction({ 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover && - 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', + 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', className, )} {...props} @@ -636,7 +637,7 @@ function SidebarMenuBadge({ data-sidebar="menu-badge" className={cn( 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none', - 'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', + 'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', @@ -740,7 +741,7 @@ function SidebarMenuSubButton({ data-active={isActive} className={cn( 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground', - 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', + 'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', diff --git a/examples/todo-with-auth0/apps/web/src/components/ui/sidebar.tsx b/examples/todo-with-auth0/apps/web/src/components/ui/sidebar.tsx index 6ba26fe63..cd0788192 100644 --- a/examples/todo-with-auth0/apps/web/src/components/ui/sidebar.tsx +++ b/examples/todo-with-auth0/apps/web/src/components/ui/sidebar.tsx @@ -34,6 +34,7 @@ import { * https://ui.shadcn.com/docs/components/sidebar * * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561) + * - Added aria-[current=page] as a supported active state to the sidebar menu button */ const SIDEBAR_COOKIE_NAME = 'sidebar_state'; @@ -516,7 +517,7 @@ function SidebarMenuItem({ } const sidebarMenuButtonVariants = cva( - 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', + 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', { variants: { variant: { @@ -618,7 +619,7 @@ function SidebarMenuAction({ 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover && - 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', + 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', className, )} {...props} @@ -636,7 +637,7 @@ function SidebarMenuBadge({ data-sidebar="menu-badge" className={cn( 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none', - 'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', + 'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', @@ -740,7 +741,7 @@ function SidebarMenuSubButton({ data-active={isActive} className={cn( 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground', - 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', + 'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', diff --git a/examples/todo-with-auth0/pnpm-lock.yaml b/examples/todo-with-auth0/pnpm-lock.yaml index 2b47cccd5..7b593dda2 100644 --- a/examples/todo-with-auth0/pnpm-lock.yaml +++ b/examples/todo-with-auth0/pnpm-lock.yaml @@ -364,9 +364,6 @@ importers: globals: specifier: 16.4.0 version: 16.4.0 - ioredis-mock: - specifier: 8.13.0 - version: 8.13.0(@types/ioredis-mock@8.2.5)(ioredis@5.8.1) pg-connection-string: specifier: 2.6.4 version: 2.6.4 @@ -1680,9 +1677,6 @@ packages: '@types/node': optional: true - '@ioredis/as-callback@3.0.0': - resolution: {integrity: sha512-Kqv1rZ3WbgOrS+hgzJ5xG5WQuhvzzSTRYvNeyPMLOAM78MHSnuKI20JeJGbpuAt//LCuP0vsexZcorqW7kWhJg==} - '@ioredis/commands@1.4.0': resolution: {integrity: sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==} @@ -3534,9 +3528,6 @@ packages: '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} - '@types/ioredis-mock@8.2.5': - resolution: {integrity: sha512-cZyuwC9LGtg7s5G9/w6rpy3IOZ6F/hFR0pQlWYZESMo1xQUYbDpa6haqB4grTePjsGzcB/YLBFCjqRunK5wieg==} - '@types/js-yaml@4.0.9': resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==} @@ -4866,14 +4857,6 @@ packages: picomatch: optional: true - fengari-interop@0.1.3: - resolution: {integrity: sha512-EtZ+oTu3kEwVJnoymFPBVLIbQcCoy9uWCVnMA6h3M/RqHkUBsLYp29+RRHf9rKr6GwjubWREU1O7RretFIXjHw==} - peerDependencies: - fengari: ^0.1.0 - - fengari@0.1.4: - resolution: {integrity: sha512-6ujqUuiIYmcgkGz8MGAdERU57EIluGGPSUgGPTsco657EHa+srq0S3/YUl/r9kx1+D+d4rGfYObd+m8K22gB1g==} - figures@3.2.0: resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==} engines: {node: '>=8'} @@ -5229,13 +5212,6 @@ packages: invariant@2.2.4: resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} - ioredis-mock@8.13.0: - resolution: {integrity: sha512-oO6s5xeL3A+EmcmyoEAMxJnwsnXaBfo5IYD2cctsqxLbX9d6dZm67k5nDXAUWMtkIVJJeEbDa4LuFpDowJbvaw==} - engines: {node: '>=12.22'} - peerDependencies: - '@types/ioredis-mock': ^8 - ioredis: ^5 - ioredis@5.8.1: resolution: {integrity: sha512-Qho8TgIamqEPdgiMadJwzRMW3TudIg6vpg4YONokGDudy4eqRIJtDbVX72pfLBcWxvbn3qm/40TyGUObdW4tLQ==} engines: {node: '>=12.22.0'} @@ -5931,10 +5907,6 @@ packages: resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==} engines: {node: '>=10'} - os-tmpdir@1.0.2: - resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==} - engines: {node: '>=0.10.0'} - own-keys@1.0.1: resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==} engines: {node: '>= 0.4'} @@ -6405,10 +6377,6 @@ packages: resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} engines: {node: '>= 14.18.0'} - readline-sync@1.4.10: - resolution: {integrity: sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==} - engines: {node: '>= 0.8.0'} - real-require@0.2.0: resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==} engines: {node: '>= 12.13.0'} @@ -6733,9 +6701,6 @@ packages: sponge-case@1.0.1: resolution: {integrity: sha512-dblb9Et4DAtiZ5YSUZHLl4XhH4uK80GhAZrVXdN4O2P4gQ40Wa5UIOPUHlA/nFd2PLblBZWUioLMMAVrgpoYcA==} - sprintf-js@1.1.3: - resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==} - sqlstring@2.3.3: resolution: {integrity: sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==} engines: {node: '>= 0.6'} @@ -6906,10 +6871,6 @@ packages: title-case@3.0.3: resolution: {integrity: sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==} - tmp@0.0.33: - resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==} - engines: {node: '>=0.6.0'} - to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} @@ -9093,8 +9054,6 @@ snapshots: optionalDependencies: '@types/node': 22.19.1 - '@ioredis/as-callback@3.0.0': {} - '@ioredis/commands@1.4.0': {} '@isaacs/balanced-match@4.0.1': {} @@ -11172,13 +11131,6 @@ snapshots: '@types/estree@1.0.8': {} - '@types/ioredis-mock@8.2.5': - dependencies: - '@types/node': 22.19.1 - ioredis: 5.8.1 - transitivePeerDependencies: - - supports-color - '@types/js-yaml@4.0.9': {} '@types/json-schema@7.0.15': {} @@ -12802,16 +12754,6 @@ snapshots: optionalDependencies: picomatch: 4.0.3 - fengari-interop@0.1.3(fengari@0.1.4): - dependencies: - fengari: 0.1.4 - - fengari@0.1.4: - dependencies: - readline-sync: 1.4.10 - sprintf-js: 1.1.3 - tmp: 0.0.33 - figures@3.2.0: dependencies: escape-string-regexp: 1.0.5 @@ -13215,16 +13157,6 @@ snapshots: dependencies: loose-envify: 1.4.0 - ioredis-mock@8.13.0(@types/ioredis-mock@8.2.5)(ioredis@5.8.1): - dependencies: - '@ioredis/as-callback': 3.0.0 - '@ioredis/commands': 1.4.0 - '@types/ioredis-mock': 8.2.5 - fengari: 0.1.4 - fengari-interop: 0.1.3(fengari@0.1.4) - ioredis: 5.8.1 - semver: 7.7.2 - ioredis@5.8.1: dependencies: '@ioredis/commands': 1.4.0 @@ -13853,8 +13785,6 @@ snapshots: strip-ansi: 6.0.1 wcwidth: 1.0.1 - os-tmpdir@1.0.2: {} - own-keys@1.0.1: dependencies: get-intrinsic: 1.3.0 @@ -14327,8 +14257,6 @@ snapshots: readdirp@4.1.2: {} - readline-sync@1.4.10: {} - real-require@0.2.0: {} recast@0.23.11: @@ -14697,8 +14625,6 @@ snapshots: dependencies: tslib: 2.8.1 - sprintf-js@1.1.3: {} - sqlstring@2.3.3: {} stable-hash-x@0.2.0: {} @@ -14883,10 +14809,6 @@ snapshots: dependencies: tslib: 2.8.1 - tmp@0.0.33: - dependencies: - os-tmpdir: 1.0.2 - to-regex-range@5.0.1: dependencies: is-number: 7.0.0 diff --git a/packages/fastify-generators/src/constants/fastify-packages.ts b/packages/fastify-generators/src/constants/fastify-packages.ts index e5e578c5d..278cda160 100644 --- a/packages/fastify-generators/src/constants/fastify-packages.ts +++ b/packages/fastify-generators/src/constants/fastify-packages.ts @@ -55,7 +55,6 @@ export const FASTIFY_PACKAGES = { // Redis ioredis: '5.8.1', - 'ioredis-mock': '8.13.0', // Sentry '@sentry/core': '9.17.0', diff --git a/packages/fastify-generators/src/generators/core/fastify-redis/fastify-redis.generator.ts b/packages/fastify-generators/src/generators/core/fastify-redis/fastify-redis.generator.ts index 56a205111..6730b6ef6 100644 --- a/packages/fastify-generators/src/generators/core/fastify-redis/fastify-redis.generator.ts +++ b/packages/fastify-generators/src/generators/core/fastify-redis/fastify-redis.generator.ts @@ -36,7 +36,6 @@ export const fastifyRedisGenerator = createGenerator({ imports: CORE_FASTIFY_REDIS_GENERATED.imports.task, nodePackages: createNodePackagesTask({ prod: extractPackageVersions(FASTIFY_PACKAGES, ['ioredis']), - dev: extractPackageVersions(FASTIFY_PACKAGES, ['ioredis-mock']), }), prefixEnv: createGeneratorTask({ dependencies: { diff --git a/packages/project-builder-server/src/compiler/web/web-compiler.ts b/packages/project-builder-server/src/compiler/web/web-compiler.ts index 62237074f..f2e50f9f6 100644 --- a/packages/project-builder-server/src/compiler/web/web-compiler.ts +++ b/packages/project-builder-server/src/compiler/web/web-compiler.ts @@ -88,6 +88,9 @@ function buildAdminRoutes( label: 'Home', icon: 'MdHome', path: adminApp.pathPrefix, + activeOptions: { + exact: true, + }, }, ...buildAdminNavigationLinks(builder), ], diff --git a/packages/react-generators/src/generators/admin/admin-layout/admin-layout.generator.ts b/packages/react-generators/src/generators/admin/admin-layout/admin-layout.generator.ts index 92c22f7dc..71345c8f7 100644 --- a/packages/react-generators/src/generators/admin/admin-layout/admin-layout.generator.ts +++ b/packages/react-generators/src/generators/admin/admin-layout/admin-layout.generator.ts @@ -14,6 +14,11 @@ const linkItemSchema = z.object({ label: z.string().min(1), icon: z.string().min(1), path: z.string().min(1), + activeOptions: z + .object({ + exact: z.boolean().optional(), + }) + .optional(), }); export type AdminLayoutLinkItem = z.infer; @@ -83,7 +88,7 @@ export const adminLayoutGenerator = createGenerator({ ])` - + <${TsCodeUtils.importFragment(link.icon, getIconImport(link.icon))} /> ${link.label} diff --git a/packages/react-generators/src/generators/core/react-components/templates/components/ui/sidebar.tsx b/packages/react-generators/src/generators/core/react-components/templates/components/ui/sidebar.tsx index 2a6190512..c29243293 100644 --- a/packages/react-generators/src/generators/core/react-components/templates/components/ui/sidebar.tsx +++ b/packages/react-generators/src/generators/core/react-components/templates/components/ui/sidebar.tsx @@ -34,6 +34,7 @@ import { MdMenu } from 'react-icons/md'; * https://ui.shadcn.com/docs/components/sidebar * * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561) + * - Added aria-[current=page] as a supported active state to the sidebar menu button */ const SIDEBAR_COOKIE_NAME = 'sidebar_state'; @@ -516,7 +517,7 @@ function SidebarMenuItem({ } const sidebarMenuButtonVariants = cva( - 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', + 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', { variants: { variant: { @@ -618,7 +619,7 @@ function SidebarMenuAction({ 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover && - 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', + 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', className, )} {...props} @@ -636,7 +637,7 @@ function SidebarMenuBadge({ data-sidebar="menu-badge" className={cn( 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none', - 'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', + 'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', @@ -740,7 +741,7 @@ function SidebarMenuSubButton({ data-active={isActive} className={cn( 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground', - 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', + 'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', diff --git a/tests/simple/apps/web/baseplate/generated/src/components/ui/sidebar.tsx b/tests/simple/apps/web/baseplate/generated/src/components/ui/sidebar.tsx index 6ba26fe63..cd0788192 100644 --- a/tests/simple/apps/web/baseplate/generated/src/components/ui/sidebar.tsx +++ b/tests/simple/apps/web/baseplate/generated/src/components/ui/sidebar.tsx @@ -34,6 +34,7 @@ import { * https://ui.shadcn.com/docs/components/sidebar * * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561) + * - Added aria-[current=page] as a supported active state to the sidebar menu button */ const SIDEBAR_COOKIE_NAME = 'sidebar_state'; @@ -516,7 +517,7 @@ function SidebarMenuItem({ } const sidebarMenuButtonVariants = cva( - 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', + 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', { variants: { variant: { @@ -618,7 +619,7 @@ function SidebarMenuAction({ 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover && - 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', + 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', className, )} {...props} @@ -636,7 +637,7 @@ function SidebarMenuBadge({ data-sidebar="menu-badge" className={cn( 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none', - 'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', + 'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', @@ -740,7 +741,7 @@ function SidebarMenuSubButton({ data-active={isActive} className={cn( 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground', - 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', + 'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', diff --git a/tests/simple/apps/web/src/components/ui/sidebar.tsx b/tests/simple/apps/web/src/components/ui/sidebar.tsx index 6ba26fe63..cd0788192 100644 --- a/tests/simple/apps/web/src/components/ui/sidebar.tsx +++ b/tests/simple/apps/web/src/components/ui/sidebar.tsx @@ -34,6 +34,7 @@ import { * https://ui.shadcn.com/docs/components/sidebar * * - Added functionality to dismiss when button is clicked (https://github.com/shadcn-ui/ui/issues/5561) + * - Added aria-[current=page] as a supported active state to the sidebar menu button */ const SIDEBAR_COOKIE_NAME = 'sidebar_state'; @@ -516,7 +517,7 @@ function SidebarMenuItem({ } const sidebarMenuButtonVariants = cva( - 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', + 'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-accent aria-[current=page]:font-medium aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:hover:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', { variants: { variant: { @@ -618,7 +619,7 @@ function SidebarMenuAction({ 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover && - 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', + 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground data-[state=open]:opacity-100 md:opacity-0', className, )} {...props} @@ -636,7 +637,7 @@ function SidebarMenuBadge({ data-sidebar="menu-badge" className={cn( 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-card-foreground tabular-nums select-none', - 'peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', + 'peer-hover/menu-button:text-accent-foreground peer-aria-[current=page]/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', @@ -740,7 +741,7 @@ function SidebarMenuSubButton({ data-active={isActive} className={cn( 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-card-foreground ring-ring outline-hidden hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-accent-foreground', - 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', + 'aria-[current=page]:bg-accent aria-[current=page]:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden',