# Epic DREAM-14 - Introduce a standardized component for PageHeaders & SubHeaders Project: Stream Design System Status: closed URL: https://community.openproject.org/work_packages/DREAM-14 ## Detailed specification ### Motivation and background information ### Acceptance criteria ### Out of scope | Attribute | Value | | --- | --- | | Mockups | | ## Planning | Attribute | Value | | --- | --- | | Roadmap | | | Date | | | Votes | | | List | | | Target versions | 14.5.0 | | Sprint | | | Backlog bucket | | | Relevance | | ## Subitems | ID | Type | Subject | Status | Assignee | Target versions | Project | Priority | Spent time | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | DREAM-16 | Feature | Update the PageHeader component to do all required actions | closed | | 14.0.0 | Stream Design System | Medium | | | DREAM-20 | Implementation | Update existing PageHeader occurences in code and implement breadcrumbs | closed | | 14.0.0 | Stream Design System | Medium | | | DREAM-18 | Implementation | Update PageHeaders in Meetings module | closed | | 14.1.0 | Stream Design System | Medium | | | DREAM-19 | Implementation | Include the sub-headers in pages where the PageHeader is already used | closed | | 14.2.0 | Stream Design System | Medium | | | DREAM-34 | Feature | Create a sub-header component in Primer | closed | | 14.2.0 | Stream Design System | Medium | | | DREAM-31 | Implementation | Edit state for Primer::OpenProject:PageHeader | closed | | 14.5.0 | Stream Design System | Medium | | ## Bugs and other work packages | ID | Type | Subject | Status | Assignee | Target versions | Module | | --- | --- | --- | --- | --- | --- | --- | | DREAM-30 | Documentation | Document how to use the PageHeader component | closed | | 14.0.0 | | | DREAM-44 | Documentation | Document the SubHeader component in the lookbook | closed | | 14.2.0 | | ## Details | Attribute | Value | | --- | --- | | Module | | | Enterprise plan | | | Labels | | ## People | Attribute | Value | | --- | --- | | Assignee | | | Accountable | Henriette Darge | | Product manager | | | Designer | Marc Alcobé | | Developers | OP Dev Dream Team | | Requested by | | | Interest by | | ## Estimates and progress | Attribute | Value | | --- | --- | | Work | | ## Description # User Problem ## Problem **PageHeader** - Currently there are multiple implementations of PageHeaders due to the introduction of Primer as Design System. - There is a lack of how we expect the different types of Headers in the application to behave and look. - The PageHeaders components have been analyses individually per page where Primer has been introduced but not as a global for the app. **SubHeader** - There are no sub-headers that improve the usability of the application and helps the users to perform the most important actions related to the content of the screen. - The sub-headers are components that affect all the pages in the application and need to be considered and designed with that in mind, not individually per page. With that said each feature of the application might require variations of this component to accommodate the most relevant actions. # Business Case ## Solution **PageHeader** - There is a standaradized component for PageHeaders which is planned to be used in **all** pages of the application. The component contains "View or query" related actions (eg. Favourite, share, change between view types...) in a Primer style. - The header will always be the default size, not the large one (need adapt Meetings pages to this rule). The PageHeader title will always become the H1 tag of the page. - Remove all back buttons (the user can use the browser back button or the breadcrumbs instead). - In mobile the divider will not disappear (opposed to the current implementation) and the PageHeader will contain a maximum of 1 action. If there is multiple actions this action will be a three dots horizontal more menu. - For all the pages that can be saved or saved as the designed behaviour of a message to save the view will automatically appear when the view is modified (see designs and Project Lists for reference). - This harmonisation is linked and dependant on the harmonisation of page SubHeaders. - Include this decisions to our Lookbook documentation. - For rules of the content (e.g the breadcrumb or which buttons to include into the PageHeader), please have a look at #57025 **SubHeader** - There is a standaradized component for PageHeaders which is planned to be used in **some** pages of the application. The component will contain the most relevant actions of the page in a Primer style.  - SubHeaders might change in the same page context if there is actions that are depending on the selection of the content (eg. multi select of work packages...) - For rules of the content (e.g the breadcrumb or which buttons to include into the PageHeader), please have a look at #57025 ## Next iteration - Multiple iterations to modify all headers in the application, see ##57025 # Table of pages that already use the new components


PAGE

WORK PACKAGE

VERSION

NOTES

Project list

###52746

14.0.0

Will be the first page to use the complete component implemented in #52582.

Project members

###52746

14.0.0

Meetings

###52584

14.1.0

Currently is an independent component that needs to be substituted.

File Storages

###52746

14.0.0

UI is correct but breadcrumb not included in the component

Some administration pages

###53808

The administration is not done yet, but was substituted partially when we touched these pages in the past

Notification centre

###55632

14.5.0

# Visuals and Figma **PageHeader** **SubHeader**