Skip to content

Remove expansion hover animation from status icon buttons

Problem

This issue has come up multiple times:

Shifting positioning or size of a hovered element is really bad for usability.

For example, you can see the pipeline view flicker when there's a long branch name.

pipeline_dance

Design decision

  • Remove animation which expands the button
  • Remove caret
  • Remove dropdown arrow (not displayed in image)
  • Implement new hover/focus/active styles as replacement of animation

Mini_pipeline_graph

left to right: default, hover, active, focus

Mini_pipeline_graph_2

dev spec preview

The design has subtle color differences, please checkout this spec preview when developing

Edited by Jason Yavorsky