• Type: Bug
• Resolution: Fixed
• Priority: Minor
• Component/s: blueocean-plugin
• Labels:

  • cloudbees-internal-steel
  • newbie-friendly
• Environment:

  Browser: Chrome 54.0.2840.98 (Official Build) (64-bit)

1. 

   baseline.png

   16 kB

   2016-12-01 18:20

2. 

   breadcrumbs.gif

   151 kB

   2017-02-09 20:07

[JENKINS-40163] Baseline shift in breadcrumbs

Collapse comment: Cliff Meyers added a comment - 2017-04-13 15:59

Cliff Meyers added a comment - 2017-04-13 15:59

Having written this component, I'm happy to take on the fix for it at some point.

I think the cause of this problem is that wrapping the entire component in a Link component or anchor element is causing the odd alignment issue given how complex the nested content is. I remember fiddling with this for a long time and I am not confident it can handled cleanly in a cross-browser way. It would probably be easier to get consistent alignment if the component used a tags internally.

Unfortunately the a tags are typically React Router "Link" instances, and when I built the ExpandablePath component I did not want to couple it to React Router - especially since it would create a JDL -> react-router dependency.

However I think there be a better way to address this issue that still decouples it from React Router. Basically we could pass a "linkElement" prop inside that is the link element (either a React Router link, or a simple anchor element) that is cloned appropriately for each of the child elements.

Any thoughts sophistifunk?

Expand comment: Cliff Meyers added a comment - 2017-04-13 15:59

Cliff Meyers added a comment - 2017-04-13 15:59 Having written this component, I'm happy to take on the fix for it at some point. I think the cause of this problem is that wrapping the entire component in a Link component or anchor element is causing the odd alignment issue given how complex the nested content is. I remember fiddling with this for a long time and I am not confident it can handled cleanly in a cross-browser way. It would probably be easier to get consistent alignment if the component used a tags internally. Unfortunately the a tags are typically React Router "Link" instances, and when I built the ExpandablePath component I did not want to couple it to React Router - especially since it would create a JDL -> react-router dependency. However I think there be a better way to address this issue that still decouples it from React Router. Basically we could pass a "linkElement" prop inside that is the link element (either a React Router link, or a simple anchor element) that is cloned appropriately for each of the child elements. Any thoughts sophistifunk ?