fix: borderWidth not getting applied on breadcrumbs and input

heroui-inc · Jan 30, 2025 · 4e4087c · 4e4087c
1 parent d2c5add
commit 4e4087c
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 42 deletions.
diff --git a/apps/docs/components/themes/components/configuration/font-button.tsx b/apps/docs/components/themes/components/configuration/font-button.tsx
@@ -1,12 +1,13 @@
 import {Button} from "@heroui/react";
 import {clsx} from "@heroui/shared-utils";
 
-type FontName = "inter" | "roboto" | "outfit" | "lora";
+import {FontName, FontType} from "../../types";
+
 interface FontButtonProps {
   title: FontName;
   className: string;
   value: string;
-  setValue: (value: string) => void;
+  setValue: (value: FontType) => void;
 }
 
 interface FontStyle {

diff --git a/apps/docs/components/themes/components/showcase-component.tsx b/apps/docs/components/themes/components/showcase-component.tsx
@@ -1,15 +1,14 @@
 import {Divider} from "@heroui/react";
 
 import {useThemeBuilder} from "../provider";
+import {FontName} from "../types";
 
 interface ShowcaseComponentProps {
   children: React.ReactElement | React.ReactElement[];
   id?: string;
   name: string;
 }
 
-type FontName = "inter" | "roboto" | "outfit" | "lora";
-
 const FONT_CONFIGS: Record<FontName, {family: string; type: "sans-serif" | "serif"}> = {
   inter: {family: "Inter", type: "sans-serif"},
   roboto: {family: "Roboto", type: "sans-serif"},

diff --git a/apps/docs/components/themes/components/showcase/breadcrumbs.tsx b/apps/docs/components/themes/components/showcase/breadcrumbs.tsx
@@ -1,4 +1,3 @@
-import {cloneElement} from "react";
 import {
   BreadcrumbsProps,
   Breadcrumbs as HeroUIBreadcrumbs,
@@ -7,7 +6,6 @@ import {
 
 import {ShowcaseComponent} from "../showcase-component";
 import {useThemeBuilder} from "../../provider";
-import {getBorderWidth} from "../../utils/shared";
 import {Border} from "../../types";
 
 type Color = BreadcrumbsProps["color"];
@@ -48,12 +46,17 @@ const Section = ({
   scaling: number;
   borderWidthValue: Border;
 }) => {
-  const variants = ["bordered", "light", "solid"];
+  const variants = ["bordered", "light", "solid", "solid"];
   const disabled = [false, false, false, true];
   let classNames = {base: "text-small"};
 
-  const border = getBorderWidth(borderWidthValue);
-  const borderClassName = `border-${border}`;
+  let borderClass = "border-medium";
+
+  if (borderWidthValue === "thin") {
+    borderClass = "border-small";
+  } else if (borderWidthValue === "thick") {
+    borderClass = "border-large";
+  }
 
   switch (scaling) {
     case 90: {
@@ -80,17 +83,18 @@ const Section = ({
 
   return (
     <div className="flex flex-col gap-y-4">
-      {variants.map((variant, idx) =>
-        cloneElement(<SectionBase key={idx} />, {
-          color: color,
-          variant,
-          classNames: {
+      {variants.map((variant, idx) => (
+        <SectionBase
+          key={idx}
+          classNames={{
             ...classNames,
-            list: variant === "bordered" ? borderClassName : "",
-          },
-          isDisabled: disabled[idx],
-        }),
-      )}
+            list: variant === "bordered" && borderClass,
+          }}
+          color={color}
+          isDisabled={disabled[idx]}
+          variant={variant as BreadcrumbsProps["variant"]}
+        />
+      ))}
     </div>
   );
 };

diff --git a/apps/docs/components/themes/components/showcase/input.tsx b/apps/docs/components/themes/components/showcase/input.tsx
@@ -1,11 +1,9 @@
-import {cloneElement} from "react";
 import {InputProps, Input} from "@heroui/react";
 import {clsx} from "@heroui/shared-utils";
 
 import {ShowcaseComponent} from "../showcase-component";
 import {useThemeBuilder} from "../../provider";
 import {Border, HeroUIScaling} from "../../types";
-import {getBorderWidth} from "../../utils/shared";
 
 type Color = InputProps["color"];
 type Radius = InputProps["radius"];
@@ -50,8 +48,13 @@ const Section = ({
   const variants = ["flat", "bordered", "faded", "underlined"];
   let classNames = {base: "h-10 w-[340px]", label: "text-small"};
 
-  const border = getBorderWidth(borderWidthValue);
-  const borderClassName = `border-${border}`;
+  let borderClass = "border-medium";
+
+  if (borderWidthValue === "thin") {
+    borderClass = "border-small";
+  } else if (borderWidthValue === "thick") {
+    borderClass = "border-large";
+  }
 
   switch (scaling) {
     case 90: {
@@ -77,26 +80,27 @@ const Section = ({
   }
 
   return (
-    <div key={color} className="flex flex-col gap-y-4">
-      {variants.map((variant, idx) =>
-        cloneElement(<SectionBase key={idx} />, {
-          color,
-          variant,
-          classNames: {
+    <div key={color} className="flex flex-col gap-y-4 w-auto h-auto">
+      {variants.map((variant, idx) => (
+        <SectionBase
+          key={idx}
+          classNames={{
             ...classNames,
-            inputWrapper: clsx(variant === "bordered" ? `${borderClassName} border-${color}` : ""),
-          },
-          isDisabled: false,
-          radius,
-        }),
-      )}
-      {cloneElement(<SectionBase />, {
-        color,
-        classNames,
-        variant: "flat",
-        isDisabled: true,
-        radius,
-      })}
+            inputWrapper: clsx(clsx(variant === "bordered" && borderClass)),
+          }}
+          color={color}
+          isDisabled={false}
+          radius={radius}
+          variant={variant as Variant}
+        />
+      ))}
+      <SectionBase
+        classNames={classNames}
+        color={color}
+        isDisabled={true}
+        radius={radius}
+        variant="flat"
+      />
     </div>
   );
 };

diff --git a/apps/docs/components/themes/types.ts b/apps/docs/components/themes/types.ts
@@ -45,6 +45,7 @@ export type Variant =
 export type Radius = "none" | "sm" | "md" | "lg" | "full";
 export type HeroUIScaling = 90 | 95 | 100 | 105 | 110;
 export type Border = "thin" | "medium" | "thick";
+export type FontName = "inter" | "roboto" | "outfit" | "lora";
 
 // Themes
 export type ThemeType = "light" | "dark";