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

[EuiMarkdownEditor] Enhancement request: Disabled state #5129

Closed
i-a-n opened this issue Sep 1, 2021 · 3 comments · Fixed by #5627
Closed

[EuiMarkdownEditor] Enhancement request: Disabled state #5129

i-a-n opened this issue Sep 1, 2021 · 3 comments · Fixed by #5627

Comments

@i-a-n
Copy link
Contributor

i-a-n commented Sep 1, 2021

In our use-case for the markdown editor, we'd prefer if we could pass an isDisabled state to the component, giving us the ability to disable the textarea while a comment is posted or other actions are pending in the app, similar to the EuiTextArea disabled state. Is this something that might be viable/desired for this component?

@elizabetdev
Copy link
Contributor

@i-a-n a few things that I'm thinking:

  • While there are pending actions in the app and you can't comment does it make sense to show the markdown editor? Or is it enough just to show an empty state saying that comments are disabled until that action is complete.
  • If we go to the route of allowing the markdown editor to have an isDisabled state we need all the toolbar to be disabled as well and the preview. So we can't perform any action. And users need to know why they can't add comments.

So we need to figure out first what's the best design/pattern of using the comment list + markdown editor + "can't add comments".

Once we figure it out we can bring the comment list + markdown editor pattern into EUI and if we found necessary we improve the markdown editor to allow the isDisabled state.

@i-a-n
Copy link
Contributor Author

i-a-n commented Sep 8, 2021

@miukimiu thanks for taking a look at this!

  1. for our specific use-case, I don't think it makes sense to remove the entire markdown editor while a comment is being posted. the comment is only "being posted" for one or two seconds typically, and removing/re-adding such a large component would be confusing, I think. I think showing the markdown editor with the entered text still visible, but disabled, makes the most sense to me.
  2. yes, disabling the toolbar would also be smart here, good point. and, for our use-case, we have visual clues as to why a user can't currently comment:

Screen Shot 2021-09-08 at 10 00 09 AM

Screen Shot 2021-09-08 at 10 00 20 AM

... immediately after the user clicks the button, the button goes into a disabled/loading state, and in our current production app, the markdown editor does as well. it's very obvious to the user what's happening. it's been a useful way for users to know they can't edit their own comments as they're being posted, and has been successful in Dream Machine so far.

I could also imagine other scenarios where we'd want to disable the markdown editor the same way we are able to disable a textarea. following EuiTextArea's lead, I think just allowing the option for a disabled state, where the consumer is responsible for messaging why it's disabled, would be a pretty useful property to have.

oh, and, I don't personally think EuiCommentList should be coupled with this state, as we have an entirely different mechanism for showing that a new comment is being loaded, and it's a separate state from the markdown editor's disabled state in our app. the reason our app must leave those separate is that a new comment can come in while a user is looking at the page (we will poll in the background for new comments, and a new one might come in from a support engineer, for example).

@elizabetdev
Copy link
Contributor

  1. for our specific use-case, I don't think it makes sense to remove the entire markdown editor while a comment is being posted.

Got it! 👍🏽 I thought the "action" could take more time. Like "We're investigating this case and it will take time and until there you can't add any comment".

So I'll go back to Figma and design a few states that we're missing. Once the design is finished I'll share it with you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants