docs(BToast): Parity #2887
docs(BToast): Parity #2887
Conversation
|
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis PR consolidates dismissible show/hide emits and expands common props, refactors Alert and Toast data to pick shared props, replaces showHideEmits usage with buildDismissibleEmits, removes redundant cancel/ok emits across several components, and adds/updates demos and documentation for BootstrapVueNext migration and toast usage. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ToastComponent
participant CommonProps as buildCommonProps()
participant Dismissible as buildDismissibleEmits()
User->>ToastComponent: Render / interact (show/close)
ToastComponent->>CommonProps: pick(shared props)
CommonProps-->>ToastComponent: props (closeClass, interval, progressProps, ...)
ToastComponent->>Dismissible: request emits config
Dismissible-->>ToastComponent: emits (update:model-value, close, close-countdown, + show/hide lifecycle)
alt User clicks close
ToastComponent-->>User: emit('close', trigger)
ToastComponent-->>User: emit('update:model-value', false)
else Auto-dismiss countdown
Dismissible-->>ToastComponent: emit('close-countdown', remainingMs)
ToastComponent-->>User: emit('update:model-value', false) when done
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull Request Overview
This PR updates the documentation for the BToast component to achieve parity with BootstrapVue, including comprehensive migration guide documentation, component data consolidation, and updated examples.
Key Changes
- Consolidated shared dismissible component properties between
BAlertandBToastto eliminate duplication - Added comprehensive migration guide section documenting the transition from BootstrapVue's
$bvToastsystem touseToastcomposable - Enhanced toast documentation with detailed accessibility guidance and feature descriptions
Reviewed Changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/docs/src/utils/showHideData.ts | Added buildDismissibleEmits() factory function for shared emit definitions |
| apps/docs/src/utils/commonProps.ts | Added common dismissible component props (close button, countdown, status) |
| apps/docs/src/docs/migration-guide.md | Added comprehensive BToast and BToaster migration documentation with event/prop/slot changes |
| apps/docs/src/docs/demo/ToastBootstrapVueNext.vue | Created example demonstrating new v-model usage patterns |
| apps/docs/src/docs/demo/ToastBootstrapVue.vue | Created example showing old auto-hide prop patterns |
| apps/docs/src/docs/demo/ModalSlotScopeBootstrapVueNext.ts | Extracted modal slot scope interface for reusable documentation fragment |
| apps/docs/src/docs/demo/ModalSlotScopeBootstrapVue.ts | Extracted BootstrapVue modal slot scope for comparison fragment |
| apps/docs/src/docs/components/toast.md | Enhanced component documentation with features list, accessibility tips, and clarifications |
| apps/docs/src/docs/components/demo/ToastPositioning.vue | Added margin styling to positioning demo buttons |
| apps/docs/src/docs/components/demo/ToastOverview.vue | Improved overview example with visual background and show/hide interaction |
| apps/docs/src/data/components/toast.data.ts | Updated to use shared props/emits and added comprehensive slot scope documentation |
| apps/docs/src/data/components/alert.data.ts | Refactored to use shared props/emits from common utilities |
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/docs/src/data/components/alert.data.ts (1)
74-93: Remove duplicated emits and correct arg name; follow the BToast patternThe alert.data.ts emits block spreads
buildDismissibleEmits()and then redefines both 'close-countdown' and 'update:model-value', causing duplication and arg-name drift.buildDismissibleEmits()already defines 'update:model-value' with arg key 'value' (not 'update:model-value'), and 'close-countdown' with arg 'value' (not 'closeCountdown'). Compare to toast.data.ts line 72, which only spreads the builder without overrides—this is the correct pattern.Apply the suggested fix:
emits: { ...buildDismissibleEmits(), - 'close-countdown': { - description: 'Emitted during the countdown with the time remaining', - args: { - closeCountdown: { - description: 'Time remaining on the timer', - type: 'number', - }, - }, - }, 'update:model-value': { description: 'Standard event to update the v-model', args: { value: { description: 'modelValue', type: 'boolean | number', }, }, }, } satisfies EmitRecord<keyof BAlertEmits | 'update:model-value'>,
🧹 Nitpick comments (3)
apps/docs/src/data/components/alert.data.ts (1)
68-71: Fill title slot docs (no TODOs in published docs)Provide a real description; remove the TODO. If the slot is unscoped, keep scope as {}. If it exposes helpers, document them.
- title: { - description: '', - scope: {}, // TODO - }, + title: { + description: 'Content to place in the alert header as title', + scope: {}, + },apps/docs/src/docs/components/toast.md (1)
11-12: Punctuation nitAdd a period at the end of the sentence.
-Toasts are intended to be small interruptions to your visitors or users and therefore should contain minimal, to-the-point, non-interactive content. Please refer to the Accessibility Tips section below for important usage information +Toasts are intended to be small interruptions to your visitors or users and therefore should contain minimal, to-the-point, non-interactive content. Please refer to the Accessibility Tips section below for important usage information.apps/docs/src/utils/commonProps.ts (1)
481-485: Use a string-literal union for interval’s sentinelType string should mirror TS literal type.
- interval: { - type: 'number | requestAnimationFrame', - default: 'requestAnimationFrame', - description: 'Sets the interval for refreshing the countdown timer', - }, + interval: { + type: 'number | "requestAnimationFrame"', + default: 'requestAnimationFrame', + description: 'Sets the interval for refreshing the countdown timer', + },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/docs/src/data/components/alert.data.ts(3 hunks)apps/docs/src/data/components/toast.data.ts(3 hunks)apps/docs/src/docs/components/demo/ToastOverview.vue(1 hunks)apps/docs/src/docs/components/demo/ToastPositioning.vue(1 hunks)apps/docs/src/docs/components/toast.md(3 hunks)apps/docs/src/docs/demo/ModalSlotScopeBootstrapVue.ts(1 hunks)apps/docs/src/docs/demo/ModalSlotScopeBootstrapVueNext.ts(1 hunks)apps/docs/src/docs/demo/ToastBootstrapVue.vue(1 hunks)apps/docs/src/docs/demo/ToastBootstrapVueNext.vue(1 hunks)apps/docs/src/docs/migration-guide.md(2 hunks)apps/docs/src/utils/commonProps.ts(1 hunks)apps/docs/src/utils/showHideData.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
apps/docs/src/data/components/*.data.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/docs/src/data/components/*.data.ts: When adding or modifying component props, events, or slots, ALWAYS update the corresponding .data.ts file in apps/docs/src/data/components/
Documentation format in .data.ts files must match TypeScript interfaces exactly (props, emits, slots definitions)
Files:
apps/docs/src/data/components/alert.data.tsapps/docs/src/data/components/toast.data.ts
🧠 Learnings (5)
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
PR: bootstrap-vue-next/bootstrap-vue-next#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to packages/bootstrap-vue-next/src/App.vue : Use packages/bootstrap-vue-next/src/App.vue as a local test area for component changes
Applied to files:
apps/docs/src/docs/demo/ToastBootstrapVueNext.vueapps/docs/src/docs/demo/ToastBootstrapVue.vue
📚 Learning: 2025-06-05T11:43:10.793Z
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-06-26T19:46:19.333Z
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('tooltip') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this inheritance mechanism.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('popover') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this prop spreading/inheritance mechanism.
Applied to files:
apps/docs/src/docs/migration-guide.md
🧬 Code graph analysis (3)
apps/docs/src/data/components/alert.data.ts (1)
apps/docs/src/utils/showHideData.ts (1)
buildDismissibleEmits(160-199)
apps/docs/src/docs/demo/ModalSlotScopeBootstrapVueNext.ts (1)
packages/bootstrap-vue-next/src/types/ComponentSlots.ts (2)
BModalSlotsData(45-49)ShowHideSlotsData(12-19)
apps/docs/src/data/components/toast.data.ts (3)
apps/docs/src/utils/showHideData.ts (1)
buildDismissibleEmits(160-199)apps/docs/src/types/index.ts (1)
EmitRecord(30-30)packages/bootstrap-vue-next/src/types/ComponentEmits.ts (1)
BToastEmits(42-45)
🪛 LanguageTool
apps/docs/src/docs/components/toast.md
[grammar] ~68-~68: Use a hyphen to join words.
Context: ... method, and the appearance of a ticking down progress bar is a "nice to have". A...
(QB_NEW_EN_HYPHEN)
[grammar] ~68-~68: Use a hyphen to join words.
Context: ...a "nice to have". Although it is not out of the box behavior by Bootstrap, its be...
(QB_NEW_EN_HYPHEN)
[grammar] ~68-~68: Use a hyphen to join words.
Context: ...nice to have". Although it is not out of the box behavior by Bootstrap, its behav...
(QB_NEW_EN_HYPHEN)
[grammar] ~68-~68: Use a hyphen to join words.
Context: ... to have". Although it is not out of the box behavior by Bootstrap, its behavior ...
(QB_NEW_EN_HYPHEN)
[style] ~90-~90: Consider using “incomplete” to avoid wordiness.
Context: ...disabilities. The following list, while not complete, provides general guidelines when using...
(NOT_ABLE_PREMIUM)
🔇 Additional comments (19)
apps/docs/src/docs/components/demo/ToastPositioning.vue (1)
6-9: LGTM! Minor styling improvement.Adding the
m-2margin utility class improves the spacing of the toast positioning buttons without affecting functionality.apps/docs/src/docs/demo/ModalSlotScopeBootstrapVue.ts (1)
1-13: LGTM! Clear documentation example.This static object effectively demonstrates the BootstrapVue slot scope interface for comparison purposes in the migration guide. The snippet region markers and eslint-disable directive are appropriately used.
apps/docs/src/docs/demo/ModalSlotScopeBootstrapVueNext.ts (1)
1-20: LGTM! Accurate interface documentation.These interface definitions match the actual implementation in the source code (ComponentSlots.ts) and provide a clear reference for migration. The clarifying comment on line 7 about the trigger name change from 'headerclose' to 'close' is particularly helpful for users migrating from BootstrapVue.
apps/docs/src/docs/migration-guide.md (8)
1016-1032: LGTM! Comprehensive deprecation documentation.The Global Toast Management System Changes section clearly documents the deprecated
$bvToastmethods and named toaster system, with helpful pointers to the modernuseToastcomposable alternative.
1033-1057: LGTM! Clear props migration guidance.The Props Changes section effectively documents the shift from separate visibility and auto-hide props to the unified
model-valuepattern, along with comprehensive coverage of removed and new props.
1058-1067: LGTM! Excellent before/after comparison.The Auto-dismiss Behavior Changes section with code snippets clearly illustrates the difference between BootstrapVue's explicit auto-hide configuration and BootstrapVueNext's
model-value-driven approach.
1068-1080: LGTM! Thorough event system documentation.The Event System Changes section comprehensively covers the removal of
$rootevents and the addition of new lifecycle events likeclose-countdownand the standard show/hide event patterns.
1081-1101: LGTM! Well-documented slots changes.The Slots Changes section clearly documents the renaming of
toast-titletotitleand the enhanced slot scope data with control functions, providing developers with a complete picture of the slot API changes.
1102-1110: LGTM! Important accessibility improvements documented.The Accessibility Improvements section highlights key ARIA enhancements including the
isStatusprop for role toggling and improved keyboard accessibility withtabindex="0".
1113-1118: LGTM! Clear deprecation notice.The BToaster deprecation section provides a concise explanation with helpful links to the replacement composable and component documentation.
729-744: LGTM! Excellent slot scope comparison.The Modal Slot Scoped Variables Changes section effectively uses the new demo snippet files to provide a clear before/after comparison of the slot scope interfaces, with helpful annotations of the key changes.
apps/docs/src/docs/demo/ToastBootstrapVue.vue (1)
1-9: LGTM! Clear BootstrapVue pattern example.This demo effectively illustrates the BootstrapVue approach to auto-dismissing toasts using separate
auto-hideandauto-hide-delayprops, providing a helpful reference point for the migration guide.apps/docs/src/docs/demo/ToastBootstrapVueNext.vue (1)
1-18: LGTM! Excellent demonstration of BootstrapVueNext patterns.This demo clearly illustrates both
model-valueusage patterns:
- Boolean binding with
v-modelfor manual control- Numeric binding with
:model-value="5000"for auto-dismiss durationThis dual-example approach effectively shows the versatility of the new API.
apps/docs/src/docs/components/demo/ToastOverview.vue (1)
1-40: LGTM! Enhanced interactive demo.The updated demo significantly improves user experience by:
- Adding an interactive "Show Toast" button to trigger the toast
- Using the
v-model="show"pattern to demonstrate proper state management- Providing visual context with the styled background container
This makes the demo more engaging and better illustrates real-world toast usage patterns.
apps/docs/src/utils/showHideData.ts (1)
156-199: Update the misleading comment and document why stubs are necessary.The stubs are necessary to satisfy the type constraint
defineEmits<BToastEmits>()in the actual components (BAlert.vue line 170, BToast.vue line 176), since both useBToastEmitswhich extends the TS interfaceshowHideEmitsthat includescancelandokevents. However, theshowHideEmitsinterface in ComponentEmits.ts includes these modal-specific events, while the JS object version in showHideData.ts does not.The comment should clarify: these stubs exist to satisfy TypeScript's
EmitRecord<keyof BToastEmits>type constraint in the documentation data files, not because the events are truly defined elsewhere. Theundefinedargs/description values may cause documentation generation issues or confusion about which events are actually emitted by alerts and toasts.Consider:
- Update the comment to: "Stubs required to satisfy TypeScript type constraint from BToastEmits/BAlertEmits component definitions"
- Review whether
BToastEmitsandBAlertEmitsshould include modal-specificcancel/okevents at all- If events should exist, provide proper descriptions instead of
undefined; if not, refactor the type hierarchy to avoid the need for stubsapps/docs/src/data/components/alert.data.ts (1)
22-41: All picked props exist on BAlertProps—docs⇄types parity is satisfiedVerification confirms all 19 properties in the
pick(...)call are present onBAlertProps. ThebgVariant,textVariant, andvariantprops are inherited viaColorExtendables; the remaining 16 are direct properties of the interface. No toast-only props were surfaced.apps/docs/src/data/components/toast.data.ts (2)
24-37: All selected props are valid on BToastPropsVerification confirms all props listed in lines 24-37 of
toast.data.tsexist onBToastPropsor its inherited types. Props likecloseClass,closeContent,closeLabel,closeVariant,headerClass,headerTag,id,interval,isStatus,noHoverPause,noResumeOnHoverLeave,progressProps, andshowOnPauseare directly defined onBToastProps. ThetextVariantprop is inherited fromColorExtendablesthrough the interface's extends clause. Documentation-to-types parity is maintained for these selections.
74-162: Documentation verified—no changes required.The
sharedSlotsobject defined at line 270–277 inBToast.vueexposes exactly the six properties documented in the.data.tsfile (id, show, hide, toggle, active, visible), and all three slots (default, title, close) bind this object viav-bind="sharedSlots". The scoped slot API documentation is accurate and complete.apps/docs/src/docs/components/toast.md (1)
51-54: The review comment contains inaccurate behavioral claims about timer logic—disregard the negative value and rounding assertions.The doc states:
- "Negative values for either
model-valueorintervalwill stop the timer"- "If the
model-valuedoes not divide evenly by the interval, the timer will continue to the nearest interval. For example, amodel-valueof 5400 ms with an interval of 1000 ms will run for 6000 ms"What the implementation actually does:
TheuseCountdowncomposable (lines 37–43) computes remaining time as a simple subtraction (target.value - timestamp.value) with no rounding. Non-positivelengthvalues only prevent a restart; they do not stop an active timer. The countdown runs for exactly the specified duration, not rounded to the nearest interval boundary.The confirmed accurate claims are:
- Toast root has
tabindex="0"(BToast.vue:13)- useToast toasts default to
teleportTo: 'body'(BToastOrchestrator.vue:22)Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/docs/src/data/components/alert.data.ts (1)
74-83: Remove redundantclose-countdownemit override or fix argument name to match the actual interface.The explicit
close-countdowndefinition (lines 75-83) duplicates what's already inbuildDismissibleEmits()(which includes'close-countdown'with argvalue). More critically, the override uses arg namecloseCountdowninstead ofvalue, which is inconsistent with theBToastEmitsinterface ('close-countdown': [value: number]) and the actual emit in BAlert.vue (emit('close-countdown', remainingMs.value)).Either remove the explicit definition to use the one from
buildDismissibleEmits(), or change the arg name tovalueto match the type.
♻️ Duplicate comments (1)
apps/docs/src/docs/migration-guide.md (1)
1043-1044: Consolidate redundant guidance for href and to props.The guidance for
hrefandtoprops is identical on both lines. Per previous review feedback, consider consolidating these into a single bullet point to reduce redundancy.Apply this diff:
-- `href` and `to` - Use `useToast` with BLink props or see [BLink Integration](/docs/components/toast#blink-integration) in the toast documentation +- `href` and `to` - Use `useToast` with BLink props or see [BLink Integration](/docs/components/toast#blink-integration) in the toast documentation
🧹 Nitpick comments (1)
apps/docs/src/docs/components/toast.md (1)
68-68: Apply hyphenation for compound adjectives.Multiple compound phrases on this line should be hyphenated for clarity per static analysis and style guides.
Apply this diff:
-As you may have noticed in that example, there was a built-in progress bar. This is triggered when using a value that is a `number` and when `progress-props` is not `undefined`. This was implemented because it can be difficult to modify the behavior of `BToast` when using a pure method, and the appearance of a ticking down progress bar is a "nice-to-have". Although it is not out of the box behavior by Bootstrap, its behavior is opt-in. This functions similarly to examples in `BAlert` +As you may have noticed in that example, there was a built-in progress bar. This is triggered when using a value that is a `number` and when `progress-props` is not `undefined`. This was implemented because it can be difficult to modify the behavior of `BToast` when using a pure-method approach, and the appearance of a ticking-down progress bar is a "nice-to-have". Although it is not out-of-the-box behavior by Bootstrap, its behavior is opt-in. This functions similarly to examples in `BAlert`Based on learnings
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
apps/docs/src/data/components/alert.data.ts(4 hunks)apps/docs/src/data/components/collapse.data.ts(0 hunks)apps/docs/src/data/components/offcanvas.data.ts(0 hunks)apps/docs/src/data/components/toast.data.ts(3 hunks)apps/docs/src/docs/components/toast.md(3 hunks)apps/docs/src/docs/migration-guide.md(2 hunks)apps/docs/src/utils/commonProps.ts(1 hunks)apps/docs/src/utils/dropdownCommon.ts(0 hunks)apps/docs/src/utils/popover-shared.ts(0 hunks)apps/docs/src/utils/showHideData.ts(4 hunks)
💤 Files with no reviewable changes (4)
- apps/docs/src/data/components/collapse.data.ts
- apps/docs/src/utils/dropdownCommon.ts
- apps/docs/src/data/components/offcanvas.data.ts
- apps/docs/src/utils/popover-shared.ts
🧰 Additional context used
📓 Path-based instructions (1)
apps/docs/src/data/components/*.data.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
apps/docs/src/data/components/*.data.ts: When adding or modifying component props, events, or slots, ALWAYS update the corresponding .data.ts file in apps/docs/src/data/components/
Documentation format in .data.ts files must match TypeScript interfaces exactly (props, emits, slots definitions)
Files:
apps/docs/src/data/components/toast.data.tsapps/docs/src/data/components/alert.data.ts
🧠 Learnings (4)
📚 Learning: 2025-08-19T14:23:46.775Z
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2732
File: packages/bootstrap-vue-next/CHANGELOG.md:35-41
Timestamp: 2025-08-19T14:23:46.775Z
Learning: In the bootstrap-vue-next repository, CHANGELOG.md files (e.g., packages/bootstrap-vue-next/CHANGELOG.md) are autogenerated and should be ignored in reviews; do not propose edits for them.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-06-26T19:46:19.333Z
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('tooltip') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this inheritance mechanism.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('popover') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this prop spreading/inheritance mechanism.
Applied to files:
apps/docs/src/docs/migration-guide.md
🧬 Code graph analysis (2)
apps/docs/src/data/components/toast.data.ts (3)
apps/docs/src/utils/showHideData.ts (1)
buildDismissibleEmits(176-206)apps/docs/src/types/index.ts (1)
EmitRecord(30-30)packages/bootstrap-vue-next/src/types/ComponentEmits.ts (1)
BToastEmits(42-45)
apps/docs/src/data/components/alert.data.ts (1)
apps/docs/src/utils/showHideData.ts (1)
buildDismissibleEmits(176-206)
🪛 LanguageTool
apps/docs/src/docs/components/toast.md
[grammar] ~68-~68: Use a hyphen to join words.
Context: ... method, and the appearance of a ticking down progress bar is a "nice-to-have". A...
(QB_NEW_EN_HYPHEN)
[grammar] ~68-~68: Use a hyphen to join words.
Context: ...a "nice-to-have". Although it is not out of the box behavior by Bootstrap, its be...
(QB_NEW_EN_HYPHEN)
[grammar] ~68-~68: Use a hyphen to join words.
Context: ...nice-to-have". Although it is not out of the box behavior by Bootstrap, its behav...
(QB_NEW_EN_HYPHEN)
[grammar] ~68-~68: Use a hyphen to join words.
Context: ...-to-have". Although it is not out of the box behavior by Bootstrap, its behavior ...
(QB_NEW_EN_HYPHEN)
[style] ~90-~90: Consider using “incomplete” to avoid wordiness.
Context: ...disabilities. The following list, while not complete, provides general guidelines when using...
(NOT_ABLE_PREMIUM)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (12)
apps/docs/src/utils/showHideData.ts (3)
5-12: LGTM! New cancel emit properly defined.The
cancelemit is correctly defined withBvTriggerableEventtype and clear description. This aligns with the common event pattern used across dismissible components.
40-47: LGTM! New ok emit properly defined.The
okemit is correctly defined withBvTriggerableEventtype and clear description, consistent with thecancelemit.
172-206: LGTM! buildDismissibleEmits consolidates common emit patterns effectively.The new
buildDismissibleEmitsfunction properly consolidates dismissible component emits (show/hide lifecycle + close/countdown) and follows TypeScript best practices with const assertion. The JSDoc comment clearly documents its purpose for BAlert and BToast.apps/docs/src/docs/components/toast.md (1)
86-122: LGTM! Comprehensive accessibility guidance.The new "Accessibility tips" section provides thorough and practical guidance covering role/aria-live usage, page-load behavior, keyboard access, reading time calculations, and toast proliferation. This significantly improves the documentation quality.
apps/docs/src/data/components/alert.data.ts (2)
10-10: LGTM! Import updated to use consolidated dismissible emits.The change from
showHideEmitstobuildDismissibleEmitscorrectly adopts the new utility function that consolidates dismissible component emit patterns.
22-40: LGTM! Props expanded with new close button and progress controls.The additional picked props (closeClass, closeContent, closeLabel, closeVariant, interval, isStatus, progressProps, showOnPause) properly expose the new dismissible component functionality from commonProps. As per coding guidelines, this correctly updates the .data.ts file to match component interface changes.
Based on learnings
apps/docs/src/utils/commonProps.ts (2)
461-480: LGTM! Close button props properly defined.The new close button props (closeClass, closeContent, closeLabel, closeVariant) are correctly typed and documented. The
closeVariantusesButtonVariant | nullas expected for button variant props.
481-506: LGTM! Countdown and progress props properly defined.The new props for countdown behavior (interval, isStatus, showOnPause) and progress bar configuration (progressProps) are correctly typed with appropriate defaults and clear descriptions. The
intervaltype correctly accepts either a number (milliseconds) or the string literal"requestAnimationFrame".apps/docs/src/data/components/toast.data.ts (4)
11-11: LGTM! Import updated consistently with alert component.The change from
showHideEmitstobuildDismissibleEmitsmaintains consistency across dismissible components.
24-39: LGTM! Props surface expanded with dismissible controls.The additional picked props align with the commonProps additions and maintain consistency with BAlert. As per coding guidelines, this properly updates the .data.ts file to reflect component interface changes.
Based on learnings
73-82: LGTM! update:model-value emit correctly documents boolean | number type.The explicit override for
update:model-valueproperly documents that BToast accepts both boolean (visibility) and number (countdown milliseconds) types. This addresses the past review concern about type accuracy.
84-172: LGTM! Comprehensive slot definitions with consistent scope.All three slots (default, title, close) are thoroughly documented with consistent scope data (id, show, hide, toggle, active, visible), providing clear guidance for slot usage.
* upstream/main: (28 commits) fix(BToggle)! Remove redundant attribute cleanup & update docs for accessibility attributes on show/hide components (bootstrap-vue-next#2918) chore: release main (bootstrap-vue-next#2912) fix: allow custom component props in orchestrator create methods with type safety (bootstrap-vue-next#2922) fix(BModal): prevent focus trap error when no tabbable elements exist (bootstrap-vue-next#2864) Update package description for clarity (bootstrap-vue-next#2917) Update project description for clarity and detail test: add event emission tests for BTable and BTableLite (bootstrap-vue-next#2915) fix(BTableLite): Use primary key to persist row-details state when items change (bootstrap-vue-next#2871) chore: release main (bootstrap-vue-next#2896) feat(BTable): add configurable debouncing ci: Add publint to the build process (bootstrap-vue-next#2909) docs(Offcanvas): Parity pass (bootstrap-vue-next#2900) fix(directives): Robustness fixes for directives (bootstrap-vue-next#2906) docs(BFormInput): document @wheel.prevent for disabling mousewheel events (bootstrap-vue-next#2903) fix(typings): Fix paths to `*.d.mts` files (bootstrap-vue-next#2907) feat: add name and form props to BFormRating for form submission (bootstrap-vue-next#2895) docs: refactor docs to avoid duplication and boilerplate code (bootstrap-vue-next#2891) docs(BToast): Parity (bootstrap-vue-next#2887) docs(BModal): fix attribute to hide footer (bootstrap-vue-next#2888) docs(BPlaceholder): Parity pass (bootstrap-vue-next#2886) ...
2 participants
Describe the PR
BToastcomponentBToastandBAlertcomponent dataSmall replication
N/A
PR checklist
What kind of change does this PR introduce? (check at least one)
fix(…)feat(…)fix(…)docs(…)The PR fulfills these requirements:
CHANGELOGis generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be deniedSummary by CodeRabbit
New Features
Documentation