Add nodes_hexagon and hexagon_more icons - #638
Merged
Merged
Conversation
The hexagon mark the navigation design uses for Nodes. Two overlapping hexagon outlines; no equivalent exists in the current set, where nodes_hollow and node_hollow are both rack shapes. Added rather than replacing nodes_hollow on purpose. That asset has 17 call sites in cloud-frontend, one of which feeds the legacy tab bar that renders when the new navigation flag is off, so swapping its artwork would change a surface the flag is supposed to leave untouched. A separate name also keeps the old mark available while the design is still being settled. Exported raw with no fill attribute, per the icon README, so consumers control the colour through the Icon component.
The glyph for the "N more" tile in the navigation's collapsed rail, which has been rendering as an empty tile because no such mark existed. Two changes from the supplied artwork, both forced by how the Icon component works. The export was a whole tile rather than a glyph: it carried the tile's own 23x23 bordered rect, which the rail already draws itself and recolours on selection, plus a drop shadow and an inner shadow. Neither survives here - no other asset in the set uses a filter, and a baked border would double-draw and then stay grey while the tile around it turned green. The artwork was also two-tone, a translucent hexagon under lighter dots. Icon applies a single colour to the whole SVG, so a straight fill-strip would have made the hexagon solid and swallowed the dots. The hexagon is therefore drawn as a ring - outer and inner path under fill-rule evenodd - which keeps the dots legible and lets the whole mark follow one colour. A stroke would not work, since the colour arrives as a fill. The ring is a uniform 1 unit thick and the dots clear its inner edge by 1.1 units. The dot artwork is unchanged. viewBox is 4 8 16 16, a square crop centred on the hexagon, so the glyph is not distorted when given equal width and height.
The glyph for the tile that moves up one level in the navigation's collapsed rail. That tile is a working link with a tooltip today but renders as an empty square, because no plain hexagon outline existed in the set. Five contexts show it - a node, a node's Live and Logs views, a single alert and a single dashboard - so five drill-in states currently have a blank tile. Named for the shape rather than the direction, following the existing _hollow outline pairs, since the mark carries no directional cue of its own; the meaning comes from the tooltip the rail supplies. Path data and winding are exactly as supplied. Only the fill attributes are removed, per the icon README, so the colour follows the Icon component.
Two more marks the navigation menu needs, both currently borrowing unrelated glyphs: SLOs renders the quality-of-service mark and Uptime renders the around-the-clock one. - slo: dashed target and radar rings around a centre dot - uptime: clock hands inside a ring, with a counter-clockwise restore arrow Supplied as-is; only the fill attributes are removed so the colour follows the Icon component. Path data is untouched. No traces icon here. The design reuses the Logs glyph for that row, so it needs no new asset - the consuming app can point at the existing logs icon.
sashwathn
approved these changes
Aug 10, 2026
kapantzak
approved these changes
Aug 10, 2026
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
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.
Two icons the navigation redesign needs. Both currently render as empty tiles in the collapsed sidebar rail, because no equivalent mark exists in the set.
nodes_hexagonhexagon_morehexagon_hollowslouptimenodes_hexagonis added, not a replacementThe intent is for this to become the Nodes icon, but
nodes_hollowis not swapped here. That asset has 17 call sites in cloud-frontend and one of them,useStaticTabs.js, feeds the legacy tab bar that renders when the new-navigation flag is off (roomNavigation.jspicks between them onhasNavV2). Changing its artwork would alter a surface the flag exists to leave untouched.A separate name also keeps the old mark available while the design is still being settled, and makes the switch a one-line change per call site rather than a repo-wide visual change.
hexagon_morediffers from the Figma exportTwo deliberate changes, both forced by how
Iconrenders:It was a whole tile, not a glyph. The export carried the tile's own
23x23bordered rect plus a drop shadow and an inner shadow. The rail draws that border itself and recolours it on selection, so a baked-in copy would double-draw and then stay grey while the surrounding tile turned green. No other asset in the set uses a<filter>.It was two-tone - a translucent hexagon under lighter dots.
Iconapplies one colour to the whole SVG, so simply stripping the fills would have made the hexagon solid and swallowed the dots. The hexagon is drawn as a ring instead, outer and inner path underfill-rule="evenodd", which keeps the dots legible and lets the mark follow a single dynamic colour. Astrokewould not work here, since the colour arrives as a fill.The dot artwork is unchanged. The ring is a uniform 1 unit thick and the dots clear its inner edge by 1.1 units.
viewBoxis4 8 16 16, a square crop centred on the hexagon, so the glyph is not distorted when given equal width and height.hexagon_hollowSupplied as-is; only the fill attributes are removed. Path data and winding are untouched.
Named for the shape rather than the direction, following the existing
_hollowoutline pairs, since the mark carries no directional cue of its own - the meaning comes from the tooltip the rail supplies ("Back to Nodes", "Back to node", and so on).Five contexts render this tile -
node,nodeLive,nodeLogs,alertInstanceanddashboard- so five drill-in states currently show a blank square.sloanduptimeSupplied as-is; only the fill attributes are removed, path data untouched. Both rows currently borrow unrelated glyphs - SLOs renders
qualityOfServiceSolidand Uptime rendersaround_clock- which the navigation spec tracked as interim substitutes.No
tracesicon is included. The design reuses the Logs glyph for that row, so it needs no new asset; the consuming app can point at the existinglogsicon. Worth noting the spec describes that as placeholder reuse, so it may not be the final intent.Conventions
Both follow
src/components/icon/README.md: asset in./assets, export added to./iconsList.js, and nofillattribute so the consumer controls colour. Imports and exports are alphabetically placed; the list balances at 479/479.Testing
97 suites / 473 testsgreen on node 22.22.0. The icon list balances at 482/482. No version bump included - releases here are their own commits.Follow-up
Publishing this does not light up the rail on its own; cloud-frontend needs a released version and a
package.jsonbump beforeRailUp/RailOverflowand the Nodes row can reference these names.With this, every icon the navigation redesign was waiting on is in. Only
tracesremains, and it needs no asset - see above.