search

contentful / forma-36

A design system by Contentful
https://f36.contentful.com
MIT License
326 stars 80 forks source link

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

Open AndrewLeedham opened 1 year ago

AndrewLeedham commented 1 year ago

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: image Both look correct until you focus or click on them: image

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[bot] commented 12 months ago

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

AndrewLeedham commented 12 months ago

Still relevant.

github-actions[bot] commented 11 months ago

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

AndrewLeedham commented 11 months ago

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

Lelith commented 11 months ago

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[bot] commented 10 months ago

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

AndrewLeedham commented 9 months ago

@Lelith Any progress on this?

Lelith commented 8 months ago

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 commented 8 months ago

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[bot] commented 7 months ago

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