docs(Offcanvas): Parity pass #2900
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 expands Offcanvas metadata and docs, adds several demo SFCs (and removes one overview demo), updates demos for accessibility and explicit props, revises the migration guide to discuss BSidebar/BOffcanvas mapping, and applies minor formatting/lint tweaks to composable demos. Changes
Sequence Diagram(s)sequenceDiagram
rect rgba(0,128,96,0.06)
participant User as User
participant Toggle as BButton (toggle)
participant Offcanvas as BOffcanvas
participant Demo as Demo Slot
end
User->>Toggle: Click toggle
Toggle->>Offcanvas: Trigger v-b-toggle / id
Offcanvas->>Offcanvas: Toggle visible state (v-model)
Offcanvas->>Demo: Render title/default/footer/backdrop slots (with scope)
Demo->>User: Show content (images, text, controls)
Note right of Offcanvas: Close via hide(), Esc, or backdrop (emits events)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30–40 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 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 |
|
@VividLemon / @xvaara - I know we've been talking about deprecating the toggle directive. The accessibility portion of this (which I ported from BSV and which I believe still applies) gives an argument for using the directive. The directive handles managing the aria attributes, while you have to do this manually if you use the model. What do you think? If we're still planning to deprecate the directive, I'll rewrite this doc to reflect that, but I'm leaning towards keeping it in based on this... |
There was a problem hiding this comment.
Pull Request Overview
This PR adds comprehensive documentation for the BOffcanvas component, including a detailed migration guide for users transitioning from BSidebar in BootstrapVue to BOffcanvas in BootstrapVueNext. The changes align with Bootstrap 5's naming conventions and provide extensive examples and accessibility guidance.
- Migration guide added for BSidebar → BOffcanvas transition with detailed prop mapping
- Complete offcanvas documentation with multiple demo examples covering styling, placement, accessibility, and advanced features
- Enhanced demo components with proper accessibility attributes (aria-controls, aria-expanded)
- Comprehensive prop/event/slot documentation in the data file
- Code formatting improvements for consistency across demo files
Reviewed Changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
apps/docs/src/docs/migration-guide.md |
Added comprehensive BSidebar to BOffcanvas migration section with prop mappings and behavior changes |
apps/docs/src/docs/components/offcanvas.md |
Added complete documentation including overview, styling, visibility control, accessibility, and implementation notes |
apps/docs/src/docs/components/demo/OffcanvasBasic.vue |
New demo showing basic offcanvas usage with title and shadow |
apps/docs/src/docs/components/demo/OffcanvasVariant.vue |
New demo demonstrating variant styling with utility classes |
apps/docs/src/docs/components/demo/OffcanvasBorder.vue |
New demo showing border customization |
apps/docs/src/docs/components/demo/OffcanvasNoHeader.vue |
New demo showing offcanvas without default header and custom close button |
apps/docs/src/docs/components/demo/OffcanvasFooter.vue |
New demo demonstrating custom footer slot usage |
apps/docs/src/docs/components/demo/OffcanvasBackdrop.vue |
New demo for backdrop functionality |
apps/docs/src/docs/components/demo/OffcanvasLocations.vue |
Enhanced with accessibility attributes (aria-controls, aria-expanded, title) |
apps/docs/src/docs/components/demo/OffcanvasResponsive.vue |
Added title prop for accessibility |
apps/docs/src/docs/components/demo/OffcanvasSidebar.vue |
Enhanced with proper accessibility attributes and titles |
apps/docs/src/docs/components/demo/OffcanvasOverview.vue |
Removed (replaced by OffcanvasBasic) |
apps/docs/src/docs/composables/demo/*.vue |
Code formatting improvements (self-closing tags, line breaks) |
apps/docs/src/data/components/offcanvas.data.ts |
Added comprehensive descriptions for all props, events, and slots |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
apps/docs/src/docs/components/demo/OffcanvasBorder.vue (1)
4-7: Consider adding a title for accessibility.While the border styling is correctly demonstrated, consider adding a
titleprop to the BOffcanvas for better accessibility and consistency with other demos.Apply this diff:
<BOffcanvas id="offcanvas-border" + title="Offcanvas with border" class="border-end border-danger" >apps/docs/src/docs/components/demo/OffcanvasVariant.vue (1)
9-21: Consider simplifying the default slot.The explicit
template #defaultwrapper is unnecessary for the default slot content. For cleaner demo code, you can place the content directly inside<BOffcanvas>.Apply this diff to simplify:
<BOffcanvas id="offcanvas-variant" title="Offcanvas" shadow > - <template #default> <div class="px-3 py-2 bg-dark text-light"> <p> Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. </p> <BImg src="https://picsum.photos/500/500/?image=54" fluid thumbnail /> </div> - </template> </BOffcanvas>apps/docs/src/docs/components/offcanvas.md (1)
146-146: Minor style suggestion.The phrase "outside of" can be simplified to "outside" for cleaner prose.
Apply this diff:
-elements outside of the offcanvas. +elements outside the offcanvas.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
apps/docs/src/data/components/offcanvas.data.ts(5 hunks)apps/docs/src/docs/components/demo/OffcanvasBackdrop.vue(1 hunks)apps/docs/src/docs/components/demo/OffcanvasBasic.vue(1 hunks)apps/docs/src/docs/components/demo/OffcanvasBorder.vue(1 hunks)apps/docs/src/docs/components/demo/OffcanvasFooter.vue(1 hunks)apps/docs/src/docs/components/demo/OffcanvasLocations.vue(1 hunks)apps/docs/src/docs/components/demo/OffcanvasNoHeader.vue(1 hunks)apps/docs/src/docs/components/demo/OffcanvasOverview.vue(0 hunks)apps/docs/src/docs/components/demo/OffcanvasResponsive.vue(1 hunks)apps/docs/src/docs/components/demo/OffcanvasSidebar.vue(4 hunks)apps/docs/src/docs/components/demo/OffcanvasVariant.vue(1 hunks)apps/docs/src/docs/components/offcanvas.md(2 hunks)apps/docs/src/docs/composables/demo/UseScrollspyCleanup.vue(2 hunks)apps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vue(2 hunks)apps/docs/src/docs/composables/demo/UseScrollspyCustomRoot.vue(2 hunks)apps/docs/src/docs/composables/demo/UseScrollspyDynamicContent.vue(2 hunks)apps/docs/src/docs/migration-guide.md(1 hunks)
💤 Files with no reviewable changes (1)
- apps/docs/src/docs/components/demo/OffcanvasOverview.vue
🧰 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 (22)
📓 Common learnings
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2777
File: packages/bootstrap-vue-next/CHANGELOG.md:11-11
Timestamp: 2025-08-18T18:20:08.240Z
Learning: For PR #2777 (BSort updates), keep changes scoped to BTable sorting work; unrelated edits like CHANGELOG typos should be deferred to a separate PR/issue.
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/components/demo/OffcanvasBasic.vueapps/docs/src/docs/components/demo/OffcanvasVariant.vueapps/docs/src/docs/composables/demo/UseScrollspyCleanup.vueapps/docs/src/docs/composables/demo/UseScrollspyCustomRoot.vueapps/docs/src/docs/migration-guide.mdapps/docs/src/docs/components/demo/OffcanvasResponsive.vueapps/docs/src/docs/components/demo/OffcanvasBackdrop.vueapps/docs/src/docs/components/demo/OffcanvasFooter.vueapps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vueapps/docs/src/docs/composables/demo/UseScrollspyDynamicContent.vueapps/docs/src/docs/components/offcanvas.mdapps/docs/src/docs/components/demo/OffcanvasNoHeader.vueapps/docs/src/docs/components/demo/OffcanvasBorder.vueapps/docs/src/docs/components/demo/OffcanvasSidebar.vueapps/docs/src/docs/components/demo/OffcanvasLocations.vue
📚 Learning: 2025-10-21T01:11:59.901Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2861
File: apps/docs/src/docs/components/demo/CardKitchenSink.vue:28-31
Timestamp: 2025-10-21T01:11:59.901Z
Learning: In the bootstrap-vue-next docs codebase, the apps/docs/.vitepress/plugins/demo-container.ts plugin automatically generates kebab-case IDs from demo component filenames (e.g., CardKitchenSink.vue becomes id="card-kitchen-sink") and injects them into the HighlightCard wrapper elements. Therefore, demo components can use href="#kebab-case-filename" anchors without explicitly declaring the id attribute in the component template, as the id is generated at build time.
Applied to files:
apps/docs/src/docs/components/demo/OffcanvasBasic.vueapps/docs/src/docs/components/demo/OffcanvasVariant.vueapps/docs/src/data/components/offcanvas.data.tsapps/docs/src/docs/migration-guide.mdapps/docs/src/docs/components/demo/OffcanvasBackdrop.vueapps/docs/src/docs/components/demo/OffcanvasFooter.vueapps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vueapps/docs/src/docs/components/demo/OffcanvasNoHeader.vueapps/docs/src/docs/components/demo/OffcanvasBorder.vueapps/docs/src/docs/components/demo/OffcanvasSidebar.vueapps/docs/src/docs/components/demo/OffcanvasLocations.vue
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding a new component, update packages/bootstrap-vue-next/src/components/index.ts to export it
Applied to files:
apps/docs/src/docs/components/demo/OffcanvasBasic.vueapps/docs/src/docs/components/demo/OffcanvasVariant.vueapps/docs/src/docs/components/demo/OffcanvasBackdrop.vueapps/docs/src/docs/components/demo/OffcanvasFooter.vueapps/docs/src/docs/components/demo/OffcanvasNoHeader.vueapps/docs/src/docs/components/demo/OffcanvasBorder.vue
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2866
File: apps/docs/src/docs/components/demo/ModalModel.vue:11-15
Timestamp: 2025-09-30T23:57:21.526Z
Learning: The bootstrap-vue-next documentation project uses unplugin-vue-components to automatically resolve and import Vue components like BModal, BButton, etc. Explicit imports for these components in script sections are not required.
Applied to files:
apps/docs/src/docs/components/demo/OffcanvasBasic.vueapps/docs/src/docs/migration-guide.mdapps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vue
📚 Learning: 2025-10-21T19:31:54.113Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2882
File: apps/docs/src/docs/components/demo/PlaceholderWidth.vue:1-22
Timestamp: 2025-10-21T19:31:54.113Z
Learning: The bootstrap-vue-next project uses unplugin to automatically import components, so explicit imports in demo/documentation components are not needed.
Applied to files:
apps/docs/src/docs/components/demo/OffcanvasBasic.vueapps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vue
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to packages/bootstrap-vue-next/src/components/** : Create and modify Vue components only under packages/bootstrap-vue-next/src/components/
Applied to files:
apps/docs/src/docs/components/demo/OffcanvasBasic.vueapps/docs/src/docs/components/demo/OffcanvasVariant.vueapps/docs/src/docs/components/demo/OffcanvasFooter.vueapps/docs/src/docs/components/demo/OffcanvasNoHeader.vueapps/docs/src/docs/components/demo/OffcanvasBorder.vue
📚 Learning: 2025-05-23T23:58:07.165Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Applied to files:
apps/docs/src/docs/components/demo/OffcanvasBasic.vueapps/docs/src/docs/components/demo/OffcanvasVariant.vueapps/docs/src/docs/migration-guide.mdapps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vueapps/docs/src/docs/components/offcanvas.md
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.vue : Keep component-specific styles within their respective .vue single-file components
Applied to files:
apps/docs/src/docs/components/demo/OffcanvasBasic.vueapps/docs/src/docs/components/demo/OffcanvasVariant.vueapps/docs/src/docs/components/demo/OffcanvasFooter.vueapps/docs/src/docs/components/demo/OffcanvasNoHeader.vueapps/docs/src/docs/components/demo/OffcanvasBorder.vue
📚 Learning: 2025-08-19T14:23:46.775Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/components/demo/OffcanvasVariant.vue
📚 Learning: 2025-05-01T23:40:56.146Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the `useScrollspy` hook returns an object with a `current` property which is the ID string (or null) of the currently active item, not an object containing an ID.
Applied to files:
apps/docs/src/docs/composables/demo/UseScrollspyCleanup.vueapps/docs/src/docs/composables/demo/UseScrollspyCustomRoot.vueapps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vueapps/docs/src/docs/composables/demo/UseScrollspyDynamicContent.vue
📚 Learning: 2025-08-20T14:05:32.416Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2732
File: packages/bootstrap-vue-next/src/components/BApp/BOrchestrator.vue:28-28
Timestamp: 2025-08-20T14:05:32.416Z
Learning: Vue 3 supports TypeScript annotations in template binding expressions when using `<script setup lang="ts">` or `<script lang="ts">`. Template ref callbacks like `:ref="(ref: ComponentPublicInstance) => ..."` are valid TypeScript syntax in Vue templates when TypeScript is enabled in the script block.
Applied to files:
apps/docs/src/docs/composables/demo/UseScrollspyCleanup.vueapps/docs/src/docs/composables/demo/UseScrollspyCustomRoot.vueapps/docs/src/docs/composables/demo/UseScrollspyDynamicContent.vue
📚 Learning: 2025-04-27T17:30:42.045Z
Learnt from: unstoppablecarl
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Applied to files:
apps/docs/src/docs/composables/demo/UseScrollspyCustomRoot.vue
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to 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/
Applied to files:
apps/docs/src/data/components/offcanvas.data.ts
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to apps/docs/src/data/components/*.data.ts : Documentation format in .data.ts files must match TypeScript interfaces exactly (props, emits, slots definitions)
Applied to files:
apps/docs/src/data/components/offcanvas.data.ts
📚 Learning: 2025-04-28T22:48:46.738Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.
Applied to files:
apps/docs/src/data/components/offcanvas.data.ts
📚 Learning: 2025-06-05T11:43:10.793Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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-05-28T07:32:45.658Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Applied to files:
apps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vue
📚 Learning: 2025-05-28T07:01:55.095Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Applied to files:
apps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vueapps/docs/src/docs/components/offcanvas.md
📚 Learning: 2025-06-26T19:46:19.333Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/offcanvas.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/offcanvas.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/offcanvas.md
🧬 Code graph analysis (1)
apps/docs/src/data/components/offcanvas.data.ts (4)
apps/docs/src/types/index.ts (2)
PropRecord(17-17)EmitRecord(30-30)packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
BOffcanvasProps(627-658)apps/docs/src/utils/showHideData.ts (1)
showHideEmits(4-93)packages/bootstrap-vue-next/src/types/ComponentEmits.ts (1)
BOffcanvasEmits(28-33)
🪛 LanguageTool
apps/docs/src/docs/components/offcanvas.md
[grammar] ~12-~12: Use a hyphen to join words.
Context: ...he component supports a header and built in close button, of which you can option...
(QB_NEW_EN_HYPHEN)
[grammar] ~56-~56: Ensure spelling is correct
Context: ...anvasVariant.vue ### Shadow Prefer an offcanvas with a backdrop shadow? Set the `shadow...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~84-~84: Use a hyphen to join words.
Context: ...n` prop. Note: The BootstrapVueNext defined transition effect of this compon...
(QB_NEW_EN_HYPHEN)
[grammar] ~112-~112: Ensure spelling is correct
Context: ...need to provide a method of closing the offcanvas. The default slot is scoped, which in...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~129-~129: Ensure spelling is correct
Context: ... not want the content rendered when the offcanvas is not visible. Simply set the lazy p...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~136-~136: Ensure spelling is correct
Context: ...rop (default behavior). When shown, the offcanvas will display an opaque backdrop. Clicki...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[style] ~146-~146: This phrase is redundant. Consider using “outside”.
Context: ...ble for users to move focus to elements outside of the offcanvas. ## Visibility control ...
(OUTSIDE_OF)
[grammar] ~207-~207: Use a hyphen to join words.
Context: ...-close-on-backdrop` to disable the close on backdrop click feature. When the bac...
(QB_NEW_EN_HYPHEN)
[grammar] ~207-~207: Use a hyphen to join words.
Context: ...ose-on-backdrop` to disable the close on backdrop click feature. When the backdr...
(QB_NEW_EN_HYPHEN)
[grammar] ~207-~207: Use a hyphen to join words.
Context: ...ckdrop` to disable the close on backdrop click feature. When the backdrop is not...
(QB_NEW_EN_HYPHEN)
⏰ 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). (2)
- GitHub Check: Agent
- GitHub Check: build
🔇 Additional comments (14)
apps/docs/src/docs/composables/demo/UseScrollspyDynamicContent.vue (1)
4-4: LGTM! Formatting consistency improvements.The self-closing div, ESLint directive for the demo function, and trailing newline all improve code consistency across the useScrollspy demo files. The
addNewSectionfunction appropriately demonstrates theupdateList()API usage pattern even though it's not called in this example.Also applies to: 19-19, 26-26
apps/docs/src/docs/composables/demo/UseScrollspyCustomQuery.vue (1)
5-24: LGTM! Multi-line formatting improvements.The reformatting of template elements and the loremText constant to multi-line format improves readability while preserving all functionality. The semicolon removal from the style attribute (line 30) is appropriate as it's not needed at the end of inline styles.
Also applies to: 30-30, 32-67, 78-79, 87-87
apps/docs/src/docs/composables/demo/UseScrollspyCleanup.vue (1)
4-4: LGTM! Formatting consistency improvements.The self-closing div and trailing newline improve consistency with the other useScrollspy demo files.
Also applies to: 21-21
apps/docs/src/docs/composables/demo/UseScrollspyCustomRoot.vue (1)
4-4: LGTM! Formatting consistency improvements.The self-closing div, ESLint directive for the unused
currentvalue, and trailing newline all improve code consistency. The ESLint disable is appropriate here since this demo focuses on illustrating custom configuration options rather than using the return value.Also applies to: 16-16, 22-22
apps/docs/src/data/components/offcanvas.data.ts (1)
22-265: LGTM! Comprehensive documentation improvements.The prop, emit, and slot descriptions are now much more detailed and helpful. All descriptions accurately reflect the TypeScript interface definitions and provide clear guidance on usage.
apps/docs/src/docs/migration-guide.md (1)
886-945: LGTM! Clear and comprehensive migration guidance.The BSideBar migration section thoroughly documents the rename to BOffcanvas and all related API changes. The guidance is well-organized and provides clear migration paths for deprecated props and events.
apps/docs/src/docs/components/demo/OffcanvasResponsive.vue (1)
3-6: LGTM! Clean responsive offcanvas demo.The demo clearly demonstrates the responsive behavior with appropriate title and responsive breakpoint props.
apps/docs/src/docs/components/demo/OffcanvasLocations.vue (1)
2-36: LGTM! Excellent accessibility improvements.The addition of
aria-controlsandaria-expandedattributes to all toggle buttons, along with theidon the offcanvas component, provides proper ARIA relationships for assistive technologies. The dynamic title based on placement is also a nice touch.apps/docs/src/docs/components/demo/OffcanvasBasic.vue (1)
1-22: LGTM! Clear basic offcanvas demo.This demo provides a straightforward example of basic offcanvas usage with appropriate content and styling.
apps/docs/src/docs/components/demo/OffcanvasNoHeader.vue (1)
4-30: LGTM! Excellent accessibility and slot usage example.This demo properly demonstrates the
no-headerprop with a custom header implementation. The use ofaria-labelledbypointing to the custom header title provides proper accessibility, and the scoped slot'shidefunction is correctly used for the close button.apps/docs/src/docs/components/demo/OffcanvasFooter.vue (1)
1-33: LGTM! Clean footer slot demonstration.The component effectively demonstrates the custom footer slot pattern with proper scoped slot usage and accessibility attributes.
apps/docs/src/docs/components/demo/OffcanvasSidebar.vue (2)
8-9: Excellent accessibility improvements!The addition of
aria-controlsand dynamicaria-expandedbindings properly connects the toggle buttons to their respective offcanvas components, enhancing screen reader support.Also applies to: 18-19
32-34: Good additions for accessibility and UX.The
idprops enable proper ARIA linkage from the toggle buttons, and thetitleprops provide clear labels for screen readers and visual users.Also applies to: 91-93
apps/docs/src/docs/components/offcanvas.md (1)
24-173: Comprehensive documentation additions.The expanded sections covering styling, slots, accessibility attributes, and visibility control provide thorough guidance for component usage.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
apps/docs/src/docs/migration-guide.md (1)
942-944: Clarify event migration guidance.The documentation states that the
changeevent is no longer emitted and suggests usingupdate:model-value. However, BootstrapVueNext typically emits additional lifecycle events (show,hide,shown,hidden). Consider adding a note that developers should use these lifecycle events in addition to or instead ofupdate:model-valuedepending on their use case, to align with the pattern documented in other component migrations (e.g., BModal at line 646+).apps/docs/src/docs/components/offcanvas.md (3)
146-146: Minor wording improvement: eliminate redundant phrasing.The phrase "outside of the offcanvas" contains redundant wording. Simplify to "outside the offcanvas" for clearer, more concise documentation.
-elements outside of the offcanvas. +elements outside the offcanvas.
177-182: SSR/responsive interaction note is clear but could reference composable pattern.The SSR limitation note correctly identifies that BOffcanvas must render client-side due to responsive behavior dependency. Consider cross-referencing the
useResponsivecomposable or similar as an alternative pattern for handling responsive logic, to provide developers with options beyond just client-only directives.
217-228: Implementation notes are helpful but slightly narrow in scope.The section covers SCSS/CSS requirements and utility classes but doesn't mention the dependency on the
v-b-toggledirective for proper accessibility (touched on in visibility control section). Consider adding a note here about the interaction between component styling and JavaScript behavior (focus management, backdrop handling) to help developers understand the full picture when implementing custom styling.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/docs/src/docs/components/demo/OffcanvasBorder.vue(1 hunks)apps/docs/src/docs/components/offcanvas.md(2 hunks)apps/docs/src/docs/migration-guide.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/src/docs/components/demo/OffcanvasBorder.vue
🧰 Additional context used
🧠 Learnings (11)
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/components/offcanvas.mdapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-06-26T19:46:19.333Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/offcanvas.md
📚 Learning: 2025-05-23T23:58:07.165Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Applied to files:
apps/docs/src/docs/components/offcanvas.mdapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/offcanvas.mdapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/offcanvas.md
📚 Learning: 2025-06-05T11:43:10.793Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/components/offcanvas.mdapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-05-28T07:01:55.095Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Applied to files:
apps/docs/src/docs/components/offcanvas.md
📚 Learning: 2025-04-24T20:35:48.629Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-10-21T01:11:59.901Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2861
File: apps/docs/src/docs/components/demo/CardKitchenSink.vue:28-31
Timestamp: 2025-10-21T01:11:59.901Z
Learning: In the bootstrap-vue-next docs codebase, the apps/docs/.vitepress/plugins/demo-container.ts plugin automatically generates kebab-case IDs from demo component filenames (e.g., CardKitchenSink.vue becomes id="card-kitchen-sink") and injects them into the HighlightCard wrapper elements. Therefore, demo components can use href="#kebab-case-filename" anchors without explicitly declaring the id attribute in the component template, as the id is generated at build time.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2866
File: apps/docs/src/docs/components/demo/ModalModel.vue:11-15
Timestamp: 2025-09-30T23:57:21.526Z
Learning: The bootstrap-vue-next documentation project uses unplugin-vue-components to automatically resolve and import Vue components like BModal, BButton, etc. Explicit imports for these components in script sections are not required.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Use Bootstrap 5.3.x as the base CSS framework
Applied to files:
apps/docs/src/docs/migration-guide.md
🪛 LanguageTool
apps/docs/src/docs/components/offcanvas.md
[grammar] ~56-~56: Ensure spelling is correct
Context: ...anvasVariant.vue ### Shadow Prefer an offcanvas with a backdrop shadow? Set the `shadow...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~84-~84: Use a hyphen to join words.
Context: ...n` prop. Note: The BootstrapVueNext defined transition effect of this compon...
(QB_NEW_EN_HYPHEN)
[grammar] ~112-~112: Ensure spelling is correct
Context: ...need to provide a method of closing the offcanvas. The default slot is scoped, which in...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~129-~129: Ensure spelling is correct
Context: ... not want the content rendered when the offcanvas is not visible. Simply set the lazy p...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~136-~136: Ensure spelling is correct
Context: ...rop (default behavior). When shown, the offcanvas will display an opaque backdrop. Clicki...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[grammar] ~145-~145: Ensure spelling is correct
Context: ...t will attempt to keep focus within the offcanvas. Note that in rare circumstances it mig...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[style] ~146-~146: This phrase is redundant. Consider using “outside”.
Context: ...ble for users to move focus to elements outside of the offcanvas. ## Visibility control ...
(OUTSIDE_OF)
[grammar] ~207-~207: Use a hyphen to join words.
Context: ...-close-on-backdrop` to disable the close on backdrop click feature. When the bac...
(QB_NEW_EN_HYPHEN)
[grammar] ~207-~207: Use a hyphen to join words.
Context: ...ose-on-backdrop` to disable the close on backdrop click feature. When the backdr...
(QB_NEW_EN_HYPHEN)
[grammar] ~207-~207: Use a hyphen to join words.
Context: ...ckdrop` to disable the close on backdrop click feature. When the backdrop is not...
(QB_NEW_EN_HYPHEN)
⏰ 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 (3)
apps/docs/src/docs/migration-guide.md (1)
886-893: Component name inconsistency in documentation section.The section title uses "BSideBar" but the content at line 888 uses "
BSidebar" (lowercase 'bar'). For consistency with bootstrap-vue-next's naming conventions, verify which form is the correct component name and apply consistently throughout this section.apps/docs/src/docs/components/offcanvas.md (2)
162-169: Strong accessibility guidance for manual v-model control.The documentation clearly and correctly outlines the manual accessibility steps required when using
v-modeldirectly (id, aria-controls, aria-expanded, title/aria-label). This aligns well with the PR's emphasis on accessibility and the toggle directive's role in automating these attributes. The guidance differentiates well between the recommended approach (toggle directive) and the manual approach.
193-216: Comprehensive accessibility guidance well-structured.The accessibility section provides thorough guidance on focus management (focus trap with
no-trapoverride), keyboard interaction (Esc key), ARIA attributes (aria-modal, aria-label, aria-labelledby), and special considerations for lazy rendering with hidden headers. This directly addresses the PR objectives regarding accessibility support for the toggle directive. The guidance is particularly strong in explaining when to usearia-labelvs.aria-labelledbyand the interaction with thelazyprop.
commit: |
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/docs/src/data/components/offcanvas.data.ts(2 hunks)apps/docs/src/docs/components/demo/OffcanvasBackdrop.vue(1 hunks)apps/docs/src/docs/migration-guide.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/src/docs/components/demo/OffcanvasBackdrop.vue
🧰 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 (11)
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to 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/
Applied to files:
apps/docs/src/data/components/offcanvas.data.ts
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to apps/docs/src/data/components/*.data.ts : Documentation format in .data.ts files must match TypeScript interfaces exactly (props, emits, slots definitions)
Applied to files:
apps/docs/src/data/components/offcanvas.data.ts
📚 Learning: 2025-06-05T11:43:10.793Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/migration-guide.md
📚 Learning: 2025-04-24T20:35:48.629Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-05-23T23:58:07.165Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-10-21T01:11:59.901Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2861
File: apps/docs/src/docs/components/demo/CardKitchenSink.vue:28-31
Timestamp: 2025-10-21T01:11:59.901Z
Learning: In the bootstrap-vue-next docs codebase, the apps/docs/.vitepress/plugins/demo-container.ts plugin automatically generates kebab-case IDs from demo component filenames (e.g., CardKitchenSink.vue becomes id="card-kitchen-sink") and injects them into the HighlightCard wrapper elements. Therefore, demo components can use href="#kebab-case-filename" anchors without explicitly declaring the id attribute in the component template, as the id is generated at build time.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2866
File: apps/docs/src/docs/components/demo/ModalModel.vue:11-15
Timestamp: 2025-09-30T23:57:21.526Z
Learning: The bootstrap-vue-next documentation project uses unplugin-vue-components to automatically resolve and import Vue components like BModal, BButton, etc. Explicit imports for these components in script sections are not required.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Use Bootstrap 5.3.x as the base CSS framework
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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 (1)
apps/docs/src/data/components/offcanvas.data.ts (4)
apps/docs/src/types/index.ts (2)
PropRecord(17-17)EmitRecord(30-30)packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
BOffcanvasProps(627-658)apps/docs/src/utils/showHideData.ts (1)
showHideEmits(4-93)packages/bootstrap-vue-next/src/types/ComponentEmits.ts (1)
BOffcanvasEmits(28-33)
🪛 LanguageTool
apps/docs/src/docs/migration-guide.md
[grammar] ~906-~906: Ensure spelling is correct
Context: ...landaria-labelbyaren't explicitly definided as props, but setting them on<BOffcan...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
⏰ 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 (3)
apps/docs/src/data/components/offcanvas.data.ts (2)
17-121: LGTM! Props metadata is comprehensive and accurate.The prop descriptions align well with the TypeScript interface definitions, and the picked props list correctly reflects the BOffcanvasProps surface area.
169-246: LGTM! Slot documentation is thorough and well-structured.The slot descriptions and scope definitions provide comprehensive guidance for developers using the Offcanvas component slots.
apps/docs/src/docs/migration-guide.md (1)
886-962: Comprehensive migration guidance for BSidebar → BOffcanvas.The migration documentation thoroughly covers the component rename, prop changes, deprecated features, and new functionality. This will help developers successfully migrate from Bootstrap Vue's BSidebar to Bootstrap 5's BOffcanvas naming convention.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/docs/src/docs/migration-guide.md (1)
904-908: Fix typo in the aria-* support section.Line 906 contains a typo: "definided" should be "defined".
Apply this diff:
-`aria-label` and `aria-labelby` aren't explicitly definided as props, but setting them +`aria-label` and `aria-labelby` aren't explicitly defined as props, but setting them
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/docs/src/data/components/offcanvas.data.ts(2 hunks)apps/docs/src/docs/components/demo/OffcanvasVariant.vue(1 hunks)apps/docs/src/docs/migration-guide.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/src/docs/components/demo/OffcanvasVariant.vue
🧰 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 (11)
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to apps/docs/src/data/components/*.data.ts : Documentation format in .data.ts files must match TypeScript interfaces exactly (props, emits, slots definitions)
Applied to files:
apps/docs/src/data/components/offcanvas.data.ts
📚 Learning: 2025-06-05T11:43:10.793Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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-04-24T20:35:48.629Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-18T18:20:08.240Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2777
File: packages/bootstrap-vue-next/CHANGELOG.md:11-11
Timestamp: 2025-08-18T18:20:08.240Z
Learning: For PR #2777 (BSort updates), keep changes scoped to BTable sorting work; unrelated edits like CHANGELOG typos should be deferred to a separate PR/issue.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-10-21T01:11:59.901Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2861
File: apps/docs/src/docs/components/demo/CardKitchenSink.vue:28-31
Timestamp: 2025-10-21T01:11:59.901Z
Learning: In the bootstrap-vue-next docs codebase, the apps/docs/.vitepress/plugins/demo-container.ts plugin automatically generates kebab-case IDs from demo component filenames (e.g., CardKitchenSink.vue becomes id="card-kitchen-sink") and injects them into the HighlightCard wrapper elements. Therefore, demo components can use href="#kebab-case-filename" anchors without explicitly declaring the id attribute in the component template, as the id is generated at build time.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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/migration-guide.md
📚 Learning: 2025-05-23T23:58:07.165Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Use Bootstrap 5.3.x as the base CSS framework
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 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
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2866
File: apps/docs/src/docs/components/demo/ModalModel.vue:11-15
Timestamp: 2025-09-30T23:57:21.526Z
Learning: The bootstrap-vue-next documentation project uses unplugin-vue-components to automatically resolve and import Vue components like BModal, BButton, etc. Explicit imports for these components in script sections are not required.
Applied to files:
apps/docs/src/docs/migration-guide.md
🧬 Code graph analysis (1)
apps/docs/src/data/components/offcanvas.data.ts (4)
apps/docs/src/types/index.ts (2)
PropRecord(17-17)EmitRecord(30-30)packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
BOffcanvasProps(627-658)apps/docs/src/utils/showHideData.ts (1)
showHideEmits(4-93)packages/bootstrap-vue-next/src/types/ComponentEmits.ts (1)
BOffcanvasEmits(28-33)
⏰ 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 (3)
apps/docs/src/data/components/offcanvas.data.ts (3)
17-121: LGTM! Props definitions are comprehensive and accurate.The props section properly documents all BOffcanvas properties with clear descriptions, correct types, and appropriate defaults. The picked props match the BOffcanvasProps interface, and the enhanced descriptions (especially for bodyScrolling, headerCloseLabel, headerCloseVariant, noCloseOnBackdrop, noCloseOnEsc, responsive, shadow, teleportDisabled, teleportTo, and width) improve developer understanding.
As per coding guidelines.
122-172: LGTM! Emits documentation is complete and consistent.All emits are properly documented with clear descriptions and argument types that match the BOffcanvasEmits interface. The backdrop emit (lines 164-172) now correctly documents its BvTriggerableEvent argument, resolving the issue flagged in the previous review.
As per coding guidelines.
174-251: LGTM! Slots documentation is well-structured and complete.The slots section provides clear descriptions for all six BOffcanvas slots. The scoped slots (title, default, footer, header) consistently expose the same scope properties (visible, placement, hide) with accurate types and descriptions. The non-scoped slots (backdrop, header-close) correctly specify empty scopes.
As per coding guidelines.
|
@dwgray I'm remembering I did some aria stuff directly in showHide: bootstrap-vue-next/packages/bootstrap-vue-next/src/composables/useShowHide.ts Lines 346 to 379 in f14f049 Maybe there is some disconnect in these and all the aria related stuff should be in there and not in the directive? |
* 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) ...
3 participants
Describe the PR
Small replication
See the docs
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
Documentation
New Examples
Chores