Following today's retro, we decided to revert this for now.
cc @NRodriguez

Hi @Samwilson, here's the svg for RTL version of the illustration:

Yes, thanks @Samwilson. Here's the .svg illustration:

Amazing! Looks perfect, thanks @Samwilson!

Hi @TheresNoTime and @Samwilson, I wanted to make sure that we're also adding the same small border on the other edge of the button – currently it's not visible on Pl-Wiki but maybe you already added to this patch, in that case forget I said anything :) thanks!

Thanks @Samwilson, I added a description and visual references for "Visual adjustments on handlebars" on T307105

Do these colors/hover etc. only apply to Vector skin? There's already a hover outline in Monobook for instance. Actually, it might be best to do it for all skins except MonoBook.

I actually fixed the dimensions discrepancy on Figma but not sure how that would affect the OOUI elements...
Also, here's an interactive prototype you can try: https://www.figma.com/proto/Jb6SALEoHWQRawSxscd3Ap/Wikipedia%2FReal-time-preview?page-id=1565%3A32354&node-id=1565%3A33595&viewport=315%2C48%2C0.32&scaling=scale-down-width&hide-ui=1

Yes exactly @Samwilson. The reload hover button can be at the same place when the manual bar is active:

Hover button	Manual Bar

There's a discrepancy in the position because of the design system dimensions between the OOUI progressive button (in the reload hover one) and the OOUI quiet button (in the manual bar).
You'll find the Figma mock here: https://www.figma.com/file/Jb6SALEoHWQRawSxscd3Ap/Wikipedia%2FReal-time-preview?node-id=1565%3A32666
Let me know what you think :)

Hi @MusikAnimal, the SVGs have been updated and I added a RTL version :) (haha it's perfectly fine)

Hi @Samwilson!

• Yes it's constrained in its width. The font is set to OOUI Smaller UI text on Figma (Helvetica Neue, 13px, 400, Regular) for a width of 268px.
• Yes you're right, let's set it to the OOUI default for a quiet button then: Base 10 (#202122). I'll update the visual reference here :)

SVG illustration for error state:

To investigate after confirmation from Performance team

salut jess

Hi @Samwilson, I haven't seen this design before, either on the design style guide so I believe we can remove it :)

I'm not sure if a specific ticket will be cut for this but regarding the animation we discussed @NRodriguez, here's an example of how it could look like (without any fancy animations) in a similar way to codesandbox.io when you click on the "toggle preview button" (browser with a play icon).

Note on the designs:
Illustration and copy might be subject to change but will fit within the same dimensions

Visual resource

The handlebar/draggable slider for split-panes is similar to the one used here: https://vuejsexamples.com/a-vue-js-simple-and-touch-ready-panes-splitter-resizer/
Ideally, both panes should have minimum heights and width (depending on vertical or horizontal stacking – T293337) but also on resizing (which is already the case for the editing pane on Wikitext Editor).

Hi @imaigwilo, I'm doing well, thank you - hope you are too!
I actually haven't worked on the Copy and Paste from Diffs project so I'm not sure what users' behavior might be in this case. I think @Daimona or @NRodriguez will be more helpful to answer your question :)

Visual references of the preferred workflow:
Once the user writes [[dabs-link]], the notification opens with "Change link" CTA, when the user clicks on "Change link" the input [[dabs-link]] is highlighted and opens the link insertion dialog with the dropdown menu.

Hi @Samwilson, that's completely fine – it works well indented too :)

Hey @MusikAnimal, I've updated the ticket description with the latest mock and Figma link.
Regarding the behavior, you're right -- that's the one we decided on in our last RTL. The acceptance criteria look perfect to me, but I'll let @NRodriguez confirm :)
Thanks!

Following RTL meeting, we are updating the UX wording to "This is not a content page; it lists topics with similar names."

Looks perfect, thanks @Samwilson! The one tiny change would be the wording to be "Drag a rectangle on the image below to transcribe only one area of the page" since the button says "Transcribe area", it would be more consistent for users.

Hi @Samwilson, thanks for updating the description - sounds great! To my understanding, this would be the visual reference for the updated UI:
(give or take non-OOUI assets + I used the button from cropper.js docs, with our colors though)

VISUAL REFERENCE

Hi all! The colorful one you used looks great @Samwilson, thank you :)

That's a great idea @Samwilson! I can provide updated visual reference if you want.

This is really cool! We can explore different options with color as well that will emphasize the warning.
Agreed for the longer toast. I'm also curious as to what happens when you click one of the suggestion links? Does it pop up the link selector and replace it for the user to approve? Or does it simply link to the article?

Thanks @Daimona, yes exactly. Here's a visual reference of how this could look with a ButtonGroupWidget (including a toggle button to "select area" grouped with a normal button to run the OCR on the selection):

Sounds great, thanks @NRodriguez! I'll comment on the new ticket.

Hi @imaigwilo, thanks for sending all of those over and apologies for not updating the ticket with the latest visual references. @MusikAnimal and I made some changes as he was developing the front-end so there has been some updates that aren't reflected in the visual reference. Everything looks good, except for the beta environment which should not be reflected on the production release.

Ticket description updated with latest icon design, including files and px grid compliance.
Ready for review.

Looks perfect, thanks @Samwilson

The animation looks great, thanks @Samwilson! Following a call with @NRodriguez, it was brought up that it might be good to extend the display of the banner to 30s total so that users with longer text or other types of devices might be able to revert changes with a bit more timeframe. Also ideally we'd want to include the arrow with the button and make it blue in order to emphasize that it's part of the button. Additionally, it'd be great if we could add a "close" icon on the right of the banner so users can dismiss it if they don't need it.
Visual reference below:

1– Pulsating UI
Yep.
If you click the button a second time (while the popup is open) it submits the OCR.

Thanks @NRodriguez, here is an example of how it could look like on a smaller device:

Hey @ldelench_wmf, the design brief is another doc specifically for design and the Product Spec is more general around product :)
T285696 is an investigation that will be reported on the design brief and with research protocol for discovery user research, the goal is to understand current UX workflows of junior contributors around adding disambiguation links when editing.

After running A/B, here are two options for the OCR button inside the toolbar. The first option here is with OOUI dropdown button inside the toolbar and the second one is the split button with "auto-OCR" on one side and the dropdown menu to change engines. I included the zoom icons that might be moved there, as they're pretty helpful for the user to understand that the dropdown arrow part of our button shouldn't be considered as options or a menu for the entire toolbar.

Visual reference for two toolbar options:

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

@NRodriguez the button shouldn't clash with the text since as you said they're different elements. There might be edge cases though where the text appears underneath the button, which then could be a user pain point.

Hi @dom_walden, yes it is deliberate to be consistent with the OCR button and increase visibility for the CTA

@Samwilson Sorry if it was confusing, I meant it would dismiss the popup forever as if they would have clicked on 'Okay, got it'.

@Aklapper It is somewhat related but T285500 is for engineers and this one is for a design investigation

Thanks for the feedback @Volker_E @iamjessklein
Here are some other options explored, let me know what you think :)
Regarding 2dp lines in the center of the icon, I preferred the 1dp line weight as a better hierarchy in the elements but I understand the point around consistency.