feat(ModalTopActions): top actions component for internal use

[YossiSaadi]

ModalTopActions 🔒

Which shows next to the Header, at the top of the modal

• When X button is triggered, call the onClose that was assigned by consumer to the onClose of the Modal.
• Renders the extra header action received initially by Modal.
• Positioned absolute, not actual part of the Header.

Props:

Name	Type	Description
renderAction	(color?: ModalTopActionsColor) => React.ReactElement<typeof MenuButton | typeof IconButton>
color	ModalTopActionsColor 🔒(which is "light" | "dark")
closeButtonAriaLabel	string
onClose	React.MouseEventHandler

Usage example:

<ModalTopActions
  onClose={() => console.log("Hi!")}
  closeButtonAriaLabel="Close"
  renderAction={() => (
    <MenuButton size={MenuButton.sizes.SMALL} ariaLabel="Options">
      <Menu id="menu" size={Menu.sizes.MEDIUM}>
        <MenuItem icon={Sun} iconType={MenuItem.iconType.SVG} title="The sun" />
        <MenuItem icon={Moon} iconType={MenuItem.iconType.SVG} title="The moon" />
        <MenuItem icon={Favorite} iconType={MenuItem.iconType.SVG} title="And the stars" />
      </Menu>
    </MenuButton>
  )}
/>

https://monday.monday.com/boards/3532715121/pulses/7360589183

[YossiSaadi]

@shlomitc suggests for it to be

Suggested change

	renderAction?: (color?: ModalTopActionsButtonColor) => React.ReactElement<typeof MenuButton | typeof IconButton>;
	renderAction?: React.ReactElement<typeof MenuButton | typeof IconButton>;

let's discuss it.
The main motivation for making it a function is the following:

// color on `renderHeaderAction` is "light"
<Modal closeButtonTheme="light" renderHeaderAction={(color) => <IconButton ...props color={color} />

vs

// force the user to type it twice - leaves a place for a mistake
<Modal closeButtonTheme="light" renderHeaderAction={<IconButton ...props color={"light"} />

[talkor]

I think we can support both, if you want the color you can use a function and use it in your component, otherwise you can control it yourself with just passing a component

[talkor]

I think we can support both, if you want the color you can use a function and use it in your component, otherwise you can control it yourself with just passing a component