-
-
Notifications
You must be signed in to change notification settings - Fork 174
docs(BModal): Parity pass #2866
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
|
|
Caution Review failedThe pull request is closed. 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. WalkthroughExpanded 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
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)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
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.
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 |
There was a problem hiding this 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, soshow/hide/togglelose IntelliSense and type safety. Typing the ref againstComponentExposed<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
falseis 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
📒 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.tsapps/docs/src/data/components/alert.data.tsapps/docs/src/data/components/accordion.data.tsapps/docs/src/data/components/toast.data.tsapps/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 viaunplugin-vue-componentsandBootstrapVueNextResolver, 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
modalClassis 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.
commit: |
There was a problem hiding this 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 withnoTrap.The documentation states focus return is "handled automatically by the focus trap system unless
noTrapis set totrue." This requires clarification: whennoTrapistrue, is focus return still performed (by a different mechanism), or is it skipped entirely? Line 363 suggests manual management is required whennoTrapis enabled.Please verify the actual behavior in the BModal implementation and update the documentation to clearly state whether:
- Focus return happens automatically regardless of
noTrapsetting, OR- Focus return only happens when
noTrapisfalse(focus trap enabled), OR- Focus return requires manual handling when
noTrapistrueapps/docs/src/docs/components/demo/ModalMultipleSupport.vue (1)
5-14: Removeno-stackingprop from the first modal.The
no-stackingprop on line 10 defeats the purpose of this stacking demo. According to the documentation (lines 260-261 in modal.md),no-stackinghides 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 theiddescription for BOffcanvas.The description still incorrectly references "accordion items and used in BOffcanvas for state management." This should describe the offcanvas
idprop 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:
setno-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-demoprefix 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-backdropneeds 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
📒 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
BvTriggerableEventproperties 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-title→title,modal-header→header, andmodal-footer→footerthat 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 resolvedokflagPlucking
value.okaftercreate(...).show()keeps the sample focused on the boolean outcome readers care about, while the defensive guard covers the non-object/nullcases cleanly.apps/docs/src/docs/demo/ModalConfirm.vue (1)
14-24: Consistent result handling for confirm modalMirroring the message-box logic here gives the docs a clear
true/false/nullsignal from the controller promise, matching what users expect to inspect after a confirm flow.
|
@VividLemon - CodeRabbitAI says this To the best of my understanding, leaving these as literal boolean and undefined values renders the documents the way we want - e.g., |
There was a problem hiding this 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
📒 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
Remove the todo comments. They are outdated mb |
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this 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
📒 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-rightclasses have been correctly updated tofloat-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.
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... |
|
@VividLemon - Sorry, I accidentally closed the PR rather than resolving a comment. This should be ready to go. |
* 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)
Describe the PR
This is the parity pass for the
BModalcomponent - I haven’t done anything with the directive or the composable (other than refer to them in the component docs.footer-tagorheader-tag#2867Note 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, andmigration-guide.mdPR 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
New Demos