feat(picker): expose per-item invalid state#4029
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-4029/ |
Add an optional `invalid` field to the `Chip` interface and pass it through `getChipProps` so consumers can mark individual chips in the `value` array as invalid. This is independent of the chip-set-level `invalid` prop, which continues to mark the whole field as invalid. Closes #4026
Demonstrate the new per-chip `invalid` flag with an email recipients input: entries that don't look like email addresses are rendered with `invalid: true` and an error icon.
TommyLindh2
force-pushed
the
feat/4026-chip-set-per-chip-invalid
branch
from
984451f to
c8a0105
Compare
Add an optional `invalid` field to the `ListItem` interface and pass it through the picker's `createChip`, so consumers can mark individual selections in the `value` array as invalid — useful when a previously valid selection is no longer valid (e.g. a deactivated user). This is independent of the picker-level `invalid` prop, which marks the whole field as invalid. The flag is currently only honoured when the item is rendered as a chip; plain lists and menus ignore it. Closes #4028
Demonstrate marking selected list items as invalid by pre-selecting three members where one is flagged `invalid: true`, rendering it with the chip's invalid styling while the other two render normally.
TommyLindh2
force-pushed
the
feat/4028-picker-per-item-invalid
branch
from
4d5d22a to
a491c96
Compare
TommyLindh2
force-pushed
the
feat/4026-chip-set-per-chip-invalid
branch
3 times, most recently
from
f79e5c8 to
30e50be
Compare
1 participant
Closes #4028
Stacked on #4027
Summary
invalidfield to theListIteminterfacelistItem.invalidthroughlimel-picker'screateChipto the rendered chiplimel-example-picker-invalid-itemsexampleConsumers can now flag individual selections in a multi-value picker as invalid:
```ts
selectedItems = [
{ text: 'Ayla', value: 2 },
{ text: 'Clunk', value: 3, invalid: true },
{ text: 'Coco', value: 4 },
];
```
Scope note
The
invalidflag onListItemis currently only honoured when the item is rendered as a chip (i.e., insidelimel-picker). Plain lists and menus ignore it today — extending the visualization to those surfaces is a follow-up design discussion (tracked separately).Dependencies
Depends on #4027 — the chip-set needs to forward per-chip
invalidbefore this is useful end-to-end. Merge #4027 first, then rebase this branch ontomainbefore merging.Test plan
npm run buildpassesnpm run lintpassesnpm run test— all 1119 tests passlimel-example-picker-invalid-itemsexample and confirm the pre-selected "Clunk" chip renders with the invalid styling while the others render normallyallItems) and confirm it too renders as invalid once selected