Skip to content

Add nodes_hexagon and hexagon_more icons - #638

Merged
novykh merged 5 commits into
masterfrom
feat/rail-hexagon-icons
Aug 10, 2026
Merged

Add nodes_hexagon and hexagon_more icons#638
novykh merged 5 commits into
masterfrom
feat/rail-hexagon-icons

Conversation

@novykh

@novykh novykh commented Aug 10, 2026

Copy link
Copy Markdown
Member

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.

Export Purpose
nodes_hexagon The hexagon mark the design uses for Nodes. Two overlapping hexagon outlines.
hexagon_more The "N more" overflow tile in the collapsed rail. Hexagon with an ellipsis.
hexagon_hollow The up-one-level tile in the collapsed rail. Plain hexagon outline.
slo The SLOs menu row. Dashed target/radar rings around a centre dot.
uptime The Uptime menu row. Clock hands in a ring with a counter-clockwise restore arrow.

nodes_hexagon is added, not a replacement

The intent is for this to become the Nodes icon, but nodes_hollow is 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.js picks between them on hasNavV2). 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_more differs from the Figma export

Two deliberate changes, both forced by how Icon renders:

It was a whole tile, not a glyph. The export carried the tile's own 23x23 bordered 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. Icon applies 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 under fill-rule="evenodd", which keeps the dots legible and lets the mark follow a single dynamic colour. A stroke would 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. 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.

hexagon_hollow

Supplied 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 _hollow outline 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, alertInstance and dashboard - so five drill-in states currently show a blank square.

slo and uptime

Supplied as-is; only the fill attributes are removed, path data untouched. Both rows currently borrow unrelated glyphs - SLOs renders qualityOfServiceSolid and Uptime renders around_clock - which the navigation spec tracked as interim substitutes.

No traces icon is included. 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. 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 no fill attribute so the consumer controls colour. Imports and exports are alphabetically placed; the list balances at 479/479.

Testing

97 suites / 473 tests green 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.json bump before RailUp/RailOverflow and the Nodes row can reference these names.

With this, every icon the navigation redesign was waiting on is in. Only traces remains, and it needs no asset - see above.

novykh added 5 commits August 10, 2026 15:20
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.
@novykh
novykh merged commit 34d7b9b into master Aug 10, 2026
3 checks passed
@novykh
novykh deleted the feat/rail-hexagon-icons branch August 10, 2026 16:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants