Skip to content

Commit 938c99c

Browse files
msynkmsynk
authored
feat(blazorui): add new Icon parameter to BitCircularTimePicker #12080 (#12081)
1 parent d6e2904 commit 938c99c

File tree

5 files changed

+121
-14
lines changed

5 files changed

+121
-14
lines changed

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@namespace Bit.BlazorUI
1+
@namespace Bit.BlazorUI
22
@inherits BitInputBase<TimeSpan?>
33

44
<div @ref="RootElement" @attributes="HtmlAttributes"
@@ -53,7 +53,8 @@
5353
}
5454
else
5555
{
56-
<i style="@Styles?.Icon" class="bit-ctp-ico bit-icon bit-icon--@IconName @Classes?.Icon" aria-hidden="true" />
56+
var icon = BitIconInfo.From(Icon, IconName ?? "Clock");
57+
<i style="@Styles?.Icon" class="bit-ctp-ico @icon?.GetCssClasses() @Classes?.Icon" aria-hidden="true" />
5758
}
5859
</div>
5960
</div>
@@ -183,13 +184,14 @@
183184

184185
@if (ShowCloseButton && Standalone is false)
185186
{
187+
var closeButtonIcon = BitIconInfo.From(CloseButtonIcon, CloseButtonIconName ?? "Cancel");
186188
<button @onclick="CloseCallout"
187189
type="button"
188190
style="@Styles?.CloseButton"
189191
class="bit-ctp-cbn @Classes?.CloseButton"
190192
title="@CloseButtonTitle"
191193
aria-label="@CloseButtonTitle">
192-
<i style="@Styles?.CloseButtonIcon" class="bit-ctp-cbi bit-icon bit-icon--Cancel @Classes?.CloseButtonIcon" aria-hidden="true" />
194+
<i style="@Styles?.CloseButtonIcon" class="bit-ctp-cbi @closeButtonIcon?.GetCssClasses() @Classes?.CloseButtonIcon" aria-hidden="true" />
193195
</button>
194196
}
195197
</div>

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.razor.cs‎

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
using System.Text;
1+
using System.Text;
22
using System.Globalization;
33
using System.Diagnostics.CodeAnalysis;
44

@@ -54,6 +54,24 @@ public partial class BitCircularTimePicker : BitInputBase<TimeSpan?>
5454
/// </summary>
5555
[Parameter] public BitCircularTimePickerClassStyles? Classes { get; set; }
5656

57+
/// <summary>
58+
/// The icon to display on the close button using custom CSS classes for external icon libraries.
59+
/// Takes precedence over <see cref="CloseButtonIconName"/> when both are set.
60+
/// </summary>
61+
/// <remarks>
62+
/// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
63+
/// For built-in Fluent UI icons, use <see cref="CloseButtonIconName"/> instead.
64+
/// </remarks>
65+
[Parameter] public BitIconInfo? CloseButtonIcon { get; set; }
66+
67+
/// <summary>
68+
/// The name of the icon to display on the close button from the built-in Fluent UI icons.
69+
/// </summary>
70+
/// <remarks>
71+
/// For external icon libraries, use <see cref="CloseButtonIcon"/> instead.
72+
/// </remarks>
73+
[Parameter] public string? CloseButtonIconName { get; set; }
74+
5775
/// <summary>
5876
/// The title of the close button (tooltip).
5977
/// </summary>
@@ -84,9 +102,30 @@ public partial class BitCircularTimePicker : BitInputBase<TimeSpan?>
84102
public BitIconLocation IconLocation { get; set; } = BitIconLocation.Right;
85103

86104
/// <summary>
87-
/// Optional TimePicker icon
105+
/// The icon to display using custom CSS classes for external icon libraries.
106+
/// Takes precedence over <see cref="IconName"/> when both are set.
107+
/// </summary>
108+
/// <remarks>
109+
/// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
110+
/// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
111+
/// </remarks>
112+
/// <example>
113+
/// Bootstrap: Icon="BitIconInfo.Bi("gear-fill")"
114+
/// FontAwesome: Icon="BitIconInfo.Fa("solid house")"
115+
/// Custom CSS: Icon="BitIconInfo.Css("my-icon-class")"
116+
/// </example>
117+
[Parameter] public BitIconInfo? Icon { get; set; }
118+
119+
/// <summary>
120+
/// The name of the icon to display from the built-in Fluent UI icons.
88121
/// </summary>
89-
[Parameter] public string IconName { get; set; } = "Clock";
122+
/// <remarks>
123+
/// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.Clock</c>).
124+
/// Browse available names in <c>BitIconName</c> of the <c>Bit.BlazorUI.Icons</c> nuget package or the gallery:
125+
/// <see href="https://blazorui.bitplatform.dev/iconography"/>.
126+
/// For external icon libraries, use <see cref="Icon"/> instead.
127+
/// </remarks>
128+
[Parameter] public string? IconName { get; set; }
90129

91130
/// <summary>
92131
/// Custom TimePicker icon template

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor‎

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/components/circulartimepicker"
1+
@page "/components/circulartimepicker"
22
@page "/components/circular-time-picker"
33
@using Bit.BlazorUI.Demo.Client.Core.Helpers
44

@@ -194,7 +194,34 @@
194194
</div>
195195
</DemoExample>
196196

197-
<DemoExample Title="Style & Class" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
197+
<DemoExample Title="External Icons" RazorCode="@example12RazorCode" Id="example12">
198+
<div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b> parameter.</div>
199+
<br />
200+
<br />
201+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
202+
<div>FontAwesome:</div>
203+
<br />
204+
<div class="example-content">
205+
<BitCircularTimePicker Label="FontAwesome" Icon="@("fa-solid fa-clock")" />
206+
<br /><br />
207+
<BitCircularTimePicker Label="FontAwesome (Css)" Icon="@BitIconInfo.Css("fa-solid fa-heart")" />
208+
<br /><br />
209+
<BitCircularTimePicker Label="FontAwesome (Fa)" Icon="@BitIconInfo.Fa("solid clock")" />
210+
</div>
211+
<br /><br />
212+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
213+
<div>Bootstrap:</div>
214+
<br />
215+
<div class="example-content">
216+
<BitCircularTimePicker Label="Bootstrap" Icon="@("bi bi-clock-fill")" />
217+
<br /><br />
218+
<BitCircularTimePicker Label="Bootstrap (Css)" Icon="@BitIconInfo.Css("bi bi-heart-fill")" />
219+
<br /><br />
220+
<BitCircularTimePicker Label="Bootstrap (Bi)" Icon="@BitIconInfo.Bi("clock-fill")" />
221+
</div>
222+
</DemoExample>
223+
224+
<DemoExample Title="Style & Class" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
198225
<div>Explore styling and class customization for BitCircularTimePicker, including component styles, custom classes, and detailed styles.</div>
199226
<br /><br />
200227
<div>Component's Style & Class:</div>
@@ -237,7 +264,7 @@
237264
</div>
238265
</DemoExample>
239266

240-
<DemoExample Title="RTL" RazorCode="@example13RazorCode" Id="example13">
267+
<DemoExample Title="RTL" RazorCode="@example14RazorCode" Id="example14">
241268
<div>Use BitCircularTimePicker in a right-to-left (RTL) layout.</div>
242269
<br />
243270
<div dir="rtl">

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor.cs‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.CircularTimePicker;
1+
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.CircularTimePicker;
22

33
public partial class BitCircularTimePickerDemo
44
{
@@ -42,6 +42,20 @@ public partial class BitCircularTimePickerDemo
4242
LinkType = LinkType.Link
4343
},
4444
new()
45+
{
46+
Name = "CloseButtonIcon",
47+
Type = "BitIconInfo?",
48+
DefaultValue = "null",
49+
Description = "The icon for the close button using external icon libraries. Takes precedence over CloseButtonIconName when both are set."
50+
},
51+
new()
52+
{
53+
Name = "CloseButtonIconName",
54+
Type = "string?",
55+
DefaultValue = "Cancel",
56+
Description = "The name of the icon for the close button from the built-in Fluent UI icons. For external icon libraries, use CloseButtonIcon instead."
57+
},
58+
new()
4559
{
4660
Name = "CloseButtonTitle",
4761
Type = "string",
@@ -81,11 +95,18 @@ public partial class BitCircularTimePickerDemo
8195
Description = "TimePicker icon location."
8296
},
8397
new()
98+
{
99+
Name = "Icon",
100+
Type = "BitIconInfo?",
101+
DefaultValue = "null",
102+
Description = "The icon to display using custom CSS classes for external icon libraries (e.g., FontAwesome, Bootstrap Icons). Takes precedence over IconName when both are set."
103+
},
104+
new()
84105
{
85106
Name = "IconName",
86-
Type = "string",
107+
Type = "string?",
87108
DefaultValue = "Clock",
88-
Description = "Optional TimePicker icon."
109+
Description = "The name of the icon from the built-in Fluent UI icons. For external icon libraries, use Icon instead."
89110
},
90111
new()
91112
{

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor.samples.cs‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,24 @@ private async Task HandleValidSubmit()
137137
}";
138138

139139
private readonly string example12RazorCode = @"
140+
<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
141+
142+
<BitCircularTimePicker Label=""FontAwesome"" Icon=""@(""fa-solid fa-clock"")"" />
143+
144+
<BitCircularTimePicker Label=""FontAwesome (Css)"" Icon=""@BitIconInfo.Css(""fa-solid fa-heart"")"" />
145+
146+
<BitCircularTimePicker Label=""FontAwesome (Fa)"" Icon=""@BitIconInfo.Fa(""solid clock"")"" />
147+
148+
149+
<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
150+
151+
<BitCircularTimePicker Label=""Bootstrap"" Icon=""@(""bi bi-clock-fill"")"" />
152+
153+
<BitCircularTimePicker Label=""Bootstrap (Css)"" Icon=""@BitIconInfo.Css(""bi bi-heart-fill"")"" />
154+
155+
<BitCircularTimePicker Label=""Bootstrap (Bi)"" Icon=""@BitIconInfo.Bi(""clock-fill"")"" />";
156+
157+
private readonly string example13RazorCode = @"
140158
<style>
141159
.custom-class {
142160
overflow: hidden;
@@ -266,9 +284,9 @@ private async Task HandleValidSubmit()
266284
ClockPointerThumb = ""custom-clock-pointer-thumb"",
267285
ClockSelectedNumber = ""custom-clock-selected-number"",
268286
ClockPointerThumbMinute = ""custom-clock-pointer-thumb-minute"" })"" />";
269-
private readonly string example12CsharpCode = @"
287+
private readonly string example13CsharpCode = @"
270288
private TimeSpan? classesValue;";
271289

272-
private readonly string example13RazorCode = @"
290+
private readonly string example14RazorCode = @"
273291
<BitCircularTimePicker Dir=""BitDir.Rtl"" />";
274292
}

0 commit comments

Comments
 (0)