[New component]: Reorder List

[JanOstrowka]

Visual

Interactive demo

Drag and drop



priority adjustment interface

text reorder

Context

The Reorder List component is designed for scenarios requiring manual prioritization or ordering of items through drag-and-drop interaction or numerical priority adjustment. It's particularly useful when:

• Users need to manage priority-based lists
• Sequential ordering of items is required
• Bulk reordering of items is necessary
• Precise numerical priority assignment is needed

Example use case: Organizing employee groups by priority to resolve conflicts when assigning Autoinstall files, with items sorted from highest priority (lowest number) to lowest.

State

Default state

• Displays ordered list with drag handles and priority numbers
• Shows plus/minus controls for numerical adjustment

Hover states

• Drag handle hover: cursor changes to grabbing pointer
• Row hover: background highlight
• Plus/minus button hover: visual feedback

Drag state

• Active background color
• Smooth animation during position changes
• Visual feedback for new position

Focus state

• Input field focus for direct number entry
• Maintained focus after reordering

Progressive enhancement

Small screen considerations

• Maintains full functionality on mobile devices
• Touch-friendly drag handles
• Appropriately sized touch targets for plus/minus controls
• Responsive safe area for automatic scrolling

Browser compatibility

• Uses native HTML5 Drag-and-Drop API for reliable performance
• Fallback to manual priority input on unsupported browsers

Accessibility features

• Keyboard navigation support
• ARIA labels for interactive elements
• Focus management for form controls

Technical specifications

Safe Area

• Implements automatic scrolling when dragged items approach viewport boundaries
• Maintains visibility of manipulated items

Priority Management

• Automatic reordering based on priority values
• Handles out-of-range values by adjusting to valid range
• Maintains list integrity during priority updates

Interactions

• Smooth transitions (0.2s) for position changes
• Focus retention during and after operations
• Automatic scrolling for off-screen updates
• Invalid input prevention and correction

[syncronize-issues-to-jira]

Thank you for reporting your feedback to us!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-18295.

This message was autogenerated

[danielmutis]

From triage:

• This will also be needed in MAAS site manager. That means the request meets the requirement to be used in more than one place.
• Relevant tier: Apps
• Priority: high. The component is needed to complete work this cycle.

[jmuzina]

Per @JanOstrowka :

This is currently being worked on by the Landscape UI team, chiefly @rubinaga .

Landscape UI team is contributing this component directly to their tier for the short term, after which it can be upstreamed to the DS tier (Vanilla for any CSS changes, React Components for business logic) so that it can be shared across projects. More confirmation on this to come after Landscape UI team meeting tomorrow.