From 7b26d25e6aa94333e84faeda5bbf6909cd8d7064 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 4 Jun 2024 21:12:01 +0800 Subject: [PATCH 1/2] fix(select): add missing data-invalid attribute --- .changeset/lazy-comics-crash.md | 5 +++++ packages/components/select/src/use-select.ts | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/lazy-comics-crash.md diff --git a/.changeset/lazy-comics-crash.md b/.changeset/lazy-comics-crash.md new file mode 100644 index 0000000000..962030cc23 --- /dev/null +++ b/.changeset/lazy-comics-crash.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/select": patch +--- + +Add missing `data-invalid` attribute (#3149) diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts index 35600017ba..fb3b730b6e 100644 --- a/packages/components/select/src/use-select.ts +++ b/packages/components/select/src/use-select.ts @@ -377,6 +377,7 @@ export function useSelect(originalProps: UseSelectProps) { "data-has-value": dataAttr(hasValue), "data-has-label": dataAttr(hasLabel), "data-has-helper": dataAttr(hasHelper), + "data-invalid": dataAttr(isInvalid), className: slots.base({ class: clsx(baseStyles, props.className), }), From ae47bc317b7c0c00c56dd2a81d21fc8aa657785d Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 4 Jun 2024 21:58:34 +0800 Subject: [PATCH 2/2] chore(docs): add missing data attributes for select base --- apps/docs/content/docs/components/select.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx index ee5d1b4d8e..650b18e61d 100644 --- a/apps/docs/content/docs/components/select.mdx +++ b/apps/docs/content/docs/components/select.mdx @@ -285,6 +285,14 @@ the popover and listbox components. - **data-filled**: Indicates if the select has a value, is focused, has start/end content or is open. +- **data-has-value**: + Indicates if the select has selected item(s). +- **data-has-label**: + Indicates if the select has a label. Based on `label` prop. +- **data-has-helper**: + Indicates if the select has helper text. Based on `errorMessage` or `description` prop. +- **data-invalid**: + Indicates if the select is invalid. Based on `isInvalid` prop. `Select` has the following attributes on the `trigger` element: