Skip to content

fix(ui): mirror directional chevrons in right-to-left layouts #913

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

Open
rkj-builds wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(ui): mirror directional chevrons in right-to-left layouts #913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion apps/ui/public/r/breadcrumb.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"files": [
{
"path": "registry/default/ui/breadcrumb.tsx",
"content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Breadcrumb({\n ...props\n}: React.ComponentProps<\"nav\">): React.ReactElement {\n return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nexport function BreadcrumbList({\n className,\n ...props\n}: React.ComponentProps<\"ol\">): React.ReactElement {\n return (\n <ol\n className={cn(\n \"wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5\",\n className,\n )}\n data-slot=\"breadcrumb-list\"\n {...props}\n />\n );\n}\n\nexport function BreadcrumbItem({\n className,\n ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n return (\n <li\n className={cn(\"inline-flex items-center gap-1.5\", className)}\n data-slot=\"breadcrumb-item\"\n {...props}\n />\n );\n}\n\nexport function BreadcrumbLink({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"a\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"transition-colors hover:text-foreground\", className),\n \"data-slot\": \"breadcrumb-link\",\n };\n\n return useRender({\n defaultTagName: \"a\",\n props: mergeProps<\"a\">(defaultProps, props),\n render,\n });\n}\n\nexport function BreadcrumbPage({\n className,\n ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n return (\n <span\n aria-current=\"page\"\n className={cn(\"font-normal text-foreground\", className)}\n data-slot=\"breadcrumb-page\"\n {...props}\n />\n );\n}\n\nexport function BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n return (\n <li\n aria-hidden=\"true\"\n className={cn(\"opacity-80 [&>svg]:size-4\", className)}\n data-slot=\"breadcrumb-separator\"\n role=\"presentation\"\n {...props}\n >\n {children ?? <ChevronRight />}\n </li>\n );\n}\n\nexport function BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n return (\n <span\n aria-hidden=\"true\"\n className={className}\n data-slot=\"breadcrumb-ellipsis\"\n role=\"presentation\"\n {...props}\n >\n <MoreHorizontal className=\"size-4\" />\n <span className=\"sr-only\">More</span>\n </span>\n );\n}\n",
"content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\nexport function Breadcrumb({\n ...props\n}: React.ComponentProps<\"nav\">): React.ReactElement {\n return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nexport function BreadcrumbList({\n className,\n ...props\n}: React.ComponentProps<\"ol\">): React.ReactElement {\n return (\n <ol\n className={cn(\n \"wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5\",\n className,\n )}\n data-slot=\"breadcrumb-list\"\n {...props}\n />\n );\n}\n\nexport function BreadcrumbItem({\n className,\n ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n return (\n <li\n className={cn(\"inline-flex items-center gap-1.5\", className)}\n data-slot=\"breadcrumb-item\"\n {...props}\n />\n );\n}\n\nexport function BreadcrumbLink({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"a\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"transition-colors hover:text-foreground\", className),\n \"data-slot\": \"breadcrumb-link\",\n };\n\n return useRender({\n defaultTagName: \"a\",\n props: mergeProps<\"a\">(defaultProps, props),\n render,\n });\n}\n\nexport function BreadcrumbPage({\n className,\n ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n return (\n <span\n aria-current=\"page\"\n className={cn(\"font-normal text-foreground\", className)}\n data-slot=\"breadcrumb-page\"\n {...props}\n />\n );\n}\n\nexport function BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n return (\n <li\n aria-hidden=\"true\"\n className={cn(\"opacity-80 [&>svg]:size-4\", className)}\n data-slot=\"breadcrumb-separator\"\n role=\"presentation\"\n {...props}\n >\n {children ?? <ChevronRight className=\"rtl:rotate-180\" />}\n </li>\n );\n}\n\nexport function BreadcrumbEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n return (\n <span\n aria-hidden=\"true\"\n className={className}\n data-slot=\"breadcrumb-ellipsis\"\n role=\"presentation\"\n {...props}\n >\n <MoreHorizontal className=\"size-4\" />\n <span className=\"sr-only\">More</span>\n </span>\n );\n}\n",
"type": "registry:ui"
}
],
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/public/r/context-menu.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion apps/ui/public/r/drawer.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion apps/ui/public/r/menu.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion apps/ui/public/r/pagination.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"files": [
{
"path": "registry/default/ui/pagination.tsx",
"content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n MoreHorizontalIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { type Button, buttonVariants } from \"@/registry/default/ui/button\";\n\nexport function Pagination({\n className,\n ...props\n}: React.ComponentProps<\"nav\">): React.ReactElement {\n return (\n <nav\n aria-label=\"pagination\"\n className={cn(\"mx-auto flex w-full justify-center\", className)}\n data-slot=\"pagination\"\n {...props}\n />\n );\n}\n\nexport function PaginationContent({\n className,\n ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n return (\n <ul\n className={cn(\"flex flex-row items-center gap-1\", className)}\n data-slot=\"pagination-content\"\n {...props}\n />\n );\n}\n\nexport function PaginationItem({\n ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n return <li data-slot=\"pagination-item\" {...props} />;\n}\n\nexport type PaginationLinkProps = {\n isActive?: boolean;\n size?: React.ComponentProps<typeof Button>[\"size\"];\n} & useRender.ComponentProps<\"a\">;\n\nexport function PaginationLink({\n className,\n isActive,\n size = \"icon\",\n render,\n ...props\n}: PaginationLinkProps): React.ReactElement {\n const defaultProps = {\n \"aria-current\": isActive ? (\"page\" as const) : undefined,\n className: render\n ? className\n : cn(\n buttonVariants({\n size,\n variant: isActive ? \"outline\" : \"ghost\",\n }),\n className,\n ),\n \"data-active\": isActive,\n \"data-slot\": \"pagination-link\",\n };\n\n return useRender({\n defaultTagName: \"a\",\n props: mergeProps<\"a\">(defaultProps, props),\n render,\n });\n}\n\nexport function PaginationPrevious({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\n return (\n <PaginationLink\n aria-label=\"Go to previous page\"\n className={cn(\"max-sm:aspect-square max-sm:p-0\", className)}\n size=\"default\"\n {...props}\n >\n <ChevronLeftIcon className=\"sm:-ms-1\" />\n <span className=\"max-sm:hidden\">Previous</span>\n </PaginationLink>\n );\n}\n\nexport function PaginationNext({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\n return (\n <PaginationLink\n aria-label=\"Go to next page\"\n className={cn(\"max-sm:aspect-square max-sm:p-0\", className)}\n size=\"default\"\n {...props}\n >\n <span className=\"max-sm:hidden\">Next</span>\n <ChevronRightIcon className=\"sm:-me-1\" />\n </PaginationLink>\n );\n}\n\nexport function PaginationEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n return (\n <span\n aria-hidden\n className={cn(\"flex min-w-7 justify-center\", className)}\n data-slot=\"pagination-ellipsis\"\n {...props}\n >\n <MoreHorizontalIcon className=\"size-5 sm:size-4\" />\n <span className=\"sr-only\">More pages</span>\n </span>\n );\n}\n",
"content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n MoreHorizontalIcon,\n} from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { type Button, buttonVariants } from \"@/registry/default/ui/button\";\n\nexport function Pagination({\n className,\n ...props\n}: React.ComponentProps<\"nav\">): React.ReactElement {\n return (\n <nav\n aria-label=\"pagination\"\n className={cn(\"mx-auto flex w-full justify-center\", className)}\n data-slot=\"pagination\"\n {...props}\n />\n );\n}\n\nexport function PaginationContent({\n className,\n ...props\n}: React.ComponentProps<\"ul\">): React.ReactElement {\n return (\n <ul\n className={cn(\"flex flex-row items-center gap-1\", className)}\n data-slot=\"pagination-content\"\n {...props}\n />\n );\n}\n\nexport function PaginationItem({\n ...props\n}: React.ComponentProps<\"li\">): React.ReactElement {\n return <li data-slot=\"pagination-item\" {...props} />;\n}\n\nexport type PaginationLinkProps = {\n isActive?: boolean;\n size?: React.ComponentProps<typeof Button>[\"size\"];\n} & useRender.ComponentProps<\"a\">;\n\nexport function PaginationLink({\n className,\n isActive,\n size = \"icon\",\n render,\n ...props\n}: PaginationLinkProps): React.ReactElement {\n const defaultProps = {\n \"aria-current\": isActive ? (\"page\" as const) : undefined,\n className: render\n ? className\n : cn(\n buttonVariants({\n size,\n variant: isActive ? \"outline\" : \"ghost\",\n }),\n className,\n ),\n \"data-active\": isActive,\n \"data-slot\": \"pagination-link\",\n };\n\n return useRender({\n defaultTagName: \"a\",\n props: mergeProps<\"a\">(defaultProps, props),\n render,\n });\n}\n\nexport function PaginationPrevious({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\n return (\n <PaginationLink\n aria-label=\"Go to previous page\"\n className={cn(\"max-sm:aspect-square max-sm:p-0\", className)}\n size=\"default\"\n {...props}\n >\n <ChevronLeftIcon className=\"sm:-ms-1 rtl:rotate-180\" />\n <span className=\"max-sm:hidden\">Previous</span>\n </PaginationLink>\n );\n}\n\nexport function PaginationNext({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>): React.ReactElement {\n return (\n <PaginationLink\n aria-label=\"Go to next page\"\n className={cn(\"max-sm:aspect-square max-sm:p-0\", className)}\n size=\"default\"\n {...props}\n >\n <span className=\"max-sm:hidden\">Next</span>\n <ChevronRightIcon className=\"sm:-me-1 rtl:rotate-180\" />\n </PaginationLink>\n );\n}\n\nexport function PaginationEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n return (\n <span\n aria-hidden\n className={cn(\"flex min-w-7 justify-center\", className)}\n data-slot=\"pagination-ellipsis\"\n {...props}\n >\n <MoreHorizontalIcon className=\"size-5 sm:size-4\" />\n <span className=\"sr-only\">More pages</span>\n </span>\n );\n}\n",
"type": "registry:ui"
}
],
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/registry/default/ui/breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export function BreadcrumbSeparator({
role="presentation"
{...props}
>
{children ?? <ChevronRight />}
{children ?? <ChevronRight className="rtl:rotate-180" />}
</li>
);
}
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/registry/default/ui/context-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ export function ContextMenuSubTrigger({
{...props}
>
{children}
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80" />
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80 rtl:rotate-180" />
</ContextMenuPrimitive.SubmenuTrigger>
);
}
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/registry/default/ui/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,7 @@ export function DrawerMenuTrigger({
{...props}
>
{children}
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80" />
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80 rtl:rotate-180" />
</DrawerTrigger>
);
}
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/registry/default/ui/menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ export function MenuSubTrigger({
{...props}
>
{children}
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80" />
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80 rtl:rotate-180" />
</MenuPrimitive.SubmenuTrigger>
);
}
Expand Down
4 changes: 2 additions & 2 deletions apps/ui/registry/default/ui/pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export function PaginationPrevious({
size="default"
{...props}
>
<ChevronLeftIcon className="sm:-ms-1" />
<ChevronLeftIcon className="sm:-ms-1 rtl:rotate-180" />
<span className="max-sm:hidden">Previous</span>
</PaginationLink>
);
Expand All @@ -107,7 +107,7 @@ export function PaginationNext({
{...props}
>
<span className="max-sm:hidden">Next</span>
<ChevronRightIcon className="sm:-me-1" />
<ChevronRightIcon className="sm:-me-1 rtl:rotate-180" />
</PaginationLink>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export function BreadcrumbSeparator({
role="presentation"
{...props}
>
{children ?? <ChevronRight />}
{children ?? <ChevronRight className="rtl:rotate-180" />}
</li>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/context-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ export function ContextMenuSubTrigger({
{...props}
>
{children}
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80" />
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80 rtl:rotate-180" />
</ContextMenuPrimitive.SubmenuTrigger>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,7 +509,7 @@ export function DrawerMenuTrigger({
{...props}
>
{children}
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80" />
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80 rtl:rotate-180" />
</DrawerTrigger>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ export function MenuSubTrigger({
{...props}
>
{children}
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80" />
<ChevronRightIcon className="ms-auto -me-0.5 opacity-80 rtl:rotate-180" />
</MenuPrimitive.SubmenuTrigger>
);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export function PaginationPrevious({
size="default"
{...props}
>
<ChevronLeftIcon className="sm:-ms-1" />
<ChevronLeftIcon className="sm:-ms-1 rtl:rotate-180" />
<span className="max-sm:hidden">Previous</span>
</PaginationLink>
);
Expand All @@ -107,7 +107,7 @@ export function PaginationNext({
{...props}
>
<span className="max-sm:hidden">Next</span>
<ChevronRightIcon className="sm:-me-1" />
<ChevronRightIcon className="sm:-me-1 rtl:rotate-180" />
</PaginationLink>
);
}
Expand Down
Loading