[dev-v5] Make FluentSortableList bindable#4513
Merged
Conversation
- Add tests - Update docs - Update styles
- Work on a11y - Use new external scripts functionality
- Refine dynamic loading
- Update code comment
…rtableList/FluentSortableList.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…t.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…rtableList/FluentSortableList.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…t.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…rtableList/FluentSortableList.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…rtableList/FluentSortableList.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…t.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…t.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
- Add styling docs - Use isolated CSS for some of the examples - Add migration docs
…om/microsoft/fluentui-blazor into users/vnbaaij/dev-v5/sortable-list
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request enhances the FluentSortableList component by making it fully bindable with built-in item sorting and moving behavior. This represents a significant improvement over v4, which required developers to manually implement sorting/moving logic. The PR also adds comprehensive keyboard accessibility support, allowing all drag-and-drop operations to be performed via keyboard navigation, making the component more accessible to users who cannot use a mouse.
Changes:
- Implemented two-way data binding for the
Itemsparameter via@bind-Items, automatically handling item reordering, addition, and removal - Added comprehensive keyboard accessibility with arrow keys for navigation/movement, space/enter for grab/release, and appropriate ARIA attributes
- Converted styling from component parameters to CSS variables for better customization flexibility
Reviewed changes
Copilot reviewed 31 out of 32 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/Core/Components/SortableList/FluentSortableListTests.razor | Comprehensive unit tests for bindable behavior, events, filtering, and disposal |
| tests/Core/Components/SortableList/FluentSortableListTests.*.verified.razor.html | Verified HTML snapshots for visual regression testing |
| tests/Core/Components/Base/ComponentBaseTests.cs | Added FluentSortableList to component test loader configuration |
| src/Core/Components/SortableList/FluentSortableList.razor | Component markup with accessibility attributes (role, aria-label, aria-grabbed, tabindex) |
| src/Core/Components/SortableList/FluentSortableList.razor.cs | Bindable component logic with OnUpdate/OnAdd/OnRemove JS interop methods and ItemsChanged event |
| src/Core/Components/SortableList/FluentSortableList.razor.css | CSS styling converted to CSS variables for customization |
| src/Core/Components/SortableList/FluentSortableListEventArgs.cs | Event arguments class for sortable list events |
| src/Core.Scripts/src/Components/SortableList/FluentSortableList.ts | TypeScript integration with SortableJS including keyboard accessibility implementation |
| src/Core.Scripts/src/ExportedMethods.ts | Registered SortableList module in exported methods |
| src/Core.Scripts/package.json | Added @types/sortablejs dependency |
| src/Core.Scripts/esbuild.config.mjs | Excluded sortablejs from bundle (loaded via CDN) |
| src/Core/tsconfig.json | Added esModuleInterop and allowSyntheticDefaultImports for better module compatibility |
| examples/Demo/.../FluentSortableList.md | Comprehensive documentation with usage examples and accessibility information |
| examples/Demo/.../MigrationFluentSortableList.md | Migration guide from v4 documenting removed parameters and CSS variable changes |
| examples/Demo/.../Examples/*.razor | Multiple example files demonstrating sorting, moving, cloning, filtering, handles, and fallback modes |
Files not reviewed (1)
- src/Core.Scripts/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
.../Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentSortableList.md
Outdated
Show resolved
Hide resolved
.../Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentSortableList.md
Outdated
Show resolved
Hide resolved
examples/Demo/FluentUI.Demo.Client/Documentation/Components/SortableList/FluentSortableList.md
Outdated
Show resolved
Hide resolved
...Demo.Client/Documentation/Components/SortableList/Examples/SortableListDisabledSorting.razor
Outdated
Show resolved
Hide resolved
tests/Core/Components/SortableList/FluentSortableListTests.razor
Outdated
Show resolved
Hide resolved
tests/Core/Components/SortableList/FluentSortableListTests.razor
Outdated
Show resolved
Hide resolved
tests/Core/Components/SortableList/FluentSortableListTests.razor
Outdated
Show resolved
Hide resolved
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 99.1%
|
dvoituron
approved these changes
Feb 12, 2026
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
2 participants
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.
This PR makes the
FluentSortableListbindable. It changes the v4 behavior where a dev needed to supply sorting/moving items code to ne in-built behavior.Also, more work has been done on making the component more keyboard accessible. Now all move/sort/clone action can be done by keyboard, as well as navigation through a list or navigate between lists in a group.
A migrating from v4 document has been added as well
This PR can only to be merged after #4487