feat(Modal): modal component with basic functionality

[YossiSaadi]

Modal 🌐

This should be a canvas-like component that should only take care of the logic and not what to render inside (except the top actions).

Props:

Name	Type	Default	Description
show*	boolean
size	🌐 ModalSize: "small" | "medium" | "large"	"medium"
closeButtonTheme	ModalTopActionsProps["color"]: "light" | "dark"
closeButtonAriaLabel	ModalTopActionsProps["closeButtonAriaLabel"]: string
onClose	ModalTopActionsProps["onClose"]: React.MouseEventHandler
renderHeaderAction	ModalTopActionsProps["renderAction"]: (color?: ModalTopActionsButtonColor) => React.ReactElement<typeof MenuButton | typeof IconButton>
children	React.ReactNode		Can be anything.

Usage example:

<Modal
  show={shouldShowModal}
  size="small"
  closeButtonTheme="light"
  closeButtonAriaLabel="Close"
  onClose={() => console.log("Closing")}
  renderHeaderAction={(color) => <IconButton icon={Feedback} color={color} />}
>
  {/* children */}
</Modal>

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

[YossiSaadi]

@shlomitc suggests deciding on a different structure for this, that we would apply on all our components.
Right now the pattern is also "[prefix]Theme" for Tipseen for example. (also for close button theming).
let's discuss if we want to change it.
Should this also include design?

[talkor]

Not sure I understand

[YossiSaadi]

we discussed it within the team and decided to leave the theme pattern

[talkor]

Is it ok? I think we recently changed it to be more adjustable to the themes, no?

[YossiSaadi]

I'll create a separate task for it

[talkor]

Not sure I understand