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

meissadia commented 9 months ago

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

[x] Audit components to see where else this is happening

meissadia commented 8 months ago

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

meissadia commented 8 months ago

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.

https://github.com/cfpb/design-system-react/assets/2592907/b68f5cfd-d31b-4ca3-90df-b30ba411d5f3

cfpb / design-system-react