Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
AndrewLeedham opened this issue Jun 14, 2023 · 10 comments
Open
Assignees
Labels
needs review Proposal/bug that needs to be reviewed by maintainers stale Used to mark when there was no activity for a set period of time

Comments

@AndrewLeedham
Copy link
Contributor

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
Copy link

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

@github-actions github-actions bot added the stale Used to mark when there was no activity for a set period of time label Jul 15, 2023
@AndrewLeedham
Copy link
Contributor Author

Still relevant.

@github-actions github-actions bot removed the stale Used to mark when there was no activity for a set period of time label Jul 16, 2023
@github-actions
Copy link

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

@github-actions github-actions bot added the stale Used to mark when there was no activity for a set period of time label Aug 15, 2023
@AndrewLeedham
Copy link
Contributor Author

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

@Lelith Lelith removed the stale Used to mark when there was no activity for a set period of time label Aug 16, 2023
@Lelith
Copy link
Collaborator

Lelith commented Aug 16, 2023

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

@Lelith Lelith added the needs review Proposal/bug that needs to be reviewed by maintainers label Aug 16, 2023
@Lelith Lelith self-assigned this Aug 16, 2023
@github-actions
Copy link

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

@github-actions github-actions bot added the stale Used to mark when there was no activity for a set period of time label Sep 15, 2023
@AndrewLeedham
Copy link
Contributor Author

@Lelith Any progress on this?

@github-actions github-actions bot removed the stale Used to mark when there was no activity for a set period of time label Sep 19, 2023
@Lelith
Copy link
Collaborator

Lelith commented Oct 18, 2023

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
Copy link
Contributor Author

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.

@Lelith Lelith added needs review Proposal/bug that needs to be reviewed by maintainers and removed needs review Proposal/bug that needs to be reviewed by maintainers labels Oct 19, 2023
Copy link

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

@github-actions github-actions bot added the stale Used to mark when there was no activity for a set period of time label Nov 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs review Proposal/bug that needs to be reviewed by maintainers stale Used to mark when there was no activity for a set period of time
Projects
None yet
Development

No branches or pull requests

2 participants