feat: implement BFormRating component #2744
Conversation
Co-authored-by: Will Castillo william.castillo.jr@outlook.com
- Introduce `clampedStars` computed to ensure at least 3 stars are always rendered - Replace all `props.stars` usages with `clampedStars.value` in template and computed icon logic - Add `showValue` and `ShowValueMax` props, plus `displayValueText` computed, to render “current” or “current/max” next to stars - Wire `showValue`/`ShowValueMax` into a single `<span>` for value output
- Add `BFormRating: '/components/BFormRating'` to `componentsWithExternalPath` in BootstrapVueOptions.ts
- Add variant props for customization - Modify iconColor for only 1 color support instead of 2
- Support `size="sm" | "lg"` keywords with `computedSize`, plus custom CSS units - Update `displayValueText` to handle `showValue`, `showValueMax`, and `precision` (0–n decimals) - Compute `roundedValue` based on `precision` prop - Compute `iconColors` array to apply Bootstrap `variant` classes or inline custom `color` - Update template to bind `computedSize`, `iconColors`, and `displayValueText`
…states, sizing, colors, and value display
Create unit test file for new BFormRating component
- Add `FormRating.data.ts` with prop metadata for BFormRating - Create `form-rating.md` page with overview, usage examples and API table - Update `TableOfContentsNav.vue` to include the new Form Rating section - Add demo components for all features: - `RatingInteractive.vue` (interactive mode) - `RatingNonInteractive.vue` (readonly mode) - `RatingPrecision.vue` (precision) - `RatingStars.vue` (custom star count) - `RatingSizing.vue` (size presets) - `RatingValue.vue` (show-value) - `RatingValueMax.vue` (show-value-max) - `RatingVariant.vue` (Bootstrap variants) - `RatingCustomColor.vue` (custom color)
docs(form-rating): add documentation, data file & live demos
- Add margin for the star icon. - Change sizing for 'lg', 'md' to fit Bootstrap convention.
…proved accessibility. Removed hover state logic and added tabindex for better interaction. Updated styles for star icons on hover.
…for testing - Implemented clear button to reset rating - Added corresponding styles in _form-rating.scss - Developed unit tests for new functionalities - Expose hoverValue for testing
Clear button and Merge branch 'bootstrap-vue-next:main' into clear-button
Added noBorder prop to BFormRating with SCSS border styling and unit tests
|
|
WalkthroughThis change introduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BFormRating
participant ParentComponent
User->>BFormRating: Clicks or hovers on a star
BFormRating->>BFormRating: Updates internal hoverValue or modelValue
BFormRating-->>User: Visually updates stars (full/half/empty)
BFormRating-->>ParentComponent: Emits update:modelValue (on click)
User->>BFormRating: Uses keyboard (arrow keys)
BFormRating->>BFormRating: Adjusts rating value accordingly
BFormRating-->>ParentComponent: Emits update:modelValue (on keyboard change)
User->>BFormRating: Clicks clear button (if shown)
BFormRating->>BFormRating: Resets rating to zero
BFormRating-->>ParentComponent: Emits update:modelValue (0)
Assessment against linked issues
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 16
🧹 Nitpick comments (7)
packages/bootstrap-vue-next/src/components/BFormRating/_form-rating.scss (1)
24-32: Consider accessibility implications of the hover scale effect.The clear icon scale transform on hover provides good visual feedback, but the 2x scale might be too aggressive and could cause layout shifts or accessibility issues for users with vestibular disorders.
Consider reducing the scale or using a different hover effect:
.clear-icon:hover { - transform: scale(2); + transform: scale(1.2); }Alternatively, consider using opacity or color changes instead of scale transforms.
packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
356-368: Consider improving type safety for specific props.The interface looks comprehensive and follows established patterns. However, some props could benefit from more specific types for better type safety:
export interface BFormRatingProps { color?: string modelValue?: number noBorder?: boolean precision?: number readonly?: boolean showClear?: boolean showValue?: boolean showValueMax?: boolean - size?: string + size?: 'sm' | 'lg' | string stars?: number - variant?: string + variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | string }This would provide better IntelliSense and type checking while still allowing custom values.
apps/playground/src/components/Comps/TFormRating.vue (1)
1-1: Correct the file path comment.The comment shows the wrong file path - this should reference the playground app, not the main package.
-<!-- packages/bootstrap-vue-next/src/App.vue --> +<!-- apps/playground/src/components/Comps/TFormRating.vue -->packages/bootstrap-vue-next/src/App.vue (2)
3-5: Simplify boolean prop usageUsing
:no-border="false"is redundant when false is the default value. Also, be consistent with prop usage.- <BFormRating v-model="valDefault" :no-border="false" /> + <BFormRating v-model="valDefault" />Also applies to: 7-9
43-43: Fix inconsistent heading numberingThe heading jumps from "6. Custom Color" to "14. SVG stars". Consider using sequential numbering.
- <h2>14. SVG stars</h2> + <h2>7. SVG stars</h2>apps/docs/src/docs/components/form-rating.md (1)
53-53: Add missing commas for better readabilityLine 53:
-By default `<BFormRating>` does not display the current numerical value. +By default, `<BFormRating>` does not display the current numerical value.Line 66:
-Optionally show the maximum rating possible by also setting the prop `show-value-max` to `true`: +Optionally, show the maximum rating possible by also setting the prop `show-value-max` to `true`:Line 80:
-By default, `<BFormRating>` occupies 100% width of the parent container. In some situations you +By default, `<BFormRating>` occupies 100% width of the parent container. In some situations, youAlso applies to: 66-66, 80-80
🧰 Tools
🪛 LanguageTool
[uncategorized] ~53-~53: Did you mean: “By default,”?
Context: ..../demo/RatingStars.vue ### Show value By default<BFormRating>does not display the cu...(BY_DEFAULT_COMMA)
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue (1)
183-204: Add half-star keyboard navigation supportThe mouse interaction supports half-star selection, but keyboard navigation only supports whole numbers. This creates an inconsistent user experience.
Consider adding modifier keys for half-star increments:
case 'ArrowRight': case 'ArrowUp': - newValue = Math.min(newValue + 1, clampedStars.value) + newValue = Math.min(newValue + (e.shiftKey ? 0.5 : 1), clampedStars.value) break case 'ArrowLeft': case 'ArrowDown': - newValue = Math.max(newValue - 1, 0) + newValue = Math.max(newValue - (e.shiftKey ? 0.5 : 1), 0) break
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (24)
apps/docs/src/components/TableOfContentsNav.vue(1 hunks)apps/docs/src/data/components/FormRating.data.ts(1 hunks)apps/docs/src/docs/components/demo/RatingCustomColor.vue(1 hunks)apps/docs/src/docs/components/demo/RatingInteractive.vue(1 hunks)apps/docs/src/docs/components/demo/RatingNonInteractive.vue(1 hunks)apps/docs/src/docs/components/demo/RatingPrecision.vue(1 hunks)apps/docs/src/docs/components/demo/RatingReadOnly.vue(1 hunks)apps/docs/src/docs/components/demo/RatingSizing.vue(1 hunks)apps/docs/src/docs/components/demo/RatingStars.vue(1 hunks)apps/docs/src/docs/components/demo/RatingValue.vue(1 hunks)apps/docs/src/docs/components/demo/RatingValueMax.vue(1 hunks)apps/docs/src/docs/components/demo/RatingVariant.vue(1 hunks)apps/docs/src/docs/components/form-rating.md(1 hunks)apps/playground/src/Views/HomePage.vue(3 hunks)apps/playground/src/components/Comps/TFormRating.vue(1 hunks)packages/bootstrap-vue-next/src/App.vue(1 hunks)packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts(1 hunks)packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue(1 hunks)packages/bootstrap-vue-next/src/components/BFormRating/_form-rating.scss(1 hunks)packages/bootstrap-vue-next/src/components/BFormRating/index.ts(1 hunks)packages/bootstrap-vue-next/src/components/index.ts(1 hunks)packages/bootstrap-vue-next/src/styles/styles.scss(2 hunks)packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts(2 hunks)packages/bootstrap-vue-next/src/types/ComponentProps.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts (2)
packages/bootstrap-vue-next/src/types/Props.ts (1)
ComponentProps(9-11)packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
BFormRatingProps(356-368)
🪛 GitHub Actions: ci
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts
[error] 47-47: Unit test failure: AssertionError - expected 1 to be null (Object.is equality) in test 'sets hoverValue on mousemove and clears on mouseleave'.
apps/docs/src/data/components/FormRating.data.ts
[error] 63-63: TypeScript error TS2353: Object literal may only specify known properties, and 'iconFull' does not exist in type 'Record<keyof BFormRatingProps, PropertyReference>'.
🪛 LanguageTool
apps/docs/src/docs/components/form-rating.md
[grammar] ~15-~15: The verb after “to” should be in the base form as part of the to-infinitive. A verb can take many forms, but the base form is always used in the to-infinitive.
Context: ...y. Interactive mode allows the user to chose a rating from 1 to the number of stars ...
(TO_NON_BASE)
[uncategorized] ~53-~53: Did you mean: “By default,”?
Context: ..../demo/RatingStars.vue ### Show value By default <BFormRating> does not display the cu...
(BY_DEFAULT_COMMA)
[uncategorized] ~66-~66: Possible missing comma found.
Context: ...Precision.vue #### Show maximum value Optionally show the maximum rating possible by als...
(AI_HYDRA_LEO_MISSING_COMMA)
[typographical] ~80-~80: It appears that a comma is missing.
Context: ... width of the parent container. In some situations you may prefer the custom input to occu...
(DURING_THAT_TIME_COMMA)
[uncategorized] ~81-~81: Did you mean “its” (the possessive pronoun)?
Context: ...put to occupy on the space required for it's contents. Simply set the inline prop ...
(ITS_PREMIUM)
🔇 Additional comments (28)
packages/bootstrap-vue-next/src/components/index.ts (1)
18-18: Export BFormRating component
The newexport * from './BFormRating'aligns with existing exports and is correctly positioned alphabetically betweenBFormRadioandBFormSelect.apps/docs/src/docs/components/demo/RatingValue.vue (2)
2-4: Demo: Reactive rating display
The template correctly bindsratingwithv-modeland displays its value using theshow-valueprop.
8-9: Initialize reactive rating state
Usingconst rating = ref(4)sets the initial rating as intended.apps/docs/src/components/TableOfContentsNav.vue (1)
121-121: Register Form Rating in navigation
Adding{name: 'Form Rating'}ensures the component appears in the docs navigation. The route generator will resolve to/docs/components/form-rating.packages/bootstrap-vue-next/src/components/BFormRating/index.ts (1)
1-1: Re-export BFormRating component
This matches the pattern for other components and makesBFormRatingavailable for import via its folder.apps/docs/src/docs/components/demo/RatingInteractive.vue (1)
1-10: LGTM! Clean and effective demo.The implementation correctly demonstrates the basic interactive functionality of BFormRating with proper v-model binding and reactive state management.
apps/docs/src/docs/components/demo/RatingReadOnly.vue (1)
1-9: LGTM! Excellent accessibility and readonly demo.The implementation properly demonstrates readonly functionality with good accessibility practices using the label/id relationship and showcases the precision feature effectively.
apps/docs/src/docs/components/demo/RatingValueMax.vue (1)
1-9: LGTM! Effective demonstration of max value display.The implementation correctly showcases the show-value-max feature with appropriate precision settings and clean reactive state management.
apps/docs/src/docs/components/demo/RatingPrecision.vue (1)
1-10: LGTM! Clear precision feature demonstration.The implementation effectively demonstrates the precision feature with appropriate prop usage and clean reactive state management.
apps/docs/src/docs/components/demo/RatingSizing.vue (1)
14-17: LGTM! Clean component setup.The script setup correctly uses the Composition API with TypeScript and proper reactive state management.
apps/docs/src/docs/components/demo/RatingNonInteractive.vue (1)
1-11: Clean demo implementation for readonly rating functionality.The component effectively demonstrates the non-interactive mode of BFormRating with a floating-point initial value, showcasing precision handling in readonly state.
apps/docs/src/docs/components/demo/RatingStars.vue (1)
1-16: Excellent demonstration of custom star counts.The component properly showcases the flexibility of the
starsprop with separate state management for each rating instance. The labeling and spacing enhance the user experience.apps/docs/src/docs/components/demo/RatingVariant.vue (1)
1-15: Effective demonstration of Bootstrap variants.The shared v-model across all rating instances is a smart design choice for this demo, allowing users to see how different variants render the same value simultaneously.
apps/playground/src/Views/HomePage.vue (3)
73-73: Proper component import following established patterns.The TFormRating import is correctly placed in alphabetical order within the form components section.
116-116: Consistent component registration.The FormRating entry follows the established naming convention and structure used by other form components in the playground.
161-162: Appropriate ESLint disable for ternary expression pattern.The ESLint disable comment is correctly applied to the existing pattern used throughout the codebase for toggling component activation.
apps/docs/src/docs/components/demo/RatingCustomColor.vue (1)
1-4: Excellent demonstration of color format flexibility.The component effectively showcases support for various color formats (named, hex, RGB, RGBA) with a shared model that allows easy comparison of visual differences.
Also applies to: 6-13
packages/bootstrap-vue-next/src/components/BFormRating/_form-rating.scss (2)
1-13: LGTM! Well-structured component styling with good Bootstrap integration.The main
.b-form-ratingclass provides appropriate Bootstrap-compatible styling with flex layout, standard padding, and border radius. The conditional border styling using CSS custom properties ensures proper integration with Bootstrap's theming system.
15-22: Good accessibility implementation for interactive states.The cursor styling properly differentiates between interactive and readonly states, which improves user experience and accessibility.
packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts (2)
62-62: Perfect integration following established patterns.The addition to
componentsWithExternalPathcorrectly maps the BFormRating component to its documentation path, maintaining alphabetical order.
215-215: Consistent type mapping implementation.The addition to
UnmappedComponentPropsproperly links the BFormRating component to its props interface, maintaining the established pattern used by other components.packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts (2)
1-12: Excellent test setup with modern practices.Good use of
enableAutoUnmountand proper test structure. The basic existence test is well-implemented.
75-142: Comprehensive test coverage for component features.Excellent coverage of styling variations, value display options, border behaviors, and SVG icon rendering. The tests properly verify the component's different states and configurations.
apps/playground/src/components/Comps/TFormRating.vue (3)
2-66: Excellent comprehensive demo showcasing all component features.This template provides a thorough demonstration of the BFormRating component's capabilities:
- Default behavior and value binding
- Display options (show-value, show-value-max)
- Precision control for decimal ratings
- Custom star counts
- Bootstrap variant styling
- Custom color support
- Size variations (sm, default, lg)
- Read-only mode
The organization and labeling make it easy to understand each feature.
68-87: Well-structured reactive state management.Good use of Vue 3 Composition API with properly typed refs. The variety of initial values helps demonstrate different component states effectively.
89-100: Clean scoped styling for demo layout.The scoped styles provide good visual organization for the demo sections without interfering with the component styling.
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue (2)
9-9: Consider aria-valuemin alignment with rating scaleThe aria-valuemin is set to 0, but ratings typically start at 1. This might be intentional for the "no rating" state, but it's worth verifying the accessibility implications.
This is likely correct for allowing a "no rating selected" state, but please verify with WCAG guidelines that this is the recommended approach for rating components.
86-86:❌ Incorrect review comment
Define noBorder prop in BFormRatingProps interface
The
noBorderprop is used but not defined in the BFormRatingProps interface, causing TypeScript errors in the documentation.Either add this prop to the BFormRatingProps interface or remove it from here and handle the border styling differently.
🏁 Script executed:
#!/bin/bash # Check if noBorder is used elsewhere in the codebase rg -A 3 'noBorder|no-border' --glob '*.vue' --glob '*.ts'Length of output: 9305
🏁 Script executed:
#!/bin/bash # Find the definition of BFormRatingProps rg -A5 "export interface BFormRatingProps" -n src/types/ComponentProps.ts rg -A10 "export interface BFormRatingProps" -n src/components/BFormRatingLength of output: 286
🏁 Script executed:
#!/bin/bash # Locate all occurrences of BFormRatingProps to find its definition rg -n "BFormRatingProps" -g "packages/bootstrap-vue-next/src/**/*" # If found, show 20 lines around the definition to inspect included props rg -A20 -B2 "BFormRatingProps" -g "packages/bootstrap-vue-next/src/types/*.ts"Length of output: 4926
No action needed—
noBorderis already declared
ThenoBorderprop is defined inBFormRatingProps(packages/bootstrap-vue-next/src/types/ComponentProps.ts, line 356), so there’s no missing prop definition. You can ignore the original suggestion.
Optional cleanup:
- In
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue(around line 86), you may remove the redundant& { noBorder?: boolean }from thedefinePropsgeneric.Likely an incorrect or invalid review comment.
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts
Outdated
Show resolved
Hide resolved
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
Outdated
Show resolved
Hide resolved
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Please address the AI comments. I did a quick pass and they all seem valid (but think them through, I only did a quick pass).
Also, please update the BFormRatings section of migration-guide.md with (a) information about what client code would need to change to consume this component - the most obvious one is customer icons/slots, but there may be others and (b) not yet implemented notes for the featurelets that you didn't get to - once things have solidified a bit more, you can open a bug against the NYI features.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/docs/src/docs/components/form-rating.md (1)
82-82: Add missing inline mode demo
The documentation describes the inline mode but doesn’t include the corresponding demo embed. Please insert the demo reference here to match other feature sections.Proposed diff:
@@ -82,1 +82,2 - Simply set the `inline` prop to `true` to render the component in inline mode: + Simply set the `inline` prop to `true` to render the component in inline mode: + <<< DEMO ./demo/RatingInline.vue
🧹 Nitpick comments (1)
apps/docs/src/docs/components/form-rating.md (1)
54-54: Improve comma usage after introductory phrases
Add missing commas for consistency and smoother readability.- By default `<BFormRating>` does not display the current numerical value. + By default, `<BFormRating>` does not display the current numerical value. - Optionally show the maximum rating possible by also setting the prop `show-value-max` to `true`: + Optionally, show the maximum rating possible by also setting the prop `show-value-max` to `true`: - In some situations you may prefer the custom input to occupy only the space required for its contents. + In some situations, you may prefer the custom input to occupy only the space required for its contents.Also applies to: 67-67, 81-81
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/docs/src/data/components/FormRating.data.ts(1 hunks)apps/docs/src/docs/components/demo/RatingCustomColor.vue(1 hunks)apps/docs/src/docs/components/demo/RatingSizing.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(1 hunks)packages/bootstrap-vue-next/src/components/BFormRating/_form-rating.scss(1 hunks)packages/bootstrap-vue-next/src/styles/styles.scss(1 hunks)packages/bootstrap-vue-next/src/types/ComponentProps.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/bootstrap-vue-next/src/styles/styles.scss
🚧 Files skipped from review as they are similar to previous changes (7)
- apps/docs/src/docs/components/demo/RatingSizing.vue
- packages/bootstrap-vue-next/src/components/BFormRating/_form-rating.scss
- apps/docs/src/docs/components/demo/RatingCustomColor.vue
- packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.spec.ts
- apps/docs/src/data/components/FormRating.data.ts
- packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
- packages/bootstrap-vue-next/src/types/ComponentProps.ts
🧰 Additional context used
🪛 LanguageTool
apps/docs/src/docs/components/form-rating.md
[uncategorized] ~53-~53: Did you mean: “By default,”?
Context: ..../demo/RatingStars.vue ### Show value By default <BFormRating> does not display the cu...
(BY_DEFAULT_COMMA)
[uncategorized] ~66-~66: Possible missing comma found.
Context: ...Precision.vue #### Show maximum value Optionally show the maximum rating possible by als...
(AI_HYDRA_LEO_MISSING_COMMA)
[typographical] ~80-~80: It appears that a comma is missing.
Context: ... width of the parent container. In some situations you may prefer the custom input to occu...
(DURING_THAT_TIME_COMMA)
…yling - Removed mouse move event handling from BFormRating component. - Updated scaling effect for clear icon and added hover effect for star icons in SCSS. - Enhanced BFormRatingProps to support specific size and variant options.
- Changed background color from white to var(--bs-body-bg) for improved theming consistency.
- Updated default values and types for props in BFormRating, including `modelValue`, `precision`, `readonly`, `stars`, `variant`, `size`, and new props `noBorder`, `showClear`, and `inline`. - Added detailed migration guide and component documentation reflecting the new features and changes. - Introduced demo components showcasing the new `no-border` and `show-clear` functionalities. - Updated existing demo components to reflect changes in props and usage.
- Introduced `inline` prop to BFormRating for flexible layout options. - Updated SCSS styles for better spacing and hover effects on clear icons and stars. - Adjusted default sizes for star icons and refined margin settings. - Add unit tests to cover new keyboard navigation, precision features, and inline. - Updated component props to reflect changes in size and inline behavior.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/docs/src/docs/components/demo/RatingCustomIcon.vue (1)
7-37: Hide decorative SVGs from assistive tech.
<svg>icons are purely visual; withoutaria-hidden="true"they are exposed as unnamed graphics, cluttering the accessibility tree.- <svg + <svg + aria-hidden="true" class="custom-icon" @@ - <svg + <svg + aria-hidden="true" class="custom-icon"Add the attribute to both filled and empty hearts (or
role="presentation").
No functional change, only better a11y semantics.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/docs/src/data/components/FormRating.data.ts(1 hunks)apps/docs/src/docs/components/demo/RatingBorder.vue(1 hunks)apps/docs/src/docs/components/demo/RatingClear.vue(1 hunks)apps/docs/src/docs/components/demo/RatingCustomIcon.vue(1 hunks)apps/docs/src/docs/components/demo/RatingInline.vue(1 hunks)apps/docs/src/docs/components/demo/RatingVariant.vue(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/docs/src/docs/components/demo/RatingClear.vue
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/src/data/components/FormRating.data.ts
🔇 Additional comments (1)
apps/docs/src/docs/components/demo/RatingBorder.vue (1)
2-11: Looks good – clear, labelled, and unique IDs.All three borderless examples have proper labels and unique
ids; the demo cleanly showcases the prop. 👍
…lowing CodeRabbit recommendation - Added `aria-hidden="true"` to SVG icons in RatingCustomIcon for better accessibility. - Assigned `id` to BFormRating in RatingInline for improved label association. - Included `aria-label` attributes for each BFormRating variant in RatingVariant to enhance screen reader support.
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
Outdated
Show resolved
Hide resolved
- Documented the availability of `BFormRating` in BootstrapVueNext, highlighting adherence to Vue 3's v-model conventions. - Listed deprecated icon-related props and introduced new customization approaches for icons. - Clarified features not yet implemented in `BFormRating` and provided links to relevant migration resources.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/docs/src/docs/migration-guide.md (1)
416-424: Deprecated icon props listed explicitly
This change addresses the previous feedback by namingicon-empty,icon-half,icon-full, andicon-clear.🧰 Tools
🪛 LanguageTool
[uncategorized] ~420-~420: Loose punctuation mark.
Context: ...ue have been deprecated: -icon-empty: For specifying empty star icon - `icon-...(UNLIKELY_OPENING_PUNCTUATION)
🧹 Nitpick comments (3)
apps/docs/src/docs/migration-guide.md (3)
409-415: Enhance unimplemented-features list
Consider linking each unimplemented feature to its corresponding issue or roadmap entry so users can track progress (e.g. issue #2051 fordisabled, #… for others).
425-430: Link to custom-icon slot examples
You may want to add a direct link or FRAGMENT reference to the demo page showing scoped‐slot icon overrides (e.g.demo/FormRatingCustomIcon.vue) for quicker discovery.
657-657: Fix sentence capitalization
Change “been deprecated along with thedisabledandenabledevents.” to “Has been deprecated along with thedisabledandenabledevents.” for grammatical consistency.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/docs/src/docs/migration-guide.md(2 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/docs/src/docs/migration-guide.md
[uncategorized] ~420-~420: Loose punctuation mark.
Context: ...ue have been deprecated: - icon-empty: For specifying empty star icon - `icon-...
(UNLIKELY_OPENING_PUNCTUATION)
🔇 Additional comments (2)
apps/docs/src/docs/migration-guide.md (2)
406-407: Document BFormRating section clearly
The new BFormRating section correctly introduces availability and links to the Vue 3v-modelguide.
651-651: Approve popover variant deprecation note
The deprecation of thevariantprop is clearly documented with a link to the new styling approach.
commit: |
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
Outdated
Show resolved
Hide resolved
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
Outdated
Show resolved
Hide resolved
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
Outdated
Show resolved
Hide resolved
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
Outdated
Show resolved
Hide resolved
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
Outdated
Show resolved
Hide resolved
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
Outdated
Show resolved
Hide resolved
packages/bootstrap-vue-next/src/components/BFormRating/BFormRating.vue
Outdated
Show resolved
Hide resolved
- Updated the import path for BFormRating in RatingCustomIcon.vue to improve clarity. - Refactored class binding in BFormRating.vue to use computed properties for better maintainability. - Adjusted props handling in BFormRating to exclude undefined modelValue and streamline defaults. - Removed unnecessary styles and comments to clean up the component code.
I've looked through these changes, and they've all been addressed based on other conversations with VividLemon, I'm going to push this PR through and will clean up later if I missed anything.
Describe the PR
Implemented the BFormRating component. Allows users to select a star rating, supports a customizable number of stars, includes a read-only mode, color variation, sizes, and displays the value selected and max value. Added unit tests to verify functionality and included clear documentation. Fixes #2051
Contributor: Huy Nguyen - https://github.com/hnben
Contributor: William Castillo - https://github.com/william-castillo-jr
Contributor: Huy Le - https://github.com/jackle500
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
New Features
Documentation
Tests