💬 Feedback - Box shadow focus style outside of iframe when embedding

[AndrewLeedham]

Forma 36 component feedback

When using a focusable Forma36 component in a Contentful UI Extension it is rendered inside an iframe, this cuts off the box-shadow when focused. Say we are making a UI Field Editor, typically they will be rendered next to built in field editors, this means that using padding is not an option. I have recreated the effect here.

For example given these 2 dropdowns in the Contentful interface:

Both look correct until you focus or click on them:

I have been disabling the box-shadow for these components, because it is better than differing padding, but it seems like this should be addressed in a more official capacity?

[github-actions]

Marking issue as stale since there was no activity for 30 days

[AndrewLeedham]

Still relevant.

[github-actions]

Marking issue as stale since there was no activity for 30 days

[AndrewLeedham]

Can someone from the Contentful team please look at this? cc @Lelith

[Lelith]

Hey @AndrewLeedham,
thank you for opening the issue.
I think this is rather an issue on the Field Editor than one we can solve in Forma directly. I will discuss it with my colleagues and come back to you.

Thanks

[github-actions]

Marking issue as stale since there was no activity for 30 days

[AndrewLeedham]

@Lelith Any progress on this?

[Lelith]

I have unfortunately no built in solution. The issue is that there is not enough spacing inside of the iframe. So you have to add a custom CSS to your form, to ensure a little more spacing around the form fields

[AndrewLeedham]

Hi @Lelith. I am aware there isn't a built in solution, we have disabled the focus outline to workaround the issue for now. I think adding spacing to the page would throw off the page flow more, and make it obvious which fields are built-in and which are extensions.

Ideally something on the iframe level that adds padding and negative margin for the known amount of outline used in forma36 would be an ideal solution. Or making the focus style more compatible with extensions.

[github-actions]

Marking issue as stale since there was no activity for 30 days