Add new Icon parameters to BitTimePicker (#12096)

[msynk]

closes #12096

Summary by CodeRabbit

• New Features

  • Enhanced TimePicker with customizable icons for all controls: main input, close button, and increase/decrease hour and minute buttons.
  • Added support for external icon libraries (FontAwesome, Bootstrap Icons) alongside built-in Fluent UI icons.

• Documentation

  • Expanded TimePicker documentation with icon customization examples and guidance for using external icon libraries.

[coderabbitai]

Walkthrough

The BitTimePicker component is enhanced to support external icon libraries through new icon customization parameters. The changes introduce BitIconInfo and IconName properties for controlling icons across the component (main input, increase/decrease hour/minute buttons, and close button) while maintaining backward compatibility through nullable defaults.

Changes

Cohort / File(s)	Summary
BitTimePicker Component src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor, BitTimePicker.razor.cs	Added 12 new icon customization parameters (BitIconInfo and string pairs for CloseButton, DecreaseHour, DecreaseMinute, Icon, IncreaseHour, IncreaseMinute). Changed IconName from non-nullable string with default "Clock" to nullable string. Updated Razor markup to use dynamic BitIconInfo-based icon resolution instead of static CSS classes.
Demo Components src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor, BitTimePickerDemo.razor.cs, BitTimePickerDemo.razor.samples.cs	Replaced "Style & Class" example with new "External Icons" demonstration using FontAwesome and Bootstrap Icons. Added corresponding demo parameters and sample code blocks. Reindexed example references from example13/14 to example14/15.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 With icons now flowing like clover in breeze,
The TimePicker blooms with external ease.
FontAwesome, Bootstrap, or Fluent UI bright,
Each button adorned with customizable light! ⏰✨

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 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 change: adding new Icon parameters to BitTimePicker, matching the changeset that introduces Icon and IconName properties across the component.
Linked Issues check	✅ Passed	The pull request fully addresses the objective in issue #12096 by implementing the new Icon approach with BitIconInfo-based parameters and string? IconName variants across all icon slots (main input, close button, increase/decrease hour and minute controls).
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the new Icon parameters for BitTimePicker; no unrelated or out-of-scope modifications are present in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into develop

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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: 2

🤖 Fix all issues with AI agents

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor`:
- Around line 193-194: The demo text in BitTimePickerDemo.razor's DemoExample
(Id="example13", RazorCode="@example13RazorCode") claims support for "Material
Icons" but the example13RazorCode only shows FontAwesome and Bootstrap Icons;
either add a Material Icons example to example13RazorCode (showing how to set
Icon parameter to a Material icon class or SVG) or remove "Material Icons" from
the descriptive string inside the DemoExample to keep the text consistent with
the rendered examples.

In
`@src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs`:
- Around line 163-197: The documented default values for IncreaseHourIconName
and IncreaseMinuteIconName in BitTimePicker demo are incomplete: they list
"ChevronDownSmall" but the actual effective fallback used in BitTimePicker.razor
includes a rotation CSS class ("ChevronDownSmall bit-ico-r180"); update the
documentation entries for the properties IncreaseHourIconName and
IncreaseMinuteIconName to reflect the full effective default (e.g.,
"ChevronDownSmall bit-ico-r180") or add a parenthetical note that the increase
icons include the rotation modifier applied by BitTimePicker.razor so the demo's
DefaultValue and Description match the component behavior.

🧹 Nitpick comments (1)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.razor (1)

4-10: CSS modifier class embedded in icon name defaults is a fragile pattern.

Lines 5 and 7 embed bit-ico-r180 (a rotation modifier) inside the icon name string: "ChevronDownSmall bit-ico-r180". The BitIconInfo.From() method passes this entire string as the Name property to BitIconInfo.Bit(), which generates bit-icon bit-icon--ChevronDownSmall bit-ico-r180 from GetCssClasses(). The space separates the classes correctly, but this creates implicit coupling—users providing a custom IncreaseHourIconName or IncreaseMinuteIconName won't automatically get the rotation applied. This pattern is used consistently across BitTimePicker, BitNumberField, and BitMessage, but leaves rotation as a default-only feature rather than a composable modifier.

[sonarqubecloud]

Quality Gate failed

Failed conditions
9.9% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud