fix: set nowrap in chip (#1590)

* fix: set nowrap in chip * Create early-garlics-deliver.md
nextui-org · Sep 10, 2023 · 5c30e04 · 5c30e04 · vercel · Sep 10, 2023
1 parent 8606fbe
commit 5c30e04
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/.changeset/early-garlics-deliver.md b/.changeset/early-garlics-deliver.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+fix: set nowrap in chip
diff --git a/packages/components/chip/stories/chip.stories.tsx b/packages/components/chip/stories/chip.stories.tsx
@@ -100,3 +100,17 @@ export const WithAvatar = {
     avatar: <Avatar name="JW" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />,
   },
 };
+
+const HiddenOverflowTemplate = (args: ChipProps) => (
+  <div className="w-20 border-danger-500 border-2">
+    <Chip {...args} />
+  </div>
+);
+
+export const HiddenOverflow = {
+  render: HiddenOverflowTemplate,
+  args: {
+    ...defaultProps,
+    children: "Hello World!",
+  },
+};
diff --git a/packages/core/theme/src/components/chip.ts b/packages/core/theme/src/components/chip.ts
@@ -22,7 +22,15 @@ import {ringClasses, colorVariants} from "../utils";
  */
 const chip = tv({
   slots: {
-    base: ["relative", "max-w-fit", "inline-flex", "items-center", "justify-between", "box-border"],
+    base: [
+      "relative",
+      "max-w-fit",
+      "inline-flex",
+      "items-center",
+      "justify-between",
+      "box-border",
+      "whitespace-nowrap",
+    ],
     content: "flex-1 text-inherit font-normal",
     dot: ["w-2", "h-2", "ml-1", "rounded-full"],
     avatar: "flex-shrink-0",