[Investigation] Difference in line-height between DS and DSR

[meissadia]

We're seeing issues in DSR with icon misalignment due to variation in the way line-height: normal is calculated when compared to the same element in DS.

Example: Multiselect's selected option buttons

Both DS and DSR have line-height: normal

• in DS this equates to 19px
• in DSR this equates to 22px

In the second row of screenshots below you may be able to see that in DSR there is additional space around the #text content due to the extra height, along with the x icon being shifted higher

Screenshots

DS	DSR

Fix in DSR

I'd be weary of making a large scale change to the line-heights in DSR, but if we can determine which other elements are affected (probably anywhere that has text + icon) then we can correct them by setting a specific value for those elements' line-height (as opposed to "normal")

.o-multiselect_choices button {
  // (target height) / (font-size) => (19/16) => 1.1875 
  line-height: 1.1875; 
}

I would love help understanding why this difference is occurring and if the proposed approach makes sense.

TODO

• Audit components to see where else this is happening

[meissadia]

Elements with icons

Seem misaligned

• Icons - All have extra padding on the bottom of the
• Button w/ Icon - Shifted upward
• Pagination - shifted upward
• Alerts - Icon seems aligned with text bottom but not top
• Expandable - Aligned toward top of text
• CF.gov footer - external link icons seem shifted upwards

Seem okay

• Jump links w/ icon on left
• Jump link
• Taglines

[meissadia]

I think the issue may be with the DSR's .cf-icon-svg-wrapper class.

In the video below we can see that when highlighting just the SVG element, the spacing on the top/bottom seem even.

However, when highlighting the wrapper element we can see a bit of extra bottom spacing.

I will need to dig further.

Screen.Recording.2024-02-15.at.4.57.27.PM.mov