Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Sep 2, 2025

  • Add headerAttrs prop to BOffcanvas and BModal components
  • Add comprehensive tests for headerAttrs functionality
  • Analyze comment feedback about missing documentation data
  • Add headerAttrs to modal.data.ts documentation
  • Add headerAttrs to offcanvas.data.ts documentation
  • Validate documentation build works properly
  • Fix linting issues and ensure all tests pass

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Summary by CodeRabbit

  • New Features
    • Modal and Offcanvas now support a headerAttrs prop to pass arbitrary HTML attributes to their header elements. Works alongside existing headerClass. No behavioral changes.
  • Tests
    • Added tests covering attribute application, absence when undefined, interaction with headerClass, and cases with noHeader.
  • Documentation
    • Updated component documentation to include the new headerAttrs prop with description and defaults.

Copy link

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

Co-authored-by: VividLemon <31498096+VividLemon@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] Best way to apply data-bs-theme="dark" to an inner element (e.g. offcanvas-header) Add headerAttrs prop to BOffcanvas and BModal components Sep 2, 2025
@Copilot Copilot AI requested a review from VividLemon September 2, 2025 18:16
Copilot finished work on behalf of VividLemon September 2, 2025 18:16
@VividLemon
Copy link
Member

@copilot You need to add the new props to the .data.ts files in the documentation as it will not build properly without them

Co-authored-by: VividLemon <31498096+VividLemon@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Sep 3, 2025

@copilot You need to add the new props to the .data.ts files in the documentation as it will not build properly without them

Added headerAttrs prop definitions to both modal.data.ts and offcanvas.data.ts documentation files. The build now works properly without any issues. Changes committed in 7fd6679.

Copilot finished work on behalf of VividLemon September 3, 2025 18:25
@VividLemon VividLemon marked this pull request as ready for review September 3, 2025 18:26
Copy link

coderabbitai bot commented Sep 3, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

Adds an optional headerAttrs prop to BModal and BOffcanvas, threads it through type definitions, components, and docs data, and binds it to the header elements. Introduces unit tests validating attribute passthrough, interaction with headerClass, absence when undefined, and noHeader behavior.

Changes

Cohort / File(s) Summary
Types: public props
packages/bootstrap-vue-next/src/types/ComponentProps.ts
Adds headerAttrs?: Readonly<AttrsValue> to BModalProps and BOffcanvasProps.
Modal component
packages/bootstrap-vue-next/src/components/BModal/BModal.vue
Adds headerAttrs prop (default undefined) and binds it to the header element via v-bind="props.headerAttrs".
Offcanvas component
packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
Adds headerAttrs prop (default undefined) and binds it to the header element via v-bind="props.headerAttrs".
Modal tests
packages/bootstrap-vue-next/src/components/BModal/modal-header-attrs.spec.ts
New tests covering header attribute passthrough, interaction with headerClass, absence when undefined, and noHeader case using teleport setup.
Offcanvas tests
packages/bootstrap-vue-next/src/components/BOffcanvas/offcanvas-header-attrs.spec.ts
New tests mirroring Modal cases for Offcanvas with teleport setup.
Docs data: Modal
apps/docs/src/data/components/modal.data.ts
Adds headerAttrs to BModal props dataset with type Readonly<AttrsValue>, default undefined, and description.
Docs data: Offcanvas
apps/docs/src/data/components/offcanvas.data.ts
Adds headerAttrs to BOffcanvas props dataset with type Readonly<AttrsValue>, default undefined, and description.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant App as App
  participant Modal as BModal
  participant DOM as DOM Header

  App->>Modal: mount with { headerAttrs, headerClass, noHeader }
  alt noHeader = true
    Modal-->>App: do not render header
  else noHeader = false
    Modal->>DOM: render header with class + v-bind(headerAttrs)
    Note right of DOM: Attributes from headerAttrs applied<br/>(e.g., id, data-*)
  end
Loading
sequenceDiagram
  autonumber
  participant App as App
  participant Offcanvas as BOffcanvas
  participant DOM as DOM Header

  App->>Offcanvas: mount with { headerAttrs, headerClass, noHeader }
  alt noHeader = true
    Offcanvas-->>App: do not render header
  else
    Offcanvas->>DOM: render header with class + v-bind(headerAttrs)
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A rabbit taps keys with delicate care,
Whispering attrs to headers laid bare.
Modals and canvas now don their flair,
data-* sparkles float in the air.
Tests hop and nod—“it’s all in the clear!” 🐇✨


📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 26dd7e2 and 7fd6679.

📒 Files selected for processing (7)
  • apps/docs/src/data/components/modal.data.ts (1 hunks)
  • apps/docs/src/data/components/offcanvas.data.ts (1 hunks)
  • packages/bootstrap-vue-next/src/components/BModal/BModal.vue (3 hunks)
  • packages/bootstrap-vue-next/src/components/BModal/modal-header-attrs.spec.ts (1 hunks)
  • packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue (2 hunks)
  • packages/bootstrap-vue-next/src/components/BOffcanvas/offcanvas-header-attrs.spec.ts (1 hunks)
  • packages/bootstrap-vue-next/src/types/ComponentProps.ts (2 hunks)
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch copilot/fix-2828

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@VividLemon
Copy link
Member

@coderabbitai review

Copy link

coderabbitai bot commented Sep 3, 2025

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link

pkg-pr-new bot commented Sep 3, 2025

bsvn-vite-ts

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

commit: 7fd6679

@VividLemon VividLemon merged commit 59d1e80 into main Sep 3, 2025
7 of 8 checks passed
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.

2 participants