Direction prop is not supported and items are not responding to isHidden flag value.

[Praful124]

Part of the code on the page describes ToolbarWithOverflow to have a prop called direction.

// First create toolbar item definitions const toolbarItems = [ ToolbarHelper.createToolbarItemFromItemDef(0, CoreTools.keyinBrowserButtonItemDef), ToolbarHelper.createToolbarItemFromItemDef(10, CoreTools.clearSelectionItemDef), ToolbarHelper.createToolbarItemFromItemDef(20, SelectionContextToolDefinitions.hideElementsItemDef), ToolbarHelper.createToolbarItemFromItemDef(30, SelectionContextToolDefinitions.isolateElementsItemDef), ToolbarHelper.createToolbarItemFromItemDef(40, SelectionContextToolDefinitions.emphasizeElementsItemDef), ]

// Next create toolbar component and provide the item definitions with will create the buttons. <ToolbarWithOverflow expandsTo={Direction.Bottom} panelAlignment={ToolbarPanelAlignment.Start} direction={OrthogonalDirection.Horizontal} items={toolbarItems} useDragInteraction={false} useProximityOpacity={true} />;

but the interface to ToolbarWithOverflow component, ToolbarWithOverflowProps doesn't have a prop called direction. Also the items provided that are made hidden default by using the isHidden flag, is not working. The button is visible irrespective of the isHidden flag value.

---

⚠ Do not edit this section. It is required for imodeljs.github.io ➟ GitHub issue linking

• LINK: Toolbar---iTwin.js-link-to-docs
• TAG: imodeljs-docs-question
• SOURCE: https://www.itwinjs.org/learning/ui/components/toolbar/

[ben-polinsky]

@raplemie Any update on this?

[raplemie]

Hi @Praful124, the Toolbar was updated in 4.4.0 to correctly handle conditional values (isHidden will now properly behave), and now also offer an "enableOverflow" prop which will give the same result that ToolbarWithOverflow component (so you can use the Toolbar component, the ToolbarWithOverflow will be deprecated soon)

For the direction, indeed this is a change that was not updated in the documentation, I'll look to fix this. Direction is determined by the "expandsTo" prop (Bottom/Top will create an horizontal toolbar, Left/Right will create a Vertical toolbar)

[raplemie]

Hi @Praful124, the documentation was updated yesterday to remove the direction prop from the ToolbarWithOverflow example and a note was added directly in the markup to clarify how to set the direction. This would close this issue!

Let us know if these 2 fixes are addressing your issues!