Toolbar 🏖️

[carrenelloyd]

Catalog # 25

Link to Design

Update Carbon design

Made a start here, not actively working on

Maintainer
Myriam Battelli

Tasks

• Initial review of design/existing code

Working in experimental package

• Create a shell component which
  • Create ComponentName/ComponentName.js component file that renders props
    in raw form (no styling or sub components, plain text OK)
  • Adds prop-types with comments for DocGen to
    ComponentName/ComponentName.js
  • Add Doc file e.g. ComponentName.mdx with a brief description of the
    component.
• First engineering review/playback

Continuing in experimental package

• Storybook - stories to cover design scenarios, story with long, min and
  max content, etc
• Doc tab in storybook derived from design docs with embedded stories where
  appropriate
• Code to include prop-types with comments for automated DocGen
  documentation
• Tests (written in React Test Library) to cover behavior from the
  documented in the components mdx file.

Review and promote

• Design review
• Add design review issues addressed, issues raised or discounted.
• Engineering review - Submit PR to promote component to production package
• All engineering issues addressed, issues raised or discounted.

Epic Order/Plan

Beginning

• Toolbar items that do not go into overflow (see design). Toolbar items that do not go into overflow (see design) #822
• Toolbar item search behaviour. Toolbar item search behaviour #824
• Toolbar item Toolbar button action #814
• Toolbar item dropdown container Toolbar — caret variant #817
• Toolbar group contains items Toolbar group contains items #815
• Toolbar item - pre-canned sets? Toolbar item - pre-canned sets? #825
• Toolbar item toggle button e.g. bold Toolbar item toggle button e.g. bold #826

Middle

• Toolbar item horizontal options (text align) Toolbar item horizontal options (text align) #821
• Toolbar responsive behaviour to be defined Toolbar responsive behaviour to be defined #816
• Toolbar item front size picker behaviour Toolbar item font size picker behaviour #820
• Toolbar item color picker behaviour Toolbar item color picker behaviour #818

End

• Docked toolbar -works with page header Docked toolbar - works with page header #809
• Toolbar docking, floating behaviour, orientation Toolbar — orientation #806
• Toolbar state e.g. docking position Toolbar state e.g. docking position #807
• Toolbar context data mechanism Toolbar context data mechanism #808
• Toolbar positioning in the grid, full width, or side to side Toolbar positioning in the grid, full width, or to side. #823
• Toolbar action preview Toolbar action preview? #810
• Docked toolbar Docked toolbar #813
• Floating toolbar Floating toolbar #811

[lee-chase]

Blocked as the status of the design it was set to 'status: refining' by @carrenelloyd

Invited Myriam to join the conversation here.

[m-battelli]

@carrenelloyd @lee-chase
I have finalized this pattern with Carbon team: https://www.carbondesignsystem.com/patterns/text-toolbar-pattern/
We are looking for volunteers to implement it in code version.

[lee-chase]

Thankyou @m-battelli as this is an open-source project, in theory, any dev could pick it up. Please ask any volunteer you have to join the conversation on github and provide any prototype links you may have.

[lee-chase]

So looking at this component the following are not available form Carbon

• A toolbar button - a simple adjustment to a ghost button
• A toolbar separator/group - simple enough to create
• A dropdown that works within the confines of a toolbar. WARNING we may need to adjust to make it work within the confines of overflow hiding. Otherwise a slight wrap of the carbon component
• A composed dropdown e.g. for color, icon buttons, URL and search does not exist.
• A dropdown capable of loading and displaying system fonts does not exist in Carbon.
• A color picker does not exist
• A dropdown icon bar does not exist.
• A dropdown with the style and functionality of the link button does not exist.

[lee-chase]

The component is a significant task requiring various drop downs and information about the current state of the text editor. In addition, it seems somewhat odd to have such a functional text bar component without an editor.

[lee-chase]

@carrenelloyd is there a rich text editor we have in mind for this?

[andreagmann]

Perhaps the question above is for @m-battelli

[ConradSchmidt]

If you planning to use CKEditor (most IBM products use it) I did a prototype/PoC to see if it would work: https://pages.github.ibm.com/conrad-schmidt/ckeditor-carbon-test/
This is not ready to use, but it can be a starting point

Main Editor code here: https://github.ibm.com/conrad-schmidt/ckeditor-carbon-test/blob/master/src/components/Editor/Editor.js

[m-battelli]

@lee-chase
I’m finalizing the light and dark themes with Carbon team for the Sketch library.
A starting point here: https://ibm.box.com/s/5uplici33ajwquwbbjcgby6ol6ptu4wu
Other updates on different toolbar patterns are coming soon here: https://www.carbondesignsystem.com/patterns/text-toolbar-pattern/

[lee-chase]

The ActionbBar component may be useful as a starting point for a toolbar.

[andreagmann]

@carrenelloyd Your original link to design is giving a 404. Is this the latest design? Has this component been renamed to Toolbar? https://pages.github.ibm.com/cdai-design/pal/patterns/toolbars

[SimonFinney]

Per previous evaluations and some exploration and delivery I completed, there are a number of outstanding items preventing the Toolbar from being fully released. For example:

• Composed dropdown for Toolbar — caret variant #817 , Toolbar item color picker behaviour #818 , and Toolbar item horizontal options (text align) #821 does not exist — a caret button variant may be a sufficient substitute as a starting point for consumers for now, with unstable_Popover a promising candidate once stable
• Responsive behavior for Toolbar responsive behaviour to be defined #816 is not easily achievable — unstable_Menu / OverflowMenu / Nested looks promising but is experimental and needs to be evaluated for suitability

Other observations and recommendations

'Floating' / dragging (#811) and text editor integration should be defined by the consumer to better manage their dependencies.

In progress

#1130

[stale]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.