Skip to content

Conversation

@GlacierFox
Copy link
Contributor

@GlacierFox GlacierFox commented Jun 8, 2025

Pull Request

📖 Description

I've integrated the predefined style variables into parameters on the FluentSortableList component using a StyleBuilder. In addition to the variables added in my recent pull request (#3877), I've added one more, which allows control of the spacing between list items. I've altered the documentation to reflect these changes by removing the segment about predefined variables and anyone still using the original method eg. <FluentSortableList Id="filter2" Style="--fluent-sortable-list-border-width: 5px;"... can still do so, existing users won't have broken lists.

Instead of

<FluentSortableList Id="filter2" Style="--fluent-sortable-list-border-width: 0px; --fluent-sortable-list-item-border-width: 3px;--fluent-sortable-list-item-border-color; red; --fluent-sortable-list-item-height: auto;  " ItemFilter="@(i => i.Id > 6)" Items="items2" OnUpdate="@SortListTwo" Context="item">
            <ItemTemplate>@item.Name</ItemTemplate>
</FluentSortableList>

its now

<FluentSortableList Id="filter2" ListBorderWidth="0px" ListItemBorderWidth="3px" ListItemBorderColor="red" ListItemHeight="auto"  ItemFilter="@(i => i.Id > 6)" Items="items2" OnUpdate="@SortListTwo" Context="item">
            <ItemTemplate>@item.Name</ItemTemplate>
</FluentSortableList>

Here's a list of all the parameters with screenshots:

ListItemSpacing

ListItemPadding

ListItemDropColor

ListItemDropBorderColor

ListItemBorderColor

ListItemBorderWidth

ListItemHeight

ListItemBackgroundColor

ListPadding

ListBorderColor

ListBorderWidth

ListItemFilteredColor

🎫 Issues

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

  • I have added tests for my changes.
  • I have tested my changes.
  • I have updated the project documentation to reflect my changes.
  • I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

  • I have added a new component
  • I have added Unit Tests for my new component
  • I have modified an existing component
  • I have validated the Unit Tests for an existing component

⏭ Next Steps

@vnbaaij vnbaaij enabled auto-merge (squash) June 9, 2025 12:47
@vnbaaij vnbaaij merged commit 9cdb30d into microsoft:dev Jun 9, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants