Add a CSS component for standard headers over areas of content.

Review Request #10786 — Created Nov. 5, 2019 and submitted


Review Board


This introduces the rb-c-content-header component, which provides a
consistent header above an area of content. This can be used for the
main page header (sitting in-between the page's header bar and the
content area) or above sections of forms, lists of items, etc.

The content area allows for a title and a list of actions, which are
placed immediately to the right of the title.

Headers currently support two section levels. The -is-main modifier
indicates the header is the main one for the page (a level 1 heading),
which gives it some standardized padding and a slightly bigger font
size. Otherwise, it's a level 2 heading, which doesn't have any
margins/padding by default and uses a smaller font size.

There's also a #rb-ns-ui.content-header.add-title-styles() mixin
function available that injects the color, font, and uppercase styles
into an element to give the title appearance, helping other components
(such as the sidebar) keep a consistent look.

Content headers can be put into a mobile mode by using
#rb-ns-ui.content-header.set-mobile-mode-max-width(). Any viewport
width less than or equal to the provided width will result in the header
being in mobile mode, which slightly increases the font size (to better
differentiate between it and any content below it -- since in mobile
mode the content box area will not have any border), and to adjust
padding appropriately.

This component is currently being used on datagrid pages (in place of
the older styles for the datagrid header), and specialized through a
rb-c-datagrid-header component (currently only used to alter padding
for the case of tabs above datagrids).

The new Administration UI will make use of this component in several

Tested that all datagrid pages are still looking and working fine in
desktop and mobile modes.

Tested that the sidebar still looks correct with the usage of

Tested the component with upcoming administration UI work.

  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (1f48b43)