Skip to content

Add Chips component for arrays of strings - #424

Merged
CarlosNZ merged 3 commits into
mainfrom
tag-chip-array-component
Oct 10, 2026
Merged

CarlosNZ merged 3 commits into
mainfrom
tag-chip-array-component

Conversation

@CarlosNZ

Copy link
Copy Markdown
Owner

Adds Chips to @json-edit-react/components: the "Tags / chips" candidate from #355. It renders an array of strings as removable chips, with an inline add.

Behaviour

  • Guard: any array whose elements are all strings, empty arrays included, so removing the last chip leaves a list that can still be added to. Rendered with renderCollectionAsValue.
  • Editing in place: hover a chip to show a "×" on its corner (overlaid, so the row doesn't shift). "+" opens a text input: Enter adds the chip and keeps the input open, while Esc, blur or an empty Enter closes it. Every add or remove commits on its own via 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's Select, so a custom Select prop applies.
  • color / textColor: chip background and text, default sky blue (#bae6fd) on dark blue (#0c4a6e). Styled after the UnixTimestamp badge, without the uppercase.
  • Type selector: a string switched to "Chips" is split on commas and committed straight away, with no ✓/✗ to confirm. The definition keeps editOnTypeSwitch so the switch converts the old value through fromStandardType rather than using defaultValue. Switching away joins the chips with , .
  • Edit button: opens the usual edit session for the Type selector, with the chips read-only (no "+" or "×") while it's open.
  • Restrictions: the controls are hidden when canEdit is false, which is how the component follows allowEdit. handleEdit doesn't enforce it itself.

Also in this PR

  • Demo: a "Chips" block in the Custom Component Library: a default Tags list, plus a pink Pick from options variant targeted with byKey and hidden from the Type selector so "Chips" isn't listed twice.
  • Docs: README table row and details section, and a ## 1.1.0 CHANGELOG entry for the package.
  • Build check: registered the new stylesheet in scripts/verify-treeshake.mjs, whose marker-table check fails the build until a new style.css is added there.

Testing

  • 8 new tests in packages/components/test/Chips.test.tsx; all 37 component tests pass.
  • pnpm build passes for components, including the tree-shake and stylesheet guards. Component and demo typechecks are clean.
  • Checked by hand in Chrome against the local demo: add, remove, options dropdown, the comma-split type switch, and Strict Mode (the switch commits once). Not checked in Firefox.

🤖 Generated with Claude Code

CarlosNZ and others added 3 commits October 10, 2026 12:06
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>
@github-actions

Copy link
Copy Markdown

Bundle size impact

@json-edit-react/components

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.

@CarlosNZ
CarlosNZ merged commit 233c366 into main Oct 10, 2026
2 checks passed
@CarlosNZ
CarlosNZ deleted the tag-chip-array-component branch October 10, 2026 00:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant