Open
Conversation
MarvinKlein1508
suggested changes
Feb 1, 2026
...mo.Client/Documentation/Components/SortableList/Examples/SortableListCloneBetweenLists.razor
Outdated
Show resolved
Hide resolved
- Add tests - Update docs - Update styles
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
- Work on a11y - Use new external scripts functionality
- Refine dynamic loading
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 99.1%
|
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request introduces a new FluentSortableList component to the Blazor Fluent UI library, providing drag-and-drop sortable list functionality powered by SortableJS. The component includes comprehensive keyboard accessibility support, extensive documentation, and multiple usage examples demonstrating various features like sorting, moving between lists, cloning, filtering, and drag handles.
Changes:
- Added
FluentSortableList<TItem>generic component with full TypeScript/JavaScript integration via SortableJS library - Implemented keyboard accessibility features (Space/Enter for grabbing, Arrow keys for movement, Tab handling) with appropriate ARIA attributes
- Provided comprehensive documentation, unit tests, and seven example implementations covering different use cases
Reviewed changes
Copilot reviewed 26 out of 27 changed files in this pull request and generated 35 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Core/Components/SortableList/FluentSortableList.razor | Component markup with ARIA attributes for accessibility |
| src/Core/Components/SortableList/FluentSortableList.razor.cs | Component code-behind with parameters for sorting, grouping, filtering, and event handling |
| src/Core/Components/SortableList/FluentSortableList.razor.css | Comprehensive styling with CSS variables for customization and RTL support |
| src/Core/Components/SortableList/FluentSortableListEventArgs.cs | Event arguments class for OnUpdate and OnRemove callbacks |
| src/Core.Scripts/src/Components/SortableList/FluentSortableList.ts | TypeScript integration with SortableJS and custom keyboard accessibility implementation |
| src/Core.Scripts/src/ExportedMethods.ts | Registration of SortableList component in exported methods |
| src/Core.Scripts/src/ExternalLibs.ts | Updated comment to be more generic (not IMask-specific) |
| src/Core.Scripts/package.json | Added @types/sortablejs dev dependency |
| src/Core.Scripts/package-lock.json | Updated lock file with new dependency and removed peer flags |
| src/Core.Scripts/esbuild.config.mjs | Added sortablejs to external dependencies list |
| src/Core.Scripts/.npmrc | Changed npm registry from Azure DevOps to public npm registry |
| src/Core/tsconfig.json | Added esModuleInterop and allowSyntheticDefaultImports for better module handling |
| src/Core.Scripts/tsconfig.json | Updated esModuleInterop from false to true |
| src/Core.Scripts/src/BuildConstants.ts | Added auto-generated file comment |
| tests/Core/Components/SortableList/FluentSortableListTests.razor | Unit tests covering default rendering, ID assignment, event callbacks, filtering, and disposal |
| tests/Core/Components/SortableList/*.verified.razor.html | Snapshot test verification files |
| tests/Core/Components/Base/ComponentBaseTests.cs | Added FluentSortableList to component loader configuration |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/SortableList/FluentSortableList.md | Comprehensive documentation with usage instructions and accessibility information |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/SortableList/Examples/*.razor | Seven example files demonstrating different features (default, move, clone, disabled, handles, filtering, fallback) |
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.
examples/Demo/FluentUI.Demo.Client/Documentation/Components/SortableList/FluentSortableList.md
Outdated
Show resolved
Hide resolved
tests/Core/Components/SortableList/FluentSortableListTests.razor
Outdated
Show resolved
Hide resolved
src/Core.Scripts/src/Components/SortableList/FluentSortableList.ts
Outdated
Show resolved
Hide resolved
...emo.Client/Documentation/Components/SortableList/Examples/SortableListMoveBetweenLists.razor
Show resolved
Hide resolved
...uentUI.Demo.Client/Documentation/Components/SortableList/Examples/SortableListFallback.razor
Show resolved
Hide resolved
...emo.Client/Documentation/Components/SortableList/Examples/SortableListMoveBetweenLists.razor
Show resolved
Hide resolved
src/Core.Scripts/src/Components/SortableList/FluentSortableList.ts
Outdated
Show resolved
Hide resolved
src/Core.Scripts/src/Components/SortableList/FluentSortableList.ts
Outdated
Show resolved
Hide resolved
…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
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
3 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 pull request introduces a new
FluentSortableListcomponent for Blazor Fluent UI, providing a drag-and-drop sortable list powered by SortableJS. The update includes the component implementation, JavaScript interop, documentation, and a comprehensive set of usage examples demonstrating sorting, moving, cloning, filtering, disabling, drag handles, and fallback behaviors.Accessabillity support
SortableJS does not come with a11y support but we enhanced the
FluentSortableListcomponent to support keyboard accessibility.We support the following operations by keyboard:The component also provides appropriate ARIA attributes to enhance screen reader support.
The most important changes are:
Component Implementation and Integration
FluentSortableListBlazor component, which renders a sortable list using a providedItemTemplateand exposes event hooks for sorting and moving items. (FluentSortableList.razor)FluentSortableList.ts)sortablejsas a new dependency in the project. (package.json)Documentation
FluentSortableList.md)Examples and Demos
.razorfiles showcasing different use cases:Unit Tests
