archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(select): select label (#5147)

Browse Source 
* fix(select): label should be outside when there is a placeholder

* fix(theme): remove pointer-events-none & revise style when there is helper

* chore(changeset): add changeset

* fix(select): add hasLabelOutside

* fix(theme): pointer-events

* fix(select): revise hasLabelOutside
This commit is contained in:
աӄա 2025-04-04 22:02:53 +08:00 committed by GitHub
parent 26a0c479f0
commit 2420acfe24
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/beige-ants-search.md Normal file
View File

@ -0,0 +1,6 @@
---
"@heroui/select": patch
"@heroui/theme": patch
---
fix select styles for label & helper text (#5413)

2
packages/components/select/package.json
View File

@ -35,7 +35,7 @@
},
"peerDependencies": {
"@heroui/system": ">=2.4.10",
"@heroui/theme": ">=2.4.9",
"@heroui/theme": ">=2.4.12",
"framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
"react": ">=18 || >=19.0.0-rc.0",
"react-dom": ">=18 || >=19.0.0-rc.0"

9
packages/components/select/src/use-select.ts
View File

@ -354,10 +354,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
});
const hasPlaceholder = !!placeholder;
const shouldLabelBeOutside =
labelPlacement === "outside-left" ||
(labelPlacement === "outside" &&
(!(hasPlaceholder || !!description) || !!originalProps.isMultiline));
const shouldLabelBeOutside = labelPlacement === "outside-left" || labelPlacement === "outside";
const shouldLabelBeInside = labelPlacement === "inside";
const isOutsideLeft = labelPlacement === "outside-left";
@ -370,6 +367,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
!!originalProps.isMultiline;
const hasValue = !!state.selectedItems?.length;
const hasLabel = !!label;
const hasLabelOutside = hasLabel && (isOutsideLeft || (shouldLabelBeOutside && hasPlaceholder));
const baseStyles = clsx(classNames?.base, className);
@ -432,12 +430,13 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
"data-has-label": dataAttr(hasLabel),
"data-has-helper": dataAttr(hasHelper),
"data-invalid": dataAttr(isInvalid),
"data-has-label-outside": dataAttr(hasLabelOutside),
className: slots.base({
class: clsx(baseStyles, props.className),
}),
...props,
}),
[slots, hasHelper, hasValue, hasLabel, isFilled, baseStyles],
[slots, hasHelper, hasValue, hasLabel, hasLabelOutside, isFilled, baseStyles],
);
const getTriggerProps: PropGetter = useCallback(

4
packages/core/theme/src/components/select.ts
View File

@ -18,6 +18,7 @@ const select = tv({
"text-small",
"text-foreground-500",
"pointer-events-none",
"group-data-[has-label-outside=true]:pointer-events-auto",
],
mainWrapper: "w-full flex flex-col",
trigger:
@ -689,6 +690,7 @@ const select = tv({
"start-2",
"text-tiny",
"group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
"group-data-[has-helper=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_26px)]",
],
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]",
},
@ -702,6 +704,7 @@ const select = tv({
"start-3",
"text-small",
"group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
"group-data-[has-helper=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_30px)]",
],
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]",
},
@ -715,6 +718,7 @@ const select = tv({
"start-3",
"text-medium",
"group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
"group-data-[has-helper=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_34px)]",
],
base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
},