Use iTwin Tab instead of our current one

e2e-tests/tests/Utils.ts

@@ -228,7 +228,7 @@ export async function dragWidget(
 ) {
   const page = widget.page();
   const titleBarHandle = titleBarHandleLocator(widget);
-  const titleBarButtons = widget.locator(".nz-widget-buttons");
+  const titleBarButtons = widget.getByTestId("tabs-actions");
   const frontstage = frontstageLocator(page);
 
   // Widget tabs or title bar buttons overlay the handle. Make sure we drag the handle.

ui/appui-react/src/appui-react/layout/widget/Buttons.tsx

@@ -6,7 +6,6 @@
  * @module Widget
  */
 
-import "./Buttons.scss";
 import * as React from "react";
 import { Dock, useDock } from "./Dock.js";
 import { PinToggle, usePinToggle } from "./PinToggle.js";
@@ -32,6 +31,7 @@ import {
   AddWidgetButton,
   useAddTab,
 } from "../../preview/control-widget-visibility/AddWidgetButton.js";
+import { Tabs } from "@itwin/itwinui-react";
 
 /** @internal */
 export type WidgetFeature =
@@ -72,9 +72,9 @@ export function TabBarButtons() {
   });
 
   return (
-    <div className="nz-widget-buttons">
+    <Tabs.Actions data-testid="tabs-actions">
       {isDropdown ? <MoreButton>{buttons}</MoreButton> : buttons}
-    </div>
+    </Tabs.Actions>
   );
 }
 

ui/appui-react/src/appui-react/layout/widget/Tab.scss

@@ -2,89 +2,17 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@use "sass:math";
-@use "variables" as *;
-
 .nz-widget-tab {
-  user-select: none;
-  -webkit-user-select: none;
-  white-space: nowrap;
   display: flex;
-  gap: 6px;
-  align-items: center;
-  cursor: pointer;
-  padding: 4px 1em 0;
   position: relative;
-  border: 0 solid var(--iui-color-border);
-  max-width: 9em;
-  background: var(--iui-color-background-backdrop);
-
-  > .nz-icon {
-    svg {
-      width: #{math.div(14, 16)}rem;
-      height: #{math.div(14, 16)}rem;
-      fill: currentColor;
-    }
-  }
 
-  > .nz-label {
-    font-size: $nz-widget-tab-font-size;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  > .nz-tab-blockSize {
+    min-block-size: 0;
   }
 
   > .nz-badge {
     position: absolute;
     top: 0;
     left: 0;
   }
-
-  &:not(.nz-minimized) {
-    &.nz-active {
-      background: var(--iui-color-background);
-      color: var(--iui-color-text-accent);
-      padding-bottom: 1px;
-      margin-bottom: -1px;
-
-      &:before {
-        $padding: 0.25em;
-        content: "";
-        position: absolute;
-        background: currentColor;
-        left: $padding;
-        top: 1px;
-        border-radius: 0.2em;
-        width: calc(100% - #{2 * $padding});
-        height: 0.15em;
-      }
-
-      &.nz-last {
-        border-right-width: 1px;
-      }
-    }
-  }
-
-  &:not(.nz-active),
-  &.nz-minimized {
-    color: var(--iui-color-text-muted);
-    border-right-width: 1px;
-  }
-
-  &:not(.nz-minimized) {
-    &.nz-first-inactive {
-      border-left-width: 1px;
-    }
-  }
-
-  &.nz-first {
-    border-top-left-radius: $nz-widget-tab-border-radius;
-  }
-
-  &:hover {
-    background: var(--iui-color-background);
-
-    &:not(.nz-active) {
-      color: var(--iui-color-text);
-    }
-  }
 }

ui/appui-react/src/appui-react/layout/widget/Tab.tsx

@@ -7,7 +7,6 @@
  */
 
 import "./Tab.scss";
-import classnames from "classnames";
 import * as React from "react";
 import { Key } from "ts-key-enum";
 import { assert } from "@itwin/core-bentley";
@@ -45,9 +44,9 @@ import { WidgetMenuTab } from "./MenuTab.js";
 import { WidgetOverflowContext } from "./Overflow.js";
 import { useLayout, useLayoutStore } from "../base/LayoutStore.js";
 import { useFloatingWidgetId } from "./FloatingWidget.js";
-import { getWidgetState } from "../state/internal/WidgetStateHelpers.js";
 import { useIsMaximizedWidget } from "../../preview/enable-maximized-widget/useMaximizedWidget.js";
 import { FloatingTab } from "./FloatingTab.js";
+import { Tabs } from "@itwin/itwinui-react";
 
 /** @internal */
 export interface WidgetTabProviderProps extends TabPositionContextArgs {
@@ -108,22 +107,14 @@ export function WidgetTab(props: WidgetTabProps) {
 
 function WidgetTabComponent(props: WidgetTabProps) {
   const id = React.useContext(TabIdContext);
-  const { first, firstInactive, last } = React.useContext(TabPositionContext);
   const widgetTabsEntryContext = React.useContext(WidgetTabsEntryContext);
-  const side = React.useContext(PanelSideContext);
   const widgetId = React.useContext(WidgetIdContext);
   const showIconOnly = React.useContext(IconOnlyOnWidgetTabContext);
   const showWidgetIcon = React.useContext(ShowWidgetIconContext);
   assert(!!id);
   assert(!!widgetId);
 
   const label = useLayout((state) => state.tabs[id].label);
-  const activeTabId = useLayout(
-    (state) => getWidgetState(state, widgetId).activeTabId
-  );
-  const minimized = useLayout(
-    (state) => getWidgetState(state, widgetId).minimized
-  );
 
   const maximizedWidget = useIsMaximizedWidget();
 
@@ -133,17 +124,6 @@ function WidgetTabComponent(props: WidgetTabProps) {
   const pointerCaptorRef = useTabInteractions({ clickOnly: maximizedWidget });
   const refs = useRefs<HTMLDivElement>(resizeObserverRef, pointerCaptorRef);
 
-  const active = activeTabId === id;
-  const className = classnames(
-    "nz-widget-tab",
-    active && "nz-active",
-    undefined === side && minimized && "nz-minimized",
-    first && "nz-first",
-    last && "nz-last",
-    firstInactive && "nz-first-inactive",
-    props.className
-  );
-
   const showLabel =
     (showIconOnly && !props.icon) ||
     (showWidgetIcon && !showIconOnly) ||
@@ -152,17 +132,19 @@ function WidgetTabComponent(props: WidgetTabProps) {
     <div
       data-item-id={id}
       data-item-type="widget-tab"
-      className={className}
+      className="nz-widget-tab"
       ref={refs}
       role="tab"
       style={props.style}
       title={label}
       tabIndex={0}
     >
-      {(showWidgetIcon || showIconOnly) && (
-        <span className="nz-icon">{props.icon}</span>
-      )}
-      {showLabel && <span className="nz-label">{label}</span>}
+      <Tabs.Tab value={id} key={id} className="nz-tab-blockSize">
+        {(showWidgetIcon || showIconOnly) && (
+          <Tabs.TabIcon>{props.icon}</Tabs.TabIcon>
+        )}
+        {showLabel && <Tabs.TabLabel>{label}</Tabs.TabLabel>}
+      </Tabs.Tab>
       {props.badge && <div className="nz-badge">{props.badge}</div>}
       <TabTarget />
     </div>

ui/appui-react/src/appui-react/layout/widget/TabBar.tsx

@@ -26,6 +26,7 @@ import { WidgetIdContext } from "./Widget.js";
 import { useDoubleClick } from "../widget-panels/Grip.js";
 import { useFloatingWidgetId } from "./FloatingWidget.js";
 import { useMaximizedWidgetTabBarHandle } from "../../preview/enable-maximized-widget/useMaximizedWidget.js";
+import { Tabs } from "@itwin/itwinui-react";
 
 /** @internal */
 export interface WidgetTabBarProps {

ui/appui-react/src/appui-react/layout/widget/Tabs.tsx

@@ -6,7 +6,6 @@
  * @module Widget
  */
 
-import "./Tabs.scss";
 import * as React from "react";
 import { assert } from "@itwin/core-bentley";
 import { useResizeObserver } from "@itwin/core-react/internal";
@@ -22,6 +21,7 @@ import { TitleBarTarget } from "../target/TitleBarTarget.js";
 import { useLayout } from "../base/LayoutStore.js";
 import { WidgetIdContext } from "./Widget.js";
 import { getWidgetState } from "../state/internal/WidgetStateHelpers.js";
+import { Tabs } from "@itwin/itwinui-react";
 
 /** @internal */
 export function WidgetTabs() {
@@ -94,20 +94,24 @@ export function WidgetTabs() {
         })
       : [];
   return (
-    <div className="nz-widget-tabs" ref={ref} role="tablist">
-      {tabChildren.map(([key, child], index, array) => {
-        return (
-          <WidgetTabsEntryProvider
-            children={child} // eslint-disable-line react/no-children-prop
-            key={key}
-            id={key}
-            lastNotOverflown={
-              index === array.length - 1 && panelChildren.length > 0
-            }
-            getOnResize={handleEntryResize}
-          />
-        );
-      })}
+    <>
+      <Tabs.Wrapper ref={ref}>
+        <Tabs.TabList ref={ref} role="tablist">
+          {tabChildren.map(([key, child], index, array) => {
+            return (
+              <WidgetTabsEntryProvider
+                children={child} // eslint-disable-line react/no-children-prop
+                key={key}
+                id={key}
+                lastNotOverflown={
+                  index === array.length - 1 && panelChildren.length > 0
+                }
+                getOnResize={handleEntryResize}
+              />
+            );
+          })}
+        </Tabs.TabList>
+      </Tabs.Wrapper>
       <TitleBarTarget />
       <WidgetOverflow
         hidden={overflown && panelChildren.length === 0}
@@ -117,7 +121,7 @@ export function WidgetTabs() {
           return <React.Fragment key={key}>{child}</React.Fragment>;
         })}
       </WidgetOverflow>
-    </div>
+    </>
   );
 }