Content Editor Components - Visual Picker

[ceyerkes]

Hellooo! I took a stab at the visual picker, button/card hybrid for the content editor:

Default, hover, active and focus mirror current button states, and I added a couple select state options as well. Hover states in the editors of MC, Unlayer, and MailChimp are terrible. You can barely tell what you're hovering on, and I think incorporating these button states will improve accessibility dramatically. All 3 of these editors only have a default state, faint hover state and drag state. Still need to figure out what we want the button to look like mid-drag.

This is current MC, and what i'm trying to replicate in Paste:

The only two use cases I have for the select state in the content editor so far is when a user is selecting a column arrangement in MC:

And also when a user initially selects an editing path:

Please let me know if I can provide any additional context, and/or if office hours makes sense to discuss further. Thanks!

[nkrantz]

Hi @ceyerkes - these are looking incredible! Awesome work here, especially with all those state designs. The team has seen your discussions and we're excited to work more with you in the new year.

We'll be out of office next week during the company break, and will be slower to respond to GitHub Discussions and other questions through the new year. We'll be back to our regular response times on January 2, 2023. Talk soon!

[ceyerkes]

Hello! I incorporated feedback from @brannytempy before the break, and wanted to keep this thread updated.

I added:

• drag handles
• elevation
• increased size of triangle checkmark area
• changed checkmark icon to action/accept
• drag state with increased elevation
• radio button version

[TheSisb]

Thanks for the update! These look great!
Unfortunately I don't think there is a way to recover a deleted post on Github Discussions :(

[kelseycavitt]

@ceyerkes this is looking great! Could you share the Figma link to see these ideas in context as well before OH tomorrow? Also sorry about your lost comment! Excited to chat more in office hours!

[ceyerkes]

No prob! Figma link

[kelseycavitt]

We really enjoyed getting to work through your visual picker concepts last week in Office Hours!

Here’s a summary of our discussion as well as some guidance:

• The visual picker is on our roadmap, but won’t be picked up at this time, as our quarter has been prioritized already.
• For the mutually exclusive options, like the column selector, you may not need a radio button within the card itself and can use your selected state idea (within the Figma doc).
• For the draggable variant, it does not need a selected state, as they are drag and drop, but they do need a focus state. When you end up implementing the draggable elements, please ensure the component is keyboard accessible and is read properly by a screen reader. We’ll look into some examples for you to reference once you get to that point of the work!
• Using the updated design language at this juncture is great! If you want more feedback as you progress the design, please let us know!

Looking forward to seeing more on this, great start Colleen!

[ceyerkes]

Just closing the loop! I think these are in a good spot - middle state is what i'm thinking would be what the cards look like mid-drag (if we even need that state?). I'm going to hold off on using the updated design language per @cfree, since engineering will likely start to work on these components before they're released.

[ceyerkes]

Hello! Re-opening the loop 🫠

Even though the visual picker turned into it's own editor-specific component (drag & drop card) I did come across a use case for a visual picker in the image editor:

Let me know if you have any serious concerns, otherwise we'll proceed with this design, thanks!

[kelseycavitt]

@ceyerkes are you asking about the selected state of the filter in this example? I think we'd also need a design for the focus state and hover state (if they are different from the card)?