Using components in a code editor (Office hours: Sept 22, 2020)

[ang-twilio]

The specific questions I have are...

• Review how I've used components to design a code editor in the Console.
• Are there recommended ways of composing this design that I'm not currently doing?
• Thoughts on aligning my design with Twilio docs

Background: SMS onboarding flow leads customers to a screen where they can send a test SMS. I'm working on using Paste components to create this page, particularly the code editor piece.
Stage of design: Discover - Prototype
Research: I've previously tested a static version of the Twilio docs code editor as part of a more comprehensive testing of the onboarding designs
Links to mockups or prototype: Abstract link

[corinne-nagel]

Hey @ang-twilio I started to leave comments in Abstract as well but here are some thoughts:

Would love to talk about the research in the meeting this afternoon so we can understand what feedback you got there.

I think we should be consistent in how we are showing code editors and I think it would be beneficial if we match the Twilio docs. Only thoughts/suggestions would be to update the styles to the new Default colors/styles.

I added a ticket to create an inverse tab style since that looks like a style we'd like to add across the board:
https://issues.corp.twilio.com/browse/DSYS-2306

Chat more later today, thanks for adding this!

[SiTaggart]

Some initial thoughts:

Component usage

General component usage outside of the editor seems good. I only have one questions about the "Show me code resources" link next to your primary action:

• Is this just a way to switch the user to the "Code Resources" tab?
  • If so, you should be using the link button component. It's slightly bolder and not underlined.

Editor and tabs

Generally with tabs, they change all the content below them. I'm assuming the JSON response is the same regardless of the language you choose? As a result I would suggest trying to separate the two more clearly. If it does change per language, ignore me.

This might also help solidify the visual association of what I'm copying to the Copy button. Am I also copying the JSON response, or just the code?

To save some potential colour contrast issues, one option might be to pull the tabs outside of the container, and selecting a tab then, just changes the content of the container below it. That way you're placing a tab set onto of the default body colour, always.

Aligning with docs

Ideally we'd eventually have a code theme across all Twilio products, that makes sense to me. Right now though, if the docs styles present accessibility problems I'd be cautious about using them. I think we'd be better off following Functions which is just a white background in the short to medium term