[Overflow] Add Fixed enumeration

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

@@ -7022,7 +7022,7 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOverflowItem.Fixed">
             <summary>
-            Gets or sets if this item does not participate in overflow logic.
+            Gets or sets whether this element does not participate in overflow logic, and will always be visible.
             Defaults to false
             </summary>
         </member>
@@ -13734,6 +13734,26 @@
             The component is oriented vertically.
             </summary>
         </member>
+        <member name="T:Microsoft.FluentUI.AspNetCore.Components.OverflowItemFixed">
+            <summary>
+            Possibility for an element not to participate in the overflow logic and always remain displayed.
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.OverflowItemFixed.None">
+            <summary>
+            If the item is out of the display, it disappears.
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.OverflowItemFixed.Fixed">
+            <summary>
+            The element is always visible
+            </summary>
+        </member>
+        <member name="F:Microsoft.FluentUI.AspNetCore.Components.OverflowItemFixed.Ellipsis">
+            <summary>
+            The element is always visible, but its width can be reduced to display "...".
+            </summary>
+        </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.PresenceBadgeSize">
             <summary>
             Sizes for presence badge

examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor

@@ -16,6 +16,20 @@
         <FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
     </FluentOverflow>
 </div>
+<p>
+    In the following example, the first element will always be displayed (fixed), but an ellipse (...)
+    will be added when the container size is too small.
+    Note: the element must be able to display this ellipse, which is the case for text (like below) but not for the FluentBadge.
+</p>
+<div style="background-color: var(--neutral-layer-4); overflow: auto; resize: horizontal; padding: 10px;">
+    <FluentOverflow Style="width: 100%;">
+        <FluentOverflowItem Fixed="OverflowItemFixed.Ellipsis">Aspire;</FluentOverflowItem>
+        <FluentOverflowItem>Blazor;</FluentOverflowItem>
+        <FluentOverflowItem>Microsoft;</FluentOverflowItem>
+        <FluentOverflowItem>Azure;</FluentOverflowItem>
+        <FluentOverflowItem>DevOps</FluentOverflowItem>
+    </FluentOverflow>
+</div>
 <p>
     With below example the <code>VisibleOnLoad</code> parameter is set to false.
     Make sure the screen dimension is small enough to show an overflow badge with count.
@@ -39,3 +53,10 @@
         <FluentOverflowItem><FluentBadge>Installation</FluentBadge></FluentOverflowItem>
     </FluentOverflow>
 </div>
+
+@code
+{
+    static string[] Catalog = new[] { "Blazor", "WPF", "Microsoft", "#Framework",
+                                      "Electron", "WinForms", "MAUI", "Fluent", "Reality",
+                                      "Office", "Installation", "Azure", "DevOps" };
+}

src/Core/Components/Overflow/FluentOverflow.razor.css

@@ -1,4 +1,4 @@
-.fluent-overflow[orientation="horizontal"] {
+.fluent-overflow[orientation="horizontal"] {
     display: flex;
     flex-direction: row;
     overflow-x: hidden;
@@ -19,3 +19,10 @@
 .fluent-overflow ::deep > *[overflow] {
     display: none;
 }
+
+.fluent-overflow ::deep .fluent-overflow-item[fixed='ellipsis'] {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: fit-content;
+}

src/Core/Components/Overflow/FluentOverflowItem.razor

@@ -1,6 +1,6 @@
 @namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
 
-<div id="@Id" class="@ClassValue" style="@StyleValue" overflow=@Overflow fixed="@(Fixed ? "fixed" : null)">
+<div id="@Id" class="@ClassValue" style="@StyleValue" overflow=@Overflow fixed="@(Fixed != OverflowItemFixed.None ? Fixed.ToAttributeValue() : null)">
     @ChildContent
 </div>

src/Core/Components/Overflow/FluentOverflowItem.razor.cs

@@ -35,11 +35,11 @@ public partial class FluentOverflowItem : IDisposable
     public RenderFragment? ChildContent { get; set; }
 
     /// <summary>
-    /// Gets or sets if this item does not participate in overflow logic.
+    /// Gets or sets whether this element does not participate in overflow logic, and will always be visible.
     /// Defaults to false
     /// </summary>
     [Parameter]
-    public bool Fixed { get; set; } = false;
+    public OverflowItemFixed Fixed { get; set; } = OverflowItemFixed.None;
 
     /// <summary>
     /// Gets True if this component is out of panel.

src/Core/Enums/OverflowItemFixed.cs

@@ -0,0 +1,31 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+using System.ComponentModel;
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+/// <summary>
+/// Possibility for an element not to participate in the overflow logic and always remain displayed.
+/// </summary>
+public enum OverflowItemFixed
+{
+    /// <summary>
+    /// If the item is out of the display, it disappears.
+    /// </summary>
+    [Description("none")]
+    None = 0,
+
+    /// <summary>
+    /// The element is always visible
+    /// </summary>
+    [Description("fixed")]
+    Fixed = 1,
+
+    /// <summary>
+    /// The element is always visible, but its width can be reduced to display "...".
+    /// </summary>
+    [Description("ellipsis")]
+    Ellipsis = 2,
+}