# Feature DREAM-547 - Standardized inplace edit fields based on Primer

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

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | High |
| Target versions | 17.2.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

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| DREAM-620 | Bug | Editor is not focused when activating edit field | closed |  | 17.2.0 |  | Frontend components and Primer design system, Modules and project features / Project overview |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Frontend components and Primer design system |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

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

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer | Parimal Satyal |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

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

## Description

### Acceptance

*   There is a primer based component that is the equivalent of the angular inline edit fields
    
*   In display mode:
    
    *   the value of the field is shown
        
    *   on hover, a border is shown
        
*   When clicked, the component switches to edit mode:
    
    *   depending on the field type different things can happen
        
        1.  The display field is replaced by an editable field.
            
            1.  This applies for number, users, lists (like versio), boolean, date, text (short),
                
        2.  A modal opens in which the field can be edited
            
            1.  This applies for long text fields (ckEditor), hierachy lists
                
*   Technical:
    
    *   The component is part of the core
        
    *   The fields can be used within a form