[InfoButton] New component

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -4862,6 +4862,50 @@
             Gets the variant of the icon: Filled, Regular.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInfoButton.IconColor">
+            <summary>
+            Gets or sets the icon drawing and fill color.
+            Value comes from the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.Color"/> enumeration. Defaults to Accent.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInfoButton.IconCustomColor">
+            <summary>
+            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.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInfoButton.IconWidth">
+            <summary>
+            Get or set the icon width.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInfoButton.IconHover">
+            <summary>
+            The icon to display when the mouse is over.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInfoButton.Icon">
+            <summary>
+            The icon to display when the mouse is out.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInfoButton.Position">
+            <summary>
+            Gets or sets the tooltip's position. See <see cref="T:Microsoft.FluentUI.AspNetCore.Components.TooltipPosition"/>.
+            Don't set this if you want the tooltip to use the best position.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInfoButton.MaxWidth">
+            <summary>
+            Gets or sets the maximum width of tooltip panel.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentInfoButton.ChildContent">
+            <summary>
+            Gets or sets the content to be rendered inside the tooltip.
+            </summary>
+        </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.FluentInputFile">
             <summary />
         </member>

examples/Demo/Shared/Pages/InfoButton/Examples/InfoButtonDefault.razor

@@ -0,0 +1,32 @@
+<FluentInfoButton>
+    This is example information for an InfoButton
+    <a href="https://www.fluentui-blazor.net/InfoButton">Learn more</a>
+</FluentInfoButton>
+
+<FluentInfoButton Position="TooltipPosition.Right">
+    <div style="text-wrap: nowrap;">
+        This is example information for an InfoButton
+        <a href="https://www.fluentui-blazor.net/InfoButton">Learn more</a>
+    </div>
+</FluentInfoButton>
+
+<FluentInfoButton Position="TooltipPosition.Right" MaxWidth="">
+    <div style="min-width: 500px; text-wrap:wrap">
+        <strong>Part 1:</strong>
+        <p>
+            <b>Lorem ipsum</b> 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.
+            <a href="#">Lorem ipsum</a>.
+        </p>
+
+        <FluentDivider Orientation="Orientation.Horizontal" />
+
+        <strong>Part 2:</strong>
+        <p>
+            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.
+            <a href="#">Lorem ipsum</a>.
+        </p>
+    </div>
+</FluentInfoButton>

examples/Demo/Shared/Pages/InfoButton/InfoButtonPage.razor

@@ -0,0 +1,22 @@
+@page "/InfoButton"
+
+@using FluentUI.Demo.Shared.Pages.InfoButton.Examples
+
+<PageTitle>@App.PageTitle("InfoButton")</PageTitle>
+
+<h1>Info Button</h1>
+
+<p>
+    <code>FluentInfoButton</code> Use Info button control to provide additional information to users.
+</p>
+<p>
+    The component exposes the following parameters:
+</p>
+
+<h2 id="example">Example</h2>
+
+<DemoSection Title="Default" Component="typeof(InfoButtonDefault)" />
+
+<h2 id="documentation">Documentation</h2>
+
+<ApiDocumentation Component="typeof(FluentInfoButton)" />

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(

src/Core/Components/InfoButton/FluentInfoButton.razor

@@ -0,0 +1,29 @@
+@namespace Microsoft.FluentUI.AspNetCore.Components
+@inherits FluentComponentBase
+
+<FluentIcon Id="@Id"
+            Value="@(_showIconHover ? IconHover : Icon)"
+            Width="@IconWidth"
+            Color="@IconColor"
+            Focusable="true"
+            CustomColor="@IconCustomColor"
+            @onmouseout="@OnIconMouseOut"
+            @onmouseover="@OnIconMouseOver"
+            @onfocusout="@OnIconFocusOut"
+            OnClick="@OnIconClick"
+            aria-describedby="@IdTooltip"
+            aria-hidden="@_ariaHidden"
+            />
+@if (_visible)
+{
+<FluentTooltip Id="@IdTooltip"
+               Anchor="@Id"
+               Visible="_visible"
+               Position="@Position"
+               MaxWidth="@MaxWidth"
+               Class="@ClassValue"
+               Style="@Style"
+               role="tooltip">
+    @ChildContent
+</FluentTooltip>
+}

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();
+
+    /// <summary>
+    /// Gets or sets the icon drawing and fill color.
+    /// Value comes from the <see cref="AspNetCore.Components.Color"/> enumeration. Defaults to Accent.
+    /// </summary>
+    [Parameter]
+    public Color? IconColor { get; set; }
+
+    /// <summary>
+    /// 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.
+    /// </summary>
+    [Parameter]
+    public string? IconCustomColor { get; set; }
+
+    /// <summary>
+    /// Get or set the icon width.
+    /// </summary>
+    [Parameter]
+    public string IconWidth { get; set; } = "16px";
+
+    /// <summary>
+    /// The icon to display when the mouse is over.
+    /// </summary>
+    [Parameter]
+    public Icon IconHover { get; set; } = new CoreIcons.Filled.Size16.Info();
+
+    /// <summary>
+    /// The icon to display when the mouse is out.
+    /// </summary>
+    [Parameter]
+    public Icon Icon { get; set; } = new CoreIcons.Regular.Size16.Info();
+
+    /// <summary>
+    /// Gets or sets the tooltip's position. See <see cref="AspNetCore.Components.TooltipPosition"/>.
+    /// Don't set this if you want the tooltip to use the best position.
+    /// </summary>
+    [Parameter]
+    public TooltipPosition? Position { get; set; }
+
+    /// <summary>
+    /// Gets or sets the maximum width of tooltip panel.
+    /// </summary>
+    [Parameter]
+    public string? MaxWidth { get; set; }
+
+    /// <summary>
+    /// Gets or sets the content to be rendered inside the tooltip.
+    /// </summary>
+    [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;
+}

tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_ChildContent.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg id="xxx" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" blazor:onkeydown="1" blazor:onclick="2" blazor:onmouseout="3" blazor:onmouseover="4" blazor:onfocusout="5" aria-describedby="InfoButton-tooltip" aria-hidden="true">
+  <path d="M8 7c.28 0 .5.22.5.5v3a.5.5 0 0 1-1 0v-3c0-.28.22-.5.5-.5Zm0-.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-5a5 5 0 1 0 0 10A5 5 0 0 0 8 3Z"></path>
+</svg>

tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Default.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg id="xxx" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" aria-hidden="true" blazor:onkeydown="1" blazor:onclick="2" blazor:onmouseout="3" blazor:onmouseover="4" blazor:onfocusout="5" aria-describedby="InfoButton-tooltip">
+    <path d="M8 7c.28 0 .5.22.5.5v3a.5.5 0 0 1-1 0v-3c0-.28.22-.5.5-.5Zm0-.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-5a5 5 0 1 0 0 10A5 5 0 0 0 8 3Z"></path>
+</svg>

tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Icon.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg id="xxx" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" blazor:onkeydown="1" blazor:onclick="2" blazor:onmouseout="3" blazor:onmouseover="4" blazor:onfocusout="5" aria-describedby="InfoButton-tooltip" aria-hidden="true">
+  <path d="M11.75 3c.38 0 .7.28.74.65l.01.1V11h7.25a.75.75 0 0 1 .1 1.5H12.5v7.25a.75.75 0 0 1-1.49.1V12.5H3.74a.75.75 0 0 1-.1-1.5H11V3.75c0-.41.34-.75.75-.75Z"></path>
+</svg>

tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconColor.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg id="xxx" style="width: 16px; fill: red; cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" aria-hidden="true" blazor:onkeydown="1" blazor:onclick="2" blazor:onmouseout="3" blazor:onmouseover="4" blazor:onfocusout="5" aria-describedby="InfoButton-tooltip">
+    <path d="M8 7c.28 0 .5.22.5.5v3a.5.5 0 0 1-1 0v-3c0-.28.22-.5.5-.5Zm0-.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-5a5 5 0 1 0 0 10A5 5 0 0 0 8 3Z"></path>
+</svg>

tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconCustomColor.verified.razor.html

@@ -0,0 +1,3 @@
+<svg id="xxx" style="width: 16px; fill: red; cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" aria-hidden="true" blazor:onkeydown="1" blazor:onclick="2" blazor:onmouseout="3" blazor:onmouseover="4" blazor:onfocusout="5" aria-describedby="InfoButton-tooltip">
+    <path d="M8 7c.28 0 .5.22.5.5v3a.5.5 0 0 1-1 0v-3c0-.28.22-.5.5-.5Zm0-.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-5a5 5 0 1 0 0 10A5 5 0 0 0 8 3Z"></path>
+</svg>

tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_IconHover.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg id="xxx" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" blazor:onkeydown="1" blazor:onclick="2" blazor:onmouseout="3" blazor:onmouseover="4" blazor:onfocusout="5" aria-describedby="InfoButton-tooltip" aria-hidden="true">
+  <path d="M8 7c.28 0 .5.22.5.5v3a.5.5 0 0 1-1 0v-3c0-.28.22-.5.5-.5Zm0-.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-5a5 5 0 1 0 0 10A5 5 0 0 0 8 3Z"></path>
+</svg>

tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_MaxWidth.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg id="xxx" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" aria-hidden="true" blazor:onkeydown="1" blazor:onclick="2" blazor:onmouseout="3" blazor:onmouseover="4" blazor:onfocusout="5" aria-describedby="InfoButton-tooltip">
+    <path d="M8 7c.28 0 .5.22.5.5v3a.5.5 0 0 1-1 0v-3c0-.28.22-.5.5-.5Zm0-.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-5a5 5 0 1 0 0 10A5 5 0 0 0 8 3Z"></path>
+</svg>

tests/Core/InfoButton/FluentInfoButtonTests.FluentInfoButton_Position.verified.razor.html

@@ -0,0 +1,4 @@
+
+<svg id="xxx" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" aria-hidden="true" blazor:onkeydown="1" blazor:onclick="2" blazor:onmouseout="3" blazor:onmouseover="4" blazor:onfocusout="5" aria-describedby="InfoButton-tooltip">
+    <path d="M8 7c.28 0 .5.22.5.5v3a.5.5 0 0 1-1 0v-3c0-.28.22-.5.5-.5Zm0-.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-5a5 5 0 1 0 0 10A5 5 0 0 0 8 3Z"></path>
+</svg>