fix tab panels and review feedback

plugins/ui/src/js/src/elements/Flex.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  Flex as DHCFlex,
+  FlexProps as DHCFlexProps,
+} from '@deephaven/components';
+
+import classNames from 'classnames';
+
+export function Flex({
+  UNSAFE_className,
+  ...restProps
+}: DHCFlexProps): JSX.Element {
+  return (
+    <DHCFlex
+      UNSAFE_className={classNames('dh-flex', UNSAFE_className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...restProps}
+    />
+  );
+}
+
+export default Flex;

plugins/ui/src/js/src/elements/Grid.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  Grid as DHCGrid,
+  GridProps as DHCGridProps,
+} from '@deephaven/components';
+
+import classNames from 'classnames';
+
+export function Grid({
+  UNSAFE_className,
+  ...restProps
+}: DHCGridProps): JSX.Element {
+  return (
+    <DHCGrid
+      UNSAFE_className={classNames('dh-grid', UNSAFE_className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...restProps}
+    />
+  );
+}
+
+export default Grid;

plugins/ui/src/js/src/elements/Tabs.tsx

@@ -10,6 +10,7 @@ import {
 } from '@deephaven/components';
 import { isElementOfType } from '@deephaven/react-hooks';
 import { ensureArray } from '@deephaven/utils';
+import classNames from 'classnames';
 import { TabPanels } from './TabPanels';
 
 type TabProps = {
@@ -81,6 +82,7 @@ export function Tabs(props: TabComponentProps): JSX.Element {
     children,
     onSelectionChange: onSelectionChangeProp,
     onChange,
+    UNSAFE_className,
     ...otherTabProps
   } = props;
   const childrenArray = useMemo(() => ensureArray(children), [children]);
@@ -137,6 +139,7 @@ export function Tabs(props: TabComponentProps): JSX.Element {
     return (
       <DHCTabs
         onSelectionChange={onSelectionChange}
+        UNSAFE_className={classNames('dh-tabs', UNSAFE_className)}
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...otherTabProps}
       >
@@ -148,6 +151,7 @@ export function Tabs(props: TabComponentProps): JSX.Element {
   return (
     <DHCTabs
       onSelectionChange={onSelectionChange}
+      UNSAFE_className={classNames('dh-tabs', UNSAFE_className)}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...otherTabProps}
     >

plugins/ui/src/js/src/elements/index.ts

@@ -5,7 +5,9 @@ export * from './ComboBox';
 export * from './DateField';
 export * from './DatePicker';
 export * from './DateRangePicker';
+export * from './Flex';
 export * from './Form';
+export * from './Grid';
 export * from './hooks';
 export * from './HTMLElementView';
 export * from './IconElementView';

plugins/ui/src/js/src/styles.scss

@@ -35,6 +35,11 @@
       align-self: stretch;
     }
 
+    .dh-tabs {
+      flex: auto;
+      height: 100%;
+    }
+
     .iris-grid {
       // we don't want the grid to ever collapse to 0 height, so we set a min-height
       // let's users know that the grid is there

plugins/ui/src/js/src/widget/WidgetUtils.tsx

@@ -10,8 +10,6 @@ import {
   SpectrumCheckbox as Checkbox,
   Content,
   ContextualHelp,
-  Flex,
-  Grid,
   Heading,
   Item,
   ListActionGroup,
@@ -54,7 +52,9 @@ import {
   DateField,
   DatePicker,
   DateRangePicker,
+  Flex,
   Form,
+  Grid,
   IllustratedMessage,
   Image,
   ListView,
@@ -82,11 +82,6 @@ const shouldWrapTextChildren = new Set<string>([
   ELEMENT_NAME.view,
 ]);
 
-const shouldAddClassName = new Set<string>([
-  ELEMENT_NAME.flex,
-  ELEMENT_NAME.grid,
-]);
-
 const log = Log.module('@deephaven/js-plugin-ui/WidgetUtils');
 
 /*
@@ -182,14 +177,6 @@ export function getComponentForElement(element: ElementNode): React.ReactNode {
           </ContextualHelp>
         );
       }
-      // classes can be used for deephaven ui specific css
-      // "deephaven.ui.components.Grid" -> "dh-grid"
-      if (shouldAddClassName.has(newElement[ELEMENT_KEY])) {
-        props.UNSAFE_className = `${props.UNSAFE_className ?? ''} ${`dh-${
-          newElement[ELEMENT_KEY].split('.').pop()?.toLowerCase() ?? ''
-        }`}`.trim();
-      }
-
       return <Component {...props} />;
     }
   }

tests/app.d/ui_flex.py

@@ -68,3 +68,18 @@ def ui_flex_test_component():
 flex_19 = ui.panel(
     ui.grid(ui.button("test"), _t_flex, _p_flex, rows="min-content 1fr 1fr")
 )
+flex_20 = ui.panel(
+    ui.tabs(
+        ui.tab(_p_flex, title="Tab A"),
+        ui.tab(_t_flex, title="Tab B"),
+    )
+)
+flex_21 = ui.panel(
+    ui.button("Test"),
+    ui.tabs(
+        ui.tab(_p_flex, title="Tab A"),
+        ui.tab(_t_flex, title="Tab B"),
+    ),
+    ui.button("Test"),
+    _t_flex,
+)

tests/ui.spec.ts

@@ -102,6 +102,8 @@ test.describe('UI flex components', () => {
     { name: 'flex_17', traces: 0 },
     { name: 'flex_18', traces: 0 },
     { name: 'flex_19', traces: 1 },
+    { name: 'flex_20', traces: 1 },
+    { name: 'flex_21', traces: 1 },
   ].forEach(i => {
     test(i.name, async ({ page }) => {
       await gotoPage(page, '');