Skip to content

refactor(components): create reusable left and right SVG chevron #319

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

refactor(components): create reusable left and right SVG chevron #319

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
59 changes: 59 additions & 0 deletions components/ui/8bit/assets/chevronLeftIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
export const ChevronLeftIcon = () => {
return (
<svg
width="50"
height="50"
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className="size-7"
aria-label="chevron-left"
>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 136)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 152)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 72)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 168)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 112 120)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 104)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 88)"
></rect>
</svg>
);
};
Comment on lines +1 to +59
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Make the icon truly reusable: accept SVG props, fix a11y defaults, and remove invalid attribute

Forwarding standard SVG props (className, aria-label, etc.) and merging classes makes this asset versatile. Also remove the empty color="" attribute and default to decorative a11y unless a label is provided.

Apply this diff:

+import type { SVGProps } from "react";
-
-export const ChevronLeftIcon = () => {
+export function ChevronLeftIcon({
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width="50"
-      height="50"
       viewBox="0 0 256 256"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
       stroke="currentColor"
       strokeWidth="0.25"
-      color=""
-      className="size-7"
-      aria-label="chevron-left"
+      shapeRendering="crispEdges"
+      aria-hidden={ariaLabel ? undefined : true}
+      aria-label={ariaLabel}
+      className={["raster-icon size-7", className].filter(Boolean).join(" ")}
+      {...props}
     >
       <rect
         width="14"
         height="14"
         rx="1"
         transform="matrix(-1 0 0 1 128 136)"
       ></rect>
       <rect
         width="14"
         height="14"
         rx="1"
         transform="matrix(-1 0 0 1 144 152)"
       ></rect>
       <rect
         width="14"
         height="14"
         rx="1"
         transform="matrix(-1 0 0 1 160 72)"
       ></rect>
       <rect
         width="14"
         height="14"
         rx="1"
         transform="matrix(-1 0 0 1 160 168)"
       ></rect>
       <rect
         width="14"
         height="14"
         rx="1"
         transform="matrix(-1 0 0 1 112 120)"
       ></rect>
       <rect
         width="14"
         height="14"
         rx="1"
         transform="matrix(-1 0 0 1 128 104)"
       ></rect>
       <rect
         width="14"
         height="14"
         rx="1"
         transform="matrix(-1 0 0 1 144 88)"
       ></rect>
     </svg>
   );
-};
+}

Notes:

  • Allowing users to pass className means they can override the default Tailwind size; default listed first so user-specified classes win on conflicts.
  • aria-hidden defaults to true unless an aria-label is provided, which is the typical pattern for decorative icons.
  • shapeRendering="crispEdges" helps preserve the blocky 8‑bit look for the rects.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const ChevronLeftIcon = () => {
return (
<svg
width="50"
height="50"
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className="size-7"
aria-label="chevron-left"
>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 136)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 152)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 72)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 168)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 112 120)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 104)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 88)"
></rect>
</svg>
);
};
import type { SVGProps } from "react";
export function ChevronLeftIcon({
className,
"aria-label": ariaLabel,
...props
}: SVGProps<SVGSVGElement>) {
return (
<svg
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
shapeRendering="crispEdges"
aria-hidden={ariaLabel ? undefined : true}
aria-label={ariaLabel}
className={["raster-icon size-7", className].filter(Boolean).join(" ")}
{...props}
>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 136)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 152)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 72)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 168)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 112 120)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 104)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 88)"
></rect>
</svg>
);
}
🤖 Prompt for AI Agents 
In components/ui/8bit/assets/chevronLeftIcon.tsx around lines 1 to 59, the
component should accept and forward standard SVG props, remove the invalid empty
color attribute, and default accessibility to decorative unless an aria-label is
provided; update the SVG to accept props (e.g. function signature
ChevronLeftIcon(props: React.SVGProps<SVGSVGElement>)), spread props onto the
<svg> (placing the default className "size-7" first so user className in props
can override), remove color="", set aria-hidden to true when no aria-label is
present (and do not override if aria-label exists), and add
shapeRendering="crispEdges" to the rect elements to preserve the 8‑bit look.

24 changes: 24 additions & 0 deletions components/ui/8bit/assets/chevronRightIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
export const ChevronRightIcon = () => {
return (
<svg
width="50"
height="50"
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className="raster-icon size-7"
aria-label="chevron-right"
>
<rect x="128" y="136" width="14" height="14" rx="1"></rect>
<rect x="112" y="152" width="14" height="14" rx="1"></rect>
<rect x="96" y="72" width="14" height="14" rx="1"></rect>
<rect x="96" y="168" width="14" height="14" rx="1"></rect>
<rect x="144" y="120" width="14" height="14" rx="1"></rect>
<rect x="128" y="104" width="14" height="14" rx="1"></rect>
<rect x="112" y="88" width="14" height="14" rx="1"></rect>
</svg>
);
};
Comment on lines +1 to +24
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Make the icon configurable (className/props), remove stray color="", and set sensible a11y defaults.

The icon is hard-coded (no className/props), uses a larger default size than prior lucide usage, and includes a redundant color="". To maximize reuse and preserve layout control in callers, let it accept standard SVG props and default to being decorative.

Apply:

+import * as React from "react"
+import { cn } from "@/lib/utils"
+
-export const ChevronRightIcon = () => {
-  return (
-    <svg
-      width="50"
-      height="50"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      stroke="currentColor"
-      strokeWidth="0.25"
-      color=""
-      className="raster-icon size-7"
-      aria-label="chevron-right"
-    >
+type IconProps = React.SVGProps<SVGSVGElement> & { title?: string }
+
+export const ChevronRightIcon = ({ className, title, ...props }: IconProps) => {
+  return (
+    <svg
+      width="50"
+      height="50"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      strokeWidth="0.25"
+      className={cn("raster-icon size-7", className)}
+      aria-hidden={title ? undefined : true}
+      role={title ? "img" : "presentation"}
+      {...props}
+    >
+      {title ? <title>{title}</title> : null}
       <rect x="128" y="136" width="14" height="14" rx="1"></rect>
       <rect x="112" y="152" width="14" height="14" rx="1"></rect>
       <rect x="96" y="72" width="14" height="14" rx="1"></rect>
       <rect x="96" y="168" width="14" height="14" rx="1"></rect>
       <rect x="144" y="120" width="14" height="14" rx="1"></rect>
       <rect x="128" y="104" width="14" height="14" rx="1"></rect>
       <rect x="112" y="88" width="14" height="14" rx="1"></rect>
     </svg>
   );
 };

This keeps the current default size but allows callers to override (e.g., ml-auto size-4) and ensures the icon is decorative by default.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const ChevronRightIcon = () => {
return (
<svg
width="50"
height="50"
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className="raster-icon size-7"
aria-label="chevron-right"
>
<rect x="128" y="136" width="14" height="14" rx="1"></rect>
<rect x="112" y="152" width="14" height="14" rx="1"></rect>
<rect x="96" y="72" width="14" height="14" rx="1"></rect>
<rect x="96" y="168" width="14" height="14" rx="1"></rect>
<rect x="144" y="120" width="14" height="14" rx="1"></rect>
<rect x="128" y="104" width="14" height="14" rx="1"></rect>
<rect x="112" y="88" width="14" height="14" rx="1"></rect>
</svg>
);
};
import * as React from "react"
import { cn } from "@/lib/utils"
type IconProps = React.SVGProps<SVGSVGElement> & { title?: string }
export const ChevronRightIcon = ({ className, title, ...props }: IconProps) => {
return (
<svg
width="50"
height="50"
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
className={cn("raster-icon size-7", className)}
aria-hidden={title ? undefined : true}
role={title ? "img" : "presentation"}
{...props}
>
{title ? <title>{title}</title> : null}
<rect x="128" y="136" width="14" height="14" rx="1"></rect>
<rect x="112" y="152" width="14" height="14" rx="1"></rect>
<rect x="96" y="72" width="14" height="14" rx="1"></rect>
<rect x="96" y="168" width="14" height="14" rx="1"></rect>
<rect x="144" y="120" width="14" height="14" rx="1"></rect>
<rect x="128" y="104" width="14" height="14" rx="1"></rect>
<rect x="112" y="88" width="14" height="14" rx="1"></rect>
</svg>
);
};
🤖 Prompt for AI Agents 
In components/ui/8bit/assets/chevronRightIcon.tsx around lines 1 to 24, the SVG
is hard-coded and contains a stray color="" attribute and no way for callers to
override className/props or provide accessibility attributes; update the
component to accept standard SVG props (including className) and spread them
onto the <svg>, remove the color="" attribute, preserve the current default
attributes (width="50" height="50" viewBox and className="raster-icon size-7")
but allow them to be overridden by incoming props, and make the icon decorative
by default by setting aria-hidden=true unless an explicit aria-label or role is
provided by the caller.

28 changes: 2 additions & 26 deletions components/ui/8bit/breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { MoreHorizontal } from "lucide-react";

import { cn } from "@/lib/utils";

import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
import {
Breadcrumb as ShadcnBreadcrumb,
BreadcrumbEllipsis as ShadcnBreadcrumbEllipsis,
Expand Down Expand Up @@ -52,31 +53,6 @@ interface BitBreadcrumbLinkProps
extends React.ComponentProps<"a">,
VariantProps<typeof breadcrumbVariants> {}

const ChevronRight = () => {
return (
<svg
width="50"
height="50"
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className="size-7"
aria-label="chevron-right"
>
<rect x="128" y="136" width="14" height="14" rx="1"></rect>
<rect x="112" y="152" width="14" height="14" rx="1"></rect>
<rect x="96" y="72" width="14" height="14" rx="1"></rect>
<rect x="96" y="168" width="14" height="14" rx="1"></rect>
<rect x="144" y="120" width="14" height="14" rx="1"></rect>
<rect x="128" y="104" width="14" height="14" rx="1"></rect>
<rect x="112" y="88" width="14" height="14" rx="1"></rect>
</svg>
);
};

function Breadcrumb({ children, ...props }: BitBreadcrumbNavigationProps) {
const { variant, className, font } = props;

Expand Down Expand Up @@ -162,7 +138,7 @@ function BreadcrumbSeparator({ ...props }: BitBreadcrumbListItemProps) {
className={cn(className, font !== "normal" && "retro", "[&>svg]:size-7")}
{...props}
>
{children ?? <ChevronRight />}
{children ?? <ChevronRightIcon />}
</ShadcnBreadcrumbSeparator>
);
}
Expand Down
81 changes: 4 additions & 77 deletions components/ui/8bit/calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { DayPicker } from "react-day-picker";

import { cn } from "@/lib/utils";

import { ChevronLeftIcon } from "@/components/ui/8bit/assets/chevronLeftIcon";
import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
import { Calendar as ShadcnCalendar } from "@/components/ui/calendar";

import { buttonVariants } from "./button";
Expand Down Expand Up @@ -124,85 +126,10 @@ function Calendar({ className, classNames, font, ...props }: CalendarProps) {
},
Chevron: ({ className, ...props }) => {
if (props.orientation === "left") {
return (
<svg
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className={cn("size-4 shrink-0", className)}
aria-label="chevron-left"
{...props}
>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 136)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 152)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 72)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 168)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 112 120)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 104)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 88)"
></rect>
</svg>
);
return <ChevronLeftIcon />;
}

return (
<svg
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className={cn("size-4 shrink-0", className)}
aria-label="chevron-right"
{...props}
>
<rect x="128" y="136" width="14" height="14" rx="1"></rect>
<rect x="112" y="152" width="14" height="14" rx="1"></rect>
<rect x="96" y="72" width="14" height="14" rx="1"></rect>
<rect x="96" y="168" width="14" height="14" rx="1"></rect>
<rect x="144" y="120" width="14" height="14" rx="1"></rect>
<rect x="128" y="104" width="14" height="14" rx="1"></rect>
<rect x="112" y="88" width="14" height="14" rx="1"></rect>
</svg>
);
return <ChevronRightIcon />;
},
Comment on lines 127 to 133
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Chevron component no longer forwards className/props; restore sizing and accessibility locally

The previous inline SVG respected incoming className/props. With the asset, className/props are dropped, and the asset enforces size-7, which may not match the nav button’s intent. Wrap and forward the className for predictable sizing and hide the decorative icon from AT:

           Chevron: ({ className, ...props }) => {
             if (props.orientation === "left") {
-              return <ChevronLeftIcon />;
+              return (
+                <span className={cn(className, "[&>svg]:size-4")} aria-hidden="true">
+                  <ChevronLeftIcon />
+                </span>
+              );
             }
 
-            return <ChevronRightIcon />;
+            return (
+              <span className={cn(className, "[&>svg]:size-4")} aria-hidden="true">
+                <ChevronRightIcon />
+              </span>
+            );
           },
  • Preserves styling hooks the DayPicker/Shadcn might pass.
  • Ensures a compact icon size that fits the button.
  • Avoids duplicate announcements by screen readers.

If you prefer removing wrappers, update both Chevron assets to accept and merge className/props and drop hardcoded size.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Chevron: ({ className, ...props }) => {
if (props.orientation === "left") {
return (
<svg
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className={cn("size-4 shrink-0", className)}
aria-label="chevron-left"
{...props}
>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 136)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 152)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 72)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 168)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 112 120)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 104)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 88)"
></rect>
</svg>
);
return <ChevronLeftIcon />;
}
return (
<svg
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className={cn("size-4 shrink-0", className)}
aria-label="chevron-right"
{...props}
>
<rect x="128" y="136" width="14" height="14" rx="1"></rect>
<rect x="112" y="152" width="14" height="14" rx="1"></rect>
<rect x="96" y="72" width="14" height="14" rx="1"></rect>
<rect x="96" y="168" width="14" height="14" rx="1"></rect>
<rect x="144" y="120" width="14" height="14" rx="1"></rect>
<rect x="128" y="104" width="14" height="14" rx="1"></rect>
<rect x="112" y="88" width="14" height="14" rx="1"></rect>
</svg>
);
return <ChevronRightIcon />;
},
Chevron: ({ className, ...props }) => {
if (props.orientation === "left") {
return (
<span className={cn(className, "[&>svg]:size-4")} aria-hidden="true">
<ChevronLeftIcon />
</span>
);
}
return (
<span className={cn(className, "[&>svg]:size-4")} aria-hidden="true">
<ChevronRightIcon />
</span>
);
},

}}
{...props}
Expand Down
6 changes: 4 additions & 2 deletions components/ui/8bit/context-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@
import * as React from "react";

import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
import { ChevronRight, Circle } from "lucide-react";
import { Circle } from "lucide-react";

import { cn } from "@/lib/utils";

import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";

import "./styles/retro.css";

const ContextMenu = ContextMenuPrimitive.Root;
Expand Down Expand Up @@ -37,7 +39,7 @@ const ContextMenuSubTrigger = React.forwardRef<
{...props}
>
{children}
<ChevronRight className="ml-auto size-4" />
<ChevronRightIcon />
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Restore right-align spacing for submenu chevron.

The lucide chevron previously had ml-auto to push it to the end of the row. The new <ChevronRightIcon /> lacks that, causing alignment regressions.

Minimal fix in-place:

-    <ChevronRightIcon />
+    <span className="ml-auto">
+      <ChevronRightIcon />
+    </span>

Optional (after enabling props on the asset icon): also match previous size and a11y semantics.

-    <ChevronRightIcon />
+    <ChevronRightIcon className="ml-auto size-4" aria-hidden="true" />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<ChevronRightIcon />
<span className="ml-auto">
<ChevronRightIcon />
</span>
🤖 Prompt for AI Agents 
In components/ui/8bit/context-menu.tsx around line 42, the submenu chevron lost
its right-alignment because the new <ChevronRightIcon /> is missing the previous
ml-auto spacing; restore the right alignment by adding the same right-margin
utility (e.g. ml-auto) to the ChevronRightIcon element, and optionally restore
prior sizing and accessibility semantics by passing the previous size props and
an appropriate aria-hidden or aria-label as needed.

</ContextMenuPrimitive.SubTrigger>
));
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
Expand Down
22 changes: 3 additions & 19 deletions components/ui/8bit/menubar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import { Circle } from "lucide-react";

import { cn } from "@/lib/utils";

import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";

import "./styles/retro.css";

export const menubarVariants = cva("", {
Expand Down Expand Up @@ -110,25 +112,7 @@ const MenubarSubTrigger = React.forwardRef<
{...props}
>
{children}
<svg
width="50"
height="50"
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
aria-label="chevron-right"
className="size-7 ml-auto"
>
<rect x="128" y="136" width="14" height="14" rx="1"></rect>
<rect x="112" y="152" width="14" height="14" rx="1"></rect>
<rect x="96" y="72" width="14" height="14" rx="1"></rect>
<rect x="96" y="168" width="14" height="14" rx="1"></rect>
<rect x="144" y="120" width="14" height="14" rx="1"></rect>
<rect x="128" y="104" width="14" height="14" rx="1"></rect>
<rect x="112" y="88" width="14" height="14" rx="1"></rect>
</svg>
<ChevronRightIcon />
Copy link

@coderabbitai coderabbitai bot Aug 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Restore right-align spacing for submenu chevron.

Previous implementation aligned the chevron to the far right (typically via ml-auto). The new <ChevronRightIcon /> lacks that spacing, so the icon will sit next to the text.

Minimal fix in-place:

-    <ChevronRightIcon />
+    <span className="ml-auto">
+      <ChevronRightIcon />
+    </span>

Optional (after making the icon accept props): shrink and right-align the icon for consistency with previous lucide size:

-    <ChevronRightIcon />
+    <ChevronRightIcon className="ml-auto size-4" aria-hidden="true" />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<ChevronRightIcon />
<span className="ml-auto">
<ChevronRightIcon />
</span>
🤖 Prompt for AI Agents 
In components/ui/8bit/menubar.tsx around line 115 the submenu chevron
<ChevronRightIcon /> lost its right-align spacing and now sits next to the menu
text; restore the previous right alignment by giving the icon an auto-left
margin (e.g., add className="ml-auto" to the icon or wrap it in a span/div with
className="ml-auto") so it’s pushed to the far right, and optionally update the
icon usage to pass a smaller size prop (matching the previous lucide size) once
the icon accepts props.

</MenubarPrimitive.SubTrigger>
));
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
Expand Down
87 changes: 2 additions & 85 deletions components/ui/8bit/pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { MoreHorizontal } from "lucide-react";

import { cn } from "@/lib/utils";

import { ChevronLeftIcon } from "@/components/ui/8bit/assets/chevronLeftIcon";
import { ChevronRightIcon } from "@/components/ui/8bit/assets/chevronRightIcon";
import {
Pagination as ShadcnPagination,
PaginationContent as ShadcnPaginationContent,
Expand Down Expand Up @@ -48,91 +50,6 @@ function Pagination({ ...props }: BitPaginationProps<"nav">) {
);
}

const ChevronLeftIcon = () => {
return (
<svg
width="50"
height="50"
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className="size-7"
aria-label="chevron-left"
>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 136)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 152)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 72)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 160 168)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 112 120)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 128 104)"
></rect>
<rect
width="14"
height="14"
rx="1"
transform="matrix(-1 0 0 1 144 88)"
></rect>
</svg>
);
};

const ChevronRightIcon = () => {
return (
<svg
width="50"
height="50"
viewBox="0 0 256 256"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
stroke="currentColor"
strokeWidth="0.25"
color=""
className="raster-icon size-7"
aria-label="chevron-right"
>
<rect x="128" y="136" width="14" height="14" rx="1"></rect>
<rect x="112" y="152" width="14" height="14" rx="1"></rect>
<rect x="96" y="72" width="14" height="14" rx="1"></rect>
<rect x="96" y="168" width="14" height="14" rx="1"></rect>
<rect x="144" y="120" width="14" height="14" rx="1"></rect>
<rect x="128" y="104" width="14" height="14" rx="1"></rect>
<rect x="112" y="88" width="14" height="14" rx="1"></rect>
</svg>
);
};

function PaginationContent({ ...props }: BitPaginationProps<"ul">) {
const { className, font } = props;
return (
Expand Down
Loading