Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Explore ways so form elements in blocks don't look disabled in the editor #2487

Closed
Aljullu opened this issue May 14, 2020 · 6 comments · Fixed by #5157
Closed

Explore ways so form elements in blocks don't look disabled in the editor #2487

Aljullu opened this issue May 14, 2020 · 6 comments · Fixed by #5157
Assignees
@mikejolley
Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. type: enhancement The issue is a request for an enhancement.

Comments

@Aljullu
Copy link
Contributor

Aljullu commented May 14, 2020 •
edited
Loading

When adding the Cart or Checkout blocks in the editor, all form elements look disabled, which makes them look different from the frontend. This issue is about exploring a way to keep them disabled but look like if they weren't.

See previous discussion in #2437

Screenshots

Editor:
imatge

Frontend:
imatge
This was referenced May 14, 2020
Closed
Merged
@senadir
Copy link
Member

senadir commented May 14, 2020

we stop using <Disabled> and create our own <Disabled> component, in it, we can disable remove user events using user-events: none this will handle mouse things, focus will still be an issue, we can fix that by using inert an HTML property that removes a block from the page flow without removing it, like disabled but without adding disabled, it's not supported, for now, there're some polyfills, this is one https://github.com/WICG/inert/
I suggest we just copy the code and it to our custom <Disabled> component.

@Aljullu Aljullu mentioned this issue May 19, 2020
Closed
@nerrad nerrad added block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. labels Jun 7, 2020
@nerrad nerrad added the focus: global styles Issues that involve styles/css/layout structure. label Jun 20, 2020
@Aljullu Aljullu mentioned this issue Jul 29, 2020
Merged
20 tasks
@nerrad nerrad added the type: enhancement The issue is a request for an enhancement. label Sep 22, 2020
This was referenced Sep 30, 2020
Merged
Closed
@nerrad nerrad closed this as completed Dec 1, 2020
@nerrad nerrad reopened this Feb 18, 2021
@ralucaStan
Copy link
Contributor

Another issue I found was that in other blocks is that this disabled style is not normalized.
All the inputs in the image below are disabled, but they have different styling -> grey or white background.
Screenshot 2021-02-18 at 13 49 11

Another thing I found is that the disabled product buttons aren't consistent as well in the editor
Screenshot 2021-02-18 at 13 59 28

@github-actions
Copy link
Contributor

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Apr 20, 2021
@nerrad nerrad removed the status: stale Stale issues and PRs have had no updates for 60 days. label Apr 25, 2021
@github-actions
Copy link
Contributor

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Jun 25, 2021
@nerrad nerrad removed the status: stale Stale issues and PRs have had no updates for 60 days. label Jun 25, 2021
@github-actions
Copy link
Contributor

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Aug 25, 2021
@senadir senadir removed the status: stale Stale issues and PRs have had no updates for 60 days. label Aug 25, 2021
@github-actions
Copy link
Contributor

This issue has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at.

Internal: After 10 days with no activity this issue will be automatically be closed.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Oct 25, 2021
@mikejolley mikejolley removed the status: stale Stale issues and PRs have had no updates for 60 days. label Oct 26, 2021
@mikejolley mikejolley self-assigned this Nov 15, 2021
@mikejolley mikejolley mentioned this issue Nov 16, 2021
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@mikejolley mikejolley

Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Milestone
No milestone
5 participants
@mikejolley @nerrad @ralucaStan @Aljullu @senadir