diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index a22fbf879f..52ea84cef9 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -4862,6 +4862,50 @@ Gets the variant of the icon: Filled, Regular. + + + Gets or sets the icon drawing and fill color. + Value comes from the enumeration. Defaults to Accent. + + + + + Gets or sets the icon drawing and fill color to a custom value. + Needs to be formatted as an HTML hex color string (#rrggbb or #rgb) or CSS variable. + ⚠️ Only available when Color is set to Color.Custom. + + + + + Get or set the icon width. + + + + + The icon to display when the mouse is over. + + + + + The icon to display when the mouse is out. + + + + + Gets or sets the tooltip's position. See . + Don't set this if you want the tooltip to use the best position. + + + + + Gets or sets the maximum width of tooltip panel. + + + + + Gets or sets the content to be rendered inside the tooltip. + + diff --git a/examples/Demo/Shared/Pages/InfoButton/Examples/InfoButtonDefault.razor b/examples/Demo/Shared/Pages/InfoButton/Examples/InfoButtonDefault.razor new file mode 100644 index 0000000000..a6b50b3e0b --- /dev/null +++ b/examples/Demo/Shared/Pages/InfoButton/Examples/InfoButtonDefault.razor @@ -0,0 +1,32 @@ + + This is example information for an InfoButton + Learn more + + + +
+ This is example information for an InfoButton + Learn more +
+ + + +
+ Part 1: +

+ Lorem ipsum dolor sit amet, consectetur adipisci elit, + sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. + Lorem ipsum. +

+ + + + Part 2: +

+ Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum. +

+
+ diff --git a/examples/Demo/Shared/Pages/InfoButton/InfoButtonPage.razor b/examples/Demo/Shared/Pages/InfoButton/InfoButtonPage.razor new file mode 100644 index 0000000000..c63bc29ae2 --- /dev/null +++ b/examples/Demo/Shared/Pages/InfoButton/InfoButtonPage.razor @@ -0,0 +1,22 @@ +@page "/InfoButton" + +@using FluentUI.Demo.Shared.Pages.InfoButton.Examples + +@App.PageTitle("InfoButton") + +

Info Button

+ +

+ FluentInfoButton Use Info button control to provide additional information to users. +

+

+ The component exposes the following parameters: +

+ +

Example

+ + + +

Documentation

+ + diff --git a/examples/Demo/Shared/Shared/DemoNavProvider.cs b/examples/Demo/Shared/Shared/DemoNavProvider.cs index f39d23a34e..42f9f79d67 100644 --- a/examples/Demo/Shared/Shared/DemoNavProvider.cs +++ b/examples/Demo/Shared/Shared/DemoNavProvider.cs @@ -371,6 +371,11 @@ public DemoNavProvider() icon: new Icons.Regular.Size20.ChevronCircleDown(), title: "MenuButton" ), + new NavLink( + href: "/InfoButton", + icon: new Icons.Regular.Size20.Info(), + title: "InfoButton" + ), ] ), new NavLink( diff --git a/src/Core/Components/InfoButton/FluentInfoButton.razor b/src/Core/Components/InfoButton/FluentInfoButton.razor new file mode 100644 index 0000000000..d812cba6d9 --- /dev/null +++ b/src/Core/Components/InfoButton/FluentInfoButton.razor @@ -0,0 +1,29 @@ +@namespace Microsoft.FluentUI.AspNetCore.Components +@inherits FluentComponentBase + + +@if (_visible) +{ + + @ChildContent + +} diff --git a/src/Core/Components/InfoButton/FluentInfoButton.razor.cs b/src/Core/Components/InfoButton/FluentInfoButton.razor.cs new file mode 100644 index 0000000000..f3acb45c46 --- /dev/null +++ b/src/Core/Components/InfoButton/FluentInfoButton.razor.cs @@ -0,0 +1,93 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.FluentUI.AspNetCore.Components.Utilities; +using System.Reflection.Metadata; + +namespace Microsoft.FluentUI.AspNetCore.Components; + +public partial class FluentInfoButton +{ + private bool _showIconHover = false; + private bool _visible = false; + + public FluentInfoButton() + { + Id = Id ?? Identifier.NewId(); + } + + private string IdTooltip => $"{Id}-tooltip"; + private readonly string _ariaHidden = "true"; + + protected string? ClassValue => new CssBuilder(Class) + .AddClass("fluent-info-button") + .Build(); + + /// + /// Gets or sets the icon drawing and fill color. + /// Value comes from the enumeration. Defaults to Accent. + /// + [Parameter] + public Color? IconColor { get; set; } + + /// + /// Gets or sets the icon drawing and fill color to a custom value. + /// Needs to be formatted as an HTML hex color string (#rrggbb or #rgb) or CSS variable. + /// ⚠️ Only available when Color is set to Color.Custom. + /// + [Parameter] + public string? IconCustomColor { get; set; } + + /// + /// Get or set the icon width. + /// + [Parameter] + public string IconWidth { get; set; } = "16px"; + + /// + /// The icon to display when the mouse is over. + /// + [Parameter] + public Icon IconHover { get; set; } = new CoreIcons.Filled.Size16.Info(); + + /// + /// The icon to display when the mouse is out. + /// + [Parameter] + public Icon Icon { get; set; } = new CoreIcons.Regular.Size16.Info(); + + /// + /// Gets or sets the tooltip's position. See . + /// Don't set this if you want the tooltip to use the best position. + /// + [Parameter] + public TooltipPosition? Position { get; set; } + + /// + /// Gets or sets the maximum width of tooltip panel. + /// + [Parameter] + public string? MaxWidth { get; set; } + + /// + /// Gets or sets the content to be rendered inside the tooltip. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + private void OnIconMouseOut() + { + if (!_visible) + { + _showIconHover = false; + } + } + + private void OnIconFocusOut() + { + _visible = false; + _showIconHover = false; + } + + private void OnIconMouseOver() => _showIconHover = true; + + private void OnIconClick() => _visible = !_visible; +} diff --git a/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_ChildContent.verified.razor.html b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_ChildContent.verified.razor.html new file mode 100644 index 0000000000..b0f367bbe3 --- /dev/null +++ b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_ChildContent.verified.razor.html @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Default.verified.razor.html b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Default.verified.razor.html new file mode 100644 index 0000000000..da81684b70 --- /dev/null +++ b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Default.verified.razor.html @@ -0,0 +1,4 @@ + + diff --git a/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Icon.verified.razor.html b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Icon.verified.razor.html new file mode 100644 index 0000000000..7149d41992 --- /dev/null +++ b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Icon.verified.razor.html @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconColor.verified.razor.html b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconColor.verified.razor.html new file mode 100644 index 0000000000..5db26fbf6b --- /dev/null +++ b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconColor.verified.razor.html @@ -0,0 +1,4 @@ + + diff --git a/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconCustomColor.verified.razor.html b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconCustomColor.verified.razor.html new file mode 100644 index 0000000000..9a4b3c4359 --- /dev/null +++ b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconCustomColor.verified.razor.html @@ -0,0 +1,3 @@ + diff --git a/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconHover.verified.razor.html b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconHover.verified.razor.html new file mode 100644 index 0000000000..b0f367bbe3 --- /dev/null +++ b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconHover.verified.razor.html @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_MaxWidth.verified.razor.html b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_MaxWidth.verified.razor.html new file mode 100644 index 0000000000..da81684b70 --- /dev/null +++ b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_MaxWidth.verified.razor.html @@ -0,0 +1,4 @@ + + diff --git a/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Position.verified.razor.html b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Position.verified.razor.html new file mode 100644 index 0000000000..da81684b70 --- /dev/null +++ b/tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Position.verified.razor.html @@ -0,0 +1,4 @@ + + diff --git a/tests/Core/InfoButton/FluentInfoButtonTests.razor b/tests/Core/InfoButton/FluentInfoButtonTests.razor new file mode 100644 index 0000000000..b6191bb7a0 --- /dev/null +++ b/tests/Core/InfoButton/FluentInfoButtonTests.razor @@ -0,0 +1,123 @@ +@using Xunit; +@inherits TestContext + +@code +{ + public FluentInfoButtonTests() + { + JSInterop.Mode = JSRuntimeMode.Loose; + Services.AddSingleton(new LibraryConfiguration()); + } + + [Fact] + public void FluentInfoButton_Default() + { + // Arrange && Act + var cut = Render(@ + This is example information for an InfoButton + Learn more + ); + + // Assert + cut.Verify(); + } + + [Theory] + [InlineData(TooltipPosition.Top)] + [InlineData(TooltipPosition.Bottom)] + [InlineData(TooltipPosition.Start)] + [InlineData(TooltipPosition.End)] + [InlineData(TooltipPosition.Left)] + [InlineData(TooltipPosition.Right)] + public void FluentInfoButton_Position(TooltipPosition position) + { + // Arrange && Act + var cut = Render(@ + This is example information for an InfoButton + Learn more + ); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentInfoButton_MaxWidth() + { + // Arrange && Act + var cut = Render(@ + This is example information for an InfoButton + Learn more + ); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentInfoButton_IconColor() + { + // Arrange && Act + var cut = Render(@ + This is example information for an InfoButton + Learn more + ); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentInfoButton_IconCustomColor() + { + // Arrange && Act + var cut = Render(@ + This is example information for an InfoButton + Learn more + ); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentInfoButton_IconHover() + { + // Arrange && Act + var cut = Render(@ + This is example information for an InfoButton + Learn more + ); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentInfoButton_Icon() + { + // Arrange && Act + var cut = Render(@ + This is example information for an InfoButton + Learn more + ); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentInfoButton_ChildContent() + { + // Arrange && Act + var cut = Render(@ + This is example information for an InfoButton + Learn more + ); + + // Assert + cut.Verify(); + } +} + +