@Daimona would any designs be necessary from Nico? or will we be reusing an OOUI component for the undo button at the bottom of the text field?

In T286564#7208795, @NRodriguez wrote:

@Daimona would any designs be necessary from Nico? or will we be reusing an OOUI component for the undo button at the bottom of the text field?

I'm going to take a look at whether we can use some existing OOUI widget. This is most probably going to be possible, to an extent, the big question is how much we'd have to customize.

The Undo button at the bottom of the text pane should not "disappear" after 30 seconds etc. This would make it hard for people with screenreaders or people who don't have large screens to discover this is an option.

Isn't it possible that the "undo" button might be disturbing for the others, though? We can probably make the button stick to the bottom of the screen (not just the page), and have it disappear after a while.

Also, one example of website which has this feature and inspired me is grammarly, in case you're familiar with it. There, it adds a popup at the bottom of the textarea. Maybe we might do the same, or have it at the top.

Re OOUI, I think we can start from a PanelLayout and add a button to it. That would be very similar to the "loading widget" that appears at the top of the textarea when you start OCR.

Oooh yeah I am familiar with Grammarly.

In my thinking, which should have been more explicit in requirements, the Undo button would only appear if the person has replaced text.

Isn't it possible that the "undo" button might be disturbing for the others, though?

So I think it would not be disturbing if it is not in the main area or if it is not overlapping.

We can probably make the button stick to the bottom of the screen (not just the page), and have it disappear after a while.

What does "a while" mean in this context? Makes me wonder if we have any pre-existing patterns with this anywhere on our platform @nayoub. I am down to consider making it disappear if it is indeed an established pattern leveraged in our tooling elsewhere, otherwise I worry that the design cost of thinking about how to rightfully and scientifically figure out the right time of when to make a disappearing item come in and out may be more expensive than anticipated. We want to ultimately mitigate a pain point and I think a button that appears in a non-destructive mode and stays until the user chooses to exit or move on to the next page does that.

In T286564#7209166, @NRodriguez wrote:

We can probably make the button stick to the bottom of the screen (not just the page), and have it disappear after a while.

What does "a while" mean in this context?

Good question. I was going to say something between 5-10 seconds, but

I worry that the design cost of thinking about how to rightfully and scientifically figure out the right time of when to make a disappearing item come in and out may be more expensive than anticipated

this is a very good point.

Also, I just realized that a somewhat similar example is deleting emails in gmail. That one also disappears after ~10 seconds.

I think we could go with something like this? I'll confirm tomorrow if that's the proper use of all assets.

In T286564#7212281, @nayoub wrote:

I think we could go with something like this? I'll confirm tomorrow if that's the proper use of all assets.

Nice! That's very close to what I had in mind.

It looks like the the undo panel is going to be in about the same place as the loading widget. One way to handle this could be to unify these:

• add the loading widget above the edit box (below the 'Page body' label, if it's shown), so the text box is fully visible;
• after loading is complete and the text has been replaced, don't change the size of the loading widget but instead change its text to '⎌ Undo transcription';
• on clicking 'undo', remove the text, have 100ms (or whatever) of blank, then insert the old text (to give a visual indication that something has changed, because the change might be quite small and/or off screen);
• then leave the undo panel open for a further 700ms or something (because we're not going to offer undoing the undo), and remove it.

This would mean that the text box would jump down a bit when the 'Transcribe text' button is clicked (but we could do it as a 'slide down' to make it a bit less jarring). Only the top would move down, because the text box parent is already a flexbox.

Something like this:

Loading:	Undo:

(Margins, copy text, etc. are not correct in these screenshots.)

I think that would work!

to give a visual indication that something has changed

Something I have done in the past is to "flash" a textbox with CSS animations.

header = document.getElementsByName( 'wpHeaderTextbox' )[ 0 ];
header.animate( { backgroundColor: 'lightgreen' }, 500 );

Something I have done in the past is to "flash" a textbox with CSS animations.

That's a good idea.

@nayoub is there any established way of doing this? And what do you think of the flow in T286564#7229226?

I've created T287551 to implement the above changes.

I don't think there's anything to QA here, so moving to product sign-off.