[SortableList] Extend sortable list parameters

examples/Demo/Shared/Pages/SortableList/Examples/SortableListFiltering.razor

@@ -6,7 +6,7 @@
      </FluentGridItem>
 
     <FluentGridItem xs="12" sm="6">
-        <FluentSortableList Id="filter2" ItemFilter="@(i => i.Id > 6)" Items="items2" OnUpdate="@SortListTwo" Context="item" Style="--fluent-sortable-list-filtered: var(--accent-base-color);">
+        <FluentSortableList Id="filter2" ItemFilter="@(i => i.Id > 6)" Items="items2" OnUpdate="@SortListTwo" Context="item">
             <ItemTemplate>@item.Name</ItemTemplate>
         </FluentSortableList>
     </FluentGridItem>

examples/Demo/Shared/Pages/SortableList/SortableListPage.razor

@@ -9,26 +9,6 @@
 <p>A <a href="https://sortablejs.github.io/Sortable/">SortableJS library</a> adaptation for Blazor Fluent UI. Allows for reordering elements within a list using drag and drop. Inspired by and based on <a href="https://devblogs.microsoft.com/dotnet/introducing-blazor-sortable/">Burke Holland's article and code</a>. Re-used with permission.</p>
 <p>The <code>FluentSortableList</code> is a generic component that takes a list of items and a <code>ItemTemplate</code> that defines how to render each item in the sortable list.</p>
 
-<p>The following CSS variables have been predefined. These can be overruled by using the component's <code>Style</code> parameter. See the <a href="/SortableList#filtering">filtering</a> example for how to do this.</p>
-
-<code>
-    <pre>
-    .fluent-sortable-list {
-        --fluent-sortable-list-background-color: var(--neutral-layer-2);
-        --fluent-sortable-list-item-height: calc(var(--design-unit) * 8px);
-        --fluent-sortable-list-filtered: var(--warning);
-        --fluent-sortable-list-border-width: calc(var(--stroke-width) * 1px);
-        --fluent-sortable-list-border-color: var(--neutral-stroke-input-active);
-        --fluent-sortable-list-padding: calc(var(--design-unit) * 1px);
-        --fluent-sortable-list-item-border-width: calc(var(--stroke-width) * 1px);
-        --fluent-sortable-list-item-border-color: var(--neutral-stroke-input-active);
-        --fluent-sortable-list-item-drop-border-color: var(--accent-fill-rest);
-        --fluent-sortable-list-item-drop-color: var(--neutral-layer-1);
-        --fluent-sortable-list-item-padding: 0 calc(var(--design-unit) * 2px);
-    }
-    </pre>
-</code>
-
 <h2 id="how-to-use-it-in-your-own-project">How to use this in your own project</h2>
 <p>
     If you want to use the <code>FluentSortableList</code> component, you will need to include the script to your <code>index.html</code>/<code>_Layout.cshtml</code>/<code>App.razor</code> file. You can either download from the <a href="https://sortablejs.github.io/Sortable/">SortableJS website</a> or use a CDN:

src/Core/Components/SortableList/FluentSortableList.razor.cs

@@ -86,17 +86,101 @@ public partial class FluentSortableList<TItem> : FluentComponentBase
     public Func<TItem, bool>? ItemFilter { get; set; }
 
     /// <summary>
-    /// Gets or sets wether ro ignore the HTML5 DnD behaviour and force the fallback to kick in
+    /// Gets or sets wether to ignore the HTML5 DnD behaviour and force the fallback to kick in
     /// </summary>
     [Parameter]
     public bool Fallback { get; set; } = false;
 
+    /// <summary>
+    /// Gets or sets the color of filtered list items.
+    /// </summary>
+    [Parameter]
+    public string? ListItemFilteredColor { get; set; }
+
+    /// <summary>
+    /// Gets or sets the border width on the list. Must be a valid CSS measurement.
+    /// </summary>
+    [Parameter]
+    public string? ListBorderWidth { get; set; }
+
+    /// <summary>
+    /// Gets or sets the color of the border on the list.
+    /// </summary>
+    [Parameter]
+    public string? ListBorderColor { get; set; }
+
+    /// <summary>
+    /// Gets or sets the padding on the list. Must be a valid CSS measurement.
+    /// </summary>
+    [Parameter]
+    public string? ListPadding { get; set; }
+
+    /// <summary>
+    /// Gets or sets the background color of the list items.
+    /// </summary>
+    [Parameter]
+    public string? ListItemBackgroundColor {get; set;}
+
+    /// <summary>
+    /// Gets or sets the height of the list items. Must be a valid CSS measurement.
+    /// </summary>
+    [Parameter]
+    public string? ListItemHeight { get; set; }
+
+    /// <summary>
+    /// Gets or sets the border width on the list items. Must be a valid CSS measurement.
+    /// </summary>
+    [Parameter]
+    public string? ListItemBorderWidth { get; set; }
+
+    /// <summary>
+    /// Gets or sets the border color of the list items.
+    /// </summary>
+    [Parameter]
+    public string? ListItemBorderColor { get; set; }
+
+    /// <summary>
+    /// Gets or sets the border color of the list items during repositioning.
+    /// </summary>
+    [Parameter]
+    public string? ListItemDropBorderColor { get; set; }
+
+    /// <summary>
+    /// Gets or sets the background color of the list items during repositioning.
+    /// </summary>
+    [Parameter]
+    public string? ListItemDropColor { get; set; }
+
+    /// <summary>
+    /// Gets or sets the padding on the list items. Must be a valid CSS measurement.
+    /// </summary>
+    [Parameter]
+    public string? ListItemPadding { get; set; }
+
+    /// <summary>
+    /// Gets or sets the spacing between list items. Must be a valid CSS measurement.
+    /// </summary>
+    [Parameter]
+    public string? ListItemSpacing { get; set; }
+
     protected string? ClassValue => new CssBuilder(Class)
         .AddClass("fluent-sortable-list")
         .Build();
 
     protected string? StyleValue => new StyleBuilder(Style)
-        .Build();
+    .AddStyle("--fluent-sortable-list-filtered", ListItemFilteredColor, !string.IsNullOrEmpty(ListItemFilteredColor))
+    .AddStyle("--fluent-sortable-list-border-width", ListBorderWidth, !string.IsNullOrEmpty(ListBorderWidth))
+    .AddStyle("--fluent-sortable-list-border-color", ListBorderColor, !string.IsNullOrEmpty(ListBorderColor))
+    .AddStyle("--fluent-sortable-list-padding", ListPadding, !string.IsNullOrEmpty(ListPadding))
+    .AddStyle("--fluent-sortable-list-background-color", ListItemBackgroundColor, !string.IsNullOrEmpty(ListItemBackgroundColor))
+    .AddStyle("--fluent-sortable-list-item-height", ListItemHeight, !string.IsNullOrEmpty(ListItemHeight))
+    .AddStyle("--fluent-sortable-list-item-border-width", ListItemBorderWidth, !string.IsNullOrEmpty(ListItemBorderWidth))
+    .AddStyle("--fluent-sortable-list-item-border-color", ListItemBorderColor, !string.IsNullOrEmpty(ListItemBorderColor))
+    .AddStyle("--fluent-sortable-list-item-drop-border-color", ListItemDropBorderColor, !string.IsNullOrEmpty(ListItemDropBorderColor))
+    .AddStyle("--fluent-sortable-list-item-drop-color", ListItemDropColor, !string.IsNullOrEmpty(ListItemDropColor))
+    .AddStyle("--fluent-sortable-list-item-padding", ListItemPadding, !string.IsNullOrEmpty(ListItemPadding))
+    .AddStyle("--fluent-sortable-list-item-spacing", ListItemSpacing, !string.IsNullOrEmpty(ListItemSpacing))
+    .Build();
 
     private string Filter => Items.Any(GetItemFiltered) ? ".filtered" : string.Empty;
 

src/Core/Components/SortableList/FluentSortableList.razor.css

@@ -16,6 +16,7 @@
     --fluent-sortable-list-item-drop-border-color: var(--accent-fill-rest);
     --fluent-sortable-list-item-drop-color: var(--neutral-layer-1);
     --fluent-sortable-list-item-padding: 0 calc(var(--design-unit) * 2px);
+    --fluent-sortable-list-item-spacing: 2px;
     border: var(--fluent-sortable-list-border-width) solid var(--fluent-sortable-list-border-color);
     border-radius: calc(var(--control-corner-radius) * 1px);
     padding: var(--fluent-sortable-list-padding);
@@ -58,7 +59,7 @@
     -webkit-user-select: none;
     user-select: none;
     padding: var(--fluent-sortable-list-item-padding);
-    margin-bottom: 2px;
+    margin-bottom: var(--fluent-sortable-list-item-spacing);
 }
 
     .fluent-sortable-list ::deep .sortable-item:last-of-type {