Alias margin to padding and add e2e examples

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

@@ -14,6 +14,7 @@ import {
   resolveCssVariablesInRecord,
   useStyleProps,
   useTheme,
+  viewStyleProps,
 } from '@deephaven/components';
 import { useApi } from '@deephaven/jsapi-bootstrap';
 import { TableUtils } from '@deephaven/jsapi-utils';
@@ -55,13 +56,33 @@ export function UITable({
   ...userStyleProps
 }: UITableProps): JSX.Element | null {
   const [error, setError] = useState<unknown>(null);
-  const { styleProps } = useStyleProps(userStyleProps);
 
   if (error != null) {
     // Re-throw the error so that the error boundary can catch it
     throw error;
   }
 
+  // Margin looks wrong with ui.table, so we want to map margin to padding instead
+  const {
+    margin,
+    marginTop,
+    marginLeft,
+    marginRight,
+    marginBottom,
+    ...restStyleProps
+  } = userStyleProps ?? {};
+  const { styleProps } = useStyleProps(
+    {
+      padding: margin,
+      paddingTop: marginTop,
+      paddingLeft: marginLeft,
+      paddingRight: marginRight,
+      paddingBottom: marginBottom,
+      ...restStyleProps,
+    },
+    viewStyleProps // Needed so spectrum applies styles from view instead of base which doesn't have padding
+  );
+
   const dh = useApi();
   const theme = useTheme();
   const [irisGrid, setIrisGrid] = useState<IrisGridType | null>(null);
@@ -264,6 +285,29 @@ export function UITable({
   // We want to clean up the model when we unmount or get a new model
   useEffect(() => () => model?.close(), [model]);
 
+  // const {
+  //   margin,
+  //   marginTop,
+  //   marginLeft,
+  //   marginRight,
+  //   marginBottom,
+  //   ...remainingStyle
+  // } = styleProps.style ?? {};
+  // const style = {
+  //   ...remainingStyle,
+  // };
+
+  // if (margin !== undefined) {
+  //   style.padding = margin;
+  // } else {
+  //   style.marginTop = marginTop;
+  //   style.marginLeft = marginLeft;
+  //   style.marginRight = marginRight;
+  //   style.marginBottom = marginBottom;
+  // }
+
+  // console.log(style);
+
   return model ? (
     <div
       // eslint-disable-next-line react/jsx-props-no-spreading

tests/app.d/ui_flex.py

@@ -83,3 +83,10 @@ def ui_flex_test_component():
     ui.button("Test"),
     _t_flex,
 )
+flex_22 = ui.panel(
+    ui.flex(ui.table(_t_flex, margin="20px"), _t_flex, direction="column")
+)
+flex_23 = ui.panel(ui.flex(ui.table(_t_flex, margin="20px"), _t_flex, direction="row"))
+flex_24 = ui.panel(
+    ui.flex(ui.table(_t_flex, height="200px"), _t_flex, direction="column")
+)

tests/ui.spec.ts

@@ -104,6 +104,9 @@ test.describe('UI flex components', () => {
     { name: 'flex_19', traces: 1 },
     { name: 'flex_20', traces: 1 },
     { name: 'flex_21', traces: 1 },
+    { name: 'flex_22', traces: 0 },
+    { name: 'flex_23', traces: 0 },
+    { name: 'flex_24', traces: 0 },
   ].forEach(i => {
     test(i.name, async ({ page }) => {
       await gotoPage(page, '');