[SortableList] Extend the CSS class with more predefined variables

[GlacierFox]

Pull Request

📖 Description

A proposal to add a few new predefined variables to the FluentSortableList.css to allow greater customization of both the list itself and its individual list items.

I've been using the FluentSortableList component and it works great but I've got some visual requirements which are beyond the simple text based sortable items on the demo site. I'm currently working on a Kanban board which uses bespoke cards inside the FluentSortableList template component.

I've made use of the already supplied --fluent-sortable-list-item-height and --fluent-sortable-list-background-color predefined variables but found I need finer control of the items themselves, not just the list container as each individual item has its own border, border color and padding which can only be removed/changed by overriding CSS selectors as highlighted by @vnbaaij in a question I asked earlier today.

I've added a selection of predefined variables which allow more control over how the list looks by default and when dragging/dropping list items so they can be easily added directly inside razor files to each individual component.

    --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);

I've actually used the FluentSortableList component quite a bit in my project but never used it in the style outlined on the demo site and I think these added options greatly increase the flexibility of the component itself. I've almost always got another Fluent or bespoke component type inside which doesn't need extraneous padding, or borders. I think anyone else using the component with any content other than basic text or slightly different style requirements might find these useful rather than managing CSS overrides for specific list components.

✅ 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

[GlacierFox]

@microsoft-github-policy-service agree