Add new Icon parameters to BitTimeline (#12100)

src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.razor

@@ -1,4 +1,4 @@
-@namespace Bit.BlazorUI
+@namespace Bit.BlazorUI
 @inherits BitComponentBase
 @typeparam TItem
 
@@ -15,13 +15,16 @@
     {
         var item = _items[i];
 
+        var icon = GetIcon(item);
         var hideDot = GetHideDot(item);
         var iconName = GetIconName(item);
         var dotTemplate = GetDotTemplate(item);
         var primaryContent = GetPrimaryContent(item);
         var isEnabled = IsEnabled && GetIsEnabled(item);
         var secondaryContent = GetSecondaryContent(item);
 
+        icon = BitIconInfo.From(icon, iconName);
+
         <div @onclick="() => HandleOnItemClick(item)"
              tabindex="@(isEnabled ? 0 : -1)"
              disabled="@(isEnabled is false)"
@@ -48,9 +51,9 @@
                     else
                     {
                         <div style="@Styles?.Dot" class="bit-tln-dot @Classes?.Dot">
-                            @if (iconName.HasValue())
+                            @if (icon is not null)
                             {
-                                <i style="@Styles?.Icon" class="bit-tln-ico bit-icon bit-icon--@iconName @Classes?.Icon" />
+                                <i style="@Styles?.Icon" class="bit-tln-ico @icon.GetCssClasses() @Classes?.Icon" />
                             }
                         </div>
                     }

src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.razor.cs

@@ -265,6 +265,30 @@ private async Task HandleOnItemClick(TItem item)
         return item.GetValueFromProperty<string?>(NameSelectors.Class.Name);
     }
 
+    private BitIconInfo? GetIcon(TItem? item)
+    {
+        if (item is null) return null;
+
+        if (item is BitTimelineItem timelineItem)
+        {
+            return timelineItem.Icon;
+        }
+
+        if (item is BitTimelineOption timelineOption)
+        {
+            return timelineOption.Icon;
+        }
+
+        if (NameSelectors is null) return null;
+
+        if (NameSelectors.Icon.Selector is not null)
+        {
+            return NameSelectors.Icon.Selector!(item);
+        }
+
+        return item.GetValueFromProperty<BitIconInfo?>(NameSelectors.Icon.Name);
+    }
+
     private string? GetIconName(TItem? item)
     {
         if (item is null) return null;

src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimelineItem.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public class BitTimelineItem
 {
@@ -22,6 +22,21 @@ public class BitTimelineItem
     /// </summary>
     public bool HideDot { get; set; }
 
+    /// <summary>
+    /// Gets or sets the icon to display using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="IconName"/> when both are set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
+    /// </remarks>
+    /// <example>
+    /// Bootstrap: Icon="BitIconInfo.Bi("gear-fill")"
+    /// FontAwesome: Icon = BitIconInfo.Fa("solid house")
+    /// Custom CSS: Icon = BitIconInfo.Css("my-icon-class")
+    /// </example>
+    public BitIconInfo? Icon { get; set; }
+
     /// <summary>
     /// Name of an icon to render in the timeline item.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimelineNameSelectors.cs

@@ -22,6 +22,11 @@ public class BitTimelineNameSelectors<TItem>
     /// </summary>
     public BitNameSelectorPair<TItem, bool> HideDot { get; set; } = new(nameof(BitTimelineItem.HideDot));
 
+    /// <summary>
+    /// Icon field name and selector of the custom input class.
+    /// </summary>
+    public BitNameSelectorPair<TItem, BitIconInfo?> Icon { get; set; } = new(nameof(BitTimelineItem.Icon));
+
     /// <summary>
     /// IconName field name and selector of the custom input class.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimelineOption.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public partial class BitTimelineOption : ComponentBase, IDisposable
 {
@@ -28,6 +28,21 @@ public partial class BitTimelineOption : ComponentBase, IDisposable
     /// </summary>
     [Parameter] public bool HideDot { get; set; }
 
+    /// <summary>
+    /// Gets or sets the icon to display using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="IconName"/> when both are set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
+    /// </remarks>
+    /// <example>
+    /// Bootstrap: Icon="BitIconInfo.Bi("gear-fill")"
+    /// FontAwesome: Icon="BitIconInfo.Fa("solid house")"
+    /// Custom CSS: Icon="BitIconInfo.Css("my-icon-class")"
+    /// </example>
+    [Parameter] public BitIconInfo? Icon { get; set; }
+
     /// <summary>
     /// Name of an icon to render in the timeline option.
     /// </summary>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/BitTimelineDemo.razor

@@ -1,4 +1,4 @@
-@page "/components/timeline"
+@page "/components/timeline"
 @inherits AppComponentBase
 
 

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/BitTimelineDemo.razor.cs

@@ -140,6 +140,15 @@ public partial class BitTimelineDemo
                    Description = "Hides the item's dot.",
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitIconInfo?",
+                   DefaultValue = "null",
+                   Description = "The icon to render in the item. Takes precedence over IconName.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "string?",
@@ -260,6 +269,15 @@ public partial class BitTimelineDemo
                    Description = "Hides the option's dot.",
                },
                new()
+               {
+                   Name = "Icon",
+                   Type = "BitIconInfo?",
+                   DefaultValue = "null",
+                   Description = "The icon to render in the option. Takes precedence over IconName.",
+                   LinkType = LinkType.Link,
+                   Href = "#bit-icon-info",
+               },
+               new()
                {
                    Name = "IconName",
                    Type = "string?",
@@ -379,6 +397,15 @@ public partial class BitTimelineDemo
                     LinkType = LinkType.Link,
                 },
                 new()
+                {
+                    Name = "Icon",
+                    Type = "BitNameSelectorPair<TItem, BitIconInfo?>",
+                    DefaultValue = "new(nameof(BitTimelineItem.Icon))",
+                    Description = "Icon field name and selector of the custom input class.",
+                    Href = "#name-selector-pair",
+                    LinkType = LinkType.Link,
+                },
+                new()
                 {
                     Name = "IconName",
                     Type = "BitNameSelectorPair<TItem, string?>",
@@ -433,15 +460,6 @@ public partial class BitTimelineDemo
                     LinkType = LinkType.Link,
                 },
                 new()
-                {
-                    Name = "IsEnabled",
-                    Type = "BitNameSelectorPair<TItem, bool>",
-                    DefaultValue = "new(nameof(BitTimelineItem.IsEnabled))",
-                    Description = "IsEnabled field name and selector of the custom input class.",
-                    Href = "#name-selector-pair",
-                    LinkType = LinkType.Link,
-                },
-                new()
                 {
                     Name = "SecondaryContent",
                     Type = "BitNameSelectorPair<TItem, RenderFragment?>",
@@ -510,65 +528,94 @@ public partial class BitTimelineDemo
                    Name = "Root",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the root element of the BitButton."
+                   Description = "Custom CSS classes/styles for the root element of the BitTimeline."
                },
                new()
                {
                    Name = "Item",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the item of the BitButton."
+                   Description = "Custom CSS classes/styles for the item of the BitTimeline."
                },
                new()
                {
                    Name = "PrimaryContent",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the primary content of the BitButton."
+                   Description = "Custom CSS classes/styles for the primary content of the BitTimeline."
                },
                new()
                {
                    Name = "PrimaryText",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the primary text of the BitButton."
+                   Description = "Custom CSS classes/styles for the primary text of the BitTimeline."
                },
                new()
                {
                    Name = "SecondaryContent",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the secondary content of the BitButton."
+                   Description = "Custom CSS classes/styles for the secondary content of the BitTimeline."
                },
                new()
                {
                    Name = "SecondaryText",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the secondary text of the BitButton."
+                   Description = "Custom CSS classes/styles for the secondary text of the BitTimeline."
                },
                new()
                {
                    Name = "Divider",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the divider of the BitButton."
+                   Description = "Custom CSS classes/styles for the divider of the BitTimeline."
                },
                new()
                {
                    Name = "Dot",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the dot of the BitButton."
+                   Description = "Custom CSS classes/styles for the dot of the BitTimeline."
                },
                new()
                {
                    Name = "Icon",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the icon of the BitButton."
+                   Description = "Custom CSS classes/styles for the icon of the BitTimeline."
                }
             ]
+        },
+        new()
+        {
+            Id = "bit-icon-info",
+            Title = "BitIconInfo",
+            Parameters =
+            [
+               new()
+               {
+                   Name = "Name",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the name of the icon."
+               },
+               new()
+               {
+                   Name = "BaseClass",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to \"bit-icon\". For external icon libraries like FontAwesome, you might set this to \"fa\" or leave empty."
+               },
+               new()
+               {
+                   Name = "Prefix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to \"bit-icon--\". For external icon libraries, you might set this to \"fa-\" or leave empty."
+               },
+            ]
         }
     ];
 

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/Event.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Lists.Timeline;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Lists.Timeline;
 
 public class Event
 {
@@ -10,6 +10,8 @@ public class Event
 
     public string? FirstText { get; set; }
 
+    public BitIconInfo? ExternalIcon { get; set; }
+
     public string? Icon { get; set; }
 
     public bool Disabled { get; set; }

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor

@@ -1,4 +1,4 @@
-<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
     <BitTimeline Items="basicCustoms" NameSelectors="nameSelectors" />
 </DemoExample>
 
@@ -154,7 +154,36 @@
     <BitTimeline Horizontal Size="BitSize.Large" Variant="BitVariant.Text" Items="iconCustoms" NameSelectors="nameSelectors" />
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+<DemoExample Title="External Icons" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <div>External icon libraries like FontAwesome and Bootstrap Icons can be used with the Icon parameter.</div>
+
+    <br />
+    <br />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+
+    <div><b>FontAwesome Icons:</b></div>
+    <br />
+    <BitTimeline Horizontal Items="externalIconCustoms1" NameSelectors="nameSelectors" />
+    <br /><br /><br />
+    <BitTimeline Horizontal Items="externalIconCustoms2" NameSelectors="nameSelectors" Variant="BitVariant.Outline" />
+    <br /><br /><br />
+    <BitTimeline Horizontal Items="externalIconCustoms3" NameSelectors="nameSelectors" Variant="BitVariant.Text" />
+
+    <br /><br /><br /><br />
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+
+    <div><b>Bootstrap Icons:</b></div>
+    <br />
+    <BitTimeline Horizontal Items="bootstrapIconCustoms1" NameSelectors="nameSelectors" />
+    <br /><br /><br />
+    <BitTimeline Horizontal Items="bootstrapIconCustoms2" NameSelectors="nameSelectors" Variant="BitVariant.Outline" />
+    <br /><br /><br />
+    <BitTimeline Horizontal Items="bootstrapIconCustoms3" NameSelectors="nameSelectors" Variant="BitVariant.Text" />
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
     <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
     <br /><br /><br />
     <div>Component's Style & Class:</div><br />
@@ -180,7 +209,7 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+<DemoExample Title="RTL" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
     <div>Use the BitTimeline component in right-to-left (RTL).</div>
     <br /><br /><br />
     <div>Vertical</div><br />