feat(chip): DLT-3195 change interactive prop default from true to false

[Brad Paugh (braddialpad)]

🛠️ Type Of Change

• Feature

📖 Jira Ticket

DLT-3195

📖 Description

Changes DtChip's interactive prop default from true to false. Previously, chips without an explicit interactive prop rendered as <button> elements with hover/focus/pointer states even when they had no click handler — misleading UX and a screen reader accessibility issue.

After this change, chips render as <span> by default. The close button is unaffected. ComboboxMultiSelect (the one internal consumer that relies on clickable chips) is updated to explicitly set :interactive="true".

A migration script (dialtone-migrate-chip-interactive) is included to auto-add :interactive="true" to chips with @click / v-on:click / v-on object bindings in consumer codebases. Chips with no click handler are flagged as warnings for manual review.

📦 Cross-Package Impact

Package	Changes	Downstream Impact
dialtone-vue	DtChip.interactive default true to false; ComboboxMultiSelect updated	Any consumer using <dt-chip> without interactive will now render a non-interactive <span>
dialtone-css	New dialtone-migrate-chip-interactive bin added	Consumers can run npx dialtone-migrate-chip-interactive to auto-fix clickable chips

📄 Documentation Artifacts

Artifact	Status
Vue source	Updated (chip.vue, combobox_multi_select.vue)
Tests	Updated (chip.test.js, test.mjs for migration script)
Storybook stories	Not affected (no new variants)
Component docs JSON	Not affected (prop default not surfaced in JSON)
VuePress docs	Migration guide added (guides/migration/chip-interactive/)
MCP server data	Not affected

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all Vue changes:

• I have added / updated unit tests.
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

[coderabbitai]

Changes DtChip default interactive from true→false so chips render as non-interactive by default; adds a migration CLI to auto-insert :interactive="true" for chips with click handlers, updates ComboboxMultiSelect, tests, docs, and package/bin entries.

Overall Judgement: ✅ Ready to merge — Breaking change is well-covered with migration tooling, tests, documentation, and internal consumer updates.

Walkthrough

Changes DtChip's interactive prop default from true to false. Adds docs and a migration guide, introduces a CLI that scans/updates Vue files to opt-in interactive chips, updates package bin entries, updates tests, and marks specific components to preserve prior interactive behavior.

Changes

Cohort / File(s)	Summary
Documentation & Navigation apps/dialtone-documentation/docs/_data/site-nav.json, apps/dialtone-documentation/docs/guides/migration/chip-interactive/index.md, apps/dialtone-documentation/docs/guides/migration/index.md	Adds "DtChip interactive default" migration guide and site-nav entry; documents default change, migration steps, and updates migration checklist/quick-start ordering.
Migration CLI Tool & Tests packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/index.mjs, packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/test.mjs	New Node CLI with exported transformContent(content, opts) and executable that masks comments/script/style, detects <dt-chip>/<DtChip>, skips when interactive present, injects :interactive="true" for detected click handlers, emits warnings for ambiguous cases, supports --dry-run/--yes, and includes comprehensive tests.
Package Configuration package.json, packages/dialtone-css/package.json	Adds dialtone-migrate-chip-interactive bin entry at root and package level; adjusts existing bin formatting for appending.
Core Component & Unit Test packages/dialtone-vue/components/chip/chip.vue, packages/dialtone-vue/components/chip/chip.test.js	Changes DtChip prop default interactive: Boolean from true → false; updates unit test expectation and name to assert default renders as SPAN.
Dependent Component Update packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.vue	Sets :interactive="true" on chips rendered in combobox multi-select to preserve interactive behavior after the default change.

Sequence Diagram(s)

sequenceDiagram
  participant Dev as Developer (runs CLI)
  participant CLI as dialtone-migrate-chip-interactive
  participant FS as FileSystem
  participant Repo as Codebase (Vue files)
  participant Prompt as UserPrompt

  Dev->>CLI: run (path, --dry-run/--yes)
  CLI->>FS: read files matching *.vue, *.html
  CLI->>Repo: mask comments/script/style
  CLI->>Repo: scan for <dt-chip>/<DtChip> tags
  alt tag has interactive prop
    CLI-->>Repo: skip
  else has `@click` / v-on click
    CLI->>Repo: inject :interactive="true"
    CLI->>CLI: record file as changed
  else ambiguous (no click)
    CLI->>CLI: record warning with file path
  end
  CLI->>Repo: unmask content
  CLI->>Prompt: if not --yes, ask to confirm writes
  Prompt-->>CLI: user consent
  CLI->>FS: write changed files (unless --dry-run)
  CLI->>Dev: output summary (changed files, warnings)

Loading

Suggested labels

visual-test-ready

Suggested reviewers

• francisrupert
• iropolo
• ninarepetto

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch DLT-3195

---

_{Review rate limit: 9/10 reviews remaining, refill in 6 minutes.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: dc858d7d97

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "Codex (@codex) review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "Codex (@codex) address that feedback".

[chatgpt-codex-connector]

Make chip opening-tag regex handle quoted > chars

CHIP_TAG_RE stops at the first > even when that character is inside a quoted attribute value, so tags like <dt-chip :class="a > b" @click="onClick"> are parsed with truncated attrs. In that case HAS_CLICK_RE never sees @click, the script skips the auto-fix, and emits a misleading “no Per André Wilhelmsen (@click) handler” warning; this can leave clickable chips unmigrated and broken after the default changes to non-interactive. Use a quote-aware opening-tag matcher (like the existing link-rendering migrator) so @click detection is reliable.

Useful? React with 👍 / 👎.

[coderabbitai]

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/dialtone-documentation/docs/guides/migration/chip-interactive/index.md`:
- Around line 1-4: The frontmatter in this document is missing the required
status key; update the YAML frontmatter (the top --- block containing title and
description) to include a status entry (e.g., status: "published" or the
appropriate project status value) alongside title and description so the file
meets the docs frontmatter requirements.

In `@apps/dialtone-documentation/docs/guides/migration/index.md`:
- Line 37: Add the missing migration step to the quick-start "run tools in
sequence" block by inserting the new command dialtone-migrate-chip-interactive
into the ordered list of migration commands so users run it alongside the other
tools; update the sequence that references the migration tools (the "run tools
in sequence" block in this guide) to include dialtone-migrate-chip-interactive
and a short note that it addresses the changed default for the interactive prop
on DtChip.

In
`@packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/index.mjs`:
- Line 41: The CHIP_TAG_RE regex is not quote-aware and can terminate a tag
match at a '>' inside quoted attributes, causing missed `@click` detection and
skipped :interactive="true" insertion; update CHIP_TAG_RE (and the same pattern
used around lines 98-127) to use a quote-aware pattern that ignores '>'
characters inside single- or double-quoted attribute values (e.g. match
attribute sequences as (?:'[^']*'|"[^"]*"|[^'">])*) and keep the global flag,
then re-run the existing attribute inspection/insert logic (the code that looks
for `@click` and adds :interactive="true") against the corrected matches so tags
with quoted '>' are handled correctly.
- Around line 4-9: Update the commit message for the commit titled "feat(chip):
DLT-3195 make interactive=\"false\" the default" to include a BREAKING CHANGE
footer so the release tooling will bump the major version; append the exact
footer text: "BREAKING CHANGE: DtChip `interactive` prop default changed from
true to false. Chips requiring click/keyboard behavior must now explicitly set
`:interactive=\"true\"`." to the commit message (amend the commit or create a
new commit with the corrected message) so consumers are properly notified.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: bd81de9e-179f-413f-8e10-af371cd6cde2

📥 Commits

Reviewing files that changed from the base of the PR and between 8fab838 and dc858d7.

📒 Files selected for processing (10)

• apps/dialtone-documentation/docs/_data/site-nav.json
• apps/dialtone-documentation/docs/guides/migration/chip-interactive/index.md
• apps/dialtone-documentation/docs/guides/migration/index.md
• package.json
• packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/index.mjs
• packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/test.mjs
• packages/dialtone-css/package.json
• packages/dialtone-vue/components/chip/chip.test.js
• packages/dialtone-vue/components/chip/chip.vue
• packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.vue

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/index.mjs`:
- Around line 150-163: maskInertContent/unmaskInertContent use a fixed
placeholder which can collide with user content; modify maskInertContent to
generate a unique token per run (e.g., random suffix or timestamp+random) and
return that token along with masked content and segments, change
unmaskInertContent to accept the token and use it in the RegExp (e.g., `
DT_MIGRATE_INERT_${token}_(\d+) `) so only placeholders created by
maskInertContent are replaced, and update transformContent to accept and pass
the token through to both maskInertContent and unmaskInertContent so the same
unique token is used across masking/unmasking.
- Around line 111-116: The detection regexes (HAS_INTERACTIVE_RE, HAS_CLICK_RE,
HAS_VON_OBJECT_RE) are running against the raw attrs string and picking up
matches inside quoted attribute values (e.g., :title="'foo `@click` bar'"); to
fix, pre-process the attrs string used for testing by stripping or masking all
quoted substrings (single and double quotes) before applying those regexes, then
run the existing checks (HAS_INTERACTIVE_RE.test, HAS_CLICK_RE.test,
HAS_VON_OBJECT_RE.test) against the sanitized attrs so only real attribute
tokens are matched.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 7e50267f-da08-44dd-bba4-ce7e79309f3c

📥 Commits

Reviewing files that changed from the base of the PR and between dc858d7 and 90621f0.

📒 Files selected for processing (2)

• packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/index.mjs
• packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/test.mjs

[Francis Rupert (francisrupert)]

I stress-tested a bunch locally and all look good. Beyond addressing / judgment call on rabbit reviews, approved.

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1246/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1246/

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/index.mjs`:
- Around line 202-206: The empty catch around the fs.readdir call hides
unreadable directories; update the catch for the await fs.readdir(currentDir, {
withFileTypes: true }) so it does not silently swallow errors—either rethrow the
caught error or throw a new Error that includes currentDir and the original
error message (or call a logger with that information) so the migrator fails
fast or at least surfaces which path was skipped; ensure references to entries
and currentDir remain unchanged.
- Around line 140-148: Update the warning emitted in
dialtone_migrate_chip_interactive/index.mjs where warnings.push is called so it
includes a short identifying snippet for the specific <dt-chip> rather than only
the filePath; locate the warnings.push call (the one using filePath) and append
a compact identifier constructed from the chip node (e.g., chipNode.outerHTML or
a slice of the original source using chipNode.loc/start/end or chipNode.source)
trimmed to a safe length (like 80 chars) or using a label/children text if
present, and include that snippet in the message (escape newlines) so each
warning points to the exact chip instance.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: f2450fc1-9b08-421b-8fce-23a2e8b821de

📥 Commits

Reviewing files that changed from the base of the PR and between 1f3c5d4 and 6b300c5.

📒 Files selected for processing (2)

• packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/index.mjs
• packages/dialtone-css/lib/build/js/dialtone_migrate_chip_interactive/test.mjs