fix: icons in illustrated message (deephaven#575)

Closes deephaven#558

plugins/ui/src/deephaven/ui/components/illustrated_message.py

@@ -99,20 +99,21 @@ def illustrated_message(
         UNSAFE_style: Set the inline style for the element. Only use as a last resort. Use style props instead.
 
     Examples:
-        prompt = ui.illustrated_message(
-            ui.heading("Enter URL above"),
-            ui.content("Enter a URL of a CSV above and click 'Load' to load it"),
+        no_results = ui.illustrated_message(
+            ui.heading("No Results"),
+            ui.content("Try another search"),
         )
         warning = ui.illustrated_message(
             ui.icon("vsWarning"),
-            ui.heading("Warning"),
-            ui.content("This is a warning message."),
+            ui.heading("Invalid input"),
+            ui.content("No special characters allowed."),
         )
         error_message = ui.illustrated_message(
-            ui.icon("vsWarning", size="XXL", margin_bottom="size-10"),
-            ui.heading("Invalid Input"),
-            ui.content("Please enter 'Sym' and 'Exchange' above"),
+            ui.icon("vsError"),
+            ui.heading("Access denied"),
+            ui.content("You do not have permissions to access this page."),
         )
+
     """
     return component_element(
         "IllustratedMessage",

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  IllustratedMessage as DHCIllustratedMessage,
+  IllustratedMessageProps as DHCIllustratedMessageProps,
+  Icon,
+} from '@deephaven/components';
+import { isElementOfType } from '@deephaven/react-hooks';
+
+export function IllustratedMessage(
+  props: DHCIllustratedMessageProps
+): JSX.Element {
+  const { children, ...otherProps } = props;
+
+  /* eslint-disable-next-line react/jsx-props-no-spreading */
+  if (children === undefined) return <DHCIllustratedMessage {...props} />;
+
+  const newChildren = React.Children.map(children, element => {
+    if (isElementOfType(element, Icon) === true) {
+      const size = element.props.size ?? 'XXL';
+      const marginBottom =
+        element.props.margin ??
+        element.props.marginY ??
+        element.props.marginBottom ??
+        'size-10';
+
+      return React.cloneElement(element, {
+        ...element.props,
+        size,
+        marginBottom,
+      });
+    }
+
+    return element;
+  });
+
+  return (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <DHCIllustratedMessage {...otherProps}>{newChildren}</DHCIllustratedMessage>
+  );
+}
+
+export default IllustratedMessage;

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

@@ -5,6 +5,7 @@ export * from './Form';
 export * from './hooks';
 export * from './HTMLElementView';
 export * from './IconElementView';
+export * from './IllustratedMessage';
 export * from './ListView';
 export * from './model';
 export * from './ObjectView';

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

@@ -13,7 +13,6 @@ import {
   Flex,
   Grid,
   Heading,
-  IllustratedMessage,
   Item,
   ListActionGroup,
   ListActionMenu,
@@ -53,6 +52,7 @@ import {
   ActionGroup,
   Button,
   Form,
+  IllustratedMessage,
   ListView,
   Picker,
   Radio,

tests/app.d/ui_render_all.py

@@ -64,7 +64,11 @@ def ui_components():
         ui.heading("Heading"),
         ui.icon("vsSymbolMisc"),
         # TODO: #526 ui.icon_wrapper("TODO: fix this"),
-        ui.illustrated_message(ui.icon("vsSymbolMisc"), "Illustrated Message"),
+        ui.illustrated_message(
+            ui.icon("vsWarning"),
+            ui.heading("Warning"),
+            ui.content("This is a warning message."),
+        ),
         ui.list_view(
             _item_table_source_with_action_group,
             aria_label="List View - List action group",