Email in Flex - HTML Formatting

[Porlin]

Background: Email in Flex- Milestone 2 - Features. We are looking at HTML Formatting and I want to get feedback on the icon state usage in the HTML toolbar. (Icons, hover and click state)
Stage of design: High-fidelity
Research: Include links to any findings
Links to mockups or prototype: Prototype

[zahnster]

@Porlin thank you for this content! Looking forward to having the team discuss this with you at Office Hours this week.

[serifluous]

Hey @Porlin ! Thanks for sharing. We'll chat more about the icon toolbar more during office hours.

To your second question about general component usage, all I could spot was:

• In the email drafting container, "CC" is most likely a button, and should use the link-style button style (semibold, no underline).
• Re: the "Email sent successfully" message, I know there are historical reasons Flex doesn't use Toasts, but if there's a chance you'd be able to open that discussion again and Email might be able to use Paste Toasts...I figure I'd mention it 🙃

[nkrantz]

Hey @Porlin, just following up on today's Office Hours. Here's the link to the annotated recording (password is in slack). Thanks for coming!

[Porlin]

Hey @SiTaggart @serifluous and team,
Just sharing a screen recording based off feedback last week about the 6 button states for the HTML Toolbar. If you have time to take a look and let me know what you think?

HTML.Text.Formatting-Toolbar-states.mov

Porlin

[nkrantz]

Hey @Porlin, could you share the button states in a different format? It's a bit hard to tell what's going on in the screen recording. If you could lay them out in screenshots along with labels for which design applies to which state, that would be great.

[Porlin]

Hey Nora,

Sure, I have attached the following png for you to view - please see attached.

[SiTaggart]

Thanks for this, it makes it much easier to see whats's going on. I think it's super close, but not quite there yet. The fact its so close to our new Pagination design is a happy coincidence and oddly enough has highlighted issues with our designs, found here. So cc @katieporter for when you handle the dark mode selected state updates, you'll need to consider this too.

The states we really need to nail are:

• Default
• Default hovered
• Default focused
• Pressed
• Pressed hovered
• Pressed focused
• Default active (optional)
• Pressed active (optional)

I think you potentially have 5 covered, and unless you feel that active is essential to communicating the interaction I think you can leave those to be the same as hover, meaning you can use something like the pressed off as an extra one to cover the gaps.

It's mainly more apparent here because you can have more than one button pressed at the same time. So making it visually different between pressed and pressed and hovered is pretty important.

[Porlin]

Thanks for this feedback @SiTaggart These names make sense. Looks like it’ll cover all of the states we need.
Sarah/Katie have shared their figma file with me for the dark mode and Pagination. I'll have a play around with it too.