refactor(ui) standardize border styles to use dashed 3px borders across components (#169)

Author: TheOrcDev

app/docs/components/dropdown-menu/page.tsx

@@ -62,7 +62,7 @@ export default function DropdownMenuPage() {
             <DropdownMenuTrigger asChild>
               <Button variant="outline">Open</Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent className="text-xs w-56 rounded-none overflow-clip">
+            <DropdownMenuContent className="text-xs w-56 rounded-none">
               <DropdownMenuLabel>My Account</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuGroup>
@@ -147,7 +147,7 @@ export default function DropdownMenuPage() {
   <DropdownMenuTrigger asChild>
     <Button variant="outline">Open</Button>
   </DropdownMenuTrigger>
-  <DropdownMenuContent className="text-xs w-56 rounded-none overflow-clip">
+  <DropdownMenuContent className="text-xs w-56 rounded-none">
     <DropdownMenuLabel>My Account</DropdownMenuLabel>
     <DropdownMenuSeparator />
     <DropdownMenuGroup>

components/ui/8bit/chart.tsx

@@ -173,10 +173,14 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "relative border-y-6 border-foreground dark:border-ring bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >
+      <div
+        className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
+        aria-hidden="true"
+      />
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
         {payload.map((item, index) => {

components/ui/8bit/command.tsx

@@ -208,7 +208,7 @@ function CommandItem({
     <ShadcnCommandItem
       data-slot="command-item"
       className={cn(
-        "rounded-none border-t border-b border-dashed border-y-4 border-ring/0 hover:border-foreground dark:hover:border-ring",
+        "rounded-none border-dashed border-y-3 border-ring/0 hover:border-foreground dark:hover:border-ring",
         className
       )}
       {...props}

components/ui/8bit/dropdown-menu.tsx

@@ -65,7 +65,7 @@ function DropdownMenuItem({
   return (
     <ShadcnDropdownMenuItem
       className={cn(
-        "hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-4 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent",
+        "hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-3 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent",
         className
       )}
       {...props}
@@ -129,7 +129,7 @@ function DropdownMenuContent({
   return (
     <ShadcnDropdownMenuContent
       className={cn(
-        "bg-popover mt-1 py-2",
+        "mt-1 py-2",
         font !== "normal" && pressStart.className,
         className
       )}

components/ui/8bit/pagination.tsx

@@ -175,7 +175,7 @@ function PaginationLink({ ...props }: PaginationLinkProps) {
         className,
         "relative group",
         "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent",
-        "rounded-none border-dotted border-y-4 border-transparent",
+        "rounded-none border-dashed border-y-4 border-transparent",
         "dark:hover:border-ring dark:focus:border-ring",
         "hover:border-foreground focus:border-foreground",
         "active:border-transparent",
@@ -230,7 +230,7 @@ function PaginationPrevious({
         "relative group",
         "flex flex-row w-full text-sm",
         "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent",
-        "rounded-none border-dotted border-y-4 border-transparent",
+        "rounded-none border-dashed border-y-4 border-transparent",
         "hover:border-foreground focus:border-foreground active:border-transparent",
         "dark:hover:border-ring dark:focus:border-ring",
         "data-[active=true]:border-none aria-[current=page]:border-none",
@@ -256,7 +256,7 @@ function PaginationNext({
         "relative group",
         "flex flex-row w-full text-sm",
         "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent",
-        "rounded-none border-dotted border-y-4 border-transparent",
+        "rounded-none border-dashed border-y-4 border-transparent",
         "hover:border-foreground focus:border-foreground active:border-transparent",
         "dark:hover:border-ring dark:focus:border-ring",
         "data-[active=true]:border-none aria-[current=page]:border-none",

components/ui/8bit/select.tsx

@@ -141,7 +141,7 @@ function SelectItem({
     <ShadcnSelectItem
       className={cn(
         className,
-        "rounded-none border-t border-b border-dashed border-ring/0 hover:border-foreground dark:hover:border-ring"
+        "rounded-none border-y-3 border-dashed border-ring/0 hover:border-foreground dark:hover:border-ring"
       )}
       {...props}
     >

components/ui/8bit/table.tsx

@@ -67,7 +67,12 @@ function Table({
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return <ShadcnTableHeader className={cn(className)} {...props} />
+  return (
+    <ShadcnTableHeader
+      className={cn(className, "border-b-4 border-foreground dark:border-ring")}
+      {...props}
+    />
+  )
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
@@ -83,7 +88,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <ShadcnTableRow
       className={cn(
         className,
-        "border-dashed border-foreground dark:border-ring"
+        "border-dashed border-b-4 border-foreground dark:border-ring"
       )}
       {...props}
     />

public/r/8bit-chart.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "components/ui/8bit/dropdown-menu.tsx",
-      "content": "import { Press_Start_2P } from \"next/font/google\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { cva, VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  DropdownMenu as ShadcnDropdownMenu,\n  DropdownMenuContent as ShadcnDropdownMenuContent,\n  DropdownMenuGroup as ShadcnDropdownMenuGroup,\n  DropdownMenuItem as ShadcnDropdownMenuItem,\n  DropdownMenuLabel as ShadcnDropdownMenuLabel,\n  DropdownMenuPortal as ShadcnDropdownMenuPortal,\n  DropdownMenuSeparator as ShadcnDropdownMenuSeparator,\n  DropdownMenuShortcut as ShadcnDropdownMenuShortcut,\n  DropdownMenuSub as ShadcnDropdownMenuSub,\n  DropdownMenuSubContent as ShadcnDropdownMenuSubContent,\n  DropdownMenuSubTrigger as ShadcnDropdownMenuSubTrigger,\n  DropdownMenuTrigger as ShadcnDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nconst DropdownMenu = ShadcnDropdownMenu\n\nconst DropdownMenuPortal = ShadcnDropdownMenuPortal\n\nconst DropdownMenuTrigger = ShadcnDropdownMenuTrigger\n\nconst DropdownMenuGroup = ShadcnDropdownMenuGroup\n\nconst DropdownMenuLabel = ShadcnDropdownMenuLabel\n\nconst DropdownMenuSeparator = ShadcnDropdownMenuSeparator\n\nconst DropdownMenuShortcut = ShadcnDropdownMenuShortcut\n\nconst DropdownMenuSub = ShadcnDropdownMenuSub\n\nconst pressStart = Press_Start_2P({\n  weight: [\"400\"],\n  subsets: [\"latin\"],\n})\n\nfunction DropdownMenuSubTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.DropdownMenuSubTrigger>) {\n  return (\n    <ShadcnDropdownMenuSubTrigger\n      className={cn(\n        \"hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-4 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnDropdownMenuSubTrigger>\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item>) {\n  return (\n    <ShadcnDropdownMenuItem\n      className={cn(\n        \"hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-4 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnDropdownMenuItem>\n  )\n}\n\nexport const dropDownVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: pressStart.className,\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n})\n\nfunction DropdownMenuSubContent({\n  children,\n  className,\n  font,\n  ...props\n}: BitDropownMenuContentProps) {\n  return (\n    <ShadcnDropdownMenuSubContent\n      {...props}\n      className={cn(\n        \"bg-popover\",\n        font !== \"normal\" && pressStart.className,\n        className\n      )}\n    >\n      {children}\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      <div\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </ShadcnDropdownMenuSubContent>\n  )\n}\n\nexport interface BitDropownMenuContentProps\n  extends React.ComponentProps<typeof DropdownMenuPrimitive.Content>,\n    VariantProps<typeof dropDownVariants> {}\n\nfunction DropdownMenuContent({\n  children,\n  font,\n  className,\n  ...props\n}: BitDropownMenuContentProps) {\n  return (\n    <ShadcnDropdownMenuContent\n      className={cn(\n        \"bg-popover mt-1 py-2\",\n        font !== \"normal\" && pressStart.className,\n        className\n      )}\n      {...props}\n    >\n      {children}\n\n      <div\n        className=\"mt-2.5 absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      <div\n        className=\"mt-1 absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </ShadcnDropdownMenuContent>\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n}\n",
+      "content": "import { Press_Start_2P } from \"next/font/google\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { cva, VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  DropdownMenu as ShadcnDropdownMenu,\n  DropdownMenuContent as ShadcnDropdownMenuContent,\n  DropdownMenuGroup as ShadcnDropdownMenuGroup,\n  DropdownMenuItem as ShadcnDropdownMenuItem,\n  DropdownMenuLabel as ShadcnDropdownMenuLabel,\n  DropdownMenuPortal as ShadcnDropdownMenuPortal,\n  DropdownMenuSeparator as ShadcnDropdownMenuSeparator,\n  DropdownMenuShortcut as ShadcnDropdownMenuShortcut,\n  DropdownMenuSub as ShadcnDropdownMenuSub,\n  DropdownMenuSubContent as ShadcnDropdownMenuSubContent,\n  DropdownMenuSubTrigger as ShadcnDropdownMenuSubTrigger,\n  DropdownMenuTrigger as ShadcnDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nconst DropdownMenu = ShadcnDropdownMenu\n\nconst DropdownMenuPortal = ShadcnDropdownMenuPortal\n\nconst DropdownMenuTrigger = ShadcnDropdownMenuTrigger\n\nconst DropdownMenuGroup = ShadcnDropdownMenuGroup\n\nconst DropdownMenuLabel = ShadcnDropdownMenuLabel\n\nconst DropdownMenuSeparator = ShadcnDropdownMenuSeparator\n\nconst DropdownMenuShortcut = ShadcnDropdownMenuShortcut\n\nconst DropdownMenuSub = ShadcnDropdownMenuSub\n\nconst pressStart = Press_Start_2P({\n  weight: [\"400\"],\n  subsets: [\"latin\"],\n})\n\nfunction DropdownMenuSubTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.DropdownMenuSubTrigger>) {\n  return (\n    <ShadcnDropdownMenuSubTrigger\n      className={cn(\n        \"hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-4 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent data-[state=open]:bg-transparent data-[state=open]:border-foreground dark:data-[state=open]:border-ring\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnDropdownMenuSubTrigger>\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item>) {\n  return (\n    <ShadcnDropdownMenuItem\n      className={cn(\n        \"hover:bg-transparent active:bg-transparent focus:bg-transparent rounded-none border-dashed border-y-3 border-transparent focus:border-foreground hover:border-foreground dark:focus:border-ring bg-transparent\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ShadcnDropdownMenuItem>\n  )\n}\n\nexport const dropDownVariants = cva(\"\", {\n  variants: {\n    font: {\n      normal: \"\",\n      retro: pressStart.className,\n    },\n  },\n  defaultVariants: {\n    font: \"retro\",\n  },\n})\n\nfunction DropdownMenuSubContent({\n  children,\n  className,\n  font,\n  ...props\n}: BitDropownMenuContentProps) {\n  return (\n    <ShadcnDropdownMenuSubContent\n      {...props}\n      className={cn(\n        \"bg-popover\",\n        font !== \"normal\" && pressStart.className,\n        className\n      )}\n    >\n      {children}\n\n      <div\n        className=\"absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      <div\n        className=\"absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </ShadcnDropdownMenuSubContent>\n  )\n}\n\nexport interface BitDropownMenuContentProps\n  extends React.ComponentProps<typeof DropdownMenuPrimitive.Content>,\n    VariantProps<typeof dropDownVariants> {}\n\nfunction DropdownMenuContent({\n  children,\n  font,\n  className,\n  ...props\n}: BitDropownMenuContentProps) {\n  return (\n    <ShadcnDropdownMenuContent\n      className={cn(\n        \"mt-1 py-2\",\n        font !== \"normal\" && pressStart.className,\n        className\n      )}\n      {...props}\n    >\n      {children}\n\n      <div\n        className=\"mt-2.5 absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n      <div\n        className=\"mt-1 absolute inset-0 border-y-6 -my-1.5 border-foreground dark:border-ring pointer-events-none\"\n        aria-hidden=\"true\"\n      />\n    </ShadcnDropdownMenuContent>\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n}\n",
       "type": "registry:component",
       "target": "components/ui/8bit/dropdown-menu.tsx"
     }