Open meissadia opened 9 months ago
Elements with icons
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
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 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 thex
icon being shifted higherScreenshots
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")I would love help understanding why this difference is occurring and if the proposed approach makes sense.
TODO