Contribution: Text toolbar

[m-battelli]

Is your feature request related to a problem? Please describe.
The usage of an old widget in a new UI to write runbooks or messages directly.

Describe the solution you'd like
I have designed a new component with the Carbon styleguide to type guided tasks easily (runbook automation) while improving the collaboration among teams.

All files here: https://ibm.box.com/s/4rv1jw7xwuv8c8rvqbxp9057qzlydkva

Screenshot details:

Some redlines:

Different color background:

[joshblack]

cc @IBM/carbon-designers is this a pattern we want to consider for carbon-components?

[mjabbink]

Something like this will come along at one point so I would say yes but leave that to @aagonzales @jeanservaas and @chrisconnors-ibm

[mjabbink]

verse for example has a similar tool bar with similar functionality/features. We need to do some more research on this kind of thing across some other IBM products and as I write this I’m staring at the tool bar above this entry field!

[aagonzales]

I think this would be a good component to have! However, If we want to build this exact text toolbar, I think some of the smaller interactions will need to be fleshed out and spec-ed. Like how big does the type dropdown go before its starts scrolling. In the text color selector can you pick unique colors and if so how? Or is it only a pre-defined set.

Or if you want to contribute this more as a general file toolbar that can be configured in different ways then we'll need to define and spec what the general widget types are. I'm seeing at least 4 right now (single selection dropdown, Icon button - icon directly triggers an action, Icon menu, Search). Could there be any others?

I think there are a few style discrepancies as well, normally hover goes full bleed instead of inset we'll need to work through as well.

Thanks for reaching out and contributing!

[mjabbink]

Let’s resolve them and push further. Great start!

[m-battelli]

Thank you for feedback @aagonzales

[mjabbink]

@m-battelli The space before the type and with “check” in the dropdowns seems large. Thanks for contributing and keep doing it!

[m-battelli]

@mjabbink Thanks for your feedback!

[chrisconnors-ibm]

@aagonzales for context their team has a text toolbar compound component already - @m-battelli has been working to apply the new design language to that existing thing. I'd like to have them submit that component to our main set, so expect it to be 1:1 functionality from what they have.

1. we get the styling approved through this, wake, playbacks.
2. they develop the component based on their existing using the new IBM Design Language, our assets, etc.
   2a) we help them develop a sketch symbol for eventual inclusion in the kit

[m-battelli]

@mjabbink @chrisconnors-ibm
I have improved several details, thanks for feedback and the recording link :-)
I have discussed this new stuff with @aagonzales

Please give me suggestions again:

The latest version of the files is here: https://ibm.box.com/s/4rv1jw7xwuv8c8rvqbxp9057qzlydkva

[mjabbink]

40px height is nice with bleeding hovers. I don’t think the drop down needs hover does it? @aagonzales. I like 32px and assume this is an option?

For color version I like 2 or 3

[mjabbink]

in the 40px section I like the vertical lines spanning the 40px versus the vertical line floating. What do you think @aagonzales and @jeanservaas?

[mjabbink]

I think I take back what I said about color swatches. Not sure about the hover/select state when there is the white margin around the colors. When there is no margin the grey hover/select works better. What do you think @aagonzales @chrisconnors-ibm @jeanservaas

option 4 with more white space also works since there is such space around the color. Hmmm.

[mjabbink]

also wonder if adjusting the font dropdown to be a bit less wide (looks like 10px) so the rules align? There will be some headspace on the right side but that might be fine to hold the integrity of alignments in this case.

. . . . .

[m-battelli]

@mjabbink @aagonzales @chrisconnors-ibm
I've included all the feedback received until now. I'm also exploring the dark version.
Let me know what you think, thanks.

[mjabbink]

@m-battelli What determines the width of the attachment buttons?

[m-battelli]

@mjabbink I have used the file uploader component in this case:

[aagonzales]

This is looking really good! You've polished it up nicely.

• dropdowns look good
• hover and selected states look good
• alignment looks good.
• dark theme looks correct

Just a few things to add:

• focus states are missing: which would probably just be a 2px outline around the buttons (takes up the same space as the hovers). It would be blue-60 for the light and white for the dark theme (color token is just $focus).
  
• when two icons beside each other are selected, I think there should be a rule between them still. Maybe go darker?
  
• responsiveness: I would maybe show what happens at some of the other break points. Does the tool bar just gain white space on the end if its on larger monitor? Do the icons slowly start to stack on a second row or does that change all at once? Is there a max and min width for the text bar?

[m-battelli]

@aagonzales

1. Focus state is ok for all themes.
2. For the two selected icon buttons beside each other, I think to add a separator simply. Also we need to consider the hover on a selected icon. This visual seems ok. What do you think?

3. I have designed the responsive behavior for the maximum and minimum width of the toolbar. I have adopted the ellipses menu with different version (list or panel). Let me know which of these is fine. Thanks!
   

[aagonzales]

For hover on selected, in the system we've been going an additional shade darker (Gray20) on the light and a shade lighter (Gray 60) on the dark .

The responsive strategy looks good. I think i would just add divides into the overflow menu to maintain the sections.

[m-battelli]

@aagonzales ok, thanks for feedback!I will add these details.

[m-battelli]

@aagonzales I have updated file version based on your feedback. Also I have checked all the colors applied in these two themes. That's all for now. All the stuff is here:
https://ibm.box.com/s/4rv1jw7xwuv8c8rvqbxp9057qzlydkva

Let me know how we can proceed, thanks a lot!

[aagonzales]

This looks great! I think the next steps would be to show it one more time at the IDL playback on Friday then dev can start on it. Is your dev team still building it?

[wonilsuh]

A quick suggestion:

Icon needs to be redrawn, but spacing and size may need to be adjusted, but something like this could help.

[m-battelli]

@wonilsuh Thanks!

[JennySanchez]

Hi Myriam, Great work!

During the playback, I mentioned the Adobe Illustrator toolbar has a good hierarchy set up to help users get the visual cue around there are more options within an individual tool. The screenshot below is the toolbar.

The mockup above from Wonil's reflects what I am saying and will be a good idea to try.

[m-battelli]

@JennySanchez Thanks! Sure, I will try to refine this.

[mjabbink]

@wonilsuh and @m-battelli
I think the mini chevron could be a nice solution. Agree it needs to be redrawn. It could also be a touch larger still. @conradennis could have a stab at creating the mini chevron option and get into the Library.

[JuliHerren]

@m-battelli I believe that in your dropdown where you use the word "indend" you mean to have "indent"

[mjabbink]

This is an open issue to have this component/pattern contributed by end of year

[m-battelli]

@mjabbink thanks for the update!

[m-battelli]

Related design variations here #4948
@aagonzales any feedback/updates on that?

[creckling]

Is this being delivered into Carbon? I can't tell where it is falling in the backlog. Thanks.

[mjabbink]

@janchild @connor-leech @jeanservaas @aagonzales What will it take to get this added to the Patterns section? It seems so close it’s a shame to not take it to the finish line. If Carbon too busy can @creckling team maybe help polish it off so we can get it added?

[chrisconnors-ibm]

@mjabbink - generating and publishing the usage guidance and a design kit asset is probably possible now, but I bet @creckling is likely referring to is an actual coded component.

@creckling what this effort has gone begging for is a developer resources. Any chance your folks can pitch in here against this design spec?

[mjabbink]

Yes. Carbon team should get this guidance/kit asset and agree it would be magic to get developer resources!

[creckling]

Yes, I was looking for code - right now they use a third party editor, so likely will just re-theme it rather than build one.

[m-battelli]

@chrisconnors-ibm @mjabbink I have generated all the documentation for the usage and style guidance (Experimental section for Carbon website) last year. Just a reminder if this can still be useful to you: https://ibm.ent.box.com/folder/90604183280

[mjabbink]

@m-battelli thanks for sending. I think the team is backed up on some other urgent priorities but have your content on the back burner to finish up soon. I’ll let @lauren or @connor-leech chime because I think they’re on the case. We are eager to get it into the patterns page so it’s only because there is way too much work for our little tiny team.

[laurenmrice]

@m-battelli Yes, this is something we definitely need to pick up, it is just the matter of prioritizing it, dedicating a design resource to it (which we are limited on right now) and finding someone to implement code. Our main priority at the moment is revamping our documentation for component usage and code tabs on the Carbon website. Having the documentation you wrote around textbar is very helpful and we just need to transfer it over to our new template. Since we are already in documentation mode I would hope we could extend our efforts to get this in soon.

[janchild]

@mjabbink I'm adding this to the list so it's considered in the next planning session.

[m-battelli]

Ok, thanks for the update @mjabbink @laurenmrice