Summary

Add formal support for banners at the top of the page.

Review Request #14557 — Created Aug. 6, 2025 and updated Sept. 17, 2025, 9:49 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.1.x

Bugs

Depends On

Blocks

14558, 14560, 14559

Reviewers

Groups

reviewboard

People

Description

This change adds a formal definition, stying, and placement for page
banners. These are placed in a new hook point just below the navigation
bar.

A reusable component-based template, ui/components/page-banner.html,
makes it easy to render a page banner. This contains some "parameters"
that can be populated either by inheriting from the template and filling
out blocks or by passing arguments in an {% include %}.

This makes it easy to use this with a TemplateHook or page state
injections.

Documentation, a Storybook story, and updates to the Read Only Banner
will be coming in follow-up changes.

Testing Done

Unit tests pass.

Ported rbmotd over to this, and used it for the new Power Pack banner.

Tested in desktop and mobile modes.

Commits

Summary	ID
Add formal support for banners at the top of the page. A common design pattern is to place a banner at the top of the page, but we've left the details of that to each extension needing a banner. The rbmotd and Power Pack extensions both provide their own banners, choosing their own placements and styling. This creates some inconsistency. This change adds a formal definition, stying, and placement for page banners. These are placed in a new hook point just below the navigation bar. A reusable component-based template, `ui/components/page-banner.html`, makes it easy to render a page banner. This contains some "parameters" that can be populated either by inheriting from the template and filling out blocks or by passing arguments in an `{% include %}`. This makes it easy to use this with a `TemplateHook` or page state injections. Documentation, a Storybook story, and updates to the Read Only Banner will be coming in follow-up changes.	259ad9a7da727dfe740fbc39e9d3e75a22d77256

Summary

Add formal support for banners at the top of the page.

A common design pattern is to place a banner at the top of the page, but we've left the details of that to each extension needing a banner. The rbmotd and Power Pack extensions both provide their own banners, choosing their own placements and styling. This creates some inconsistency. This change adds a formal definition, stying, and placement for page banners. These are placed in a new hook point just below the navigation bar. A reusable component-based template, `ui/components/page-banner.html`, makes it easy to render a page banner. This contains some "parameters" that can be populated either by inheriting from the template and filling out blocks or by passing arguments in an `{% include %}`. This makes it easy to use this with a `TemplateHook` or page state injections. Documentation, a Storybook story, and updates to the Read Only Banner will be coming in follow-up changes.

259ad9a7da727dfe740fbc39e9d3e75a22d77256

Files

Issues

Description	From	Last Updated
We should use --ink-p-accent-warning-fg here instead.	maubin	Sept. 17, 2025, 1:32 a.m.
We should use --ink-p-accent-warning-fg here instead.	maubin	Sept. 17, 2025, 1:32 a.m.
Can you add the optional rb-c-topbar__actions element into here.	maubin	Sept. 17, 2025, 9:48 p.m.
What's the point of defining a template variable with definevar above and then doing a string comparison here? Can't we …	david	Sept. 14, 2025, 7:18 p.m.

flake8 passed.

JSHint passed.

Testing Done:: Unit tests pass.

Ported rbmotd over to this, and used it for the new Power Pack banner.

Tested in desktop and mobile modes.
-
-
Tested in Storybook.
-
-
Built the docs and checked for build errors, spelling errors, and bad
- links.

reviewboard/templates/ui/components/page-banner.html (Diff revision 1)

The issue has been dropped. Show all issues

What's the point of defining a template variable with definevar above and then doing a string comparison here? Can't we just do {% if banner_can_close %}?

chipx86 Sept. 14, 2025, 7:18 p.m.

{% definevar %} will only produce strings. That string is going to be a 'True' or 'False' by default, or potentially a different casing if the block is overridden. The string result will always be truthy unless empty (which isn't an intended value). So we still have to actually check the resulting value.

reviewboard/static/rb/css/ui/page-banner.less (Diff revision 1)
The issue has been resolved. Show all issues
```
We should use --ink-p-accent-warning-fg here instead.
```
reviewboard/static/rb/css/ui/page-banner.less (Diff revision 1)
The issue has been resolved. Show all issues
```
We should use --ink-p-accent-warning-fg here instead.
```

reviewboard/static/rb/css/ui/page-topbar.less (Diff revision 1)

The issue has been dropped. Show all issues

Can you add the optional rb-c-topbar__actions element into here.

chipx86 Sept. 17, 2025, 1:33 a.m.
```
That should be in rb-c-topbar__header.
```

Change Summary:

Switched the foreground color for the banners to use --ink-p-accent-warning-fg.

Commits:

	Summary	ID
	Add formal support for banners at the top of the page. A common design pattern is to place a banner at the top of the page, but we've left the details of that to each extension needing a banner. The rbmotd and Power Pack extensions both provide their own banners, choosing their own placements and styling. This creates some inconsistency. This change adds a formal definition, stying, and placement for page banners. These are placed in a new hook point just below the navigation bar. A reusable component-based template, `ui/components/page-banner.html`, makes it easy to render a page banner. This contains some "parameters" that can be populated either by inheriting from the template and filling out blocks or by passing arguments in an `{% include %}`. This makes it easy to use this with a `TemplateHook` or page state injections. Documentation, a Storybook story, and updates to the Read Only Banner will be coming in follow-up changes.	863775f41ae9a66644c56cca4a93f026932420ce
	Add formal support for banners at the top of the page. A common design pattern is to place a banner at the top of the page, but we've left the details of that to each extension needing a banner. The rbmotd and Power Pack extensions both provide their own banners, choosing their own placements and styling. This creates some inconsistency. This change adds a formal definition, stying, and placement for page banners. These are placed in a new hook point just below the navigation bar. A reusable component-based template, `ui/components/page-banner.html`, makes it easy to render a page banner. This contains some "parameters" that can be populated either by inheriting from the template and filling out blocks or by passing arguments in an `{% include %}`. This makes it easy to use this with a `TemplateHook` or page state injections. Documentation, a Storybook story, and updates to the Read Only Banner will be coming in follow-up changes.	259ad9a7da727dfe740fbc39e9d3e75a22d77256

Diff:

Revision 2 (+572 -2)

Show changes

	reviewboard/static/rb/css/bundles/common.less
	reviewboard/static/rb/css/ui/page-banner.less
	reviewboard/static/rb/css/ui/page-topbar.less
	reviewboard/templates/base.html
	reviewboard/templates/ui/components/page-banner.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Ship it!

```
Ship It!
```