Toolbar 🏖️

[carrenelloyd]

Catalog # 25

Link to Design Update Carbon design

Made a start here, not actively working on

Maintainer Myriam Battelli

Tasks

• [x] 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). #822
• [ ] Toolbar item search behaviour. #824
• [ ] Toolbar item #814
• [ ] Toolbar item dropdown container #817
• [ ] Toolbar group contains items #815
• [ ] Toolbar item - pre-canned sets? #825
• [ ] Toolbar item toggle button e.g. bold #826

Middle

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

End

• [ ] Docked toolbar -works with page header #809
• [ ] Toolbar docking, floating behaviour, orientation #806
• [ ] Toolbar state e.g. docking position #807
• [ ] Toolbar context data mechanism #808
• [ ] Toolbar positioning in the grid, full width, or side to side #823
• [ ] Toolbar action preview #810
• [ ] Docked toolbar #813
• [ ] 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?

[andrea-island]

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.

[andrea-island]

@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 #817 , #818 , and #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 #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[bot]]

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.