[FluentProfileMenu] New component

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

@@ -6246,6 +6246,95 @@
             Default is Small.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.HeaderTemplate">
+            <summary>
+            Gets or sets the content to be displayed in the header section of the popover.
+            Using this property will override the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.HeaderLabel" /> and <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.HeaderButton"/> properties.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.ChildContent">
+            <summary>
+            Gets or sets the content to be displayed in the main section (body) of the popover.
+            Using this property will override the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.EMail"/>, <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.FullName"/>, <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.Image"/> properties.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.FooterTemplate">
+            <summary>
+            Gets or sets the content to be displayed in the footer section of the popover.
+            Using this property will override the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.FooterLink" /> property.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.Status">
+            <summary>
+            Gets or sets the status to show. See <see cref="T:Microsoft.FluentUI.AspNetCore.Components.PresenceStatus"/> for options.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.StatusTitle">
+            <summary>
+            Gets or sets the title to show on hover. If not provided, the status will be used.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.Initials">
+            <summary>
+            Gets or sets the initials to display if no image is provided.
+            By default, the first letters of the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.FullName"/> is used.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.FullName">
+            <summary>
+            Gets or sets the name to display.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.EMail">
+            <summary>
+            Gets or sets the email to display.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.HeaderLabel">
+            <summary>
+            Gets or sets the header label (e.g Company Name) to display on the top-left.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.Image">
+            <summary>
+            Gets or sets the image to display, in replacement of the initials.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.ImageSize">
+            <summary>
+            Gets or sets the size of the image, in the popover.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.ButtonSize">
+            <summary>
+            Gets or sets the size of the main button image (button clickable to display the popover).
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.HeaderButton">
+            <summary>
+            Gets or sets the Header Button label (e.g. Sign out) on the top-right.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.OnHeaderButtonClick">
+            <summary>
+            Event raised when the user clicks on the Header Button (e.g. Sign out).
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.FooterLabel">
+            <summary>
+            Gets or sets the footer label to display on the bottom-left.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.FooterLink">
+            <summary>
+            Gets or sets the Footer hyperlink label (e.g. View account) on the bottom-right.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu.OnFooterLinkClick">
+            <summary>
+            Event raised when the user clicks on the Footer hyperlink (e.g. View account).
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentProgress.Min">
             <summary>
             Gets or sets the minimum value.

examples/Demo/Shared/Pages/ProfileMenu/Examples/ProfileMenuCustomized.razor

@@ -0,0 +1,23 @@
+<FluentStack HorizontalAlignment="@HorizontalAlignment.Center"
+             VerticalAlignment="@VerticalAlignment.Center"
+             Style="height: 48px; background: var(--neutral-layer-4);">
+    <FluentProfileMenu Initials="BG">
+        <HeaderTemplate>
+            <FluentLabel Typo="@Typography.Header">Login</FluentLabel>
+        </HeaderTemplate>
+        <ChildContent>
+            <div style="width: 250px; height: 80px">
+                <FluentLabel Typo="@Typography.Header" Style="font-weight: bold;">Bill Gates</FluentLabel>
+                <FluentLabel>[email protected]</FluentLabel>
+            </div>
+        </ChildContent>
+        <FooterTemplate>
+            <FluentStack>
+                <FluentSpacer />
+                <FluentAnchor Appearance="@Appearance.Hypertext"
+                              Href="https://microsoft.com"
+                              Target="_blank">About</FluentAnchor>
+            </FluentStack>
+        </FooterTemplate>
+    </FluentProfileMenu>
+</FluentStack>

examples/Demo/Shared/Pages/ProfileMenu/Examples/ProfileMenuDefault.razor

@@ -0,0 +1,11 @@
+<FluentStack HorizontalAlignment="@HorizontalAlignment.Center"
+             VerticalAlignment="@VerticalAlignment.Center"
+             Style="height: 48px; background: var(--neutral-layer-4);">
+    <FluentProfileMenu Image="@DataSource.SamplePicture"
+                       Status="@PresenceStatus.Available"
+                       HeaderLabel="Microsoft"
+                       Initials="BG"
+                       FullName="Bill Gates"
+                       EMail="[email protected]"
+                       Style="min-width: 330px;" />
+</FluentStack>

examples/Demo/Shared/Pages/ProfileMenu/ProfileMenuPage.razor

@@ -0,0 +1,20 @@
+@page "/ProfileMenu"
+
+@using FluentUI.Demo.Shared.Pages.ProfileMenu.Examples
+
+<h1>ProfileMenu</h1>
+
+<p>
+    A "User Profile Menu" is a component commonly found on websites or applications.
+    It typically appears in the top-right corner of a web page and provides options related to
+    the user's account. Within this menu, users can access features such as viewing their account details,
+    adjusting settings, and logging out. It serves as a convenient hub for managing account-related actions.
+</p>
+
+<DemoSection Title="Default" Component="typeof(ProfileMenuDefault)"></DemoSection>
+
+<DemoSection Title="Customized" Component="typeof(ProfileMenuCustomized)"></DemoSection>
+
+<h2 id="documentation">Documentation</h2>
+
+<ApiDocumentation Component="typeof(FluentProfileMenu)" />

examples/Demo/Shared/Shared/DemoNavProvider.cs

@@ -445,6 +445,11 @@ public DemoNavProvider()
                         icon: new Icons.Regular.Size20.TooltipQuote(),
                         title: "Popover"
                     ),
+                    new NavLink(
+                        href: "/ProfileMenu",
+                        icon: new Icons.Regular.Size20.PeopleList(),
+                        title: "ProfileMenu"
+                    ),
                     new NavLink(
                         href: "/Progress",
                         icon: new Icons.Regular.Size20.SquareHint(),

src/Core/Components/Popover/FluentPopover.razor

@@ -13,19 +13,19 @@
                           Shadow="@ElevationShadow.Flyout"
                           Class="@ClassValue"
                           Style="@StyleValue">
-        <FluentStack Orientation="Orientation.Vertical" >
+        <FluentStack Orientation="Orientation.Vertical">
             <div class="fluent-popover-content">
                 @if (Header is not null)
                 {
-                    <div class="fluent-popover-header">@Header</div>
+                    <div part="header">@Header</div>
                 }
                 @if (Body is not null)
                 {
-                    <div class="fluent-popover-body">@Body</div>
+                    <div part="body">@Body</div>
                 }
                 @if (Footer is not null)
                 {
-                    <div class="fluent-popover-footer">@Footer</div>
+                    <div part="footer">@Footer</div>
                 }
             </div>
         </FluentStack>

src/Core/Components/Popover/FluentPopover.razor.css

@@ -1,4 +1,4 @@
-.fluent-popover-content  {
+.fluent-popover-content  {
     font-family: var(--body-font);
     -webkit-font-smoothing: antialiased;
     line-height: 27px;
@@ -9,23 +9,20 @@
     padding: 1em;
 }
 
-    .fluent-popover-content .fluent-popover-header {
+    .fluent-popover-content div[part="header"] {
         font-size: 20px;
         font-weight: 600;
         width: inherit;
+        margin-bottom: 12px;
     }
 
-    .fluent-popover-content .fluent-popover-body {
+    .fluent-popover-content div[part="body"] {
         height: 100%;
-        width: inherit;
-        margin-top: 1em;
-        display: flex;
-        flex-direction: column;
     }
 
-    .fluent-popover-content .fluent-popover-footer {
+    .fluent-popover-content div[part="footer"] {
         font-size: 14px;
         font-weight: normal;
         width: inherit;
-        margin-top: 1em;
+        margin-top: 12px;
     }

src/Core/Components/ProfileMenu/FluentProfileMenu.razor

@@ -0,0 +1,83 @@
+@namespace Microsoft.FluentUI.AspNetCore.Components
+@inherits FluentComponentBase
+
+<div class="fluent-profile-menu">
+    <FluentPersona Id="@Id"
+                   Image="@Image"
+                   Name="@FullName"
+                   ImageSize="@ButtonSize"
+                   Status="@Status"
+                   StatusTitle="@StatusTitle"
+                   Initials="@Initials"
+                   Style="height: inherit;"
+                   OnClick="@(e => PopoverVisible = !PopoverVisible)" />
+
+    <FluentPopover AnchorId="@Id"
+                   Class="@Class"
+                   Style="@Style"
+                   HorizontalPosition="@HorizontalPosition.Start"
+                   @bind-Open="@PopoverVisible"
+                   @attributes="@AdditionalAttributes">
+        <Header>
+            @if (HeaderTemplate is null && (!string.IsNullOrEmpty(HeaderLabel) || !string.IsNullOrEmpty(HeaderButton)))
+            {
+                <FluentStack VerticalAlignment="@VerticalAlignment.Center">
+                    @if (!string.IsNullOrEmpty(HeaderLabel))
+                    {
+                        <FluentLabel part="header-label">@HeaderLabel</FluentLabel>
+                    }
+                    @if (!string.IsNullOrEmpty(HeaderButton))
+                    {
+                        <FluentSpacer />
+                        <FluentButton part="header-button" Appearance="@Appearance.Stealth" OnClick="@OnHeaderButtonClick">@HeaderButton</FluentButton>
+                    }
+                </FluentStack>
+            }
+            else
+            {
+                @HeaderTemplate
+            }
+        </Header>
+
+        <Body>
+            @if (ChildContent is null)
+            {
+                <FluentStack Style="height: 100%;">
+                    <FluentPersona Image="@Image"
+                                   ImageSize="@ImageSize"
+                                   Initials="@Initials"
+                                   Style="align-items: normal;">
+                        <FluentLabel part="fullname" Typo="@Typography.Header" Style="font-weight: bold;">@FullName</FluentLabel>
+                        <FluentLabel part="email">@EMail</FluentLabel>
+                    </FluentPersona>
+
+                </FluentStack>
+            }
+            else
+            {
+                @ChildContent
+            }
+        </Body>
+
+        <Footer>
+            @if (FooterTemplate is null && !string.IsNullOrEmpty(FooterLink))
+            {
+                <FluentStack VerticalAlignment="@VerticalAlignment.Center">
+                    @if (!string.IsNullOrEmpty(FooterLabel))
+                    {
+                        <FluentLabel part="footer-label">@FooterLabel</FluentLabel>
+                    }
+                    @if (!string.IsNullOrEmpty(FooterLink))
+                    {
+                        <FluentSpacer />
+                        <FluentAnchor part="footer-link" Appearance="@Appearance.Hypertext" Href="#" OnClick="@OnFooterLinkClick">@FooterLink</FluentAnchor>
+                    }
+                </FluentStack>
+            }
+            else
+            {
+                @FooterTemplate
+            }
+        </Footer>
+    </FluentPopover>
+</div>