Sizes for presence badge
diff --git a/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor b/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor
index 98810144bf..77ca1d4f7d 100644
--- a/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor
+++ b/examples/Demo/Shared/Pages/Overflow/Examples/OverflowDefaultExample.razor
@@ -16,6 +16,20 @@
Installation
+
+ 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.
+
+
+
+ Aspire;
+ Blazor;
+ Microsoft;
+ Azure;
+ DevOps
+
+
With below example the VisibleOnLoad
parameter is set to false.
Make sure the screen dimension is small enough to show an overflow badge with count.
@@ -39,3 +53,10 @@
Installation
+
+@code
+{
+ static string[] Catalog = new[] { "Blazor", "WPF", "Microsoft", "#Framework",
+ "Electron", "WinForms", "MAUI", "Fluent", "Reality",
+ "Office", "Installation", "Azure", "DevOps" };
+}
diff --git a/src/Core/Components/Overflow/FluentOverflow.razor.css b/src/Core/Components/Overflow/FluentOverflow.razor.css
index e3a0dde5d1..99a3b596c9 100644
--- a/src/Core/Components/Overflow/FluentOverflow.razor.css
+++ b/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;
+}
diff --git a/src/Core/Components/Overflow/FluentOverflowItem.razor b/src/Core/Components/Overflow/FluentOverflowItem.razor
index bc12287af7..deff9317a2 100644
--- a/src/Core/Components/Overflow/FluentOverflowItem.razor
+++ b/src/Core/Components/Overflow/FluentOverflowItem.razor
@@ -1,6 +1,6 @@
@namespace Microsoft.FluentUI.AspNetCore.Components
@inherits FluentComponentBase
-
+
@ChildContent
diff --git a/src/Core/Components/Overflow/FluentOverflowItem.razor.cs b/src/Core/Components/Overflow/FluentOverflowItem.razor.cs
index 8dddd4208d..ac2a29ba09 100644
--- a/src/Core/Components/Overflow/FluentOverflowItem.razor.cs
+++ b/src/Core/Components/Overflow/FluentOverflowItem.razor.cs
@@ -35,11 +35,11 @@ public partial class FluentOverflowItem : IDisposable
public RenderFragment? ChildContent { get; set; }
///
- /// 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
///
[Parameter]
- public bool Fixed { get; set; } = false;
+ public OverflowItemFixed Fixed { get; set; } = OverflowItemFixed.None;
///
/// Gets True if this component is out of panel.
diff --git a/src/Core/Enums/OverflowItemFixed.cs b/src/Core/Enums/OverflowItemFixed.cs
new file mode 100644
index 0000000000..5b5b710d1e
--- /dev/null
+++ b/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;
+
+///
+/// Possibility for an element not to participate in the overflow logic and always remain displayed.
+///
+public enum OverflowItemFixed
+{
+ ///
+ /// If the item is out of the display, it disappears.
+ ///
+ [Description("none")]
+ None = 0,
+
+ ///
+ /// The element is always visible
+ ///
+ [Description("fixed")]
+ Fixed = 1,
+
+ ///
+ /// The element is always visible, but its width can be reduced to display "...".
+ ///
+ [Description("ellipsis")]
+ Ellipsis = 2,
+}