How to use the @bentley/ui-abstract.BadgeType.New function in @bentley/ui-abstract

),
    });
  }

  // cSpell:enable

  public additionalHorizontalToolbarItems = new ItemList([
    this._openNestedAnimationStage,
    CoreTools.keyinBrowserButtonItemDef,
    AppTools.tool1,
    new ConditionalItemDef({
      conditionalId: "Conditional-tool-2",
      items: [AppTools.tool2, this._viewportPopupButtonItemDef],
      stateSyncIds: [SampleAppUiActionId.setTestProperty],
      stateFunc: this._enabledTestStateFunc,
      badgeType: BadgeType.New,
    }),
    AppTools.toolWithSettings,
    AppTools.toggleHideShowItemsCommand,
    new ConditionalItemDef({
      conditionalId: "Conditional-formatting",
      items: [
        new GroupItemDef({
          groupId: "tool-formatting-setting",
          labelKey: "SampleApp:buttons.toolGroup",
          iconSpec: "icon-placeholder",
          items: [AppTools.setLengthFormatMetricCommand, AppTools.setLengthFormatImperialCommand, AppTools.toggleLengthFormatCommand, CoreTools.clearSelectionItemDef],
          itemsInColumn: 4,
        }),
      ],
      stateSyncIds: [SampleAppUiActionId.setTestProperty],
      stateFunc: this._visibleTestStateFunc,

new GroupItemDef({
      labelKey: "SampleApp:buttons.messageDemos",
      // deprecated way of using tooltip to specify panelLabel
      tooltip: "Message Demos (Tooltip)",
      iconSpec: "icon-placeholder",
      items: [this._tool3Item, this._tool4Item, this._outputMessageItem],
    }),
    new GroupItemDef({
      labelKey: "SampleApp:buttons.dialogDemos",
      panelLabel: "Dialog Demos",
      iconSpec: "icon-placeholder",
      items: [
        this._radialMenuItem, this._exampleFormItem, this._viewportDialogItem, this._spinnerTestDialogItem,
        this._reduceWidgetOpacity, this._defaultWidgetOpacity, this._openCalculatorItem,
      ],
      badgeType: BadgeType.New,
    }),
    new GroupItemDef({
      labelKey: "SampleApp:buttons.anotherGroup",
      iconSpec: "icon-placeholder",
      items: [
        AppTools.tool1, AppTools.tool2, this._groupItemDef,
        this._saveContentLayout, this._restoreContentLayout,
        this._startCursorPopup, this._addCursorPopups, this._endCursorPopup,
        AccuDrawPopupTools.addMenuButton, AccuDrawPopupTools.hideMenuButton, AccuDrawPopupTools.showCalculator,
        AccuDrawPopupTools.showAngleEditor, AccuDrawPopupTools.showLengthEditor, AccuDrawPopupTools.showHeightEditor,
      ],
      stateSyncIds: [SyncUiEventId.ActiveContentChanged],
      stateFunc: this._anotherGroupStateFunc,
      betaBadge: true,
    }),
  ]);

/*---------------------------------------------------------------------------------------------
* Copyright (c) 2019 Bentley Systems, Incorporated. All rights reserved.
* Licensed under the MIT License. See LICENSE.md in the project root for license terms.
*--------------------------------------------------------------------------------------------*/
import { IModelApp, NotifyMessageDetails, OutputMessagePriority, FitViewTool, WindowAreaTool, ZoomViewTool, PanViewTool, RotateViewTool, SelectionTool } from "@bentley/imodeljs-frontend";
import { BadgeType, AbstractToolItemProps, AbstractMenuItemProps, AbstractToolbarProps } from "@bentley/ui-abstract";
import { CommandItemDef, ActionButtonItemDef } from "@bentley/ui-framework";

export class AccuDrawPopupTools {

  private static _menuButtonAdded = false;
  private static _accudrawMenuItems: AbstractMenuItemProps[] = [
    {
      id: "Mode", label: "~Mode", iconSpec: "icon-placeholder", badgeType: BadgeType.New,
      submenu: [
        { id: "0", item: { label: "Mode 1", iconSpec: "icon-placeholder", badgeType: BadgeType.New, execute: () => { } } },
        { id: "1", item: { label: "Mode 2", iconSpec: "icon-placeholder", badgeType: BadgeType.TechnicalPreview, execute: () => { } } },
      ],
    },
    {
      id: "Rotate", label: "~Rotate", iconSpec: "icon-placeholder",
      submenu: [
        { id: "0", item: { label: "Rotate 1", iconSpec: "icon-placeholder", execute: () => { } } },
        { id: "1", item: { label: "Rotate 2", iconSpec: "icon-placeholder", execute: () => { } } },
      ],
    },
    {
      id: "LockToAxis", item: { label: "~Lock to Axis", iconSpec: "icon-placeholder", badgeType: BadgeType.TechnicalPreview, execute: () => { } },
    },
    {
      id: "MoveOrigin", item: { label: "Move ~Origin", iconSpec: "icon-placeholder", execute: () => { } },
    },

private get _viewportPopupButtonItemDef() {
    return new CustomItemDef({
      reactElement: (
        
          <div style="{{">
            
              <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </div>
              
              <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </div>
            
</div>

applicationData={{ iModelConnection: this.iModelConnection }} fillZone={true} />,
              ,
              ,
            ]}
          />
        }
        bottomLeft={
          ,
              ,
            ]}
          />
        }
        bottomCenter={
          ,
            ]}
          />
        }
        bottomRight={

/*---------------------------------------------------------------------------------------------
* Copyright (c) 2019 Bentley Systems, Incorporated. All rights reserved.
* Licensed under the MIT License. See LICENSE.md in the project root for license terms.
*--------------------------------------------------------------------------------------------*/
import { IModelApp, NotifyMessageDetails, OutputMessagePriority, FitViewTool, WindowAreaTool, ZoomViewTool, PanViewTool, RotateViewTool, SelectionTool } from "@bentley/imodeljs-frontend";
import { BadgeType, AbstractToolItemProps, AbstractMenuItemProps, AbstractToolbarProps } from "@bentley/ui-abstract";
import { CommandItemDef, ActionButtonItemDef } from "@bentley/ui-framework";

export class AccuDrawPopupTools {

  private static _menuButtonAdded = false;
  private static _accudrawMenuItems: AbstractMenuItemProps[] = [
    {
      id: "Mode", label: "~Mode", iconSpec: "icon-placeholder", badgeType: BadgeType.New,
      submenu: [
        { id: "0", item: { label: "Mode 1", iconSpec: "icon-placeholder", badgeType: BadgeType.New, execute: () => { } } },
        { id: "1", item: { label: "Mode 2", iconSpec: "icon-placeholder", badgeType: BadgeType.TechnicalPreview, execute: () => { } } },
      ],
    },
    {
      id: "Rotate", label: "~Rotate", iconSpec: "icon-placeholder",
      submenu: [
        { id: "0", item: { label: "Rotate 1", iconSpec: "icon-placeholder", execute: () => { } } },
        { id: "1", item: { label: "Rotate 2", iconSpec: "icon-placeholder", execute: () => { } } },
      ],
    },
    {
      id: "LockToAxis", item: { label: "~Lock to Axis", iconSpec: "icon-placeholder", badgeType: BadgeType.TechnicalPreview, execute: () => { } },
    },
    {