diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor index 60c5b2c334..23eb8af9cd 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor @@ -1,4 +1,4 @@ -@namespace Bit.BlazorUI +@namespace Bit.BlazorUI @inherits BitComponentBase
- @if (GutterIcon is not null) + @{ + var icon = BitIconInfo.From(GutterIcon, GutterIconName); + } + @if (icon is not null) { - + } else { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs index 8b3b127fa7..f4cb134f5a 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs @@ -28,10 +28,33 @@ public partial class BitSplitter : BitComponentBase public int? GutterSize { get; set; } /// - /// The icon of BitSplitter gutter. + /// The icon for the BitSplitter gutter using for external icon library support. + /// Takes precedence over when both are set. /// - [Parameter, ResetStyleBuilder] - public string? GutterIcon { get; set; } + /// + /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons. + /// For built-in Fluent UI icons, use instead. + /// When assigning a plain to this property, it is converted to a instance and + /// treated as the raw CSS class name(s) for the external icon (for example, "fa fa-home"), not as a Fluent UI icon name. + /// To render built-in Fluent UI icons, use instead; passing a Fluent icon name as a string to + /// will compile but will not render a Fluent icon unless you also configure + /// and/or for a custom icon set. + /// + [Parameter] + public BitIconInfo? GutterIcon { get; set; } + + /// + /// The name of the built-in Fluent UI icon to render in the BitSplitter gutter. + /// Ignored when is also set. + /// + /// + /// The icon name should be from the Fluent UI icon set (e.g., BitIconName.GripperDotsVertical). + /// For external icon libraries, use instead, + /// where string values are interpreted as CSS class name(s) + /// for the external icon rather than as Fluent UI icon identifiers. + /// + [Parameter] + public string? GutterIconName { get; set; } /// /// The content for the first panel. diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor index 33e8a6e21d..cbfe8c7e78 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor @@ -1,4 +1,4 @@ -@page "/components/splitter" +@page "/components/splitter" @@ -153,7 +154,7 @@ - +
First Panel @@ -176,4 +177,114 @@ + + +
Use icons from external libraries like FontAwesome and Bootstrap Icons with the GutterIcon parameter (BitIconInfo).
+ +
+
+ + + +
FontAwesome:
+
+ + +
+ First Panel +
+ Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. +
+ + +
+ Second Panel +
+ Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. +
+ "fa-solid fa-arrows-left-right" +
+ + + +
+ + + +
+ First Panel +
+ BitIconInfo.Css("fa-solid fa-grip-vertical") +
+ + +
+ Second Panel +
+ BitIconInfo.Css("fa-solid fa-grip-vertical") +
+ + + +
+ + + +
+ First Panel +
+ BitIconInfo.Fa("solid grip-lines-vertical") +
+ + +
+ Second Panel +
+ BitIconInfo.Fa("solid grip-lines-vertical") +
+ + + +



+ + + +
Bootstrap:
+
+ + +
+ First Panel +
+ Icon=@@("bi bi-grip-vertical") +
+ + +
+ Second Panel +
+ Icon=@@("bi bi-grip-vertical") +
+ + + +
+ + + +
+ First Panel +
+ BitIconInfo.Bi("arrow-left-right") +
+ + +
+ Second Panel +
+ BitIconInfo.Bi("arrow-left-right") +
+ + + \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor.cs index 2e5b1b77e8..381a32a493 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Splitter/BitSplitterDemo.razor.cs @@ -14,9 +14,20 @@ public partial class BitSplitterDemo new() { Name = "GutterIcon", + Type = "BitIconInfo?", + DefaultValue = "null", + Description = "The icon for the BitSplitter gutter using BitIconInfo for external icon library support. Takes precedence over GutterIconName when both are set.", + LinkType = LinkType.Link, + Href = "#bit-icon-info", + }, + new() + { + Name = "GutterIconName", Type = "string?", DefaultValue = "null", - Description = "The icon of BitSplitter gutter.", + Description = "The name of the built-in Fluent UI icon to render in the BitSplitter gutter. Ignored when GutterIcon is also set.", + LinkType = LinkType.Link, + Href = "https://blazorui.bitplatform.dev/iconography", }, new() { @@ -85,6 +96,41 @@ public partial class BitSplitterDemo + private readonly List componentSubClasses = + [ + 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." + }, + ] + }, + ]; + + + private double gutterSize = 10; @@ -229,7 +275,7 @@ Second Panel "; private readonly string example6RazorCode = @" - +
First Panel @@ -251,4 +297,98 @@ Second Panel
"; + + private readonly string example7RazorCode = @" + + + + +
+ First Panel +
+ Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. +
+ + +
+ Second Panel +
+ Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. +
+ ""fa-solid fa-arrows-left-right"" +
+ + + + + +
+ First Panel +
+ BitIconInfo.Css(""fa-solid fa-grip-vertical"") +
+ + +
+ Second Panel +
+ BitIconInfo.Css(""fa-solid fa-grip-vertical"") +
+ + + + + +
+ First Panel +
+ BitIconInfo.Fa(""solid grip-lines-vertical"") +
+ + +
+ Second Panel +
+ BitIconInfo.Fa(""solid grip-lines-vertical"") +
+ + + + + + + + +
+ First Panel +
+ Icon=@@(""bi bi-grip-vertical"") +
+ + +
+ Second Panel +
+ Icon=@@(""bi bi-grip-vertical"") +
+ + + + + +
+ First Panel +
+ BitIconInfo.Bi(""arrow-left-right"") +
+ + +
+ Second Panel +
+ BitIconInfo.Bi(""arrow-left-right"") +
+ +"; + } diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs index 02370a9f08..e9309a96c1 100644 --- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs +++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Surfaces/Splitter/BitSplitterTests.cs @@ -47,7 +47,7 @@ public void BitSplitterShouldRenderGutterIconWhenProvided() var iconName = "GripperDotsVertical"; var component = RenderComponent(parameters => { - parameters.Add(p => p.GutterIcon, iconName); + parameters.Add(p => p.GutterIconName, iconName); }); var icon = component.Find(".bit-spl .bit-icon"); @@ -55,6 +55,96 @@ public void BitSplitterShouldRenderGutterIconWhenProvided() Assert.IsTrue(icon.ClassList.Contains($"bit-icon--{iconName}")); } + [TestMethod] + public void BitSplitterIconShouldRenderWithBitIconInfo() + { + var iconName = "GripperDotsVertical"; + var component = RenderComponent(parameters => + { + parameters.Add(p => p.GutterIcon, BitIconInfo.Bit(iconName)); + }); + + var icon = component.Find(".bit-spl-gic"); + + Assert.IsTrue(icon.ClassList.Contains("bit-icon")); + Assert.IsTrue(icon.ClassList.Contains($"bit-icon--{iconName}")); + } + + [TestMethod] + public void BitSplitterIconShouldRenderExternalCssClasses() + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.GutterIcon, BitIconInfo.Css("fa-solid fa-grip-vertical")); + }); + + var icon = component.Find(".bit-spl-gic"); + + Assert.IsTrue(icon.ClassList.Contains("fa-solid")); + Assert.IsTrue(icon.ClassList.Contains("fa-grip-vertical")); + } + + [TestMethod] + public void BitSplitterIconShouldRenderFontAwesomeClasses() + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.GutterIcon, BitIconInfo.Fa("solid grip-lines-vertical")); + }); + + var icon = component.Find(".bit-spl-gic"); + + Assert.IsTrue(icon.ClassList.Contains("fa-solid")); + Assert.IsTrue(icon.ClassList.Contains("fa-grip-lines-vertical")); + } + + [TestMethod] + public void BitSplitterIconShouldRenderBootstrapIconClasses() + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.GutterIcon, BitIconInfo.Bi("grip-vertical")); + }); + + var icon = component.Find(".bit-spl-gic"); + + Assert.IsTrue(icon.ClassList.Contains("bi")); + Assert.IsTrue(icon.ClassList.Contains("bi-grip-vertical")); + } + + [TestMethod] + public void BitSplitterGutterIconShouldTakePrecedenceOverGutterIconName() + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.GutterIcon, BitIconInfo.Css("fa-solid fa-grip-vertical")); + parameters.Add(p => p.GutterIconName, "GripperDotsVertical"); + }); + + var icon = component.Find(".bit-spl-gic"); + + // GutterIcon (BitIconInfo.Css) should take precedence + Assert.IsTrue(icon.ClassList.Contains("fa-solid")); + Assert.IsTrue(icon.ClassList.Contains("fa-grip-vertical")); + Assert.IsFalse(icon.ClassList.Contains("bit-icon")); + } + + [TestMethod] + public void BitSplitterIconShouldRenderGutterIconClassOnIconElement() + { + var iconName = "GripperDotsVertical"; + var component = RenderComponent(parameters => + { + parameters.Add(p => p.GutterIconName, iconName); + }); + + var icon = component.Find(".bit-spl-gic"); + + Assert.IsNotNull(icon); + Assert.IsTrue(icon.ClassList.Contains("bit-icon")); + Assert.IsTrue(icon.ClassList.Contains($"bit-icon--{iconName}")); + } + [TestMethod] public void BitSplitterShouldRespectVerticalClass() {