Add support for custom colors to FwbProgress and FwbSpinner #393
Conversation
| Warning Rate limit exceeded@wazeerc has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 2 minutes and 47 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughThis update adds support for custom CSS classes in the progress bar component and enables custom hex color values for the spinner component. Documentation is expanded with new examples and API descriptions for these features. The changes include new props, type updates, and composable refactoring to support flexible customization. Changes
Sequence Diagram(s)sequenceDiagram participant User participant ProgressBar as FwbProgress participant Spinner as FwbSpinner User->>ProgressBar: Passes innerClasses, outerClasses, outsideLabelClasses props ProgressBar->>ProgressBar: Applies merged classes dynamically User->>Spinner: Passes color prop (named or hex) Spinner->>Spinner: Determines if color is named or custom hex Spinner->>Spinner: Applies fill via CSS variable or fallback Possibly related issues
Suggested labels
Suggested reviewers
Poem
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 ( |
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| Fixes issue #390 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/components/spinner.md (1)
75-75: Consider updating API documentation to mention custom colorsWhile the example shows custom hex colors, the API props table still only lists the predefined colors without mentioning that custom hex values are supported.
Consider updating the props table to indicate that custom hex colors are also supported:
| Name | Values | Default | |-------|-----------------------------------------------------------------------------------------|---------| - | color | `blue`, `gray`, `green`, `pink`, `purple`, `red`, `white`, `yellow` | `blue` | + | color | `blue`, `gray`, `green`, `pink`, `purple`, `red`, `white`, `yellow`, or custom hex value (e.g., `#3fb984`) | `blue` |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
docs/components/progress.md(1 hunks)docs/components/progress/examples/FwbProgressExampleColor.vue(1 hunks)docs/components/spinner.md(1 hunks)docs/components/spinner/examples/FwbSpinnerExampleColor.vue(1 hunks)src/components/FwbProgress/FwbProgress.vue(3 hunks)src/components/FwbProgress/composables/useProgressClasses.ts(4 hunks)src/components/FwbProgress/types.ts(1 hunks)src/components/FwbSpinner/FwbSpinner.vue(3 hunks)src/components/FwbSpinner/composables/useSpinnerClasses.ts(2 hunks)src/components/FwbSpinner/types.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
src/components/FwbSpinner/composables/useSpinnerClasses.ts (1)
src/components/FwbSpinner/types.ts (1)
SpinnerColor(2-2)
src/components/FwbSpinner/types.ts (1)
src/components/FwbProgress/types.ts (1)
CustomColor(3-3)
src/components/FwbProgress/composables/useProgressClasses.ts (1)
src/components/FwbProgress/types.ts (1)
CustomColor(3-3)
🔇 Additional comments (22)
src/components/FwbProgress/types.ts (1)
3-4: Custom hex color support added correctlyThe implementation adds a
CustomColortype alias that enforces hex color format using a template literal type, and extends the existingProgressVariantto support these custom colors. This is a clean approach to extend the color options without breaking existing functionality.docs/components/spinner/examples/FwbSpinnerExampleColor.vue (1)
11-11: Custom hex color example is well integratedThe new spinner instance with a custom hex color demonstrates the feature nicely, maintaining consistency with the existing examples. This gives users a clear visual reference for how custom colors work alongside the predefined options.
docs/components/spinner.md (1)
62-62: Clear custom color example with helpful commentAdding the custom color example with an explanatory comment is helpful for users learning the API. It clearly shows how to use a hex color value instead of a named color constant.
docs/components/progress/examples/FwbProgressExampleColor.vue (2)
5-5: Progress values updated for better visual progressionThe progress values have been updated from fractional values to a clearer increasing progression (11, 22, 33, etc.), which improves the visual demonstration of the different progress states.
Also applies to: 10-10, 15-15, 20-20, 25-25, 30-30, 35-35, 40-40
42-46: Custom color progress bar example added successfullyThe custom hex color progress bar example is well implemented and positioned at the end of the examples, maintaining a consistent pattern with the spinner component examples. Using a 99% progress value clearly demonstrates the custom color's appearance when the progress bar is nearly complete.
docs/components/progress.md (1)
89-97: Well-implemented documentation for custom color support.The example has been updated to show incremental progress values and now includes a demonstration of the new custom hex color feature with
#3fb984. This clearly illustrates how users can apply custom colors to the progress bar component.src/components/FwbProgress/FwbProgress.vue (4)
7-7: Good implementation of custom color for label text.The conditional styling ensures the label text color matches the custom color when provided, maintaining visual consistency.
13-13: Consistent styling for progress percentage text.The progress percentage text styling matches the approach used for the label text, ensuring visual consistency when using custom colors.
24-26: Well-implemented background color application for progress bar.The conditional styling for the progress bar background correctly applies the custom color when provided, while maintaining the existing width styling in all cases.
66-66: Appropriate destructuring of customColor property.Adding customColor to the destructured properties ensures the component has access to the custom color value from the composable.
src/components/FwbSpinner/types.ts (1)
1-2: Well-defined type system for custom colors.The CustomColor type definition effectively ensures type safety by requiring strings to start with '#' (for hex colors). The extension of SpinnerColor to include CustomColor maintains backward compatibility while adding support for custom hex colors.
The approach is consistent with the implementation in the progress component, promoting a unified API across components.
src/components/FwbSpinner/FwbSpinner.vue (3)
4-4: Good implementation of CSS variable for custom fill.Using a CSS variable for the custom fill color provides flexibility for styling while ensuring the custom color is properly applied to the SVG.
16-16: Effective fallback mechanism for fill attribute.The conditional binding ensures the path uses the custom color when provided, with a graceful fallback to 'currentFill' when no custom color is specified.
38-38: Appropriate destructuring of customColor property.Updating the destructuring to include customColor ensures the component has access to the custom color value from the composable.
src/components/FwbSpinner/composables/useSpinnerClasses.ts (3)
41-41: Added return valuecustomColorsupports custom hex colorsThe function now returns both
spinnerClassesandcustomColor, allowing the component to handle custom hex color values alongside predefined colors.Also applies to: 56-56
44-44: Added null coalescing operator to handle unknown colorsGood addition of the null coalescing operator to return an empty string when the color isn't found in the predefined colors map.
45-45: Added computed property for custom color handlingThe
customColorcomputed property correctly identifies when to use a custom color (when no predefined color class exists) and returns the original color value as a string in those cases.src/components/FwbProgress/composables/useProgressClasses.ts (5)
4-4: Added import for CustomColor typeCorrectly imported the CustomColor type to support hex color strings.
41-46: Updated return type to include customColorThe function's return type now properly includes the new
customColorproperty.
52-52: Conditionally applying color classesGood implementation to conditionally omit the default color classes when a custom color is used.
62-65: Conditionally applying outside label classesCorrectly implemented to conditionally omit the outside label color classes when a custom color is used.
71-71: Added customColor to the return objectThe function now correctly returns the
customColorcomputed property.
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/FwbProgress/composables/useProgressClasses.ts(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/FwbProgress/composables/useProgressClasses.ts (1)
src/components/FwbProgress/types.ts (1)
CustomColor(3-3)
🪛 GitHub Check: lint (18.x)
src/components/FwbProgress/composables/useProgressClasses.ts
[failure] 44-44:
Unexpected separator (,)
[failure] 43-43:
Unexpected separator (,)
[failure] 42-42:
Unexpected separator (,)
[failure] 62-62:
Expected newline between consequent and alternate of ternary expression
[failure] 62-62:
Expected newline between test and consequent of ternary expression
🪛 GitHub Actions: Node.js CI
src/components/FwbProgress/composables/useProgressClasses.ts
[error] 42-42: ESLint: Unexpected separator (,) (@stylistic/member-delimiter-style)
🔇 Additional comments (3)
src/components/FwbProgress/composables/useProgressClasses.ts (3)
47-49: Custom color implementation looks good.The implementation correctly checks if the color value is a predefined variant before treating it as a custom color, which matches the pattern suggested in previous reviews.
52-52: Good conditional logic for custom colors.The implementation correctly skips the predefined color classes when a custom color is provided.
71-71: Good addition of customColor to the returned object.This properly exposes the custom color property for use in the component.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/components/progress.md(1 hunks)docs/components/spinner.md(2 hunks)src/components/FwbProgress/composables/useProgressClasses.ts(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/components/spinner.md
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/FwbProgress/composables/useProgressClasses.ts (1)
src/components/FwbProgress/types.ts (1)
CustomColor(3-3)
🪛 markdownlint-cli2 (0.17.2)
docs/components/progress.md
104-104: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
🪛 GitHub Check: lint (18.x)
src/components/FwbProgress/composables/useProgressClasses.ts
[failure] 45-45:
Unexpected separator (;)
[failure] 44-44:
Unexpected separator (;)
[failure] 43-43:
Unexpected separator (;)
[failure] 42-42:
Unexpected separator (;)
🪛 GitHub Actions: Node.js CI
src/components/FwbProgress/composables/useProgressClasses.ts
[error] 42-42: ESLint: Unexpected separator (;) (@stylistic/member-delimiter-style)
🔇 Additional comments (6)
src/components/FwbProgress/composables/useProgressClasses.ts (4)
47-49: Implementation checks for custom colors properly.The
customColorcomputed property now correctly checks if the color value exists in the predefined variants before treating it as a custom color.
52-52: Color classes conditionally applied.The implementation correctly omits the default color classes when a custom color is used.
61-67: Proper formatting of ternary expression.The ternary expression is now properly formatted with line breaks, resolving previous linting issues.
73-73: Custom color property exposed.The
customColorcomputed property is now properly returned from the composable, allowing parent components to access it.docs/components/progress.md (2)
89-97: Comprehensive color examples with consistent progression.The progress examples now use incremental values (11, 22, 33, etc.) instead of arbitrary values, making the demonstration clearer. The addition of a custom hex color example effectively demonstrates the new feature.
106-116: Well-documented API props.The API documentation clearly defines all props including the newly supported hex color values for the
colorprop. This provides clear guidance for developers using the component.
There was a problem hiding this comment.
Hi,
Thank you for your contribution and your efforts toward making these components more flexible.
While I appreciate the intention behind these changes, I believe there’s an alternative approach that would offer even greater flexibility and maintainability. Instead of handling flexibility exclusively at the logic level, we could leverage TailwindCSS classes more effectively by allowing users to pass custom classes to different component parts—similar to the pattern used in the FwbInput component. This approach enables consumers to style components granularly without requiring deep customization or internal logic changes.
Why this direction could be better:
- It enables users to customize any part of the component via Tailwind utility classes.
- It’s consistent with the approach taken in other Flowbite Vue components, supporting a predictable API.
- Reduces complexity inside the component code while promoting reusability and better separation of concerns.
You can see an example of this pattern in the FwbInput component API, where additional classes can be passed to specific subcomponents or slots.
Would you be open to aligning this PR’s approach with that existing pattern? I believe it would give consumers more control, keep the codebase consistent, and simplify future maintenance.
Let me know your thoughts or if you’d like to discuss alternative solutions further!
| Thanks for your input @Sqrcz. I will look into it. |
wazeerc force-pushed the feature/spinner-progress/custom-colors branch from dc158cb to 7cc02dc Compare | Hi @Sqrcz, I made some changes.
Lemme know what you think, thanks. @CodeRabbit, update the PR description based on the new changes. |
| Tip For best results, initiate chat on the files or code changes. 🧩 Analysis chain@wazeerc, I'll examine the current changes and update the PR description accordingly. Based on my examination of the current codebase, I can see the changes you've made. Here's an updated PR description that reflects the current implementation: 📝 Updated PR DescriptionAdd support for custom colors and enhanced styling to This PR enhances the 🎨 Progress Component Enhancements
🔄 Spinner Component Updates
🔧 Technical Implementation
📚 Updated Documentation
Fixes #390 The updated description now accurately reflects both the custom color support and the additional styling props you've added to the Progress component, while highlighting the focused approach taken with the Spinner component. 🏁 Script executed: Length of output: 4786 🏁 Script executed: Length of output: 9184 🏁 Script executed: Length of output: 3994 🏁 Script executed: Length of output: 6523 Based on my examination of the current codebase, I can now provide an accurate updated PR description. Here's what I found: 📝 Updated PR DescriptionAdd enhanced styling customization to This PR enhances both components with different approaches to customization based on their specific needs: 🎨 Progress Component EnhancementsClass-based Customization (similar to Input component):
🔄 Spinner Component UpdatesCustom Color Support:
🔧 Technical Implementation
📚 Updated Documentation & Examples
🎯 Design Philosophy
Fixes #390 This updated description accurately reflects the current implementation where Progress gets the flexible class-based customization system (like Input component) while Spinner gets the targeted custom color functionality. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
docs/components/progress.md (3)
4-4: Keep imports alphabetically sorted for readability
FwbProgressExampleCustomshould be placed afterFwbProgressExampleColorand beforeFwbProgressExampleLabelInsideto preserve the alphabetical order already used in this file.-import FwbProgressExampleCustom from './progress/examples/FwbProgressExampleCustom.vue' import FwbProgressExampleLabelInside from './progress/examples/FwbProgressExampleLabelInside.vue' +import FwbProgressExampleCustom from './progress/examples/FwbProgressExampleCustom.vue'
98-105: Duplicate “custom-classes” demo inside the “Colors” section may confuse readersThe snippet showing
inner-classes,outer-classes, andoutside-label-classesis conceptually unrelated to color presets and is repeated verbatim in the new Custom section. Leaving it here inflates the example list and can mislead users into thinking these props are color-related.Consider removing this block from the “Colors” section and keeping a single, cohesive example in the dedicated Custom section.
- <fwb-progress - :progress="50" - :inner-classes="'rounded-xs bg-teal-900 dark:bg-teal-200'" - :outer-classes="'bg-teal-200 dark:bg-teal-900'" - :outside-label-classes="'italic text-sky-800 dark:text-sky-200'" - label="Custom" - />
112-139: Minor Markdown polish: code-block language & table formatting
markdownlint flags MD040 around the closing back-ticks of the preceding block (line 111). This usually happens when the opening fence lacks a language tag. The easiest fix is to ensure every new fenced block starts with
fences remain.vue</code> (or another language) and that no bare <code>In the props table, wrap property names with back-ticks in the header row as well for consistency (
Prop→`Prop`).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
docs/components/progress.md(2 hunks)docs/components/progress/examples/FwbProgressExampleCustom.vue(1 hunks)docs/components/spinner.md(2 hunks)docs/components/spinner/examples/FwbSpinnerExampleColor.vue(1 hunks)src/components/FwbProgress/FwbProgress.vue(2 hunks)src/components/FwbProgress/composables/useProgressClasses.ts(2 hunks)src/components/FwbSpinner/FwbSpinner.vue(3 hunks)src/components/FwbSpinner/composables/useSpinnerClasses.ts(2 hunks)src/components/FwbSpinner/types.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/components/progress/examples/FwbProgressExampleCustom.vue
🚧 Files skipped from review as they are similar to previous changes (7)
- docs/components/spinner.md
- docs/components/spinner/examples/FwbSpinnerExampleColor.vue
- src/components/FwbSpinner/types.ts
- src/components/FwbSpinner/composables/useSpinnerClasses.ts
- src/components/FwbProgress/FwbProgress.vue
- src/components/FwbSpinner/FwbSpinner.vue
- src/components/FwbProgress/composables/useProgressClasses.ts
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
docs/components/progress.md
111-111: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
Summary by CodeRabbit
New Features
Documentation