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 a new option to disable the rating component, preventing user interaction and visually indicating the disabled state.
- Introduced a live demo showcasing the disabled rating component in the documentation.
Style
- Updated styles to visually reflect the disabled state for the rating component and its icons.
Bug Fixes
- Disabled state now correctly prevents keyboard and mouse interactions.
Documentation
- Replaced placeholder with an actual demo for the disabled rating feature.
Tests
- Added a test to verify the disabled state is applied correctly.

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 disabled prop was added to the BFormRating component, affecting its logic, props, styles, and documentation. The change ensures the component visually and functionally supports a disabled state, with updated tests, SCSS, demo components, and documentation reflecting this new feature.

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 `BFormRating` component and its type definitions; integrated prop into component logic to prevent interaction and update visual state.
Styling for Disabled State `packages/bootstrap-vue-next/src/components/BFormRating/_form-rating.scss`, `apps/docs/src/docs/components/demo/RatingCustomIcon.vue`	Updated SCSS and demo styles to reflect disabled state, including color changes, cursor updates, and disabling hover effects when disabled.
Testing `packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts`	Added a test to verify the component applies the `is-disabled` class when the `disabled` prop is set.
Documentation & Demo `apps/docs/src/docs/components/form-rating.md`, `apps/docs/src/docs/components/demo/RatingDisabled.vue`	Replaced placeholder with a live disabled demo and added a new demo Vue component showcasing the disabled rating.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant BFormRating
    participant UI

    User->>BFormRating: Tries to interact (click/star/clear)
    alt disabled or readonly
        BFormRating-->>User: Ignore interaction
        BFormRating-->>UI: Show disabled visual state
    else enabled
        BFormRating->>BFormRating: Update rating
        BFormRating-->>UI: Update active star(s)
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15 minutes

Possibly related PRs

bootstrap-vue-next/bootstrap-vue-next#2744: Introduced the original BFormRating component; this PR extends it by adding the disabled prop and related logic.

Suggested reviewers

dwgray

Poem

In the garden of stars, a bunny once wrote,
"Now ratings can rest, no need to emote!
With a click or a tap, the stars stay still—
Disabled and quiet, by the devs' skilled will.
So hop along, testers, and give it a try—
The stars take a nap, as the users pass by!"
🐇✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fc3e71a and 0150300.

📒 Files selected for processing (8)

apps/docs/src/data/components/FormRating.data.ts (1 hunks)
apps/docs/src/docs/components/demo/RatingCustomIcon.vue (1 hunks)
apps/docs/src/docs/components/demo/RatingDisabled.vue (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)
packages/bootstrap-vue-next/src/components/BFormRating/_form-rating.scss (4 hunks)
packages/bootstrap-vue-next/src/types/ComponentProps.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (8)

📓 Common learnings

Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#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.

apps/docs/src/docs/components/form-rating.md (1)

Learnt from: dwgray
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.

packages/bootstrap-vue-next/src/types/ComponentProps.ts (3)

Learnt from: xvaara
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.

Learnt from: dwgray
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.

Learnt from: VividLemon
PR: #2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the useBLinkTagResolver function in packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts, the routerComponentName parameter is required and typed as MaybeRefOrGetter<string>, ensuring it cannot be undefined.

packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts (1)

Learnt from: dwgray
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.

apps/docs/src/docs/components/demo/RatingCustomIcon.vue (2)

Learnt from: unstoppablecarl
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.

Learnt from: dwgray
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.

apps/docs/src/docs/components/demo/RatingDisabled.vue (1)

Learnt from: dwgray
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.

packages/bootstrap-vue-next/src/components/BFormRating/_form-rating.scss (1)

Learnt from: unstoppablecarl
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.

packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue (3)

Learnt from: dwgray
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.

Learnt from: xvaara
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.

Learnt from: xvaara
PR: #2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.

🔇 Additional comments (17)

packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)

364-364: LGTM! Consistent with existing form component patterns.

The addition of the disabled prop to the BFormRatingProps interface follows the same pattern used by other form components in this file, maintaining consistency across the codebase.

apps/docs/src/docs/components/form-rating.md (1)

97-97: LGTM! Proper replacement of placeholder with live demo.

The replacement of <NotYetImplemented /> with the actual demo component is appropriate and follows the established pattern used throughout the documentation file.

packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts (1)

19-22: LGTM! Well-structured test following established patterns.

The test correctly verifies that the is-disabled CSS class is applied when the disabled prop is true, following the same pattern as the existing readonly test and maintaining consistency with the component's class-based state management approach.

apps/docs/src/data/components/FormRating.data.ts (1)

46-50: LGTM! Proper property definition following established patterns.

The disabled property definition correctly follows the same structure and conventions used by other boolean properties in the file, with appropriate type, default value, and description.

apps/docs/src/docs/components/demo/RatingDisabled.vue (1)

1-13: LGTM! Well-structured demo component following Vue 3 best practices.

The demo component effectively showcases the disabled rating functionality with:

Proper label-input association using for and id attributes

Modern Vue 3 Composition API with <script setup> and TypeScript

Good choice of initial value (2.75) to demonstrate fractional ratings in disabled state

Clean, focused implementation that clearly demonstrates the feature

apps/docs/src/docs/components/demo/RatingCustomIcon.vue (2)

65-68: LGTM! Proper disabled state styling for custom icons.

The disabled state styling correctly uses Bootstrap's secondary color variable and sets the cursor to default, providing clear visual feedback that the custom icons are non-interactive when the rating is disabled.

70-72: LGTM! Correctly excludes disabled state from hover effects.

The hover selector properly excludes both readonly and disabled states from the scaling animation, ensuring that disabled custom icons don't provide interactive feedback on hover.

packages/bootstrap-vue-next/src/components/BFormRating/_form-rating.scss (4)

17-20: LGTM! Proper disabled state styling for the rating container.

The disabled state styling correctly uses Bootstrap's secondary color variables (--bs-secondary and --bs-secondary-bg) and follows Bootstrap's established patterns for disabled form controls.

30-32: LGTM! Correctly excludes disabled state from clear icon hover effects.

The hover selector properly excludes both readonly and disabled states from the scaling animation, ensuring consistent non-interactive behavior when the component is disabled.

41-44: LGTM! Consistent cursor styling for disabled stars.

The disabled state cursor styling correctly mirrors the readonly implementation, ensuring stars appear non-interactive with cursor: default when the component is disabled.

64-66: LGTM! Correctly excludes disabled state from star hover effects.

The hover selector properly excludes both readonly and disabled states from the star SVG scaling animation, maintaining consistent behavior across all interactive elements in the disabled state.

packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue (6)

14-14: LGTM! Proper conditional rendering for clear button in disabled state.

The clear button is correctly hidden when the component is disabled, preventing user interaction while maintaining existing behavior for the showClear and readonly props.

90-90: LGTM! Appropriate default value for disabled prop.

The default value of false for the disabled prop is correct, ensuring the component is enabled by default and follows Vue.js conventions for boolean props.

104-104: LGTM! Proper CSS class computation for disabled state.

The 'is-disabled' class is correctly added to the computed classes when the disabled prop is true, following the same pattern as the existing 'is-readonly' implementation.

172-174: LGTM! Proper precedence for disabled state in icon colors.

The disabled state correctly takes precedence over variant and color props, ensuring consistent visual feedback when the component is disabled. The 'is-disabled' class provides appropriate styling hooks.

187-187: LGTM! Proper disabled state handling for keyboard events.

The keyboard event handler correctly prevents interaction when the component is disabled, maintaining accessibility standards and consistent behavior with the readonly state.

209-209: LGTM! Proper disabled state handling for rating selection.

The selectRating function correctly prevents interaction when the component is disabled, ensuring consistent non-interactive behavior across all user input methods (mouse, touch, keyboard).

✨ 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.
- Explain this complex logic.
- 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. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
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 src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

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

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

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

Documentation and Community

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.

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

0150300

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

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 comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

Uh oh!

Uh oh!

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

Are you sure you want to change the base?

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

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 comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

FarzanZaheer commented Jul 29, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jul 29, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)