Fix saturation picker issue with culture in BitColorPicker (#11763)

[msynk]

closes #11763

Summary by CodeRabbit

• Bug Fixes
  • Improved color picker styling consistency across different system cultures and locales.

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

[coderabbitai]

Walkthrough

The change modifies the saturation thumb's inline style binding in the ColorPicker component to use culture-invariant string formatting via FormattableString.Invariant, ensuring CSS values parse correctly regardless of system culture settings.

Changes

Cohort / File(s)	Summary
ColorPicker Style Binding Fix src/BlazorUI/Bit.BlazorUI/Components/Inputs/ColorPicker/BitColorPicker.razor	Converts saturation thumb style binding from direct interpolation to culture-invariant interpolation for numeric values (top, left, background-color). Preserves semantic functionality while ensuring decimal separator consistency across locales.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A whisker-twitch of culture-wise delight,
Where color-picking now works just right!
No comma-chaos spoils our hue,
The picker paints in every view,
Invariant strings—a hoppy fix through! 🎨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing a saturation picker issue in BitColorPicker related to culture formatting.
Linked Issues check	✅ Passed	The code change addresses the linked issue #11763 by using culture-invariant formatting for the saturation thumb style binding, which fixes color selection problems.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the saturation picker issue in BitColorPicker; no out-of-scope modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between a48409c and e15ac65.

📒 Files selected for processing (1)

• src/BlazorUI/Bit.BlazorUI/Components/Inputs/ColorPicker/BitColorPicker.razor

⏰ 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 Bit.BlazorUI

🔇 Additional comments (1)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ColorPicker/BitColorPicker.razor (1)

25-25: Excellent fix for the culture-specific formatting issue.

Using FormattableString.Invariant() ensures that numeric CSS values (pixel positions) are formatted with invariant culture, preventing invalid CSS like "top:12,5px" in locales that use comma as the decimal separator. This directly resolves the saturation picker selection issue reported in #11763.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ColorPicker/BitColorPicker.razor (1)

50-50: Fix culture-invariant formatting for the alpha value.

The alpha value on lines 62-63 is output directly without culture-invariant formatting. In locales using comma as a decimal separator (e.g., de-DE, fr-FR), this produces invalid values like "0,5" instead of "0.5" in HTML attributes.

Use FormattableString.Invariant() for @_color.A:

value="@FormattableString.Invariant($"{_color.A:F2}")"
aria-valuenow="@FormattableString.Invariant($"{_color.A:F2}")"
aria-valuetext="@FormattableString.Invariant($"{_color.A:F2}")"

Lines 50 and 71 already use culture-invariant formatting through their respective Rgb and Rgba properties.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between a48409c and e15ac65.

📒 Files selected for processing (1)

• src/BlazorUI/Bit.BlazorUI/Components/Inputs/ColorPicker/BitColorPicker.razor

⏰ 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 Bit.BlazorUI

🔇 Additional comments (1)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ColorPicker/BitColorPicker.razor (1)

25-25: Excellent fix for the culture-specific formatting issue.

Using FormattableString.Invariant() ensures that numeric CSS values (pixel positions) are formatted with invariant culture, preventing invalid CSS like "top:12,5px" in locales that use comma as the decimal separator. This directly resolves the saturation picker selection issue reported in #11763.