Toolbar 🏖️ about ibm-products HOT 13 OPEN

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

from ibm-products.

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

Invited Myriam to join the conversation here.

from ibm-products.

@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.

from ibm-products.

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.

from ibm-products.

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.

from ibm-products.

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.

from ibm-products.

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

from ibm-products.

Perhaps the question above is for @m-battelli

from ibm-products.

@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/

from ibm-products.

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

from ibm-products.

@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

from ibm-products.

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

from ibm-products.

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.

from ibm-products.