Skip to content

Conversation

@MGREMY
Copy link
Collaborator

@MGREMY MGREMY commented Dec 6, 2025

PR Checklist

Please check if your PR fulfills the following requirements:

  • Docs have been added/updated (for bug fixes/features)

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no API changes)
  • Build related changes
  • CI-related changes
  • Documentation content changes
  • Other... Please describe:

Issue Number

Issue Number: #146

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Summary by CodeRabbit

  • New Features

    • Configurable color inputs added to form helper and label components for direct customization.
  • Refactor

    • Color resolution now prefers component-level color with a fallback to the form field color for consistent theming.
  • Style

    • Minor alignment and styling tweaks related to the new color integration.

✏️ Tip: You can customize this high-level summary in your review settings.

@vercel
Copy link

vercel bot commented Dec 6, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
flowbite-angular Ready Ready Preview Comment Dec 6, 2025 9:32pm
flowbite-angular-storybook Ready Ready Preview Comment Dec 6, 2025 9:32pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 6, 2025

Walkthrough

Added a public color input to both Helper and Label directives and updated their host theming to use the directive state color with a fallback to the form field state's color.

Changes

Cohort / File(s) Summary
Form field directives — color input
libs/flowbite-angular/form/src/helper/helper.directive.ts, libs/flowbite-angular/form/src/label/label.directive.ts
Added readonly color = input<keyof FlowbiteFormFieldColors>(); to both directives, imported FlowbiteFormFieldColors, and changed host theming calls to use this.state.color() ?? this.formFieldState().color() as the color source.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

  • Review focus:
    • helper.directive.ts — new color input, import, and updated host theming usage.
    • label.directive.ts — same additions and theming update.

Poem

🐇 I nibble colors, soft and bright,

A little input springs to light,
Two helpers hum with states that play,
Fallbacks guide them on their way,
Hops of code to cheer the night.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is incomplete; it only contains the standard checklist template without meaningful context about the changes, their purpose, or how they address issue #146. Provide a clear description of what changes were made, why they were necessary, and how they resolve issue #146. Add details about the new color input functionality.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: adding color input properties to both the helper and label directives in the form field component.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/form_label_helper_colors

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bec6814 and 5aecf67.

📒 Files selected for processing (2)
  • libs/flowbite-angular/form/src/helper/helper.directive.ts (3 hunks)
  • libs/flowbite-angular/form/src/label/label.directive.ts (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • libs/flowbite-angular/form/src/helper/helper.directive.ts
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-01-07T20:25:20.823Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 108
File: libs/flowbite-angular/badge/badge.theme.ts:19-22
Timestamp: 2025-01-07T20:25:20.823Z
Learning: In Flowbite Angular, interfaces like `BadgeColors` that extend color types (e.g., `FlowbiteStandardColors`) intentionally include an index signature `[key: string]` to allow users to define their own custom color keys in the configuration.

Applied to files:

  • libs/flowbite-angular/form/src/label/label.directive.ts
📚 Learning: 2025-08-17T20:04:24.034Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 137
File: libs/flowbite-angular/table/src/table-body/table-body.directive.ts:1-3
Timestamp: 2025-08-17T20:04:24.034Z
Learning: In the flowbite-angular table module, the table state file is located at `libs/flowbite-angular/table/src/table/table-state.ts`, not at the root src level. Import paths like `../table/table-state` from subdirectories like table-body are correct.

Applied to files:

  • libs/flowbite-angular/form/src/label/label.directive.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 code 🛠 (20)
🔇 Additional comments (1)
libs/flowbite-angular/form/src/label/label.directive.ts (1)

3-3: Color override wiring is correct and consistent with form-field state.

The new FlowbiteFormFieldColors type import, color input, and updated colorToTheme call (this.state.color() ?? this.formFieldState().color()) cleanly introduce a per-label color override while preserving the previous form-field color fallback. This matches the Helper directive pattern and keeps the API coherent. Based on learnings, using keyof FlowbiteFormFieldColors here is aligned with the extensible color-map design that allows custom color keys.

Also applies to: 32-36, 50-50


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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6640e16 and 827a1b2.

📒 Files selected for processing (2)
  • libs/flowbite-angular/form/src/helper/helper.directive.ts (2 hunks)
  • libs/flowbite-angular/form/src/label/label.directive.ts (2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-01-07T20:25:20.823Z
Learnt from: MGREMY
Repo: themesberg/flowbite-angular PR: 108
File: libs/flowbite-angular/badge/badge.theme.ts:19-22
Timestamp: 2025-01-07T20:25:20.823Z
Learning: In Flowbite Angular, interfaces like `BadgeColors` that extend color types (e.g., `FlowbiteStandardColors`) intentionally include an index signature `[key: string]` to allow users to define their own custom color keys in the configuration.

Applied to files:

  • libs/flowbite-angular/form/src/label/label.directive.ts
  • libs/flowbite-angular/form/src/helper/helper.directive.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 code 🛠 (20)
🔇 Additional comments (4)
libs/flowbite-angular/form/src/helper/helper.directive.ts (2)

49-49: LGTM! Theme merging correctly uses the state color.

The change from this.formFieldState().color() to this.state.color() is correct, as the state now reflects the color input property which can be overridden by users.


31-34: Add tests for the new color input.

The new color input should be tested to ensure:

  • Default behavior: the color defaults to the form field state color
  • Override behavior: users can provide a custom color value
  • Theme application: the color is correctly applied in the computed theme
libs/flowbite-angular/form/src/label/label.directive.ts (2)

49-49: LGTM! Theme merging correctly uses the state color.

The change from this.formFieldState().color() to this.state.color() is correct, as the state now reflects the color input property which can be overridden by users.


31-34: Add tests for the new color input.

The new color input should be tested to ensure:

  • Default behavior: the color defaults to the form field state color
  • Override behavior: users can provide a custom color value
  • Theme application: the color is correctly applied in the computed theme

@MGREMY MGREMY force-pushed the fix/form_label_helper_colors branch from bec6814 to 5aecf67 Compare December 6, 2025 21:29
@MGREMY MGREMY merged commit 15a448c into main Dec 6, 2025
8 checks passed
@MGREMY MGREMY deleted the fix/form_label_helper_colors branch December 6, 2025 21:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants