Calcite icons shifting in Expand widgets

Question

I have a customized mapping application originally built with API v 4.17. I am updating to 4.29. Doing so has caused all of my icons in any Expand widget to shift with some form of padding. The padding can be identified with the browser tools as residing in the shadow-root. And no amount of CSS edits seem to be able to adjust the padding. I would be content to just force the padding to 0px but I'm not even sure why it's an issue at all. Even adding a brand new simple Expand widget using the 4.29 tutorial results in a (basemap) icon that is shifted and obscured. Why might this be happening and - as a last resort - how might I edit the styling in the shadow-root to force the fix? See attached images.

icons_shifted.JPG

browser_inspection.JPG

AnneFitz · Answer

Hi @JimCunningham3 - so sorry I missed your last message! This was indeed a bug, but we've fixed it for the upcoming release (version 4.31) of the SDK. Please let me know if you are still running into issues after updating to the latest version once it is released.

JimCunningham3 · Answer

Well, before I do that, I just stripped down all of my code. And I have identified that the moment the padding conflicts is when I try to apply a border to the Expand button. I have tried editing the CSS of both .esri-widget--button as well as the calcite-button. In either instance, the icon gets shifted when I apply this CSS line:
border: 2px solid #302615;

The border is applied but the icon immediately is shown as shifted. So are we precluded from adding a border as such? That would be unfortunate.

AnneFitz · Answer

Hi @JimCunningham3 - I'm sorry you're running into this issue! It looks like you're doing some custom styling on your Expand widgets, could you share a repro case via codepen or HTML file so we can look into this further?