# Feature DREAM-878 - Provide drag-and-drop styling for sortable groups of Border Boxes

Project: Stream Design System
Status: merged
URL: https://community.openproject.org/work_packages/DREAM-878

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 18.0.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Administration / Type/Variants and Workflows, Frontend components and Primer design system, Administration / User administration |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan | Community (COM) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Lars Wassermann |
| Designer | Julia Racsko |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

<br>

**As** an administrator reordering grouped lists, such as work package types, user attribute sections, and form configuration groups,  
**I want to** see which group I am dragging, where it will land, and whether the list accepts it  
**so that** I can reorder whole groups of Border Boxes as confidently as I reorder rows inside one.

**Acceptance criteria**

*   While a group is dragged, the source group is visibly de-emphasized in place.
    
*   A drop indicator shows the insertion position between groups (above or below the hovered group), consistent with the row-level indicator of Border Box lists.
    
*   The list shows when it accepts the dragged group, and a refused drop target is visually distinct.
    
*   The styling is shared rather than per consumer: one class or component modifier for a sortable list of groups, keyed on the `sortable-lists` state attributes (`data-dragging`, `data-drop-position`, `data-drop-container`).
    
*   Work package types ([DREAM-791](https://community.openproject.org/wp/DREAM-791)), user attribute sections ([DREAM-790](https://community.openproject.org/wp/DREAM-790)), and form configuration groups ([DREAM-859](https://community.openproject.org/wp/DREAM-859)) all use it.
    
*   Colors, widths and radii come from Primer tokens and read correctly in light, dark and high-contrast themes.
    
*   A Lookbook preview documents the grouped drag states.
    

**Technical notes**

*   [DREAM-791](https://community.openproject.org/wp/DREAM-791) / https://github.com/opf/openproject/pull/25586 ships without group-level drag feedback; only the sortable-lists defaults apply. An earlier revision of that PR had a types-specific stylesheet (`app/components/work_package_types/types/grouped_list_component.sass`, removed before review) that can serve as a starting point.
    
*   Existing row-level rules target `.op-border-box-list` containers and `.Box-row` items (`app/components/open_project/common/border_box_list_component.sass`, `frontend/src/global_styles/content/drag_and_drop.sass`); they do not reach a flex list of whole Border Boxes.
    
*   The form configuration page ([DREAM-859](https://community.openproject.org/wp/DREAM-859)) has the same topology: one sortable list of whole Border Boxes (the groups), with the attribute lists nested inside each Box.
    
*   Candidates for the hook: a modifier on the list wrapper, or a small component that renders a sortable list of Border Box groups.
    

**Permissions and visibility considerations**

*   Visible to users allowed to reorder the list (administrators for the admin screens above).
    
*   Not visible where reordering is disabled, e.g. a list with a single group.
    

**Translation considerations**

*   None: styling only.
    

**Out of scope**

*   Row-level feedback inside Border Box lists and Border Box Tables, which already exists.
    
*   Changes to `sortable-lists` behavior or to keyboard and menu moves.
    
*   Keeping groups expanded after reordering, tracked in [DREAM-881](https://community.openproject.org/wp/DREAM-881).
    

## QA Notes

*   Since the other PRs are not yet merged, this affects only the Project attributes (when dragging sections), and the WP Types list. Otherwise everything behaves as before.
    
*   You can get the outer outline to render by hovering a section on itself after moving the pointer outside of the list bounds. That outline only shows correctly because we manually removed a fix that was introduced for [OP-14683](https://community.openproject.org/projects/OP/work_packages/OP-14683/activity) on the lists mentioned for this feature. Other lists still have that. I could not reproduce that problem on the Project attributes, but it might be worth trying again. Maybe I&#x27;m overlooking something? The types never had this fix because they used a different path to end up with the same components. So that is unchanged 🕵
    
*   In forced-color-mode (configured in the browser settings), the indicators still show up.