feat: implement BFormRating disabled state (#2753) #2793

FarzanZaheer · 2025-07-29T21:48:35Z

Describe the PR

Implemented the BFormRating component disabled state and updated the docs accordingly.

Contributor: Farzan Zaheer - https://github.com/farzanzaheer

PR checklist

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

The PR fulfills these requirements:

Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied

Summary by CodeRabbit

New Features
- Added an option to disable the rating component, preventing user interaction and showing a disabled state.
- Added a live demo showing the disabled rating.
Style
- Updated styles to visually reflect the disabled state and disable hover/cursor interactions for icons.
Bug Fixes
- Disabled state now blocks keyboard and mouse interactions.
Documentation
- Replaced placeholder with the disabled-rating demo.
Tests
- Added a test to verify the disabled state is applied.

bolt-new-by-stackblitz · 2025-07-29T21:48:38Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-07-29T21:48:46Z

Walkthrough

A new disabled prop was added to the BFormRating component and propagated to types, SCSS, docs, demo, and tests. The prop gates interactions (keyboard, click, clear) and adds an is-disabled CSS state to render and style the component as disabled.

Changes

Cohort / File(s)	Change Summary
Component Prop & Logic Update `packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue`, `packages/bootstrap-vue-next/src/types/ComponentProps.ts`, `apps/docs/src/data/components/FormRating.data.ts`	Added `disabled` prop to component and types; integrated checks to prevent selection/keyboard/clear actions and add `is-disabled` class.
Styling for Disabled State `packages/bootstrap-vue-next/src/components/BFormRating/_form-rating.scss`, `apps/docs/src/docs/components/demo/RatingCustomIcon.vue`	Added `.is-disabled` styles: secondary colors, disabled hover behavior, and cursor changes for stars and clear icon; updated demo CSS to target `.is-disabled`.
Testing `packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts`	Added test asserting `is-disabled` class is present when `disabled` prop is true.
Documentation & Demo `apps/docs/src/docs/components/form-rating.md`, `apps/docs/src/docs/components/demo/RatingDisabled.vue`	Replaced placeholder with `RatingDisabled.vue` demo and added a live example showing a disabled `BFormRating` bound to a reactive value.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant BFormRating
    participant UI

    User->>BFormRating: attempt interaction (click/keyboard/clear)
    alt BFormRating.disabled or BFormRating.readonly
        BFormRating-->>User: ignore interaction (no state change)
        BFormRating-->>UI: ensure `is-disabled` visual state applied
    else enabled
        BFormRating->>BFormRating: update rating state
        BFormRating-->>UI: render active stars / update value
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

feat: implement BFormRating component #2744: Changes to the same BFormRating component; likely prior work introducing or modifying rating behaviors.
feat(BFormRating): added icon-clear slot #2809: Related edits around clear-button behavior and tests for BFormRating (icon-clear slot and clear logic).

Suggested reviewers

dwgray

Poem

"I nibble code and hop with glee,
Stars that rest — now trouble-free.
Disabled silence, soft and bright,
No more clicks in quiet night.
Hop on, dear devs, the demo's right!" 🐇✨

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

📜 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 0150300 and f46b5d4.

📒 Files selected for processing (4)

apps/docs/src/data/components/FormRating.data.ts (1 hunks)
apps/docs/src/docs/components/form-rating.md (1 hunks)
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts (1 hunks)
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue (6 hunks)

🚧 Files skipped from review as they are similar to previous changes (4)

apps/docs/src/docs/components/form-rating.md
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
apps/docs/src/data/components/FormRating.data.ts

⏰ 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

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

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

pkg-pr-new · 2025-08-26T14:51:59Z

bsvn-vite-ts

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

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

commit: f46b5d4

* upstream/main: (32 commits) chore: release main (bootstrap-vue-next#2838) feat(BButtonToolbar): Add keyboard navigation support (bootstrap-vue-next#2837) fix(BFormSelect): modelValue not being applied during SSR (bootstrap-vue-next#2835) feat(BTable): Implement keyboard navigation (bootstrap-vue-next#2834) fix: BOffcanvas responsive SSR compatibility - defer breakpoint evaluation to client-side (bootstrap-vue-next#2833) chore: release main (bootstrap-vue-next#2831) fix(BDropdown): transition broken by inline display styles (bootstrap-vue-next#2832) feat: change useColorMode selector from 'body' to 'html' (bootstrap-vue-next#2830) chore: release main (bootstrap-vue-next#2817) feat: Add headerAttrs prop to BOffcanvas and BModal components docs: Add useScrollspy documentation fix: Remove lazy-modifier warning on FormInput docs (bootstrap-vue-next#2825) feat(BSort)!: Implement initial-sort-direction and move compare from sort-by to fields (bootstrap-vue-next#2777) docs(table): fix incorrect list item (bootstrap-vue-next#2823) docs: Fix grammar in documentation data files (bootstrap-vue-next#2816) doc(BTooltip): Parity pass (bootstrap-vue-next#2762) docs(BOverlay): Parity pass (bootstrap-vue-next#2767) feat: implement BFormRating disabled state (bootstrap-vue-next#2753) (bootstrap-vue-next#2793) docs: fix otp for index and reference pages (bootstrap-vue-next#2819) docs(BApp): add some additional details around legacy plugin use (bootstrap-vue-next#2820) ...

feat: implement BFormRating disabled state (bootstrap-vue-next#2753)

0150300

Merge branch 'main' into main

f46b5d4

VividLemon approved these changes Aug 26, 2025

View reviewed changes

VividLemon merged commit d837222 into bootstrap-vue-next:main Aug 26, 2025
5 checks passed

github-actions bot mentioned this pull request Aug 26, 2025

chore: release main #2817

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: implement BFormRating disabled state (#2753) #2793

feat: implement BFormRating disabled state (#2753) #2793

Uh oh!

FarzanZaheer commented Jul 29, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

bolt-new-by-stackblitz bot commented Jul 29, 2025

Uh oh!

coderabbitai bot commented Jul 29, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Status, Documentation and Community

Uh oh!

pkg-pr-new bot commented Aug 26, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

feat: implement BFormRating disabled state (#2753) #2793

feat: implement BFormRating disabled state (#2753) #2793

Uh oh!

Conversation

FarzanZaheer commented Jul 29, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe the PR

PR checklist

Summary by CodeRabbit

Uh oh!

bolt-new-by-stackblitz bot commented Jul 29, 2025

Uh oh!

coderabbitai bot commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

pkg-pr-new bot commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

FarzanZaheer commented Jul 29, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jul 29, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

pkg-pr-new bot commented Aug 26, 2025 •

edited

Loading