Skip to content

feat(html-report): add chevron affordance to failure cluster headers#5492

Merged
thomhurst merged 1 commit intomainfrom
feature/html-report-failure-clustering-parallel-timeline
Apr 10, 2026
Merged

feat(html-report): add chevron affordance to failure cluster headers#5492
thomhurst merged 1 commit intomainfrom
feature/html-report-failure-clustering-parallel-timeline

Conversation

@thomhurst
Copy link
Copy Markdown
Owner

Summary

Small follow-up polish to the failure clustering feature (merged in #5490).

Each .fc-cluster header now shows a rotating chevron (reusing the existing lArrow SVG) that animates 90° when the cluster expands, making the interactive affordance explicit and consistent with all other collapsible sections in the report.

Changes

  • Added .tl-arrow SVG to each .fc-hd
  • Added CSS: .fc-hd .tl-arrow transition and .fc-cluster.open .fc-hd .tl-arrow rotate(90deg)

@thomhurst thomhurst force-pushed the feature/html-report-failure-clustering-parallel-timeline branch from 5084e4a to 7ac4b38 Compare April 10, 2026 17:34
@thomhurst thomhurst enabled auto-merge (squash) April 10, 2026 17:36
@codacy-production
Copy link
Copy Markdown

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 0 complexity

Metric Results
Complexity 0

View in Codacy

TIP This summary will be updated as you push new changes. Give us feedback

Copy link
Copy Markdown
Contributor

@claude claude bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

The change is clean, minimal, and achieves its goal correctly. The tlArrow SVG is correctly inserted into .fc-hd, the CSS transition is wired up properly, and the click handler at line 2061–2063 correctly toggles .open on .fc-cluster to drive the rotation. No bugs here.


One design observation worth noting

The tl-arrow transition/flex rule is now defined three separate times across the file:

/* line 795 */
.d-collapsible .d-collapse-toggle .tl-arrow { transition: transform .2s var(--ease); flex-shrink: 0 }

/* line 869 */
.tl-toggle .tl-arrow { transition: transform .2s var(--ease); flex-shrink: 0 }

/* line 1100 (this PR) */
.fc-hd .tl-arrow { transition: transform .2s var(--ease); flex-shrink: 0 }

These are identical. A single base rule would eliminate the duplication and mean any future tweaks (duration, easing) only need to happen in one place:

.tl-arrow { transition: transform .2s var(--ease); flex-shrink: 0 }

The three context-specific rotation overrides (.d-col-open, .tl-open, .fc-cluster.open) would remain as-is since they're meaningfully different. That refactor is slightly out of scope for this PR, but it's worth keeping in mind given this is the third copy.


Minor: inconsistent "open" state naming

  • .d-col-open (on .d-collapsible)
  • .tl-open (on the parent of .tl-toggle)
  • .open (on .fc-cluster, introduced in #5490)

The bare .open class is notably less scoped than the other two. It's harmless today since nothing else in the file uses .open, but a prefixed name like .fc-open would be consistent with the established pattern and lower the risk of future collisions.


Overall this is a nice polish touch — the animated chevron makes the interactive affordance obvious and matches the rest of the report's collapsible sections. The implementation is correct as-is; the points above are improvements to consider either here or in a follow-up.

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.

1 participant