[dev-v5] Migrate FluentOverlay

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/Examples/OverlayBackgroundColor.razor

@@ -0,0 +1,18 @@
+
+<FluentButton Appearance="ButtonAppearance.Primary" @onclick="() => visible = !visible">Show Overlay</FluentButton>
+
+<FluentOverlay @bind-Visible="visible"
+               Opacity="60"
+               BackgroundColor="rgba(255, 0, 0, 1)"
+               OnClose="HandleOnClose">
+    <FluentSpinner />
+</FluentOverlay>
+
+@code {
+    private bool visible;
+
+    private void HandleOnClose()
+    {
+        Console.WriteLine("Custom background color overlay closed");
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/Examples/OverlayDefault.razor

@@ -0,0 +1,33 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+
+<FluentSelect Items="@(Enum.GetValues<JustifyContent>())"
+              OptionValue="@(c => c.ToAttributeValue())"
+              @bind-Value="@justification" />
+
+<FluentSelect Items="@(Enum.GetValues<HorizontalAlignment>())"
+              OptionValue="@(c => c.ToAttributeValue())"
+              @bind-Value="@alignment" />
+
+<br />
+<br />
+
+<FluentButton Appearance="ButtonAppearance.Primary" @onclick="() => visible = !visible">Show Overlay</FluentButton>
+
+<FluentOverlay @bind-Visible="visible"
+               Transparent="false"
+               Alignment="alignment"
+               Justification="justification"
+               OnClose="HandleOnClose">
+    <FluentSpinner />
+</FluentOverlay>
+
+@code {
+    private bool visible;
+    private JustifyContent justification = JustifyContent.Center;
+    private HorizontalAlignment alignment = HorizontalAlignment.Center;
+
+    private void HandleOnClose()
+    {
+        Console.WriteLine("Overlay closed");
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/Examples/OverlayFullScreen.razor

@@ -0,0 +1,19 @@
+
+<FluentButton Appearance="ButtonAppearance.Primary" @onclick="() => visible = !visible">Show Overlay</FluentButton>
+
+<FluentOverlay @bind-Visible="visible"
+               BackgroundColor="#e8f48c"
+               FullScreen="true"
+               OnClose="HandleOnClose"
+               PreventScroll="true">
+    <FluentSpinner />
+</FluentOverlay>
+
+@code {
+    private bool visible;
+
+    private void HandleOnClose()
+    {
+        Console.WriteLine("Full screen overlay closed");
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/Examples/OverlayInteractive.razor

@@ -0,0 +1,66 @@
+
+<FluentStack HorizontalGap="10px">
+    <FluentSwitch @bind-Value="interactive" Label="Interactive" />
+    <FluentSwitch @bind-Value="interactiveExceptId" Label="Exception Zone (my-zone)" Disabled="@(!interactive)" />
+    <FluentSwitch @bind-Value="fullScreen" Label="Full screen" />
+</FluentStack>
+
+<FluentButton Appearance="ButtonAppearance.Primary"
+              Style="margin: 24px 0px;"
+              @onclick="() => visible = !visible">
+    Show Overlay
+</FluentButton>
+
+<FluentStack VerticalAlignment="VerticalAlignment.Center">
+    <FluentButton OnClick="@(e => counter++)">Increment</FluentButton>
+    <FluentLabel>Counter: @counter</FluentLabel>
+</FluentStack>
+
+<FluentOverlay @bind-Visible="visible"
+               BackgroundColor="#e8f48c"
+               FullScreen="fullScreen"
+               Interactive="interactive"
+               InteractiveExceptId="@(interactiveExceptId ? "my-zone" : null)"
+               OnClose="HandleOnClose"
+               PreventScroll="true">
+    @if (interactive)
+    {
+        <div id="my-zone">
+            <p>Non-interactive zone</p>
+            <FluentSpinner />
+        </div>
+    }
+    else
+    {
+        <FluentSpinner />
+    }
+</FluentOverlay>
+
+<style>
+    #my-zone {
+        background-color: var(--colorNeutralBackground1);
+        width: 200px;
+        height: 160px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    #my-zone p {
+        color: var(--colorNeutralForeground1);
+    }
+</style>
+
+@code {
+    private bool visible;
+    private bool interactive = true;
+    private bool interactiveExceptId = true;
+    private bool fullScreen = true;
+    private int counter = 0;
+
+    private void HandleOnClose()
+    {
+        Console.WriteLine("Overlay closed");
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/Examples/OverlayTimed.razor

@@ -0,0 +1,33 @@
+@using Microsoft.FluentUI.AspNetCore.Components.Extensions
+
+<FluentSelect Items="@(Enum.GetValues<JustifyContent>())"
+              OptionValue="@(c => c.ToAttributeValue())"
+              @bind-Value="justification" />
+
+<FluentSelect Items="@(Enum.GetValues<HorizontalAlignment>())"
+              OptionValue="@(c => c.ToAttributeValue())"
+              @bind-Value="alignment" />
+<br />
+<br />
+
+<FluentButton Appearance="ButtonAppearance.Primary" @onclick="HandleOnOpen">Show Overlay</FluentButton>
+
+<FluentOverlay @bind-Visible="visible"
+               Alignment="alignment"
+               Justification="justification">
+    <FluentSpinner />
+</FluentOverlay>
+
+@code {
+    private bool visible;
+    private JustifyContent justification = JustifyContent.Center;
+    private HorizontalAlignment alignment = HorizontalAlignment.Center;
+
+    private async Task HandleOnOpen()
+    {
+        visible = true;
+        Console.WriteLine("Overlay opened");
+        await Task.Delay(3000);
+        visible = false;
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/Examples/OverlayTransparent.razor

@@ -0,0 +1,15 @@
+
+<FluentButton Appearance="ButtonAppearance.Primary" @onclick="() => visible = !visible">Show Overlay</FluentButton>
+
+<FluentOverlay @bind-Visible="visible" OnClose="HandleOnClose" Transparent="true">
+    <FluentSpinner />
+</FluentOverlay>
+
+@code {
+    private bool visible;
+
+    private void HandleOnClose()
+    {
+        Console.WriteLine("Transparent overlay closed");
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overlay/FluentOverlay.md

@@ -0,0 +1,46 @@
+---
+title: Overlay
+route: /Overlay
+---
+
+# Overlay
+
+Overlays are used to temporarily overlay screen content to focus a dialog, progress or other information/interaction.
+
+## Default
+
+{{ OverlayDefault }}
+
+## Timed
+
+A timed overlay that hides after being shown for 3 seconds
+
+{{ OverlayTimed }}
+
+## Transparent overlay
+
+Overlay with a transparent background
+
+{{ OverlayTransparent }}
+
+## Background color
+
+Overlay with a custom background color
+
+{{ OverlayBackgroundColor }}
+
+## Full screen
+
+Overlay which takes up the whole screen.
+
+{{ OverlayFullScreen }}
+
+## Interactive
+By using the `Interactive` and `InteractiveExceptId` properties, only the targeted element will not close the FluentOverlay panel. The user can click anywhere else to close the FluentOverlay.
+In this example, the FluentOverlay will only close when the user clicks outside the white zone and the user can increment the counter before to close the Overlay.
+
+{{ OverlayInteractive }}
+
+## API FluentOverlay
+
+{{ API Type=FluentOverlay }}

src/Core/Components/Overlay/FluentOverlay.razor

@@ -0,0 +1,17 @@
+@namespace Microsoft.FluentUI.AspNetCore.Components
+@inherits FluentComponentBase
+
+@if (Visible)
+{
+    <div class="@ClassValue"
+         style="@StyleValue"
+         id="@Id"
+         @attributes="@AdditionalAttributes"
+         @onclick="@OnCloseHandlerAsync"
+         @oncontextmenu="@OnCloseHandlerAsync"
+         @oncontextmenu:preventDefault="true">
+        <div style="@StyleContentValue">
+            @ChildContent
+        </div>
+    </div>
+}