[dev-v5][Overflow] refactor to wrap web component#4961
Open
vnbaaij wants to merge 7 commits into
Open
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.4%
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates FluentOverflow to a web-component-first implementation (<fluent-overflow>) and updates FluentAppBar to use the same overflow model, with corresponding test and documentation updates to reflect the new API (including MoreButtonTemplate → MoreTemplate) and the removal of FluentOverflowItem.
Changes:
- Replace the Blazor/JSInterop overflow implementation with a
<fluent-overflow>custom element and a new Core.Scripts implementation +overflowchangecustom event wiring. - Update
FluentAppBarto use<fluent-overflow>for overflow state and adjust keyboard navigation behavior for the popover trigger. - Refresh unit tests and demo docs/examples (including a new migration doc) to match the new direct-children/selector-based overflow model.
Reviewed changes
Copilot reviewed 27 out of 27 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/Core/Components/Overflow/FluentOverflowTests.razor | Updates bUnit coverage for the new direct-children and attribute-driven overflow model. |
| src/Core/Events/OverflowChangedItem.cs | Adds a payload model for overflowchange event item data. |
| src/Core/Events/OverflowChangedEventArgs.cs | Adds event args for overflowchange and exposes counts/index information to Blazor. |
| src/Core/Events/EventHandlers.cs | Registers onoverflowchange as a supported Blazor event handler. |
| src/Core/Enums/OverflowItemFixed.cs | Removes the old enum-based fixed behavior API (now expressed via HTML attributes). |
| src/Core/Components/Overflow/FluentOverflowItem.razor.cs | Removes the dedicated overflow-item component (direct children are now managed). |
| src/Core/Components/Overflow/FluentOverflowItem.razor | Removes the dedicated overflow-item markup. |
| src/Core/Components/Overflow/FluentOverflow.razor.ts | Removes the old JSInterop-based overflow implementation. |
| src/Core/Components/Overflow/FluentOverflow.razor.css | Updates styling to support measuring direct children and ellipsis fixed mode. |
| src/Core/Components/Overflow/FluentOverflow.razor.cs | Refactors the wrapper to consume web component state/events and expose OverflowCount/items. |
| src/Core/Components/Overflow/FluentOverflow.razor | Switches rendering to <fluent-overflow> and renames template API to MoreTemplate. |
| src/Core/Components/AppBar/FluentAppBar.razor.css | Minor formatting changes. |
| src/Core/Components/AppBar/FluentAppBar.razor.cs | Refactors overflow handling to respond to overflowchange instead of JSInterop callbacks. |
| src/Core/Components/AppBar/FluentAppBar.razor | Wraps app items in <fluent-overflow> and tweaks search input attributes. |
| src/Core.Scripts/src/Startup.ts | Registers the new Overflow web component and custom event at startup. |
| src/Core.Scripts/src/FluentUICustomEvents.ts | Adds Blazor custom event type registration for overflowchange. |
| src/Core.Scripts/src/Components/Overflow/FluentOverflow.ts | Introduces the <fluent-overflow> custom element implementation (observers + measurement + dispatch). |
| examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationIndex.md | Adds Overflow to the migration index. |
| examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentOverflow.md | Adds a dedicated FluentOverflow migration guide (new model + removed APIs). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/FluentOverflow.md | Updates docs with new examples, parameters, and migration include. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowVisibleOnLoad.razor | Updates example to use direct children instead of FluentOverflowItem. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowSelectorExample.razor | Adds selector-based overflow example (new). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowMultipleFixedItemsExample.razor | Adds multiple fixed-ellipsis items example (new). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowMaxRenderedItemsExample.razor | Adds payload-capping (MaxRenderedItems) example (new). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowEllipsis.razor | Updates ellipsis example to use fixed="ellipsis" on direct children. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowDefault.razor | Updates default example to use direct children instead of FluentOverflowItem. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowCustomExample.razor | Updates custom template example for MoreTemplate and new item payload type. |
- Remove internal constructor
vnbaaij
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request
📖 Description
This refactor moves
FluentOverflowto a web-component-first implementation (<fluent-overflow>) to reduce resize latency and remove the old back-and-forth Blazor/JS flow. It also aligns AppBar overflow behavior with the same model and refreshes Overflow docs/examples to match the new API and migration path.The Overflow component now wraps a dedicated fluent-overflow custom element, replacing the previous Blazor-heavy back-and-forth flow with direct overflow events and on-demand state retrieval. This reduces resize latency and makes overflow behavior more responsive.
What changed
API and migration surface
Docs and examples
Overflow docs were expanded and reorganized with focused examples:
Examples were adjusted to better reflect real behavior and expected constraints at narrow sizes.
Validation
🎫 Issues
N/A
👩💻 Reviewer Notes
Please focus review on:
MoreButtonTemplatetoMoreTemplate.📑 Test Plan
✅ Checklist
General
Component-specific