status: Add colors to icons#23102
Open
Venefilyn wants to merge 4 commits intocockpit-project:mainfrom
Open
Conversation
Venefilyn
added
the
no-test
Venefilyn
force-pushed
the
systemd/status-color
branch
from
40f8220 to
cad727e
Compare
Venefilyn
removed
the
no-test
Venefilyn
force-pushed
the
systemd/status-color
branch
from
cad727e to
5b3052f
Compare
tomasmatus
reviewed
Apr 8, 2026
pkg/systemd/page-status.jsx
Outdated
| return <Icon isInline status="custom"><EnhancementIcon data-pficon={name} /></Icon>; | ||
| if (name == "bug") | ||
| return <BugIcon data-pficon={name} className="page-status-bug-icon" />; | ||
| return <Icon isInline status="warning"><BugIcon data-pficon={name} className="page-status-bug-icon" /></Icon>; |
Member
There was a problem hiding this comment.
doesn't hurt but we can drop the className now as it isn't used anymore
Member
There was a problem hiding this comment.
I am not quite sure if warning is the best fit for bug icon? Sure, it works as a non-critical warning but perhaps we should just keep it in default black or grey color?
Venefilyn
force-pushed
the
systemd/status-color
branch
4 times, most recently
from
2d02f13 to
ce575db
Compare
Member
Author
|
Edit: They pass first time around, the failures are due it being previously failing tests and it runs 3 times to make sure it works. |
Previously, our colors were either set using classes or by setting the color field. With this we just use the wrapper recommended by PatternFly as it allows us to set color better. To make the icons align properly we set the line height of the icon wrapper to 0 as it would otherwise move everything up by a pixel. While the line-height solution was used, this could also be fixed by setting `display: contents` on the icon wrapper instead, or even setting line-height of the icon to be a bit lower than the current default of `-0.125em`. Signed-off-by: Freya Gustavsson <freya@venefilyn.se>
The spinner icon now aligns with the defaults that PatternFly itself uses for the in progress state of icons and thus aligns better with the text next to it and other icons in the status card. Signed-off-by: Freya Gustavsson <freya@venefilyn.se>
Simplifies the status icon creation and includes PatternFly colors instead of custom hex values. With this we keep updated with any theming changes and can support both light and dark theme. Signed-off-by: Freya Gustavsson <freya@venefilyn.se>
Align with the overview status card with its use of colors for the various updates available severity. Signed-off-by: Freya Gustavsson <freya@venefilyn.se>
Venefilyn
force-pushed
the
systemd/status-color
branch
from
ce575db to
9d4c70c
Compare
Member
Author
|
@mvollmer @tomasmatus PTAL! Bug fix color now looks like: 
|
cockpituous
reviewed
Apr 14, 2026
| return <Icon isInline status="danger"><SecurityIcon data-pficon={name} /></Icon>; | ||
| if (name == "enhancement") | ||
| return <EnhancementIcon data-pficon={name} />; | ||
| return <Icon isInline status="custom"><EnhancementIcon data-pficon={name} /></Icon>; |
Contributor
There was a problem hiding this comment.
This added line is not executed by any test. Details
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Previously, our colors were either set using classes or by setting the
color field. With this we just use the wrapper recommended by PatternFly
as it allows us to set color better.
Example states. Each state is represented by the text next to it
Before
After
Signed-off-by: Freya Gustavsson freya@venefilyn.se