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 18 minutes and 4 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 introduces support for custom hex color values in both the progress bar and spinner components. Type definitions and composables are modified to recognize and handle custom colors. Documentation and example files are updated to demonstrate usage with custom hex color values, including new examples for both components. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProgressComponent
participant SpinnerComponent
User->>ProgressComponent: Set color prop (named or hex)
ProgressComponent->>useProgressClasses: Compute classes and customColor
useProgressClasses-->>ProgressComponent: Return classes, customColor
ProgressComponent->>ProgressComponent: Render bar/labels with styles
Note right of ProgressComponent: If customColor, apply inline style
User->>SpinnerComponent: Set color prop (named or hex)
SpinnerComponent->>useSpinnerClasses: Compute classes and customColor
useSpinnerClasses-->>SpinnerComponent: Return classes, customColor
SpinnerComponent->>SpinnerComponent: Render SVG with fill/CSS var
Note right of SpinnerComponent: If customColor, apply CSS variable
Possibly related issues
Suggested labels
Poem
✨ Finishing Touches
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.
Summary by CodeRabbit
New Features
Documentation