Skip to content

Conversation

@dwgray
Copy link
Member

@dwgray dwgray commented Sep 30, 2025

Describe the PR

This is the parity pass for the BModal component - I haven’t done anything with the directive or the composable (other than refer to them in the component docs.

  • Bring the main BModal docs up-to-date with the code & to parity with the BSV docs
  • Update the component data
  • Factor all the examples into their own files
  • Update the component references
  • Move some props to common.props
  • Update the migration guide
  • Create a bug for missing props BModal doesn’t implement footer-tag or header-tag #2867

Note that I leaned on AI fairly heavily for this, which resulted in somewhat more verbose text than I normally generate on my own, but I spent a decent amount of time verifying the results, so I hope it’s about as accurate as I would do on my own.

This fixes #2486

Small replication

See modal.md, modal.data.ts, and migration-guide.md

PR checklist

What kind of change does this PR introduce? (check at least one)

  • Bugfix 🐛 - fix(…)
  • Feature - feat(…)
  • ARIA accessibility - fix(…)
  • Documentation update - docs(…)
  • Other (please describe)

The PR fulfills these requirements:

  • Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is 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 denied

Summary by CodeRabbit

  • New Features

    • Modal: added extra‑large size (xl), titleTag, modalClass, and improved focus/keyboard behavior.
    • Shared body and bodyAttrs now available across AccordionItem, Alert, Offcanvas, Toast, and Modal for consistent content/attribute customization.
  • Documentation

    • Major Modal docs rewrite: overview, usage, events, accessibility, teleport, variants, stacking, and migration guidance.
  • New Demos

    • Many Modal demos added (sizes, centered, v-model/directive, scrollable/overflow, variants, prevent-close, scoped slots, accessibility focus, no-backdrop, popover/tooltip, exposed methods, toggle, stacked).

Copilot AI review requested due to automatic review settings September 30, 2025 23:32
@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Sep 30, 2025

Caution

Review failed

The pull request is closed.

Note

Other AI code review bot(s) detected

CodeRabbit 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.

Walkthrough

Expanded shared common props (added body, bodyAttrs) and migrated many component prop declarations to use pick(buildCommonProps()). Added numerous modal demo components, rewrote modal documentation and migration guidance, and adjusted several modal demo implementations and types.

Changes

Cohort / File(s) Summary of Changes
Common props expansion
apps/docs/src/utils/commonProps.ts
Added shared props body and bodyAttrs (type/default/description) to common props.
Docs data — prop consolidation
apps/docs/src/data/components/accordion.data.ts, apps/docs/src/data/components/alert.data.ts, apps/docs/src/data/components/modal.data.ts, apps/docs/src/data/components/offcanvas.data.ts, apps/docs/src/data/components/toast.data.ts
Replaced many explicit per-component prop blocks with ...pick(buildCommonProps(...), [...]); moved keys such as body, bodyAttrs, bodyClass, id, title, and variant-related props into the common props selection; modal gained size, titleTag, and modalClass via the merged set.
Modal demo components (added)
apps/docs/src/docs/components/demo/ModalAccessibilityFocus.vue, .../ModalCenterVertically.vue, .../ModalDirective.vue, .../ModalExposed.vue, .../ModalFooterBtnSizes.vue, .../ModalModel.vue, .../ModalMultipleSupport.vue, .../ModalNoBackdrop.vue, .../ModalPopover.vue, .../ModalPrevent.vue, .../ModalScopedSlots.vue, .../ModalScrollOverflow.vue, .../ModalScrollableContent.vue, .../ModalSizes.vue, .../ModalToggle.vue, .../ModalUsage.vue, .../ModalVariants.vue
Added many SFC demos covering directive/v-model usage, focus management, stacking, sizes, variants, scrollable/overflow content, no-backdrop, scoped slots, exposed methods, prevent-close behavior, footer button sizes, and related scenarios.
Modal docs rewrite
apps/docs/src/docs/components/modal.md
Major rework: expanded Overview, Usage, Events, Slots (names/shape), Accessibility, Teleport/stacking, Styling, customization, demos and references, and programmatic/migration guidance.
Header-close demo templates
apps/docs/src/docs/demo/ModalHeaderCloseBSV.vue, apps/docs/src/docs/demo/ModalHeaderCloseBSVN.vue
Added small examples demonstrating custom header-close content/slot usage.
Migration guide updates
apps/docs/src/docs/migration-guide.md
Expanded migration guidance for BModal: removed $bvModal guidance, new composable/template-ref usage, event/slot/prop renames and removals, z-index/stacking/teleport notes, and focus-management changes.
Modal demo logic/type adjustments
apps/docs/src/docs/demo/ModalConfirm.vue, apps/docs/src/docs/demo/ModalMessageBox.vue
Removed BvTriggerableEvent import; changed result refs to allow undefined; updated flow to call create(...).show() and derive results from returned value object.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Trigger as Button / v-b-modal
  participant Directive as v-b-modal Directive
  participant Modal as BModal
  participant Teleport as Teleport (optional)
  participant Focus as Focus handler

  User->>Trigger: click
  Trigger->>Directive: trigger target id/name
  Directive->>Modal: call show()
  activate Modal
  Modal->>Teleport: render (if teleport enabled)
  Teleport-->>Modal: rendered
  Modal->>Focus: onShown -> focus() (if configured)
  Note right of Modal: focus trap active unless no-trap\nand returns focus to trigger on hide
  User-->>Modal: ESC / backdrop click / hide()
  Modal->>Modal: emit preventable events (esc/backdrop) — may preventDefault()
  Modal->>Modal: hide() if not prevented
  deactivate Modal
  Modal-->>Trigger: return focus (if applicable)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

Suggested reviewers

  • VividLemon
  • xvaara

Poem

"I nibble keys and shuffle props with care,
Carrots of common fields now planted everywhere.
Modals bloom and focus hops straight home,
New demos sprout where docs pages roam.
A little rabbit cheers — the changelog's bright as a comb! 🥕"

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Out of Scope Changes Check ⚠️ Warning This PR includes extensive updates beyond the migration guide slot mappings, such as modifications to other component documentation (accordion, alert, offcanvas, toast), multiple demo components, and commonProps changes, which fall outside the scope of issue #2486’s focus on BModal slot name documentation. Please refactor or separate unrelated documentation and data updates into dedicated PRs to isolate the slot mapping fix for BModal in the migration guide.
✅ Passed checks (4 passed)
Check name Status Explanation
Title Check ✅ Passed The title concisely indicates that this PR is a documentation update (“docs”) for the BModal component and that it brings parity with existing BootstrapVue documentation, clearly summarizing the main change without extraneous detail.
Linked Issues Check ✅ Passed The migration guide has been updated to include the new slot mappings between BootstrapVue and BootstrapVueNext, documenting the changes from modal-title, modal-header, and modal-footer to title, header, and footer as requested in issue #2486.
Description Check ✅ Passed The PR description follows the repository’s template by providing a clear “Describe the PR” section with concise objectives, includes a “Small replication” section pointing to relevant files, and contains a structured PR checklist with appropriate change type selection.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f29d605 and e564ef5.

📒 Files selected for processing (4)
  • apps/docs/src/data/components/accordion.data.ts (2 hunks)
  • apps/docs/src/data/components/modal.data.ts (10 hunks)
  • apps/docs/src/data/components/offcanvas.data.ts (5 hunks)
  • apps/docs/src/data/components/toast.data.ts (3 hunks)

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.

❤️ Share

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

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR brings the BModal component documentation to parity with the BootstrapVue documentation, providing comprehensive updates across multiple areas including component examples, migration guidance, and data structure improvements.

  • Updates BModal component documentation with comprehensive examples and accessibility guidance
  • Refactors component data files to use shared common props for better consistency
  • Adds extensive migration documentation covering event system changes, prop renaming, and slot modifications

Reviewed Changes

Copilot reviewed 27 out of 27 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
apps/docs/src/utils/commonProps.ts Adds new common props body and bodyAttrs for reuse across components
apps/docs/src/docs/migration-guide.md Extensive BModal migration documentation with prop changes, event system updates, and slot mappings
apps/docs/src/docs/demo/Modal*.vue 16 new demo component files showcasing various BModal features and usage patterns
apps/docs/src/docs/components/modal.md Complete rewrite of modal documentation with comprehensive examples and accessibility information
apps/docs/src/data/components/*.data.ts Multiple component data files refactored to use common props for consistency

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 10

🧹 Nitpick comments (3)
apps/docs/src/docs/components/demo/ModalDirective.vue (1)

1-13: Import the directive so the demo is self-contained.

Every other modal demo locally registers vBModal. Without that import this example relies on app-level globals, which breaks standalone reproduction and makes the extracted snippet incomplete. Please add the directive import in a <script setup> block so readers can copy/paste it successfully.

 <template>
   <div>
     <!-- #region template -->
     <div class="d-flex gap-2">
       <!-- Using modifiers -->
       <BButton v-b-modal.directive-modal>Show Modal</BButton>

       <!-- Using value -->
       <BButton v-b-modal="'directive-modal'">Show Modal</BButton>
     </div>
     <!-- The modal -->
     <BModal id="directive-modal">Hello From My Modal!</BModal>
     <!-- #endregion template -->
   </div>
 </template>
+
+<script setup lang="ts">
+import {vBModal} from 'bootstrap-vue-next/directives/BModal'
+</script>
apps/docs/src/docs/components/demo/ModalExposed.vue (1)

41-49: Type the template ref to surface the exposed modal methods.

Right now useTemplateRef('my-modal') infers a generic component instance, so show/hide/toggle lose IntelliSense and type safety. Typing the ref against ComponentExposed<typeof BModal> (pattern used elsewhere in docs) keeps the example accurate and helps readers.

-const myModal = useTemplateRef('my-modal')
-const show = () => myModal.value?.show()
-const hide = () => myModal.value?.hide()
-const toggle = () => myModal.value?.toggle()
+import {type ComponentExposed} from 'vue-component-type-helpers'
+
+const myModal = useTemplateRef<ComponentExposed<typeof BModal>>('my-modal')
+const show = () => myModal.value?.show()
+const hide = () => myModal.value?.hide()
+const toggle = () => myModal.value?.toggle()
apps/docs/src/data/components/modal.data.ts (1)

86-86: TODO comments about boolean defaults are unnecessary.

The TODO comments stating "item not in string format" for boolean default values (lines 86, 92, 97, 113, 128, etc.) appear unnecessary. Boolean false is the correct format for boolean-typed props. Consider removing these TODO markers unless there's a specific documentation format requirement.

Also applies to: 92-92, 97-97, 113-113, 128-128

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6685308 and d8bb0a9.

📒 Files selected for processing (27)
  • apps/docs/src/data/components/accordion.data.ts (1 hunks)
  • apps/docs/src/data/components/alert.data.ts (1 hunks)
  • apps/docs/src/data/components/modal.data.ts (7 hunks)
  • apps/docs/src/data/components/offcanvas.data.ts (3 hunks)
  • apps/docs/src/data/components/toast.data.ts (3 hunks)
  • apps/docs/src/docs/components/demo/ModalAccessibilityFocus.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalCenterVertically.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalDirective.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalExposed.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalFooterBtnSizes.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalModel.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalMultipleSupport.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalNoBackdrop.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalPopover.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalPrevent.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalScopedSlots.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalScrollOverflow.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalScrollableContent.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalSizes.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalToggle.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalUsage.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalVariants.vue (1 hunks)
  • apps/docs/src/docs/components/modal.md (2 hunks)
  • apps/docs/src/docs/demo/ModalHeaderCloseBSV.vue (1 hunks)
  • apps/docs/src/docs/demo/ModalHeaderCloseBSVN.vue (1 hunks)
  • apps/docs/src/docs/migration-guide.md (2 hunks)
  • apps/docs/src/utils/commonProps.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/offcanvas.data.ts
  • apps/docs/src/data/components/alert.data.ts
  • apps/docs/src/data/components/accordion.data.ts
  • apps/docs/src/data/components/toast.data.ts
  • apps/docs/src/data/components/modal.data.ts
🧠 Learnings (3)
📚 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/components/demo/ModalPopover.vue
📚 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/components/demo/ModalPopover.vue
📚 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/components/demo/ModalPopover.vue
🧬 Code graph analysis (4)
apps/docs/src/data/components/offcanvas.data.ts (2)
packages/bootstrap-vue-next/src/utils/object.ts (1)
  • pick (20-33)
apps/docs/src/utils/commonProps.ts (1)
  • buildCommonProps (470-488)
apps/docs/src/data/components/alert.data.ts (2)
packages/bootstrap-vue-next/src/utils/object.ts (1)
  • pick (20-33)
apps/docs/src/utils/commonProps.ts (1)
  • buildCommonProps (470-488)
apps/docs/src/data/components/toast.data.ts (2)
packages/bootstrap-vue-next/src/utils/object.ts (1)
  • pick (20-33)
apps/docs/src/utils/commonProps.ts (1)
  • buildCommonProps (470-488)
apps/docs/src/data/components/modal.data.ts (2)
packages/bootstrap-vue-next/src/utils/object.ts (1)
  • pick (20-33)
apps/docs/src/utils/commonProps.ts (1)
  • buildCommonProps (470-488)
🪛 markdownlint-cli2 (0.18.1)
apps/docs/src/docs/migration-guide.md

618-618: No empty links

(MD042, no-empty-links)

⏰ 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 (6)
apps/docs/src/docs/components/demo/ModalScrollOverflow.vue (1)

1-23: Demo wiring matches existing patterns. The trigger/button and modal setup mirror the other modal examples and cleanly illustrate overflow content, so this looks ready to ship.

apps/docs/src/docs/demo/ModalHeaderCloseBSV.vue (1)

1-6: No import needed for BModal in this demo; it’s auto-imported by VitePress via unplugin-vue-components and BootstrapVueNextResolver, and this file deliberately shows legacy BootstrapVue syntax.

Likely an incorrect or invalid review comment.

apps/docs/src/data/components/modal.data.ts (4)

250-306: LGTM! Comprehensive event documentation.

The emits section is well-documented with clear descriptions and proper typing. The added descriptions for event details improve clarity.


307-344: LGTM! Slot documentation aligns with PR objectives.

The slots section correctly documents the new slot names (title, header, footer) which addresses issue #2486 mentioned in the PR objectives. The descriptions clearly explain slot behavior and scoping.


173-177: modalClass prop is implemented and tested – no separate interface
modalClass is declared in BModal.vue’s props and covered by modal.spec.ts, so it exists and works as documented.


47-83: buildCommonProps pick props validated
All 24 props selected via pick exist in commonProps.ts and are declared on BModalProps in ComponentProps.ts; no discrepancies found.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 1, 2025

bsvn-vite-ts

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next@2866
npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next/@bootstrap-vue-next/nuxt@2866

commit: e564ef5

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

♻️ Duplicate comments (4)
apps/docs/src/docs/components/modal.md (1)

351-353: Verify focus return behavior with noTrap.

The documentation states focus return is "handled automatically by the focus trap system unless noTrap is set to true." This requires clarification: when noTrap is true, is focus return still performed (by a different mechanism), or is it skipped entirely? Line 363 suggests manual management is required when noTrap is enabled.

Please verify the actual behavior in the BModal implementation and update the documentation to clearly state whether:

  • Focus return happens automatically regardless of noTrap setting, OR
  • Focus return only happens when noTrap is false (focus trap enabled), OR
  • Focus return requires manual handling when noTrap is true
apps/docs/src/docs/components/demo/ModalMultipleSupport.vue (1)

5-14: Remove no-stacking prop from the first modal.

The no-stacking prop on line 10 defeats the purpose of this stacking demo. According to the documentation (lines 260-261 in modal.md), no-stacking hides the modal before another is shown, preventing the stack visualization this demo is meant to illustrate.

Apply this diff:

     <BModal
       v-model="nestedModal1"
       size="lg"
       title="First Modal"
       ok-only
-      no-stacking
     >
apps/docs/src/data/components/offcanvas.data.ts (1)

20-27: Correct the id description for BOffcanvas.

The description still incorrectly references "accordion items and used in BOffcanvas for state management." This should describe the offcanvas id prop specifically, such as: "The id attribute applied to the offcanvas element; used to identify the offcanvas for accessibility and to reference or toggle the offcanvas programmatically."

Apply this diff:

         ...pick(
           buildCommonProps({
             id: {
               description:
-                'The Id to be injected to accordion items and used in BOffcanvas for state management',
+                'The id attribute applied to the offcanvas element; used to identify the offcanvas for accessibility (aria-controls/label) and to reference or toggle the offcanvas programmatically',
             },
           }),
           ['bodyAttrs', 'bodyClass', 'id']
         ),
apps/docs/src/docs/migration-guide.md (1)

668-668: Formatting issue persists from previous review.

The line still contains a formatting error: set no-header="true" should be `set \`no-header="true"\ (remove extra backtick and fix spacing).

Apply this diff to fix the formatting:

-- `aria-label` - Use standard HTML attributes directly on the component. **Note**: Unlike BootstrapVue, BootstrapVueNext does not automatically remove `aria-labelledby` when `aria-label` is present. If using `aria-label`, set `no-header="true"` to prevent conflicts, or ensure your `aria-label` is descriptive enough to work alongside `aria-labelledby`
+- `aria-label` - Use standard HTML attributes directly on the component. **Note**: Unlike BootstrapVue, BootstrapVueNext does not automatically remove `aria-labelledby` when `aria-label` is present. If using `aria-label`, set `no-header="true"` to prevent conflicts, or ensure your `aria-label` is descriptive enough to work alongside `aria-labelledby`
🧹 Nitpick comments (1)
apps/docs/src/docs/components/demo/ModalMultipleSupport.vue (1)

65-83: Consider using <style scoped> for better encapsulation.

While the .stack-demo prefix prevents global pollution, a scoped style block would provide stronger encapsulation and align with Vue best practices for component-specific styles.

Apply this diff:

-<style>
+<style scoped>
 /* Modal stacking example styles */
-.stack-demo .modal {
+.modal {
   --bs-modal-zindex: 1900;
   transform: translate(
     calc((var(--b-count, 0) - var(--b-position, 0)) * 20px),
     calc((var(--b-count, 0) - var(--b-position, 0)) * 20px)
   );
   transition:
     transform 0.5s,
     opacity 0.15s linear !important;
 }
-.stack-demo .modal:not(.stack-inverse-position-0) {
+.modal:not(.stack-inverse-position-0) {
   opacity: calc(1 - ((var(--b-count, 0) - var(--b-position, 0)) * 0.1));
 }
-.stack-demo .modal-backdrop:not(.stack-inverse-position-0) {
+.modal-backdrop:not(.stack-inverse-position-0) {
   opacity: 0 !important;
 }

Note: If .modal-backdrop needs to be styled and exists outside the component's template (e.g., teleported), keep the current approach with class prefix.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d8bb0a9 and 7fdfa61.

📒 Files selected for processing (6)
  • apps/docs/src/data/components/offcanvas.data.ts (3 hunks)
  • apps/docs/src/docs/components/demo/ModalMultipleSupport.vue (1 hunks)
  • apps/docs/src/docs/components/modal.md (2 hunks)
  • apps/docs/src/docs/demo/ModalConfirm.vue (1 hunks)
  • apps/docs/src/docs/demo/ModalMessageBox.vue (1 hunks)
  • apps/docs/src/docs/migration-guide.md (2 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/offcanvas.data.ts
🧠 Learnings (1)
📚 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
🧬 Code graph analysis (1)
apps/docs/src/data/components/offcanvas.data.ts (2)
packages/bootstrap-vue-next/src/utils/object.ts (1)
  • pick (20-33)
apps/docs/src/utils/commonProps.ts (1)
  • buildCommonProps (470-488)
⏰ 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 (13)
apps/docs/src/docs/components/demo/ModalMultipleSupport.vue (1)

56-63: LGTM!

The Composition API setup is clean and appropriate for managing the modal visibility state.

apps/docs/src/docs/components/modal.md (5)

15-32: LGTM! Clear overview of modal customization.

The overview section provides a comprehensive introduction to modal configuration, button customization, close behaviors, and slot usage.


93-112: LGTM! Excellent event documentation.

The event tables are well-structured and provide clear descriptions of the BvTriggerableEvent properties and methods. The note about action events only firing for built-in buttons is particularly valuable.


256-284: LGTM! Comprehensive stacking documentation.

The multiple modal support section clearly explains the stacking behavior, CSS variables, and usage patterns. Well-aligned with the demo component.


321-344: LGTM! Thorough auto-focus guidance.

The auto-focus section provides detailed accessibility guidance with appropriate warnings about screen reader implications. The recommendation against auto-focusing inputs is particularly important for accessibility.


365-373: LGTM! Clear focus management API documentation.

The focus management section clearly documents all the options for controlling initial focus behavior when modals open.

apps/docs/src/docs/migration-guide.md (5)

705-714: Excellent slot mapping table - directly addresses issue #2486.

This table clearly documents the slot name changes from BootstrapVue to BootstrapVueNext, specifically addressing the missing migration guidance for modal-titletitle, modal-headerheader, and modal-footerfooter that was requested in issue #2486.


720-757: Comprehensive scoped variables documentation.

The side-by-side comparison of BootstrapVue and BootstrapVueNext slot scopes with TypeScript interfaces is extremely helpful. The key changes section clearly highlights the differences developers need to be aware of during migration.


618-618: Empty link from previous review is now fixed.

The previously flagged empty link [below]() has been corrected to [below](#replacement-for-modal-message-boxes) which properly references the corresponding section at line 767.


636-636: Typo from previous review is now fixed.

The typo "listing" has been corrected to "listening" in this line.


609-818: Comprehensive BModal migration documentation.

This section provides thorough migration guidance covering:

  • Global modal management deprecation with clear alternatives
  • Event system changes with detailed trigger value mappings
  • Props changes (renamed, removed, and new)
  • Slot changes with clear mapping table (addresses issue #2486)
  • Scoped variables with TypeScript interfaces
  • Z-Index and stacking improvements
  • Focus management enhancements
  • Message box replacements with working examples

The documentation is well-organized, technically accurate, and provides clear migration paths for users.

Minor issue: Line 668 still has a formatting error that needs correction (flagged separately).

apps/docs/src/docs/demo/ModalMessageBox.vue (1)

14-22: Nice extraction of the resolved ok flag

Plucking value.ok after create(...).show() keeps the sample focused on the boolean outcome readers care about, while the defensive guard covers the non-object/null cases cleanly.

apps/docs/src/docs/demo/ModalConfirm.vue (1)

14-24: Consistent result handling for confirm modal

Mirroring the message-box logic here gives the docs a clear true/false/null signal from the controller promise, matching what users expect to inspect after a confirm flow.

@dwgray
Copy link
Member Author

dwgray commented Oct 1, 2025

@VividLemon - CodeRabbitAI says this

apps/docs/src/data/components/modal.data.ts (1)
86-86: TODO comments about boolean defaults are unnecessary.

The TODO comments stating "item not in string format" for boolean default values (lines 86, 92, 97, 113, 128, etc.) appear unnecessary. Boolean false is the correct format for boolean-typed props. Consider removing these TODO markers unless there's a specific documentation format requirement.

Also applies to: 92-92, 97-97, 113-113, 128-128

To the best of my understanding, leaving these as literal boolean and undefined values renders the documents the way we want - e.g., true without quotes around it in the default column. Can you tell me why you’ve added these comments and what your expectation is for them?

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7fdfa61 and c9ae49b.

📒 Files selected for processing (4)
  • apps/docs/src/docs/components/demo/ModalDirective.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalExposed.vue (1 hunks)
  • apps/docs/src/docs/components/demo/ModalVariants.vue (1 hunks)
  • apps/docs/src/docs/components/modal.md (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/docs/src/docs/components/demo/ModalDirective.vue
  • apps/docs/src/docs/components/demo/ModalExposed.vue
⏰ 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

@VividLemon
Copy link
Member

@VividLemon - CodeRabbitAI says this

apps/docs/src/data/components/modal.data.ts (1)
86-86: TODO comments about boolean defaults are unnecessary.

The TODO comments stating "item not in string format" for boolean default values (lines 86, 92, 97, 113, 128, etc.) appear unnecessary. Boolean false is the correct format for boolean-typed props. Consider removing these TODO markers unless there's a specific documentation format requirement.

Also applies to: 92-92, 97-97, 113-113, 128-128

To the best of my understanding, leaving these as literal boolean and undefined values renders the documents the way we want - e.g., true without quotes around it in the default column. Can you tell me why you’ve added these comments and what your expectation is for them?

Remove the todo comments. They are outdated mb

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
apps/docs/src/docs/components/demo/ModalVariants.vue (1)

125-130: Inconsistent spacing in ref declarations.

The ref declarations have inconsistent horizontal spacing/alignment. Consider aligning the = operators for better readability:

-const headerBgVariant  = ref<BgVariant>('dark')
-const headerTextVariant = ref<TextVariant>('white')
-const bodyBgVariant    = ref<BgVariant>('light')
-const bodyTextVariant  = ref<TextVariant>('dark')
-const footerBgVariant  = ref<BgVariant>('warning')
-const footerTextVariant = ref<TextVariant>('dark')
+const headerBgVariant = ref<BgVariant>('dark')
+const headerTextVariant = ref<TextVariant>('white')
+const bodyBgVariant = ref<BgVariant>('light')
+const bodyTextVariant = ref<TextVariant>('dark')
+const footerBgVariant = ref<BgVariant>('warning')
+const footerTextVariant = ref<TextVariant>('dark')
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c9ae49b and f29d605.

📒 Files selected for processing (1)
  • apps/docs/src/docs/components/demo/ModalVariants.vue (1 hunks)
⏰ 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 (2)
apps/docs/src/docs/components/demo/ModalVariants.vue (2)

75-86: Past issue resolved: Bootstrap 5 float classes.

The deprecated float-left/float-right classes have been correctly updated to float-start/float-end.


96-130: Past issue resolved: Proper type annotations.

The overly narrow literal types (ref('dark' as const)) have been replaced with extracted union types (ref<BgVariant>('dark')), allowing all variant values to be assigned correctly.

@dwgray
Copy link
Member Author

dwgray commented Oct 1, 2025

@VividLemon - CodeRabbitAI says this

apps/docs/src/data/components/modal.data.ts (1)
86-86: TODO comments about boolean defaults are unnecessary.

The TODO comments stating "item not in string format" for boolean default values (lines 86, 92, 97, 113, 128, etc.) appear unnecessary. Boolean false is the correct format for boolean-typed props. Consider removing these TODO markers unless there's a specific documentation format requirement.

Also applies to: 92-92, 97-97, 113-113, 128-128

To the best of my understanding, leaving these as literal boolean and undefined values renders the documents the way we want - e.g., true without quotes around it in the default column. Can you tell me why you’ve added these comments and what your expectation is for them?

Remove the todo comments. They are outdated mb

Thanks - got rid of them in the files I touched in this PR. Will do a global search and replace to kill the rest of them in a separate PR once this gets through...

@dwgray dwgray closed this Oct 1, 2025
@dwgray dwgray reopened this Oct 1, 2025
@dwgray
Copy link
Member Author

dwgray commented Oct 1, 2025

@VividLemon - Sorry, I accidentally closed the PR rather than resolving a comment. This should be ready to go.

@dwgray dwgray requested a review from VividLemon October 1, 2025 15:41
@VividLemon VividLemon merged commit 720daf8 into bootstrap-vue-next:main Oct 7, 2025
8 checks passed
xvaara added a commit to xvaara/bootstrap-vue-next that referenced this pull request Oct 11, 2025
* upstream/main:
  chore: release main (bootstrap-vue-next#2868)
  fix(useModalOrchestrator): circular dependency (bootstrap-vue-next#2874)
  docs(BModal): Parity pass (bootstrap-vue-next#2866)
  docs: Enable directly loading examples into StackBlitz (bootstrap-vue-next#2869)
  fix(BApp): wrap our test app in BApp in main.ts to enable easy verification of useModal, etc. (bootstrap-vue-next#2865)
  export useScrollLock() (bootstrap-vue-next#2854)
  chore: release main (bootstrap-vue-next#2858)
  fix(BToggle): stop looking for missing targets after directive is unmounted (bootstrap-vue-next#2857)
  chore: release main (bootstrap-vue-next#2851)
  Fix modal transition delays by making TransitionGroup name conditional (bootstrap-vue-next#2845)
  chore: release main (bootstrap-vue-next#2842)
  fix(BTable): events being wrongly stopped when sent from elements inside TRs (bootstrap-vue-next#2841)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Missing slot name changes of b-modal from the migration guide

2 participants