Fix culture-related number issues in BitColorPicker (#11920)

[msynk]

closes #11920

Summary by CodeRabbit

• Bug Fixes

  • Improved internationalization support with culture-invariant numeric parsing in the ColorPicker component to ensure consistent formatting across different locales.
  • Enhanced accessibility with updated ARIA labels for improved screen reader support.

• Refactor

  • Consolidated inline style expressions into reusable computed variables for better code organization and maintainability.

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

[coderabbitai]

Walkthrough

Fixes culture-specific number formatting issues in the BitColorPicker component by introducing culture-invariant parsing for numeric inputs and CSS style generation, preventing exceptions when using non-English culture info with different decimal separators.

Changes

Cohort / File(s)	Summary
BitColorPicker Razor markup src/BlazorUI/Bit.BlazorUI/Components/Inputs/ColorPicker/BitColorPicker.razor	Consolidates inline style expressions into computed variables (thumbStyle, alphaSliderBg, alphaSliderStyle) wrapped with FormattableString.Invariant to ensure culture-invariant CSS generation; normalizes BOM in namespace declaration.
BitColorPicker code-behind src/BlazorUI/Bit.BlazorUI/Components/Inputs/ColorPicker/BitColorPicker.razor.cs	Adds System.Globalization using; applies CultureInfo.InvariantCulture to numeric parsing in HandleOnHueInput and HandleOnAlphaInput handlers; refactors aria label construction for alpha slider to ensure consistent formatting; minor formatting improvements.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A slider that dances in any tongue,
Culture-invariant parsing, the bug now undone!
Decimal points and commas align just right,
The picker glows steady in Czech's gentle light. ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main fix: addressing culture-related number formatting issues in the BitColorPicker component.
Linked Issues check	✅ Passed	The pull request successfully addresses all coding requirements from issue #11920: uses CultureInfo.InvariantCulture for numeric parsing in alpha handlers, applies FormattableString.Invariant to inline styles, and fixes ARIA label formatting.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the culture-related issues described in #11920; minor formatting/whitespace adjustments and BOM normalization are acceptable cleanup within the scope.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

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

🧹 Nitpick comments (1)

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

4-9: Good culture-invariant formatting for CSS styles!

The use of FormattableString.Invariant on line 5 for thumbStyle correctly addresses the culture-specific decimal separator issue in CSS (e.g., preventing "top: 5,5px" in cultures that use comma as decimal separator).

Lines 66-68 similarly protect the alpha value bindings from culture-specific formatting.

Optional: Apply FormattableString.Invariant to line 8 for consistency

While line 8 appears to only interpolate string values (Rgb and alphaSliderBg), consider using FormattableString.Invariant for consistency with line 5:

-    var alphaSliderStyle = $"background:linear-gradient(to left,{Rgb} 0%, transparent 100%), {alphaSliderBg};";
+    var alphaSliderStyle = FormattableString.Invariant($"background:linear-gradient(to left,{Rgb} 0%, transparent 100%), {alphaSliderBg};");

This provides defensive consistency even though Rgb should already be a properly formatted string.

📜 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 ea85997 and 17e924e.

📒 Files selected for processing (2)

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

🧰 Additional context used

🧬 Code graph analysis (1)

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

src/BlazorUI/Bit.BlazorUI/Extensions/StringExtensions.cs (1)

• HasValue (5-10)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/ColorPicker/BitInternalColor.cs (1)

• Update (62-71)

src/BlazorUI/Bit.BlazorUI/Components/Progress/Loading/Base/BitLoadingBase.cs (1)

• Convert (163-166)

⏰ 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 (8)

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

1-1: LGTM! Required namespace for culture-invariant parsing.

The System.Globalization namespace is correctly added to support CultureInfo.InvariantCulture usage in the parsing methods.

---

51-73: LGTM! Simplified color type detection.

The change from StringComparison.InvariantCultureIgnoreCase to a simple StartsWith('#') is appropriate since '#' is an ASCII character without case variants. This simplification maintains the same behavior.

---

92-98: LGTM! Critical fix for culture-invariant CSS color generation.

The Rgb and Rgba properties now use FormattableString.Invariant, ensuring that the alpha channel (a double value) always uses a decimal point instead of a comma. This prevents invalid CSS like "rgba(255,0,0,0,5)" in cultures with decimal comma.

---

198-213: LGTM! Correct culture-invariant parsing for hue input.

Line 202 correctly uses CultureInfo.InvariantCulture when parsing the hue value. Since HTML range inputs always emit values with decimal points (e.g., "359.5"), this prevents FormatException when the thread culture expects decimal commas.

---

215-226: LGTM! Core fix for the alpha slider FormatException.

Line 219 correctly uses CultureInfo.InvariantCulture when parsing the alpha value from the range input. This is the primary fix for issue #11920, preventing FormatException when the application runs under cultures with non-invariant decimal separators.

---

235-247: LGTM! Correct culture-invariant formatting for ARIA labels.

The ARIA label construction properly handles culture formatting:

• Line 237: RGB values are integers, so no culture issue
• Line 241: Alpha percentage correctly uses FormattableString.Invariant to ensure consistent formatting (e.g., "50%" instead of "50,0%" in cultures with decimal comma)

The ARIA labels will now be consistent and readable across all cultures.

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

31-31: LGTM!

Clean usage of the centralized thumbStyle variable with culture-invariant formatting.

---

54-70: Culture-invariant parsing is correctly implemented.

The alpha and hue input handlers properly use culture-invariant parsing:

• HandleOnAlphaInput (line 219): Convert.ToDouble(args.Value, CultureInfo.InvariantCulture)
• HandleOnHueInput (line 202): Convert.ToDouble(args.Value, CultureInfo.InvariantCulture)

Combined with the FormattableString.Invariant formatting in the HTML output bindings (lines 66-68), this ensures numeric values are parsed and displayed consistently regardless of the thread's culture settings, resolving the FormatException issue described in the PR objectives.