fix(theme): update input and select styling and add data attribute for

value
heroui-inc · Nov 6, 2023 · e988ae9 · e988ae9
1 parent 049db57
commit e988ae9
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 37 deletions.
diff --git a/.changeset/real-moons-complain.md b/.changeset/real-moons-complain.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/input": patch
+"@nextui-org/theme": patch
+---
+
+- Input/Autocomplete/Textarea/Select styles adapted to custom default color, label truncate added
diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
@@ -238,6 +238,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         "data-has-elements": dataAttr(hasElements),
         "data-has-helper": dataAttr(hasHelper),
         "data-has-label": dataAttr(hasLabel),
+        "data-has-value": dataAttr(!isPlaceholderShown),
         ...focusWithinProps,
         ...props,
       };

diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
@@ -33,15 +33,19 @@ const input = tv({
       "block",
       "text-small",
       "text-foreground-500",
+      "opacity-70",
+      "group-data-[filled-within=true]:opacity-100",
     ],
     mainWrapper: "h-full",
     inputWrapper:
       "relative w-full inline-flex tap-highlight-transparent flex-row items-center shadow-sm px-3 gap-3",
     innerWrapper: "inline-flex w-full items-center h-full box-border",
     input: [
+      "opacity-70",
       "w-full font-normal bg-transparent !outline-none placeholder:text-foreground-500 focus-visible:outline-none",
       "data-[has-start-content=true]:ps-1.5",
       "data-[has-end-content=true]:pe-1.5",
+      "group-data-[has-value=true]:opacity-100",
     ],
     clearButton: [
       "p-2",
@@ -73,6 +77,8 @@ const input = tv({
           "data-[hover=true]:bg-default-200",
           "group-data-[focus=true]:bg-default-100",
         ],
+        input: "placeholder:text-default-foreground",
+        label: "text-default-foreground",
       },
       faded: {
         inputWrapper: [
@@ -81,14 +87,18 @@ const input = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400",
         ],
+        input: "placeholder:text-default-foreground",
+        label: "text-default-foreground",
       },
       bordered: {
         inputWrapper: [
           "border-medium",
           "border-default-200",
           "data-[hover=true]:border-default-400",
-          "group-data-[focus=true]:border-foreground",
+          "group-data-[focus=true]:border-default-foreground",
         ],
+        input: "placeholder:text-foreground",
+        label: "text-foreground",
       },
       underlined: {
         inputWrapper: [
@@ -105,7 +115,7 @@ const input = tv({
           "after:content-['']",
           "after:w-0",
           "after:origin-center",
-          "after:bg-foreground",
+          "after:bg-default-foreground",
           "after:absolute",
           "after:left-1/2",
           "after:-translate-x-1/2",
@@ -114,10 +124,14 @@ const input = tv({
           "group-data-[focus=true]:after:w-full",
         ],
         innerWrapper: "pb-1",
+        input: "placeholder:text-foreground",
+        label: "text-foreground",
       },
     },
     color: {
-      default: {},
+      default: {
+        label: "group-data-[filled-within=true]:opacity-80",
+      },
       primary: {},
       secondary: {},
       success: {},
@@ -494,14 +508,6 @@ const input = tv({
         ],
       },
     },
-    // inside && default
-    {
-      labelPlacement: "inside",
-      color: "default",
-      class: {
-        label: "group-data-[filled-within=true]:text-foreground-600",
-      },
-    },
     // isInvalid & variant
     {
       isInvalid: true,
@@ -582,11 +588,9 @@ const input = tv({
         label: [
           "pb-0",
           "z-20",
-          "opacity-60",
           "top-1/2",
           "-translate-y-1/2",
           "group-data-[filled-within=true]:left-0",
-          "group-data-[filled-within=true]:opacity-100",
         ],
       },
     },
@@ -601,7 +605,6 @@ const input = tv({
     {
       labelPlacement: ["inside"],
       variant: "flat",
-      size: ["md", "lg"],
       class: {
         innerWrapper: "pb-0.5",
       },
@@ -808,6 +811,13 @@ const input = tv({
         input: "transition-height !duration-100 motion-reduce:transition-none",
       },
     },
+    // text truncate labelPlacement=[inside,outside]
+    {
+      labelPlacement: ["inside", "outside"],
+      class: {
+        label: ["pe-2", "max-w-full", "text-ellipsis", "overflow-hidden"],
+      },
+    },
   ],
 });
 

diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
@@ -15,6 +15,8 @@ const select = tv({
       "text-small",
       "text-foreground-500",
       "pointer-events-none",
+      "opacity-70",
+      "group-data-[filled=true]:opacity-100",
     ],
     mainWrapper: "w-full flex flex-col",
     trigger:
@@ -23,7 +25,13 @@ const select = tv({
       "inline-flex h-full w-[calc(100%_-_theme(spacing.unit-6))] min-h-unit-4 items-center gap-1.5 box-border",
     selectorIcon: "absolute right-3 w-unit-4 h-unit-4",
     spinner: "absolute right-3",
-    value: ["font-normal", "w-full", "text-left"],
+    value: [
+      "font-normal",
+      "w-full",
+      "text-left",
+      "opacity-70",
+      "group-data-[has-value=true]:opacity-100",
+    ],
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
@@ -39,6 +47,8 @@ const select = tv({
           "data-[hover=true]:bg-default-200",
           "group-data-[focus=true]:bg-default-100",
         ],
+        label: "text-default-foreground",
+        value: "placeholder:text-default-foreground",
       },
       faded: {
         trigger: [
@@ -47,15 +57,20 @@ const select = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400",
         ],
+        label: "text-default-foreground",
+        value: "placeholder:text-default-foreground",
       },
       bordered: {
         trigger: [
           "border-medium",
           "border-default-200",
           "data-[hover=true]:border-default-400",
-          "data-[open=true]:border-foreground",
-          "data-[focus=true]:border-foreground",
+          "data-[open=true]:border-default-foreground",
+          "data-[focus=true]:border-default-foreground",
+          "data-[focus=true]:border-default-foreground",
         ],
+        label: "text-foreground",
+        value: "placeholder:text-foreground",
       },
       underlined: {
         trigger: [
@@ -72,7 +87,7 @@ const select = tv({
           "after:content-['']",
           "after:w-0",
           "after:origin-center",
-          "after:bg-foreground",
+          "after:bg-default-foreground",
           "after:absolute",
           "after:left-1/2",
           "after:-translate-x-1/2",
@@ -81,11 +96,13 @@ const select = tv({
           "data-[open=true]:after:w-full",
           "data-[focus=true]:after:w-full",
         ],
+        label: "text-foreground",
+        value: "placeholder:text-foreground",
       },
     },
     color: {
       default: {
-        value: ["text-foreground-500", "group-data-[has-value=true]:text-foreground"],
+        label: "group-data-[filled=true]:opacity-80",
       },
       primary: {},
       secondary: {},
@@ -454,14 +471,6 @@ const select = tv({
         ],
       },
     },
-    // inside && default
-    {
-      labelPlacement: "inside",
-      color: "default",
-      class: {
-        label: "group-data-[filled=true]:text-foreground-600",
-      },
-    },
     // isInvalid & variant
     {
       isInvalid: true,
@@ -523,15 +532,7 @@ const select = tv({
       isMultiline: false,
       class: {
         base: "group relative justify-end",
-        label: [
-          "pb-0",
-          "z-20",
-          "opacity-60",
-          "top-1/2",
-          "-translate-y-1/2",
-          "group-data-[filled=true]:opacity-100",
-          "group-data-[filled=true]:left-0",
-        ],
+        label: ["pb-0", "z-20", "top-1/2", "-translate-y-1/2", "group-data-[filled=true]:left-0"],
       },
     },
     // labelPlacement=[inside]
@@ -689,6 +690,13 @@ const select = tv({
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
       },
     },
+    // text truncate labelPlacement=[inside,outside]
+    {
+      labelPlacement: ["inside", "outside"],
+      class: {
+        label: ["pe-2", "max-w-full", "text-ellipsis", "overflow-hidden"],
+      },
+    },
   ],
 });
 

diff --git a/packages/storybook/tailwind.config.js b/packages/storybook/tailwind.config.js
@@ -11,5 +11,63 @@ module.exports = {
     "../core/theme/stories/**/*.{js,jsx,ts,tsx}",
   ],
   darkMode: "class",
-  plugins: [nextui()],
+  plugins: [
+    nextui({
+      themes: {
+        // "dark": {
+        //   extend: "dark", // <- inherit default values from dark theme
+        //   colors: {
+        //     background: "#0D001A",
+        //     foreground: "#ffffff",
+        //     content1: "#3B096C",
+        //     content2: "#520F83",
+        //     content3: "#7318A2",
+        //     content4: "#9823C2",
+        //     default: {
+        //       50: "#3B096C",
+        //       100: "#521d86",
+        //       200: "#6423a6",
+        //       300: "#7524cc",
+        //       400: "#8935e8",
+        //       500: "#9f57f5",
+        //       600: "#ba86fa",
+        //       700: "#d4b5fd",
+        //       800: "#e7d6fe",
+        //       900: "#f2e8ff",
+        //       DEFAULT: "#3B096C",
+        //       foreground: "#d4b5fd",
+        //     },
+        //     primary: {
+        //       50: "#3B096C",
+        //       100: "#520F83",
+        //       200: "#7318A2",
+        //       300: "#9823C2",
+        //       400: "#c031e2",
+        //       500: "#DD62ED",
+        //       600: "#F182F6",
+        //       700: "#FCADF9",
+        //       800: "#FDD5F9",
+        //       900: "#FEECFE",
+        //       DEFAULT: "#DD62ED",
+        //       foreground: "#ffffff",
+        //     },
+        //     focus: "#F182F6",
+        //   },
+        //   layout: {
+        //     disabledOpacity: "0.3",
+        //     radius: {
+        //       small: "4px",
+        //       medium: "6px",
+        //       large: "8px",
+        //     },
+        //     borderWidth: {
+        //       small: "1px",
+        //       medium: "2px",
+        //       large: "3px",
+        //     },
+        //   },
+        // },
+      },
+    }),
+  ],
 };