fix(select): multiline styles (#1914)

heroui-inc · Nov 7, 2023 · 7f6218b · 7f6218b · vercel · Nov 7, 2023
1 parent 0eb9f1e
commit 7f6218b
Show file tree

Hide file tree

Showing 7 changed files with 744 additions and 721 deletions.
diff --git a/.changeset/unlucky-nails-rhyme.md b/.changeset/unlucky-nails-rhyme.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/select": patch
+"@nextui-org/theme": patch
+---
+
+Fix #1910 multiline select fixed, style improved.
diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx
@@ -28,7 +28,7 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
     endContent,
     placeholder,
     renderValue,
-    isOutsideLeft,
+    shouldLabelBeOutside,
     disableAnimation,
     getBaseProps,
     getLabelProps,
@@ -115,10 +115,10 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
   return (
     <div {...getBaseProps()}>
       <HiddenSelect {...getHiddenSelectProps()} />
-      {isOutsideLeft ? labelContent : null}
+      {shouldLabelBeOutside ? labelContent : null}
       <div {...getMainWrapperProps()}>
         <Component {...getTriggerProps()}>
-          {!isOutsideLeft ? labelContent : null}
+          {!shouldLabelBeOutside ? labelContent : null}
           <div {...getInnerWrapperProps()}>
             {startContent}
             <span {...getValueProps()}>

diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts
@@ -262,7 +262,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     labelPlacement === "outside-left" ||
     (labelPlacement === "outside" && (hasPlaceholder || !!originalProps.isMultiline));
   const shouldLabelBeInside = labelPlacement === "inside";
-  const isOutsideLeft = labelPlacement === "outside-left";
+
   const isFilled =
     state.isOpen ||
     hasPlaceholder ||
@@ -583,7 +583,6 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     hasPlaceholder,
     renderValue,
     selectionMode,
-    isOutsideLeft,
     disableAnimation,
     shouldLabelBeOutside,
     shouldLabelBeInside,

diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
@@ -799,8 +799,10 @@ export const WithChips = {
     variant: "bordered",
     selectionMode: "multiple",
     isMultiline: true,
+    labelPlacement: "outside",
     classNames: {
-      trigger: "py-2",
+      base: "max-w-xs",
+      trigger: "min-h-unit-12 py-2",
     },
     renderValue: (items: SelectedItems<User>) => {
       return (

diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
@@ -812,6 +812,14 @@ const input = tv({
         label: "group-data-[has-helper=true]:pt-4",
       },
     },
+    // isMultiline & labelPlacement="outside"
+    {
+      labelPlacement: "outside",
+      isMultiline: true,
+      class: {
+        label: "pb-1.5",
+      },
+    },
     // isMultiline & labelPlacement="inside"
     {
       labelPlacement: "inside",

diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
@@ -704,6 +704,14 @@ const select = tv({
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
       },
     },
+    // isMultiline & labelPlacement="outside"
+    {
+      labelPlacement: "outside",
+      isMultiline: true,
+      class: {
+        label: "pb-1.5",
+      },
+    },
     // text truncate labelPlacement=[inside,outside]
     {
       labelPlacement: ["inside", "outside"],