Repository navigation
Add Chips component for arrays of strings - #424
Merged
Merged
Conversation
Renders an array of strings as removable chips with an inline add. Hovering a chip reveals an "×" to remove it, and "+" adds one as free text, or from a dropdown when `componentProps.options` is set. `color` and `textColor` set the chip colours (default sky blue on dark blue). Outside an edit session each change commits on its own via `handleEdit(value)`; inside one, the same controls edit the buffer for ✓ to commit. The guard matches any all-string array, empty ones included, and the Type selector converts to and from a comma-separated string. Added to the Custom Component Library demo, with a second, targeted definition limited to a list of options. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A type switch to Chips opened an edit session on the converted value, which left ✓/✗ showing with nothing to confirm, since the chips are edited in place. The component now commits it as soon as it renders, recognising a switch by the committed value not yet being a string array. A session opened from the edit button stays open, as it's where the Type selector lives. `isStringArray` moves to its own module, shared by the guard and the component. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Every chip add and remove commits on its own, so the session the edit button opens is only there for the Type selector. The "+" and the hover "×" are now hidden while it's open, which also drops the buffered edit path the controls used inside a session. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Bundle size impact
|
| Format | Base raw | PR raw | Δ raw | Base gzip | PR gzip | Δ gzip |
|---|---|---|---|---|---|---|
| esm | 15.76 KB | 18.65 KB | 🔺 +2.90 KB (+18.38%) | 5.32 KB | 6.22 KB | 🔺 +930 B (+17.09%) |
| cjs | 16.39 KB | 19.32 KB | 🔺 +2.93 KB (+17.86%) | 5.17 KB | 6.07 KB | 🔺 +922 B (+17.43%) |
Measured from build/index.{cjs,esm}.js. Gzip at level 9.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds
Chipsto@json-edit-react/components: the "Tags / chips" candidate from #355. It renders an array of strings as removable chips, with an inline add.Behaviour
renderCollectionAsValue.handleEdit(value). Duplicates and blank entries are ignored.options: when set, "+" opens a dropdown of the options not already present instead of a text input. It uses the editor'sSelect, so a customSelectprop applies.color/textColor: chip background and text, default sky blue (#bae6fd) on dark blue (#0c4a6e). Styled after theUnixTimestampbadge, without the uppercase.editOnTypeSwitchso the switch converts the old value throughfromStandardTyperather than usingdefaultValue. Switching away joins the chips with,.canEditis false, which is how the component followsallowEdit.handleEditdoesn't enforce it itself.Also in this PR
Tagslist, plus a pinkPick from optionsvariant targeted withbyKeyand hidden from the Type selector so "Chips" isn't listed twice.## 1.1.0CHANGELOG entry for the package.scripts/verify-treeshake.mjs, whose marker-table check fails the build until a newstyle.cssis added there.Testing
packages/components/test/Chips.test.tsx; all 37 component tests pass.pnpm buildpasses for components, including the tree-shake and stylesheet guards. Component and demo typechecks are clean.🤖 Generated with Claude Code