Weird padding in imported component

[d-beezee]

I'm importing a component from my design system and it's getting imported with a weird padding in the button item. There is no padding in the code while in figma gets imported with padding: 18 0 4 0

---

Bug report identity: Please do not edit

Task path: 0BDeSf0hY1tRchizX38r/N4RZLR8pC3t6z5vMESi6/1qhn35t1yx6ql8

[muryoh]

Hi @d-beezee, thanks for your report!

I've been checking into this issue. Unfortunately, I'm not able to get the same results neither from your report nor from the live storybook (live storybook seems to have an updated line-height of 24px while the report was 16px). I have not been able to reproduce the 18 padding. It may have been fixed since then?

I'll comment based on the live (current) storybook component as you will most likely be testing this one too

Analysis

This is what I currently see in my browser (heighlighting root element to see proper dimensions/positioning)

vs the result I'm seeing in Figma (only imported 2 variants, with hasMeta=false and hasMeta=true:

I believe this looks fairly good

There is indeed a padding on the button layer that is not in the HTML:

vs

And that's something we introduce to make up for the margins that can be seen on the child elements of the button:

+

The general spacing seems to make sense and the padding values too, translating the intent behind the margins

Next step

Can you let me know if your problem was that the component in Figma was not sized as expected (which I cannot seem to reproduce now), or that the padding values were not the ones you expected?

Best regards,
Remy