fix(tab-group): DLT-3564 emit target panel id on before-change - #1386
Merged
Brad Paugh (braddialpad) merged 3 commits intoAug 7, 2026
Merged
Conversation
Consumers that need to know the destination tab before allowing a
tab change (e.g. to intercept navigation and show a confirmation)
had no direct way to get the target panel, forcing workarounds that
parse aria-controls off the DOM event. before-change now emits a
second argument, { selected: panelId }, alongside the original event.
Contributor
|
Please add either the |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Central YAML (inherited), Workspace UI (inherited) Review profile: ASSERTIVE Plan: Enterprise Run ID: 📒 Files selected for processing (1)
🔗 Linked repositories identifiedCodeRabbit considers these linked repositories for cross-repo context during reviews:
Overall Judgement: ✅ Ready to merge — The change is documented and covered by unit tests. WalkthroughChangesTab change event
Suggested reviewers: ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Brad Paugh (braddialpad)
added
the
no-visual-test
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/Tab/TabGroup.test.js`:
- Around line 243-245: Update the before-change emission test around the
change-triggering event to capture the original DOM event and assert the
complete emitted argument list in order: the same event first, followed by the
selected panel payload. Replace the destructuring that ignores the first
argument while preserving the existing selected value assertion.
In `@packages/dialtone-vue/components/Tab/TabGroup.vue`:
- Around line 231-235: Update the before-change event documentation near the
TabGroup component to correct “neccessary” to “necessary” and replace the single
Event type metadata with the repository’s convention for documenting both
emitted arguments: the originating DOM event and the object containing selected
panelId. Ensure the public before-change signature is represented accurately.
🪄 Autofix
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), Workspace UI (inherited)
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: 396ff80d-8f55-49e7-b138-3a0bf11a0300
📒 Files selected for processing (2)
packages/dialtone-vue/components/Tab/TabGroup.test.jspackages/dialtone-vue/components/Tab/TabGroup.vue
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
dialpad/ios(manual)dialpad/firespotter(manual)dialpad/semantic-release-changelog-json(auto-detected)dialpad/conventional-changelog-angular(auto-detected)
…s and test Fix a typo in the before-change JSDoc and document both emitted arguments (event, payload) via @Property tags instead of a single @type. Also update the before-change test to assert the full emitted argument list in order, verifying the originating event is passed through unchanged alongside the selected panel payload.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/Tab/TabGroup.test.js`:
- Around line 247-251: Update the test for the before-change emission to assert
the complete emitted argument tuple in a single assertion, preserving the
expected event first and selected panel payload second. Remove the separate
event and payload assertions while keeping the existing emitted event contract
unchanged.
🪄 Autofix
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), Workspace UI (inherited)
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: 0e23c97a-641c-422e-8331-ef66c6aef3ee
📒 Files selected for processing (2)
packages/dialtone-vue/components/Tab/TabGroup.test.jspackages/dialtone-vue/components/Tab/TabGroup.vue
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
dialpad/ios(manual)dialpad/firespotter(manual)dialpad/semantic-release-changelog-json(auto-detected)dialpad/conventional-changelog-angular(auto-detected)
Assert the full emitted before-change argument tuple in one expectation instead of two separate checks.
Contributor
|
✔️ Deploy previews ready! |
Ignacio Ropolo (iropolo)
approved these changes
Aug 7, 2026
Ignacio Ropolo (iropolo)
left a comment
Ignacio Ropolo (iropolo)
left a comment
Contributor
There was a problem hiding this comment.
thanks!
Brad Paugh (braddialpad)
deleted the
fix/DLT-3564-tab-group-before-change-target
branch
August 7, 2026 16:23
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Aug 7, 2026
# [3.224.0-next.4](dialtone-vue/v3.224.0-next.3...dialtone-vue/v3.224.0-next.4) (2026-08-07) ### Bug Fixes * **Docs:** DLT-3558 correct out-of-sync [@values](https://github.com/values) JSDoc annotations ([#1383](#1383)) ([0ef001b](0ef001b)) * **Tab Group:** DLT-3564 emit target panel id on before-change ([#1386](#1386)) ([0c7b5c6](0c7b5c6))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Aug 7, 2026
# [10.0.0-next.10](dialtone/v10.0.0-next.9...dialtone/v10.0.0-next.10) (2026-08-07) ### Bug Fixes * **Docs:** DLT-3558 correct out-of-sync [@values](https://github.com/values) JSDoc annotations ([#1383](#1383)) ([0ef001b](0ef001b)) * **Tab Group:** DLT-3564 emit target panel id on before-change ([#1386](#1386)) ([0c7b5c6](0c7b5c6))
Brad Paugh (braddialpad)
pushed a commit
that referenced
this pull request
Aug 10, 2026
# [3.225.0-next.1](dialtone-vue/v3.224.0...dialtone-vue/v3.225.0-next.1) (2026-08-10) ### Bug Fixes * **Chip, Combobox Multi Select:** DLT-3554 DLT-3555 correct chip spacing and multi-select alignment ([#1380](#1380)) ([bb53556](bb53556)) * **Components:** dlt-3408 components clean up ([#1264](#1264)) ([38c383a](38c383a)) * **Components:** no-jira update tree-shaking export ([#1270](#1270)) ([f12ddcc](f12ddcc)) * **Dialtone Vue:** NO-JIRA declare @vitejs/plugin-react devDependency for storybook build ([0a02bf8](0a02bf8)) * DLT-3552 suppress unintended focus rings in component regions ([#1376](#1376)) ([c792768](c792768)) * **Docs:** DLT-3558 correct out-of-sync [@values](https://github.com/values) JSDoc annotations ([#1383](#1383)) ([0ef001b](0ef001b)) * **Editor:** NO-JIRA remove extra blank line in editor.mdx ([18c47ef](18c47ef)) * **Filter Pill, Mode Island:** NO-JIRA make next-only code SSR-safe after static rendering merge ([cd174ca](cd174ca)) * **Image Viewer:** DLT-3456 trap focus within the modal via v-dt-focustrap directive ([#1313](#1313)) ([a5aa3e7](a5aa3e7)) * **Modal:** auto-detect shadow root and teleport dialog into it ([#1268](#1268)) ([f945c84](f945c84)) * NO-JIRA regenerate pnpm-lock.yaml after staging merge ([4462a1a](4462a1a)) * **Resizable, Box:** DLT-3445 accept full layout token set ([#1293](#1293)) ([4a63990](4a63990)) * **Resizable:** DLT-3444 center handle position ([#1291](#1291)) ([0d5d639](0d5d639)) * **Rich Text Editor:** bubble menu error ([68e3591](68e3591)) * **Segmented Control:** DLT-3443 correct background color of traveling indicator ([#1290](#1290)) ([5fc4fa8](5fc4fa8)) * **Split Button, Filter Pill:** DLT-3260 DLT-3261 correct misalignment at size 100 ([#1176](#1176)) ([fe2b777](fe2b777)) * **Tab Group:** DLT-3564 emit target panel id on before-change ([#1386](#1386)) ([0c7b5c6](0c7b5c6)) * **Tabs:** DLT-3251 improve accessibility ([#1171](#1171)) ([01b101e](01b101e)) * **Validation Messages:** DLT-3430 fix VoiceOver silent on validation messages ([#1285](#1285)) ([96adfdf](96adfdf)) ### Code Refactoring * **Box:** DLT-3333 rename percent prop values to p-suffix ([#1208](#1208)) ([e5fa5da](e5fa5da)) * **Combobox Multi Select:** NO-JIRA use logical css properties ([#1104](#1104)) ([a675daf](a675daf)) * **Components,recipes:** DLT-3043 DLT-3046 logical start/end naming with deprecated backward-compatible fallbacks ([#1079](#1079)) ([1d26a4e](1d26a4e)) * **Components:** DLT-3100 remove rootClass references ([#1184](#1184)) ([6531783](6531783)) * **Components:** DLT-3160 standardize v-model event handling ([#1201](#1201)) ([f1624d4](f1624d4)) * **Components:** dlt-3196 components to pascal case ([#1255](#1255)) ([aa6d259](aa6d259)) * **Components:** dlt-3282 renamed show prop to open ([#1190](#1190)) ([5509d0f](5509d0f)) * **Components:** dlt-3283 refactor prop/slots to be consistent ([#1196](#1196)) ([2d22c76](2d22c76)) * **Components:** DLT-3284 refactor props to not have native html attributes names ([#1204](#1204)) ([48a0f57](48a0f57)) * **Dialtone Vue,dialtone Css:** DLT-3536 clean up remaining legacy prop migration references ([#1374](#1374)) ([0629638](0629638)) * **Dialtone Vue,dialtone Css:** DLT-3537 remove recipes ([#1371](#1371)) ([8611a05](8611a05)) * **Modal:** DLT-3262 migrate DtModal to native dialog element ([#1179](#1179)) ([589edb5](589edb5)) * **Modal:** DLT-3453 trap focus with v-dt-focustrap directive ([#1316](#1316)) ([6e2a868](6e2a868)) * **Popover:** DLT-3455 trap focus with v-dt-focustrap directive ([#1312](#1312)) ([e57e227](e57e227)) * **Resizable:** DLT-3335 align size props on --dt-layout-* instead of --dt-size-* ([#1215](#1215)) ([c156dbc](c156dbc)) * **Text:** DLT-3302 tone prop uses css variables instead of css utilities ([#1197](#1197)) ([75df16f](75df16f)) * **Tokens,css,link,text,breadcrumbs,input Group,split Button:** tokens, CSS foundation, deprecations, tooling DLT-3011 DLT-2961 DLT-3068 DLT-3069 DLT-3070 DLT-3071 DLT-3072 ([#1092](#1092)) ([7783090](7783090)) * **Tokens:** DLT-3013 convert color system from HSL to OKLCH ([#1060](#1060)) ([42dc418](42dc418)) * **Validation Messages:** DLT-3422 update to use icon slot over embedded icon ([#1272](#1272)) ([344b737](344b737)) ### Documentation * **Combinator:** DLT-3424 bridge logical to physical naming ([#1273](#1273)) ([ad4a5a1](ad4a5a1)) * **Css Utilities:** DLT-3337 migrate internal utility-class consumers to token-indexed names and rewrite radius docs ([#1212](#1212)) ([d675238](d675238)) * **Dialtone Vue:** DLT-3226 update documentation and consuming code to numeric size scale ([#1158](#1158)) ([149c763](149c763)) * DLT-3345 migrate d-stack*/d-flow* wrappers to DtStack ([#1218](#1218)) ([fa090ef](fa090ef)) * DLT-3434 build pipeline for component wall thumbs ([#1278](#1278)) ([cb9992f](cb9992f)) * **Playground:** DLT-3119 refine playground UI and integrate across doc site ([#1127](#1127)) ([ba6b599](ba6b599)) ### Features * **Avatar:** DLT-2942 updated avatar component ([#1047](#1047)) ([e50563d](e50563d)) * **Avatar:** DLT-3161 change from clickable to "interactive" ([#1182](#1182)) ([2d00fe0](2d00fe0)) * **Banner, Notice, Toast, Breadcrumbs, Checkbox, Radio, Input, Select Menu, Empty State:** visual refresh, dt-text integration, form api parity DLT-2944 DLT-2945 DLT-2949 DLT-2959 DLT-2960 DLT-2957 ([#1091](#1091)) ([16e908a](16e908a)) * **Banner:** DLT-3454 trap focus with v-dt-focustrap directive ([#1310](#1310)) ([22faacf](22faacf)) * **Box:** DLT-3315 new DtBox primitive component ([#1203](#1203)) ([e0c942e](e0c942e)) * **Box:** DLT-3523 add positioning props to DtBox ([#1355](#1355)) ([68a6570](68a6570)) * **Box:** NO-JIRA add overlay surface value ([#1328](#1328)) ([ea7a8a5](ea7a8a5)) * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **Chip:** DLT-3195 change interactive prop default from true to false ([#1246](#1246)) ([30a5ea2](30a5ea2)) * **Colors:** DLT-3354 split green palette into distinct light and dark mode values ([#1225](#1225)) ([cf63034](cf63034)) * **Combinator:** DLT-3312 preview resolved value in sized props ([#1199](#1199)) ([61bb610](61bb610)) * **Combinator:** DLT-3489 DLT-3490 DLT-3491 refine control panel ui ([#1343](#1343)) ([0385c2f](0385c2f)) * **Components:** dlt-3096 add slot classes ([#1214](#1214)) ([5f6528e](5f6528e)) * **Components:** DLT-3157 align critical/positive prop values and CSS class names ([#1177](#1177)) ([edd98b2](edd98b2)) * **Components:** DLT-3159 enforce positive boolean props ([#1198](#1198)) ([ac73bdc](ac73bdc)) * **Css Utilities, Design Tokens:** DLT-3330 DLT-3332 add off-scale pixel-indexed layout tokens and sizing utilities ([#1206](#1206)) ([1054875](1054875)) * **Css Utilities, Eslint Plugin Dialtone:** DLT-3329 update border-radius css utilities and associated tooling ([#1211](#1211)) ([6bc3599](6bc3599)) * **Design Tokens, Text, Link, Box, Css:** DLT-3338 add info semantic tokens and consumers ([#1210](#1210)) ([2f04b45](2f04b45)) * **Design Tokens:** DLT-3368 DLT-3371 DLT-3410 add material dimension and brand-locked pairings ([#1252](#1252)) ([eeedc67](eeedc67)) * **Dialtone Css, Dialtone Tokens, Dialtone Vue:** DLT-3197 DLT-3198 DLT-3199 DLT-3200 DLT-3201 DLT-3202 DLT-3203 DLT-3204 DLT-3205 DLT-3206 DLT-3207 DLT-3208 DLT-3209 DLT-3210 DLT-3211 token-stop utility classes, migration tooling, and documentation ([#1150](#1150)) ([6237b84](6237b84)) * **Dialtone Vue:** DLT-3225 migrate component size props to numeric ordinal scale ([#1157](#1157)) ([725bd41](725bd41)) * DLT-3534 align size prop types across components and modal fullscreen ([#1362](#1362)) ([8fb88a1](8fb88a1)) * **Eslint Plugin Dialtone:** DLT-3365 add deprecated-stack-flow-classes rule ([#1247](#1247)) ([8554f5a](8554f5a)) * **Filter Pill:** DLT-2941 DtFilterPill improvements ([#1110](#1110)) ([23c5689](23c5689)) * **Focusgroup:** DLT-3285 add v-dt-focusgroup directive for declarative roving tabindex ([#1187](#1187)) ([e1ea074](e1ea074)) * **Focustrap:** DLT-3297 add v-dt-focustrap directive for declarative focus trapping ([#1195](#1195)) ([6ef9a21](6ef9a21)) * **Hovercard:** DLT-2845 add focus trap to hovercard content ([#1330](#1330)) ([b5aa615](b5aa615)) * **Link,button:** DLT-3012 add underline prop ([#1059](#1059)) ([1cb91ea](1cb91ea)) * **Link:** DLT-3529 add unstyled variant ([#1360](#1360)) ([b90c2cc](b90c2cc)) * **Modal:** DLT-3432 add transparentBackdrop prop ([#1277](#1277)) ([daace31](daace31)) * **Modal:** NO-JIRA apply headerClass to header text element ([#1279](#1279)) ([3cb4282](3cb4282)) * **Mode Directive, Mode Island:** DLT-3067 DLT-3078 DLT-3077 add `v-dt-mode` directive ([#1109](#1109)) ([f97efca](f97efca)) * **Popover, Tooltip:** DLT-3419 auto-append to nearest dialog for top-layer support ([#1266](#1266)) ([a5427e8](a5427e8)) * **Presence, Avatar:** DLT-3438 add icons to presence ([#1287](#1287)) ([51062be](51062be)) * **Prose:** DLT-3245 new component ([#1169](#1169)) ([adee928](adee928)) * **Scrollbar:** DLT-3158 implement object props ([#1249](#1249)) ([09ff456](09ff456)) * **Segmented Control:** DLT-413 new component ([#1144](#1144)) ([ad4c6c3](ad4c6c3)) * **Split Button:** DLT-3257 add show-divider prop ([#1173](#1173)) ([5bef411](5bef411)) * **Tabs:** DLT-3114 add vertical orientation variant ([#1120](#1120)) ([3290a23](3290a23)) * **Tabs:** DLT-3162 add spread prop for horizontal distribution ([#1135](#1135)) ([6e7cd04](6e7cd04)) * **Text List:** DLT-3530 add DtTextList component ([#1363](#1363)) ([9c9fc0d](9c9fc0d)) * **Text:** DLT-3487 expose full typography size scale ([#1334](#1334)) ([0c8f4c6](0c8f4c6)) * **Text:** export text component from dialtone-vue ([757fdb7](757fdb7)) * **Tokens, Css:** DLT-3331 rename success tokens and utility classes to positive ([#1230](#1230)) ([34bdff5](34bdff5)) * **Tokens:** DLT-2937 introduce spacing and layout token systems ([#1045](#1045)) ([de23e12](de23e12)) * **Tokens:** update color ramps and consumer color migration tools DLT-3004 DLT-3005 DLT-3006 DLT-3007 DLT-3008 ([#1054](#1054)) ([28cb1de](28cb1de)) * **Validation Messages:** DLT-3423 add info variant ([#1274](#1274)) ([412154b](412154b)) ### Reverts * remove accidental next-shadows commits from next ([868a502](868a502))
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
2 participants
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.
fix(tab-group): DLT-3564 emit target panel id on before-change
🛠️ Type Of Change
📖 Jira Ticket
DLT-3564
📖 Description
DtTabGroup'sbefore-changeevent now emits a second argument,{ selected: panelId }, alongside the original DOM event. This is backward compatible — existing consumers reading only the first argument are unaffected.💡 Context
Consumers that need to know the destination tab before allowing a tab change (e.g. to intercept navigation and show a save/discard confirmation) previously had no direct way to get the target panel from
before-change— only the raw DOM event was emitted. This forced workarounds parsingaria-controlsoff the event target to recover the panel id (see Firespotter PR review comment). With the target id available directly on the event payload, that workaround can be removed downstream.📝 Checklist
For all PRs:
For all Vue changes:
🔮 Next Steps
Once this lands, Firespotter's
app_settings.vuecan drop itstabNameFromEvent/PANEL_ID_PREFIX/aria-controls-parsing workaround in favor of readingselectedfrom the secondbefore-changeargument.🔗 Sources