feat: Custom svg icons for runtime drawers' headerActions (#4108)

Author: georgylobko

src/app-layout/__tests__/runtime-drawers.test.tsx

@@ -1220,6 +1220,34 @@ describe('toolbar mode only features', () => {
           findDrawerHeaderActionById('add', renderProps)!.click();
           expect(onHeaderActionClick).toHaveBeenCalledWith({ id: 'add' });
         });
+
+        test('propagates iconSvg / pressedIconSvg as html content for headerActions', async () => {
+          registerDrawer({
+            ...drawerDefaults,
+            id: 'global-drawer',
+            headerActions: [
+              {
+                type: 'icon-button',
+                id: 'add',
+                iconSvg: `<rect data-testid="custom-icon" />`,
+                text: 'Add',
+              },
+              {
+                type: 'icon-toggle-button',
+                id: 'add',
+                pressed: true,
+                iconSvg: `<rect data-testid="custom-icon-non-pressed" />`,
+                pressedIconSvg: `<rect data-testid="custom-icon-pressed" />`,
+                text: 'Add',
+              },
+            ],
+          });
+          const renderProps = await renderComponent(<AppLayout />);
+          const { wrapper } = renderProps;
+          findDrawerTriggerById('global-drawer', renderProps)!.click();
+          expect(wrapper.find('[data-testid="custom-icon"]')).toBeTruthy();
+          expect(wrapper.find('[data-testid="custom-icon-pressed"]')).toBeTruthy();
+        });
       });
     });
 

src/app-layout/runtime-drawer/index.tsx

@@ -2,9 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useContext, useEffect, useRef } from 'react';
 
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
-
-import { ButtonGroupProps } from '../../button-group/interfaces';
+import { ButtonGroupProps, ItemRuntime } from '../../button-group/interfaces';
 import { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';
 import {
   DrawerConfig as RuntimeDrawerConfig,
@@ -83,21 +81,22 @@ function RuntimeDrawerHeader({ mountHeader, unmountHeader }: RuntimeContentHeade
   return <div className={styles['runtime-header-wrapper']} ref={ref} />;
 }
 
-function checkForUnsupportedProps(headerActions: ReadonlyArray<ButtonGroupProps.Item>) {
-  const unsupportedProps = new Set([
-    'iconSvg',
-    'popoverFeedback',
-    'pressedIconSvg',
-    'popoverFeedback',
-    'pressedPopoverFeedback',
-  ]);
-  for (const item of headerActions) {
-    const unsupported = Object.keys(item).filter(key => unsupportedProps.has(key));
-    if (unsupported.length > 0) {
-      warnOnce('AppLayout', `The headerActions properties are not supported for runtime api: ${unsupported.join(' ')}`);
-    }
-  }
-  return headerActions;
+function mapRuntimeHeaderActionsToHeaderActions(
+  runtimeHeaderActions: ReadonlyArray<ItemRuntime>
+): ReadonlyArray<ButtonGroupProps.Item> {
+  return runtimeHeaderActions.map(runtimeHeaderAction => {
+    return {
+      ...runtimeHeaderAction,
+      ...('iconSvg' in runtimeHeaderAction &&
+        runtimeHeaderAction.iconSvg && {
+          iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.iconSvg),
+        }),
+      ...('pressedIconSvg' in runtimeHeaderAction &&
+        runtimeHeaderAction.pressedIconSvg && {
+          iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),
+        }),
+    };
+  });
 }
 
 const convertRuntimeTriggerToReactNode = (runtimeTrigger?: string) => {
@@ -138,7 +137,9 @@ export const mapRuntimeConfigToDrawer = (
     onResize: event => {
       fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });
     },
-    headerActions: runtimeDrawer.headerActions ? checkForUnsupportedProps(runtimeDrawer.headerActions) : undefined,
+    headerActions: runtimeDrawer.headerActions
+      ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)
+      : undefined,
   };
 };
 
@@ -183,7 +184,9 @@ export const mapRuntimeConfigToAiDrawer = (
     onResize: event => {
       fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });
     },
-    headerActions: runtimeDrawer.headerActions ? checkForUnsupportedProps(runtimeDrawer.headerActions) : undefined,
+    headerActions: runtimeDrawer.headerActions
+      ? mapRuntimeHeaderActionsToHeaderActions(runtimeDrawer.headerActions)
+      : undefined,
   };
 };
 

src/button-group/interfaces.ts

@@ -112,6 +112,24 @@ export interface InternalIconToggleButton extends ButtonGroupProps.IconToggleBut
   analyticsAction?: string;
 }
 
+export interface IconButtonRuntime extends Omit<ButtonGroupProps.IconButton, 'iconSvg' | 'popoverFeedback'> {
+  iconSvg?: string;
+}
+export interface IconToggleButtonRuntime
+  extends Omit<
+    ButtonGroupProps.IconToggleButton,
+    'iconSvg' | 'pressedIconSvg' | 'popoverFeedback' | 'pressedPopoverFeedback'
+  > {
+  iconSvg?: string;
+  pressedIconSvg?: string;
+}
+export type ItemOrGroupRuntime = ItemRuntime | ButtonGroupProps.Group;
+export type ItemRuntime =
+  | IconButtonRuntime
+  | IconToggleButtonRuntime
+  | ButtonGroupProps.IconFileInput
+  | ButtonGroupProps.MenuDropdown;
+
 export type InternalItemOrGroup = InternalItem | ButtonGroupProps.Group;
 export type InternalItem =
   | InternalIconButton

src/internal/plugins/controllers/drawers.ts

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { ButtonGroupProps } from '../../../button-group/interfaces';
+import { ButtonGroupProps, ItemRuntime } from '../../../button-group/interfaces';
 import debounce from '../../debounce';
 import { NonCancelableEventHandler } from '../../events';
 import { reportRuntimeApiWarning } from '../helpers/metrics';
@@ -41,7 +41,7 @@ export interface DrawerConfig {
   unmountContent: (container: HTMLElement) => void;
   preserveInactiveContent?: boolean;
   onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;
-  headerActions?: ReadonlyArray<ButtonGroupProps.Item>;
+  headerActions?: ReadonlyArray<ItemRuntime>;
   onHeaderActionClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;
 }
 

src/internal/plugins/widget/interfaces.ts

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { ButtonGroupProps } from '../../../button-group/interfaces';
+import { ButtonGroupProps, ItemRuntime } from '../../../button-group/interfaces';
 import { NonCancelableEventHandler } from '../../events';
 
 interface Message<Type, Payload> {
@@ -48,7 +48,7 @@ export interface DrawerPayload {
   onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;
   mountHeader?: (container: HTMLElement) => void;
   unmountHeader?: (container: HTMLElement) => void;
-  headerActions?: ReadonlyArray<ButtonGroupProps.Item>;
+  headerActions?: ReadonlyArray<ItemRuntime>;
   onHeaderActionClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;
   onToggleFocusMode?: NonCancelableEventHandler<{ isExpanded: boolean }>;
   position?: 'side' | 'bottom';