Summary

Add a standardized CSS component for users.

Review Request #14970 — Created March 26, 2026 and submitted March 27, 2026, 6:08 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.1.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

This change introduces a new rb-c-user CSS component, a dedicated
template file for generating it, and a Storybook file for viewing it.

The component standardizes the layout needed to get proper alignment for
the user, avatar, and badges, helping it fit in elsewhere.

Existing call sites have been updated to use the new component.

Testing Done

Tested all uses throughout the UI, making sure content was aligned and
spaced out correctly.

Tested all options in Storybook.

Commits

Summary	ID
Add a standardized CSS component for users. We have references to users throughout the UI, which sometimes are accompanied by an avatar and sometimes badges. We don't really have a standard way of displaying these, and some in-progress work's about to be affected by that once again. This change introduces a new `rb-c-user` CSS component, a dedicated template file for generating it, and a Storybook file for viewing it. The component standardizes the layout needed to get proper alignment for the user, avatar, and badges, helping it fit in elsewhere. Existing call sites have been updated to use the new component.	5622c2d2ab708182ff1020e9d8ad6992b3cc02b2

Summary

Add a standardized CSS component for users.

We have references to users throughout the UI, which sometimes are accompanied by an avatar and sometimes badges. We don't really have a standard way of displaying these, and some in-progress work's about to be affected by that once again. This change introduces a new `rb-c-user` CSS component, a dedicated template file for generating it, and a Storybook file for viewing it. The component standardizes the layout needed to get proper alignment for the user, avatar, and badges, helping it fit in elsewhere. Existing call sites have been updated to use the new component.

5622c2d2ab708182ff1020e9d8ad6992b3cc02b2

Files

Issues

Description	From	Last Updated
Typo: area-label -> aria-label	david	March 27, 2026, 1:22 p.m.
The actual implementation has the avatar before the display name.	david	March 27, 2026, 1:22 p.m.
Given that this is overall a <span>, should we use inline-flex here to avoid it turning into a block?	david	March 27, 2026, 1:23 p.m.
Seems like this should be using user_show_avatar (computed var) instead of show_avatar (raw value)	david	March 27, 2026, 1:27 p.m.

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Change Summary:


Added docs and updates for customizing the avatar.
Fixed a missing role in the user badge component in the user story.

Commits:

	Summary	ID
	Add a standardized CSS component for users. We have references to users throughout the UI, which sometimes are accompanied by an avatar and sometimes badges. We don't really have a standard way of displaying these, and some in-progress work's about to be affected by that once again. This change introduces a new `rb-c-user` CSS component, a dedicated template file for generating it, and a Storybook file for viewing it. The component standardizes the layout needed to get proper alignment for the user, avatar, and badges, helping it fit in elsewhere. Existing call sites have been updated to use the new component.	ae135f40da7cdf9a0a60e0d34407d21f2fe9925c
	Add a standardized CSS component for users. We have references to users throughout the UI, which sometimes are accompanied by an avatar and sometimes badges. We don't really have a standard way of displaying these, and some in-progress work's about to be affected by that once again. This change introduces a new `rb-c-user` CSS component, a dedicated template file for generating it, and a Storybook file for viewing it. The component standardizes the layout needed to get proper alignment for the user, avatar, and badges, helping it fit in elsewhere. Existing call sites have been updated to use the new component.	3e9de54e99e8b36ae0b219446511583c1c7df025

Diff:

Revision 2 (+444 -66)

Show changes

	docs/stories/components/users/user.stories.ts
	reviewboard/static/rb/css/bundles/common.less
	reviewboard/static/rb/css/ui/user.less
	reviewboard/static/rb/css/ui/review-request/issue-summary-table.less
	reviewboard/templates/reviews/review_issue_summary_table.html
	reviewboard/templates/reviews/review_reply.html
	reviewboard/templates/reviews/entries/review.html
	reviewboard/templates/ui/components/user.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

docs/stories/components/users/user.stories.ts (Diff revision 2)
The issue has been resolved. Show all issues
```
Typo: area-label -> aria-label
```

reviewboard/static/rb/css/ui/user.less (Diff revision 2)

The issue has been resolved. Show all issues

The actual implementation has the avatar before the display name.

chipx86 March 27, 2026, 1:29 p.m.

This was a holdover from working on some baseline alignment workarounds.

reviewboard/static/rb/css/ui/user.less (Diff revision 2)

The issue has been resolved. Show all issues

Given that this is overall a <span>, should we use inline-flex here to avoid it turning into a block?

reviewboard/templates/ui/components/user.html (Diff revision 2)

The issue has been resolved. Show all issues

Seems like this should be using user_show_avatar (computed var) instead of show_avatar (raw value)

Change Summary:


area-label -> aria-label.
Fixed issues in the docs.
Switched to inline-flex.
Fixed the component template to reference the computed user_show_avatar.

Commits:

	Summary	ID
	Add a standardized CSS component for users. We have references to users throughout the UI, which sometimes are accompanied by an avatar and sometimes badges. We don't really have a standard way of displaying these, and some in-progress work's about to be affected by that once again. This change introduces a new `rb-c-user` CSS component, a dedicated template file for generating it, and a Storybook file for viewing it. The component standardizes the layout needed to get proper alignment for the user, avatar, and badges, helping it fit in elsewhere. Existing call sites have been updated to use the new component.	3e9de54e99e8b36ae0b219446511583c1c7df025
	Add a standardized CSS component for users. We have references to users throughout the UI, which sometimes are accompanied by an avatar and sometimes badges. We don't really have a standard way of displaying these, and some in-progress work's about to be affected by that once again. This change introduces a new `rb-c-user` CSS component, a dedicated template file for generating it, and a Storybook file for viewing it. The component standardizes the layout needed to get proper alignment for the user, avatar, and badges, helping it fit in elsewhere. Existing call sites have been updated to use the new component.	5622c2d2ab708182ff1020e9d8ad6992b3cc02b2

Diff:

Revision 3 (+444 -66)

Show changes

	docs/stories/components/users/user.stories.ts
	reviewboard/static/rb/css/bundles/common.less
	reviewboard/static/rb/css/ui/user.less
	reviewboard/static/rb/css/ui/review-request/issue-summary-table.less
	reviewboard/templates/reviews/review_issue_summary_table.html
	reviewboard/templates/reviews/review_reply.html
	reviewboard/templates/reviews/entries/review.html
	reviewboard/templates/ui/components/user.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-7.1.x (6622235)