feat(ModalTopActions): allow renderAction to be either used directly or as a function

Author: YossiSaadi

packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx

@@ -1,23 +1,22 @@
 import React from "react";
 import styles from "./ModalTopActions.module.scss";
-import { ModalTopActionsButtonColor, ModalTopActionsProps } from "./ModalTopActions.types";
+import { ModalTopActionsButtonColor, ModalTopActionsColor, ModalTopActionsProps } from "./ModalTopActions.types";
 import Flex from "../../Flex/Flex";
 import IconButton from "../../IconButton/IconButton";
 import { CloseSmall } from "../../Icon/Icons";
 import { ButtonColor } from "../../Button/ButtonConstants";
 
+const colorToButtonColor: Record<ModalTopActionsColor, ModalTopActionsButtonColor> = {
+  dark: ButtonColor.ON_INVERTED_BACKGROUND,
+  light: ButtonColor.ON_PRIMARY_COLOR
+};
+
 const ModalTopActions = ({ renderAction, color, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => {
-  const buttonColor: ModalTopActionsButtonColor =
-    color === "dark"
-      ? ButtonColor.ON_INVERTED_BACKGROUND
-      : color === "light"
-      ? ButtonColor.ON_PRIMARY_COLOR
-      : ButtonColor.PRIMARY;
+  const buttonColor = colorToButtonColor[color] || ButtonColor.PRIMARY;
 
   return (
     <Flex className={styles.actions}>
-      {/* this allows passing back to consumer the color he chose, so he won't have to define it twice */}
-      {renderAction && renderAction(buttonColor)}
+      {typeof renderAction === "function" ? renderAction(buttonColor) : renderAction}
       <IconButton
         icon={CloseSmall}
         onClick={onClose}

packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts

@@ -10,7 +10,13 @@ export type ModalTopActionsButtonColor =
   | ButtonColor.ON_INVERTED_BACKGROUND;
 
 export interface ModalTopActionsProps {
-  renderAction?: (color?: ModalTopActionsButtonColor) => React.ReactElement<typeof MenuButton | typeof IconButton>;
+  /**
+   * action can be passed either as a function or direct
+   * it allows passing back to consumer the color he chose, so he won't have to define it twice
+   */
+  renderAction?:
+    | React.ReactElement<typeof MenuButton | typeof IconButton>
+    | ((color?: ModalTopActionsButtonColor) => React.ReactElement<typeof MenuButton | typeof IconButton>);
   color?: ModalTopActionsColor;
   closeButtonAriaLabel?: string;
   onClose?: React.MouseEventHandler<HTMLDivElement>;

packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx

@@ -32,7 +32,7 @@ describe("ModalTopActions", () => {
     expect(() => getByLabelText(closeButtonAriaLabel)).not.toThrow();
   });
 
-  it("renders the action button using the renderAction prop", () => {
+  it("renders the action button using the renderAction prop as a function", () => {
     const renderAction = jest.fn(color => <IconButton data-testid="extra-action" icon={FeedbackIcon} color={color} />);
     const { getByTestId } = render(<ModalTopActions renderAction={renderAction} />);
 
@@ -46,6 +46,15 @@ describe("ModalTopActions", () => {
     expect(renderAction).toHaveBeenCalledWith(ButtonColor.ON_INVERTED_BACKGROUND);
   });
 
+  it("renders the action button using the renderAction prop directly", () => {
+    const renderAction = (
+      <IconButton data-testid="extra-action" icon={FeedbackIcon} color={IconButton.colors.ON_PRIMARY_COLOR} />
+    );
+    const { getByTestId } = render(<ModalTopActions renderAction={renderAction} />);
+
+    expect(within(getByTestId("extra-action")).getByTestId("icon")).toBeInTheDocument();
+  });
+
   it("applies the correct color when 'dark' is passed", () => {
     const { getByLabelText } = render(<ModalTopActions color="dark" closeButtonAriaLabel={closeButtonAriaLabel} />);
     expect(getByLabelText(closeButtonAriaLabel)).toHaveClass(camelCase("color-" + ButtonColor.ON_INVERTED_BACKGROUND));