fix(components): dlt-3408 components clean up

[Ignacio Ropolo (iropolo)]

components clean up

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

• Fix

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-3408

https://dialpad.atlassian.net/browse/DLT-3407

📖 Description

We are doing some clean up on components:

1. compatConfig Removal
   Removed compatConfig: { MODE: 3 } from 78 component files across dialtone-vue/components, dropping Vue 2 compatibility.

2. Badge Component
   Badge.stories.js — Added missing argTypes: iconSize, text, startIconClass, endIconClass, subtle, outlined, labelClass.
   Badge.vue — Fixed JSDoc values for decoration (removed invalid "default"). Added mounted() hook so validation runs on initial render.
   BadgeDefault.story.vue — Added v-if guards on #startIcon/#endIcon slot templates to prevent empty icon wrappers.
   BadgeVariants.story.vue — Replaced fragile types.slice() with explicit .filter(t => t.value !== 'ai').

3. Banner Component
   Banner.stories.js — Added missing argTypes: dialogClass, backgroundImage, backgroundSize, iconClass, headerClass, contentClass, actionClass.
   Banner.vue — Added aria-modal when important is true. Made aria-labelledby conditional on hasHeader computed. Added hasHeader computed property.

4. Box Component
   Box.stories.js — Added 16 missing argTypes for overflow, scrollbar, scrollbarContentClass, sizing props, and directional border width props. Imported DT_BOX_LAYOUT_VALUES, DT_BOX_OVERFLOW_VALUES, DT_BOX_SCROLLBAR_VALUES.

5. Breadcrumbs Components
   Breadcrumb.test.js — Fixed grammar: "should has" → "should have" (3 occurrences). Fixed typo: "area-label" → "aria-label" (2 occurrences).
   BreadcrumbItem.stories.js — Added argTypes for label and selected.
   BreadcrumbItem.test.js — Removed deprecated localVue option and unused testContext variable.
   Breadcrumbs.stories.js — Added argType for ariaLabel.
   Breadcrumbs.vue — Replaced random getUniqueString() keys with deterministic ${index}-${item.href}. Removed unused utils import and getBreadcrumbItemKey method. Fixed validate → validator on breadcrumbs prop.

6. Codeblock Component
   Codeblock.test.js — Replaced Vue 2 propsData with Vue 3 props.

7. Collapsible Component
   Collapsible.stories.js — Added 9 missing argTypes: maxHeight, maxWidth, elementType, contentElementType, anchorClass, contentClass, ariaLabel, ariaLabelledBy, open.
   Collapsible.vue — Removed unused DtLazyShow import and component registration.
   CollapsibleDefault.story.vue — Fixed this.open → this.$attrs.open and watcher (user later reverted this to keep this.open).

8. DescriptionList Component
   DescriptionList.stories.js — Added argTypes for termClass and descriptionClass.
   DescriptionList.vue — Changed v-for key from item.term to ${index}-${item.term} for uniqueness.

9. Avatar Component
   Avatar.test.js — Split monolithic boundary test into it.each cases (4 parameterized + 1 focused 99+ test).
   AvatarDefault.story.vue — Translated iconName/iconSize/overlayIcon from non-existent prop bindings into proper #icon and #overlayIcon slot content.
   AvatarVariants.story.vue — Replaced deprecated clickable with interactive (3 instances + heading).

10. Button Component
    Button.test.js — Added MOCK_BUTTON_STUB.mockReset() in afterEach to prevent test pollution.

11. Card Component
    Card.stories.js — Added maxHeight argType.
    CardDefault.story.vue — Fixed bitwise & → logical &&.

12. Checkbox Components
    Checkbox.stories.js — Added 16 missing argTypes from component + mixins (InputMixin, CheckableMixin, MessagesMixin).
    CheckboxGroup.stories.js — Added 6 missing argTypes: name, disabled, messages, showMessages, legendChildProps, messagesChildProps.

13. Combobox Components
    Combobox.stories.js — Added 8 missing argTypes: showLabel, showList, listRenderedOutside, loading, emptyList, emptyStateMessage, emptyStateClass, clickOnSelect.
    ComboboxMultiSelect.stories.js — Added 9 missing argTypes: showLabel, showList, listMaxHeight, loading, loadingMessage, selectedItems, maxSelected, maxSelectedMessage, hasSuggestionList.

14. Dropdown Component
    Dropdown.test.js — Replaced indirect expect(x === 'false').toBe(true) with direct expect(x).toBe('false') for clearer failure messages (3 assertions).

[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. ‼️

[coderabbitai]

Removed Vue 2 compatConfig from 78 components and modernized code: added many Storybook argTypes, fixed tests (propsData→props), improved accessibility/ARIA logic, guarded slots, adjusted keys/validators, and small bug fixes (e.g. && vs &). Prop validation now runs on mount in some components.

Overall Judgement: ✅ Ready to merge — Changes are consistent, low-risk refactors with tests and story controls updated to support Vue 3-only usage and improve maintainability.

Walkthrough

Removes Vue compatConfig entries from many components, updates several stories and templates (Avatar slots, Badge mount validation, Banner ARIA, Breadcrumbs keying), expands Storybook argTypes, and modernizes tests and mount API usage.

Changes

Vue 3 Upgrade: Compatibility Config Removal and Component Enhancements

Layer / File(s)	Summary
Behavior & Story Updates packages/dialtone-vue/components/Avatar/*, packages/dialtone-vue/components/Badge/*, packages/dialtone-vue/components/Banner/Banner.vue, packages/dialtone-vue/components/Breadcrumbs/*, packages/dialtone-vue/components/DescriptionList/*, packages/dialtone-vue/components/Collapsible/*, packages/dialtone-vue/components/Card/*	Avatar stories now render icons via slots and use interactive; Badge adds mounted() calling validateProps() and moves slot conditionals; Banner sets aria-modal and conditional aria-labelledby via hasHeader; Breadcrumbs uses deterministic :key and validator; DescriptionList uses composite keys; Collapsible removes DtLazyShow; CardDefault fixes v-if.
Storybook Control Definitions packages/dialtone-vue/components/*/*.stories.js	Adds or extends argTypesData entries for Badge, Banner, Box, Breadcrumbs, Card, Checkbox, CheckboxGroup, Collapsible, Combobox, ComboboxMultiSelect, DescriptionList, and others to expose additional controls in Storybook.
Tests / Mount API Updates packages/dialtone-vue/components/*/*.test.js	Avatar tests refactored to parameterized it.each for group boundaries and separate 99+ check; Codeblock test uses props instead of propsData; BreadcrumbItem test removes localVue; Dropdown tests assert aria-expanded string values; Button test adds mockReset() in afterEach.
Vue compatConfig Removal packages/dialtone-vue/components/*/*.vue	Removes compatConfig: { MODE: 3 } from numerous Vue SFC default exports across the component library (Icon, Badge, Button, Dropdown, Combobox, RichTextEditor extensions, Skeleton, Toast, Tooltip, ValidationMessages, and many others).

Possibly Related PRs

• dialpad/dialtone#1221: Avatar story changes to use icon slots — related to this PR's Avatar story updates.
• dialpad/dialtone#1240: RichTextEditor edits — related due to compatConfig removals in rich-text-editor components.

Suggested Reviewers

• francisrupert

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dlt-3408

Warning

Review ran into problems

🔥 Problems

These MCP integrations need to be re-authenticated in the Integrations settings: Sentry

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

_{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: 4d8289c2c6

ℹ️ 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".

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (5)

packages/dialtone-vue/components/Button/Button.test.js (1)

38-43: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add wrapper unmount in teardown for full test isolation.

Line 38-43 resets mocks but does not unmount wrapper. Add wrapper?.unmount() to prevent mounted-instance/listener leakage between tests.

Proposed fix

  afterEach(() => {
+    wrapper?.unmount();
     mockProps = {};
     mockSlots = {};
     mockAttrs = {};
     MOCK_BUTTON_STUB.mockReset();
   });

As per coding guidelines, “Cleanup: include afterEach(() => { wrapper?.unmount(); }) in every test file.”

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dialtone-vue/components/Button/Button.test.js` around lines 38 - 43,
The afterEach teardown currently resets mocks (MOCK_BUTTON_STUB.mockReset()) and
clears mockProps/mockSlots/mockAttrs but does not unmount the Vue test wrapper;
update the afterEach block to call wrapper?.unmount() so any mounted component
instances and listeners created during tests are cleaned up—modify the afterEach
in Button.test.js to include wrapper?.unmount() before resetting mocks
(reference the wrapper variable, afterEach block, and MOCK_BUTTON_STUB).

packages/dialtone-vue/components/Codeblock/Codeblock.test.js (1)

22-24: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add wrapper teardown in afterEach to prevent test leakage.

Please unmount the wrapper during cleanup; resetting mockProps alone is not sufficient.

Suggested fix

   afterEach(() => {
+    wrapper?.unmount();
     mockProps = {};
   });

As per coding guidelines, “Cleanup: include afterEach(() => { wrapper?.unmount(); }) in every test file.”

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dialtone-vue/components/Codeblock/Codeblock.test.js` around lines 22
- 24, The tests leak DOM between runs because the afterEach only resets
mockProps; update the afterEach in Codeblock.test.js to also unmount the test
wrapper (call wrapper?.unmount()) so any mounted Vue component is torn down,
ensuring wrapper and mockProps are cleaned up after each test; reference the
existing wrapper and mockProps variables and the afterEach block when making the
change.

packages/dialtone-vue/components/DescriptionList/DescriptionList.vue (1)

22-24: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add BREAKING CHANGE footer for compatConfig removal and prop renames

Commit DLT-3284 removes compatConfig: { MODE: 3 } and renames props (title→headerText, titleId→headerId) across Notice, Banner, Toast, Modal, and related components. Per coding guidelines, breaking changes in public npm packages must be explicitly marked with BREAKING CHANGE footer or they will ship silently as patches and break consumers. Add BREAKING CHANGE footer to these commits or mark this release as a major version bump.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dialtone-vue/components/DescriptionList/DescriptionList.vue` around
lines 22 - 24, This change removes compatConfig: { MODE: 3 } and renames public
props (title→headerText, titleId→headerId) which is a breaking API change;
update the commit metadata by adding a BREAKING CHANGE footer to the commit that
introduced these changes (or prepare a major version bump) and mention the exact
removals/renames (compatConfig, DtDescriptionList prop title -> headerText and
titleId -> headerId) so downstream consumers are alerted; ensure the BREAKING
CHANGE text clearly lists the old symbols and their replacements and references
DtDescriptionList and any other affected components (Notice, Banner, Toast,
Modal) so the release tooling will mark this as a breaking release.

packages/dialtone-vue/components/Badge/Badge.vue (1)

70-73: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Restore compatConfig: { MODE: 3 } for this existing component, or explicitly mark a breaking change.

Line 70 starts an existing Options API component without compatConfig, which violates repo migration policy and can silently ship a behavior break in a public package.

Suggested fix

 export default {
   name: 'DtBadge',
+  compatConfig: { MODE: 3 },
 
   props: {

As per coding guidelines: “Existing components use Options API with compatConfig MODE 3 — do not convert,” and this is a public npm library where breaking changes must be labeled.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dialtone-vue/components/Badge/Badge.vue` around lines 70 - 73, The
DtBadge Options API component is missing the Vue compatConfig; add compatConfig:
{ MODE: 3 } to the exported options object for DtBadge (the default export in
Badge.vue) so the component remains fully Options-API compatible, and do not
convert it to Composition API; if you intend to change this behavior instead,
explicitly mark the change as a breaking change in the package release notes/PR.

packages/dialtone-vue/components/Badge/BadgeDefault.story.vue (1)

2-10: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Pass through the newly added Badge story controls to dt-badge.

iconSize, startIconClass, and endIconClass controls were added in the story config, but this template doesn’t bind them, so the controls won’t work in Default.

Suggested fix

   <dt-badge
     :text="$attrs.text"
     :type="$attrs.type"
     :kind="$attrs.kind"
     :decoration="$attrs.decoration"
+    :icon-size="$attrs.iconSize"
     :label-class="$attrs.labelClass"
+    :start-icon-class="$attrs.startIconClass"
+    :end-icon-class="$attrs.endIconClass"
     :subtle="$attrs.subtle"
     :outlined="$attrs.outlined"
   >

As per coding guidelines: keep Vue source/stories/docs artifacts in sync.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dialtone-vue/components/Badge/BadgeDefault.story.vue` around lines 2
- 10, The story template is missing bindings for the newly added controls: add
the three props to the dt-badge tag so the story controls pass through —
specifically add :icon-size="$attrs.iconSize",
:start-icon-class="$attrs.startIconClass" and
:end-icon-class="$attrs.endIconClass" (matching the existing pattern used for
:label-class) to the dt-badge element so the Default story reflects those
controls.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/dialtone-vue/components/Checkbox/Checkbox.stories.js`:
- Around line 93-99: The story hardcodes labelSize and labelStrength option
arrays; import the authoritative arrays from the Checkbox constants module
(e.g., the exported constants like LABEL_SIZES or CHECKBOX_LABEL_SIZES and
LABEL_STRENGTHS or CHECKBOX_LABEL_STRENGTHS) and use those variables for the
options values for labelSize and labelStrength in the story config instead of
inline arrays, ensuring you import the correct named exports from the
Checkbox_constants.js file and pass them (or map to strings if needed) to
control.options so Storybook stays in sync with the component validators/docs.

In
`@packages/dialtone-vue/components/ComboboxMultiSelect/ComboboxMultiSelect.stories.js`:
- Around line 94-120: The stories are missing argTypes for the public props
collapseOnFocusOut and inputWrapperClass used in stories; update the
argTypesData (the object that currently defines showLabel, showList, etc.) to
include collapseOnFocusOut with control: { type: 'boolean' } and
inputWrapperClass with control: { type: 'text' } (or control: 'text') so
Storybook controls/docs reflect these props for the ComboboxMultiSelect stories
and comply with the component argTypes guideline.

---

Outside diff comments:
In `@packages/dialtone-vue/components/Badge/Badge.vue`:
- Around line 70-73: The DtBadge Options API component is missing the Vue
compatConfig; add compatConfig: { MODE: 3 } to the exported options object for
DtBadge (the default export in Badge.vue) so the component remains fully
Options-API compatible, and do not convert it to Composition API; if you intend
to change this behavior instead, explicitly mark the change as a breaking change
in the package release notes/PR.

In `@packages/dialtone-vue/components/Badge/BadgeDefault.story.vue`:
- Around line 2-10: The story template is missing bindings for the newly added
controls: add the three props to the dt-badge tag so the story controls pass
through — specifically add :icon-size="$attrs.iconSize",
:start-icon-class="$attrs.startIconClass" and
:end-icon-class="$attrs.endIconClass" (matching the existing pattern used for
:label-class) to the dt-badge element so the Default story reflects those
controls.

In `@packages/dialtone-vue/components/Button/Button.test.js`:
- Around line 38-43: The afterEach teardown currently resets mocks
(MOCK_BUTTON_STUB.mockReset()) and clears mockProps/mockSlots/mockAttrs but does
not unmount the Vue test wrapper; update the afterEach block to call
wrapper?.unmount() so any mounted component instances and listeners created
during tests are cleaned up—modify the afterEach in Button.test.js to include
wrapper?.unmount() before resetting mocks (reference the wrapper variable,
afterEach block, and MOCK_BUTTON_STUB).

In `@packages/dialtone-vue/components/Codeblock/Codeblock.test.js`:
- Around line 22-24: The tests leak DOM between runs because the afterEach only
resets mockProps; update the afterEach in Codeblock.test.js to also unmount the
test wrapper (call wrapper?.unmount()) so any mounted Vue component is torn
down, ensuring wrapper and mockProps are cleaned up after each test; reference
the existing wrapper and mockProps variables and the afterEach block when making
the change.

In `@packages/dialtone-vue/components/DescriptionList/DescriptionList.vue`:
- Around line 22-24: This change removes compatConfig: { MODE: 3 } and renames
public props (title→headerText, titleId→headerId) which is a breaking API
change; update the commit metadata by adding a BREAKING CHANGE footer to the
commit that introduced these changes (or prepare a major version bump) and
mention the exact removals/renames (compatConfig, DtDescriptionList prop title
-> headerText and titleId -> headerId) so downstream consumers are alerted;
ensure the BREAKING CHANGE text clearly lists the old symbols and their
replacements and references DtDescriptionList and any other affected components
(Notice, Banner, Toast, Modal) so the release tooling will mark this as a
breaking release.

🪄 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: 6f8af472-3401-42f2-a9db-73abe1b95c05

📥 Commits

Reviewing files that changed from the base of the PR and between eeedc67 and 4d8289c.

📒 Files selected for processing (101)

• packages/dialtone-vue/components/Avatar/Avatar.test.js
• packages/dialtone-vue/components/Avatar/Avatar.vue
• packages/dialtone-vue/components/Avatar/AvatarDefault.story.vue
• packages/dialtone-vue/components/Avatar/AvatarVariants.story.vue
• packages/dialtone-vue/components/Badge/Badge.stories.js
• packages/dialtone-vue/components/Badge/Badge.vue
• packages/dialtone-vue/components/Badge/BadgeDefault.story.vue
• packages/dialtone-vue/components/Badge/BadgeVariants.story.vue
• packages/dialtone-vue/components/Banner/Banner.stories.js
• packages/dialtone-vue/components/Banner/Banner.vue
• packages/dialtone-vue/components/Box/Box.stories.js
• packages/dialtone-vue/components/Breadcrumbs/Breadcrumb.test.js
• packages/dialtone-vue/components/Breadcrumbs/BreadcrumbItem.stories.js
• packages/dialtone-vue/components/Breadcrumbs/BreadcrumbItem.test.js
• packages/dialtone-vue/components/Breadcrumbs/Breadcrumbs.stories.js
• packages/dialtone-vue/components/Breadcrumbs/Breadcrumbs.vue
• packages/dialtone-vue/components/Button/Button.test.js
• packages/dialtone-vue/components/Button/Button.vue
• packages/dialtone-vue/components/ButtonGroup/ButtonGroup.vue
• packages/dialtone-vue/components/ButtonGroup/ButtonsDecorator.vue
• packages/dialtone-vue/components/Card/Card.stories.js
• packages/dialtone-vue/components/Card/Card.vue
• packages/dialtone-vue/components/Card/CardDefault.story.vue
• packages/dialtone-vue/components/Checkbox/Checkbox.stories.js
• packages/dialtone-vue/components/Checkbox/Checkbox.vue
• packages/dialtone-vue/components/CheckboxGroup/CheckboxGroup.stories.js
• packages/dialtone-vue/components/CheckboxGroup/CheckboxGroup.vue
• packages/dialtone-vue/components/CheckboxGroup/CheckboxesDecorator.vue
• packages/dialtone-vue/components/Chip/Chip.vue
• packages/dialtone-vue/components/Codeblock/Codeblock.test.js
• packages/dialtone-vue/components/Codeblock/Codeblock.vue
• packages/dialtone-vue/components/Collapsible/Collapsible.stories.js
• packages/dialtone-vue/components/Collapsible/Collapsible.vue
• packages/dialtone-vue/components/Combobox/Combobox.stories.js
• packages/dialtone-vue/components/Combobox/Combobox.vue
• packages/dialtone-vue/components/ComboboxMultiSelect/ComboboxMultiSelect.stories.js
• packages/dialtone-vue/components/ComboboxMultiSelect/ComboboxMultiSelect.vue
• packages/dialtone-vue/components/ComboboxWithPopover/ComboboxWithPopover.vue
• packages/dialtone-vue/components/DescriptionList/DescriptionList.stories.js
• packages/dialtone-vue/components/DescriptionList/DescriptionList.vue
• packages/dialtone-vue/components/Dropdown/Dropdown.test.js
• packages/dialtone-vue/components/Dropdown/Dropdown.vue
• packages/dialtone-vue/components/Dropdown/DropdownList.vue
• packages/dialtone-vue/components/Dropdown/DropdownSeparator.vue
• packages/dialtone-vue/components/Emoji/Emoji.vue
• packages/dialtone-vue/components/EmojiTextWrapper/EmojiTextWrapper.vue
• packages/dialtone-vue/components/Icon/Icon.vue
• packages/dialtone-vue/components/ImageViewer/ImageViewer.vue
• packages/dialtone-vue/components/Input/Input.vue
• packages/dialtone-vue/components/InputGroup/InputGroup.vue
• packages/dialtone-vue/components/ItemLayout/ItemLayout.vue
• packages/dialtone-vue/components/KeyboardShortcut/KeyboardShortcut.vue
• packages/dialtone-vue/components/LazyShow/LazyShow.vue
• packages/dialtone-vue/components/Link/Link.vue
• packages/dialtone-vue/components/ListItem/ListItem.vue
• packages/dialtone-vue/components/ListItemGroup/ListItemGroup.vue
• packages/dialtone-vue/components/Modal/Modal.vue
• packages/dialtone-vue/components/ModeIsland/ModeIsland.vue
• packages/dialtone-vue/components/MotionText/MotionText.vue
• packages/dialtone-vue/components/Notice/Notice.vue
• packages/dialtone-vue/components/Notice/NoticeAction.vue
• packages/dialtone-vue/components/Notice/NoticeContent.vue
• packages/dialtone-vue/components/Notice/NoticeIcon.vue
• packages/dialtone-vue/components/Pagination/Pagination.vue
• packages/dialtone-vue/components/Popover/Popover.vue
• packages/dialtone-vue/components/Popover/PopoverHeaderFooter.vue
• packages/dialtone-vue/components/Presence/Presence.vue
• packages/dialtone-vue/components/ProgressCircle/ProgressCircle.vue
• packages/dialtone-vue/components/Radio/Radio.vue
• packages/dialtone-vue/components/RadioGroup/RadioGroup.vue
• packages/dialtone-vue/components/RadioGroup/RadiosDecorator.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Channels/ChannelComponent.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Channels/ChannelSuggestion.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Emoji/EmojiComponent.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Emoji/EmojiSuggestion.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Mentions/MentionComponent.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Mentions/MentionSuggestion.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/SlashCommand/SlashCommandComponent.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/SlashCommand/SlashCommandSuggestion.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Suggestion/SuggestionList.vue
• packages/dialtone-vue/components/RichTextEditor/RichTextEditor.vue
• packages/dialtone-vue/components/RootLayout/RootLayout.vue
• packages/dialtone-vue/components/SelectMenu/SelectMenu.vue
• packages/dialtone-vue/components/Skeleton/Skeleton.vue
• packages/dialtone-vue/components/Skeleton/SkeletonListItem.vue
• packages/dialtone-vue/components/Skeleton/SkeletonParagraph.vue
• packages/dialtone-vue/components/Skeleton/SkeletonShape.vue
• packages/dialtone-vue/components/Skeleton/SkeletonText.vue
• packages/dialtone-vue/components/SplitButton/SplitButton.vue
• packages/dialtone-vue/components/SplitButton/SplitButtonEnd.vue
• packages/dialtone-vue/components/SplitButton/SplitButtonStart.vue
• packages/dialtone-vue/components/Stack/Stack.vue
• packages/dialtone-vue/components/Tab/Tab.vue
• packages/dialtone-vue/components/Tab/TabGroup.vue
• packages/dialtone-vue/components/Tab/TabPanel.vue
• packages/dialtone-vue/components/Text/Text.vue
• packages/dialtone-vue/components/Toast/Layouts/ToastLayoutAlternateIcon.vue
• packages/dialtone-vue/components/Toast/Toast.vue
• packages/dialtone-vue/components/Toggle/Toggle.vue
• packages/dialtone-vue/components/Tooltip/Tooltip.vue
• packages/dialtone-vue/components/ValidationMessages/ValidationMessages.vue

💤 Files with no reviewable changes (75)

• packages/dialtone-vue/components/ButtonGroup/ButtonGroup.vue
• packages/dialtone-vue/components/Breadcrumbs/BreadcrumbItem.test.js
• packages/dialtone-vue/components/Card/Card.vue
• packages/dialtone-vue/components/Dropdown/DropdownSeparator.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Emoji/EmojiComponent.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/SlashCommand/SlashCommandComponent.vue
• packages/dialtone-vue/components/Pagination/Pagination.vue
• packages/dialtone-vue/components/Emoji/Emoji.vue
• packages/dialtone-vue/components/Combobox/Combobox.vue
• packages/dialtone-vue/components/Codeblock/Codeblock.vue
• packages/dialtone-vue/components/Collapsible/Collapsible.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Emoji/EmojiSuggestion.vue
• packages/dialtone-vue/components/Toast/Layouts/ToastLayoutAlternateIcon.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Suggestion/SuggestionList.vue
• packages/dialtone-vue/components/CheckboxGroup/CheckboxGroup.vue
• packages/dialtone-vue/components/RadioGroup/RadiosDecorator.vue
• packages/dialtone-vue/components/InputGroup/InputGroup.vue
• packages/dialtone-vue/components/ButtonGroup/ButtonsDecorator.vue
• packages/dialtone-vue/components/Toast/Toast.vue
• packages/dialtone-vue/components/Tab/TabGroup.vue
• packages/dialtone-vue/components/Icon/Icon.vue
• packages/dialtone-vue/components/ModeIsland/ModeIsland.vue
• packages/dialtone-vue/components/Radio/Radio.vue
• packages/dialtone-vue/components/RootLayout/RootLayout.vue
• packages/dialtone-vue/components/Chip/Chip.vue
• packages/dialtone-vue/components/ListItem/ListItem.vue
• packages/dialtone-vue/components/Presence/Presence.vue
• packages/dialtone-vue/components/Notice/NoticeContent.vue
• packages/dialtone-vue/components/Tab/TabPanel.vue
• packages/dialtone-vue/components/Notice/Notice.vue
• packages/dialtone-vue/components/CheckboxGroup/CheckboxesDecorator.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Channels/ChannelSuggestion.vue
• packages/dialtone-vue/components/SplitButton/SplitButtonStart.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Mentions/MentionSuggestion.vue
• packages/dialtone-vue/components/Skeleton/SkeletonShape.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/SlashCommand/SlashCommandSuggestion.vue
• packages/dialtone-vue/components/ComboboxMultiSelect/ComboboxMultiSelect.vue
• packages/dialtone-vue/components/Stack/Stack.vue
• packages/dialtone-vue/components/ComboboxWithPopover/ComboboxWithPopover.vue
• packages/dialtone-vue/components/SplitButton/SplitButtonEnd.vue
• packages/dialtone-vue/components/ItemLayout/ItemLayout.vue
• packages/dialtone-vue/components/ProgressCircle/ProgressCircle.vue
• packages/dialtone-vue/components/KeyboardShortcut/KeyboardShortcut.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Mentions/MentionComponent.vue
• packages/dialtone-vue/components/ListItemGroup/ListItemGroup.vue
• packages/dialtone-vue/components/Modal/Modal.vue
• packages/dialtone-vue/components/SelectMenu/SelectMenu.vue
• packages/dialtone-vue/components/Text/Text.vue
• packages/dialtone-vue/components/RichTextEditor/RichTextEditor.vue
• packages/dialtone-vue/components/Avatar/Avatar.vue
• packages/dialtone-vue/components/RadioGroup/RadioGroup.vue
• packages/dialtone-vue/components/Popover/Popover.vue
• packages/dialtone-vue/components/Dropdown/DropdownList.vue
• packages/dialtone-vue/components/LazyShow/LazyShow.vue
• packages/dialtone-vue/components/Skeleton/Skeleton.vue
• packages/dialtone-vue/components/Dropdown/Dropdown.vue
• packages/dialtone-vue/components/Toggle/Toggle.vue
• packages/dialtone-vue/components/Input/Input.vue
• packages/dialtone-vue/components/Skeleton/SkeletonText.vue
• packages/dialtone-vue/components/Skeleton/SkeletonListItem.vue
• packages/dialtone-vue/components/Tab/Tab.vue
• packages/dialtone-vue/components/SplitButton/SplitButton.vue
• packages/dialtone-vue/components/Notice/NoticeAction.vue
• packages/dialtone-vue/components/Button/Button.vue
• packages/dialtone-vue/components/Tooltip/Tooltip.vue
• packages/dialtone-vue/components/RichTextEditor/Extensions/Channels/ChannelComponent.vue
• packages/dialtone-vue/components/ValidationMessages/ValidationMessages.vue
• packages/dialtone-vue/components/MotionText/MotionText.vue
• packages/dialtone-vue/components/ImageViewer/ImageViewer.vue
• packages/dialtone-vue/components/Popover/PopoverHeaderFooter.vue
• packages/dialtone-vue/components/Skeleton/SkeletonParagraph.vue
• packages/dialtone-vue/components/Notice/NoticeIcon.vue
• packages/dialtone-vue/components/Link/Link.vue
• packages/dialtone-vue/components/EmojiTextWrapper/EmojiTextWrapper.vue
• packages/dialtone-vue/components/Checkbox/Checkbox.vue

[github-actions]

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

[coderabbitai]

♻️ Duplicate comments (1)

packages/dialtone-vue/components/ComboboxMultiSelect/ComboboxMultiSelect.stories.js (1)

124-126: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add a control for inputWrapperClass to complete Storybook Controls support.

inputWrapperClass has a description but no control, so it can’t be edited via Controls despite being used in the story on Line 250.

Suggested patch

   inputWrapperClass: {
     description: 'Additional class name for the input wrapper element.',
+    control: { type: 'object' },
   },

As per coding guidelines, packages/dialtone-vue/**/*.stories.js: “Each component must have argTypes for all public props.”

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/dialtone-vue/components/ComboboxMultiSelect/ComboboxMultiSelect.stories.js`
around lines 124 - 126, The argTypes for the ComboboxMultiSelect story are
missing a control for the public prop inputWrapperClass; add an argType entry
for inputWrapperClass in ComboboxMultiSelect.stories.js (same section where
other props are declared) and give it a suitable Storybook control (e.g., a text
control) so it appears in Controls and can be edited at runtime; reference the
existing inputWrapperClass argType description and update it to include control
and optionally a defaultValue so the story using inputWrapperClass on Line ~250
is editable.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Duplicate comments:
In
`@packages/dialtone-vue/components/ComboboxMultiSelect/ComboboxMultiSelect.stories.js`:
- Around line 124-126: The argTypes for the ComboboxMultiSelect story are
missing a control for the public prop inputWrapperClass; add an argType entry
for inputWrapperClass in ComboboxMultiSelect.stories.js (same section where
other props are declared) and give it a suitable Storybook control (e.g., a text
control) so it appears in Controls and can be edited at runtime; reference the
existing inputWrapperClass argType description and update it to include control
and optionally a defaultValue so the story using inputWrapperClass on Line ~250
is editable.

---

ℹ️ Review info

⚙️ Run configuration

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

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: f631af97-b720-4b51-881a-97e973169e22

📥 Commits

Reviewing files that changed from the base of the PR and between 4d8289c and 1eed308.

📒 Files selected for processing (1)

• packages/dialtone-vue/components/ComboboxMultiSelect/ComboboxMultiSelect.stories.js

[Belu Montoya (belumontoya)]

Solid cleanup. The real catches in here — validate → validator on Breadcrumbs (Vue silently ignores validate), the deterministic v-for key swap, and the & → && in CardDefault — are exactly the kind of latent bugs this kind of sweep is for.

A few things worth a look before merge:

1. Banner.vue:11 — adding aria-modal="important || undefined" is correct mechanically (Vue omits the attr when undefined), but does Banner actually trap focus when important=true? If not, asserting aria-modal="true" to AT users is misleading regardless of the attribute being correctly placed on role="alertdialog".▎
2. Badge.vue mounted hook — validation now runs on first render. Any consumer app currently passing invalid Badge props will start emitting Vue warnings they weren't seeing before. Not a bug, but worth a line in the release notes so teams aren't surprised.
3. BadgeVariants.story.vue:274 — slice() → filter(t => t.value !== 'ai'). Strictly more correct, but the slice only worked if 'ai' was always the last entry in types. Was the intent "drop 'ai' specifically" or "drop the last variant whatever it is"? Worth confirming.
4. BadgeDefault.story.vue — v-if moved onto <template #slot> tags. This makes the slot function not register at all (vs. registering an empty slot). Confirm Badge's slot-presence checks handle absent-vs-empty correctly.
5. Doc sync — Banner's ARIA behavior changed (new aria-modal, conditional aria-labelledby, new hasHeader computed). Worth a corresponding update to the Banner page in apps/dialtone-documentation/docs/ per the 7-artifact rule in CLAUDE.md.

Plus CodeRabbit's two open nits (Checkbox.stories constants import, ComboboxMultiSelect.stories argTypes)

[Ignacio Ropolo (iropolo)]

Solid cleanup. The real catches in here — validate → validator on Breadcrumbs (Vue silently ignores validate), the deterministic v-for key swap, and the & → && in CardDefault — are exactly the kind of latent bugs this kind of sweep is for.

A few things worth a look before merge:

1. Banner.vue:11 — adding aria-modal="important || undefined" is correct mechanically (Vue omits the attr when undefined), but does Banner actually trap focus when important=true? If not, asserting aria-modal="true" to AT users is misleading regardless of the attribute being correctly placed on role="alertdialog".▎
2. Badge.vue mounted hook — validation now runs on first render. Any consumer app currently passing invalid Badge props will start emitting Vue warnings they weren't seeing before. Not a bug, but worth a line in the release notes so teams aren't surprised.
3. BadgeVariants.story.vue:274 — slice() → filter(t => t.value !== 'ai'). Strictly more correct, but the slice only worked if 'ai' was always the last entry in types. Was the intent "drop 'ai' specifically" or "drop the last variant whatever it is"? Worth confirming.
4. BadgeDefault.story.vue — v-if moved onto <template #slot> tags. This makes the slot function not register at all (vs. registering an empty slot). Confirm Badge's slot-presence checks handle absent-vs-empty correctly.
5. Doc sync — Banner's ARIA behavior changed (new aria-modal, conditional aria-labelledby, new hasHeader computed). Worth a corresponding update to the Banner page in apps/dialtone-documentation/docs/ per the 7-artifact rule in CLAUDE.md.

Plus CodeRabbit's two open nits (Checkbox.stories constants import, ComboboxMultiSelect.stories argTypes)

yeah I skipped on purpose some non valuables reviews because I just need to spend some time to actual validate them. These one you mention are not useful enough, also 4 is not true.

[Ignacio Ropolo (iropolo)]

Merging it since looks okay and achieve the ticket ment.