docs(Modal): add jsdoc for all the props related to Modal

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

@@ -120,7 +120,7 @@ const Modal = forwardRef(
                   {children}
                   <ModalTopActions
                     renderAction={renderHeaderAction}
-                    color={closeButtonTheme}
+                    theme={closeButtonTheme}
                     closeButtonAriaLabel={closeButtonAriaLabel}
                     onClose={onClose}
                   />

packages/core/src/components/ModalNew/Modal/Modal.types.tsx

@@ -9,15 +9,48 @@ export type ModalCloseEvent =
   | React.KeyboardEvent<HTMLBodyElement>;
 
 export interface ModalProps extends VibeComponentProps {
+  /**
+   * Unique identifier for the modal.
+   */
   id: string;
+  /**
+   * Controls the visibility of the modal.
+   */
   show: boolean;
+  /**
+   * Determines the width and max-height of the modal.
+   */
   size?: ModalSize;
-  closeButtonTheme?: ModalTopActionsProps["color"];
+  /**
+   * Theme color for the close button.
+   */
+  closeButtonTheme?: ModalTopActionsProps["theme"];
+  /**
+   * Accessibility label for the close button.
+   */
   closeButtonAriaLabel?: ModalTopActionsProps["closeButtonAriaLabel"];
+  /**
+   * Callback fired when the modal should close.
+   */
   onClose?: (event: ModalCloseEvent) => void;
+  /**
+   * Additional action to render in the header area.
+   */
   renderHeaderAction?: ModalTopActionsProps["renderAction"];
+  /**
+   * Reference to an element that triggered the modal, used for animations.
+   */
   anchorElementRef?: React.RefObject<HTMLElement>;
+  /**
+   * When true, prevents closing the modal when clicking the overlay ("click-outside") or pressing ESC.
+   */
   alertModal?: boolean;
+  /**
+   * Modal content.
+   */
   children: React.ReactNode;
+  /**
+   * Additional inline styles for the modal.
+   */
   style?: React.CSSProperties;
 }

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

@@ -2,5 +2,8 @@ import React from "react";
 import { VibeComponentProps } from "../../../types";
 
 export interface ModalContentProps extends VibeComponentProps {
+  /**
+   * Main content of the modal.
+   */
   children?: React.ReactNode;
 }

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

@@ -7,7 +7,14 @@ interface WithoutDescription {
 }
 
 interface WithDescription {
+  /**
+   * Descriptive text or content below the title.
+   * When supplied, would also add an aria-describedby attribute to the modal dialog element.
+   */
   description: string | React.ReactNode;
+  /**
+   * Icon to display before the description. Can only be passed when description is supplied.
+   */
   descriptionIcon?:
     | SubIcon
     | {
@@ -16,4 +23,11 @@ interface WithDescription {
       };
 }
 
-export type ModalHeaderProps = { title: string } & (WithoutDescription | WithDescription) & VibeComponentProps;
+export type ModalHeaderProps = {
+  /**
+   * Main heading text of the modal.
+   * When supplied, would also add an aria-labelledby attribute to the modal dialog element.
+   */
+  title: string;
+} & (WithDescription | WithoutDescription) &
+  VibeComponentProps;

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

@@ -1,17 +1,17 @@
 import React from "react";
 import styles from "./ModalTopActions.module.scss";
-import { ModalTopActionsButtonColor, ModalTopActionsColor, ModalTopActionsProps } from "./ModalTopActions.types";
+import { ModalTopActionsButtonColor, ModalTopActionsTheme, ModalTopActionsProps } from "./ModalTopActions.types";
 import IconButton from "../../IconButton/IconButton";
 import { CloseMedium } from "@vibe/icons";
 import { ButtonColor } from "../../Button/ButtonConstants";
 
-const colorToButtonColor: Record<ModalTopActionsColor, ModalTopActionsButtonColor> = {
+const colorToButtonColor: Record<ModalTopActionsTheme, ModalTopActionsButtonColor> = {
   dark: ButtonColor.ON_INVERTED_BACKGROUND,
   light: ButtonColor.ON_PRIMARY_COLOR
 };
 
-const ModalTopActions = ({ renderAction, color, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => {
-  const buttonColor = colorToButtonColor[color] || ButtonColor.PRIMARY;
+const ModalTopActions = ({ renderAction, theme, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => {
+  const buttonColor = colorToButtonColor[theme] || ButtonColor.PRIMARY;
 
   return (
     <div className={styles.actions} data-no-autofocus={true}>

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

@@ -3,21 +3,30 @@ import MenuButton from "../../MenuButton/MenuButton";
 import IconButton from "../../IconButton/IconButton";
 import { ButtonColor } from "../../Button/ButtonConstants";
 
-export type ModalTopActionsColor = "light" | "dark";
+export type ModalTopActionsTheme = "light" | "dark";
 export type ModalTopActionsButtonColor =
   | ButtonColor.PRIMARY
   | ButtonColor.ON_PRIMARY_COLOR
   | ButtonColor.ON_INVERTED_BACKGROUND;
 
 export interface ModalTopActionsProps {
   /**
-   * 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
+   * Action element or render function for the top-right area.
+   * When provided as a function, receives the current button color theme
    */
   renderAction?:
     | React.ReactElement<typeof MenuButton | typeof IconButton>
     | ((color?: ModalTopActionsButtonColor) => React.ReactElement<typeof MenuButton | typeof IconButton>);
-  color?: ModalTopActionsColor;
+  /**
+   * Color theme for the top actions
+   */
+  theme?: ModalTopActionsTheme;
+  /**
+   * Accessibility label for the close button
+   */
   closeButtonAriaLabel?: string;
+  /**
+   * Callback fired when the close button is clicked
+   */
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }

packages/core/src/components/ModalNew/context/ModalContext.types.ts

@@ -3,12 +3,29 @@ import React from "react";
 export type ModalContextProps = ModalProviderValue;
 
 export type ModalProviderValue = {
+  /**
+   * Unique identifier for the modal.
+   * In use to set the modal title and description IDs to be unique.
+   */
   modalId: string;
+  /**
+   * Callback to set the title element ID for accessibility.
+   */
   setTitleId: (id: string) => void;
+  /**
+   * Callback to set the description element ID for accessibility.
+   */
   setDescriptionId: (id: string) => void;
 };
 
 export interface ModalProviderProps {
+  /**
+   * Context value containing modal state and handlers.
+   */
   value: ModalProviderValue;
+  /**
+   * Modal provider children.
+   * Should be the Modal root.
+   */
   children: React.ReactNode;
 }

packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts

@@ -2,5 +2,8 @@ import React from "react";
 import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
 
 export interface ModalFooterProps extends Omit<ModalFooterBaseProps, "renderAction"> {
+  /**
+   * Optional content to render on the left side of the footer.
+   */
   renderSideAction?: React.ReactNode;
 }

packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts

@@ -3,11 +3,23 @@ import React from "react";
 import { VibeComponentProps } from "../../../../types";
 
 export interface ModalFooterActionProps extends Omit<ButtonProps, "children" | "kind" | "size"> {
+  /**
+   * Text to display as the Button's content.
+   */
   text: string;
 }
 
 export interface ModalFooterBaseProps extends VibeComponentProps {
+  /**
+   * Props for the primary action button.
+   */
   primaryButton: ModalFooterActionProps;
+  /**
+   * Props for the optional secondary action button.
+   */
   secondaryButton?: ModalFooterActionProps;
+  /**
+   * Additional content to render in the footer.
+   */
   renderAction?: React.ReactNode;
 }

packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.tsx

@@ -7,14 +7,7 @@ import { getTestId } from "../../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../../tests/constants";
 import styles from "./ModalFooterWizard.module.scss";
 import { StepsGalleryHeader } from "../../../Steps/StepsGalleryHeader";
-
-export interface ModalFooterWizardProps
-  extends Required<Pick<ModalFooterBaseProps, "primaryButton" | "secondaryButton">>,
-    VibeComponentProps {
-  stepCount: number;
-  activeStep: number;
-  onStepClick: (stepIndex: number) => void;
-}
+import { ModalFooterWizardProps } from "./ModalFooterWizard.types";
 
 const ModalFooterWizard = forwardRef(
   (

packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.types.ts

@@ -0,0 +1,21 @@
+import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
+import { VibeComponentProps } from "../../../../types";
+
+export interface ModalFooterWizardProps
+  extends Required<Pick<ModalFooterBaseProps, "primaryButton" | "secondaryButton">>,
+    VibeComponentProps {
+  /**
+   * Total number of steps in the wizard.
+   * This would render the appropriate number of step indicators ("dots") in the footer.
+   */
+  stepCount: number;
+  /**
+   * Current active step (0-based index).
+   * This would highlight the corresponding step indicator ("dot") in the footer.
+   */
+  activeStep: number;
+  /**
+   * Callback fired when a step indicator ("dot") is clicked.
+   */
+  onStepClick: (stepIndex: number) => void;
+}

packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.types.ts

@@ -2,5 +2,10 @@ import React from "react";
 import { VibeComponentProps } from "../../../../types";
 
 export interface ModalBasicLayoutProps extends VibeComponentProps {
+  /**
+   * Layout children in the following order:
+   * 1. Header content
+   * 2. Main content
+   */
   children: React.ReactNode;
 }

packages/core/src/components/ModalNew/layouts/ModalFooterShadow.types.ts

@@ -1,3 +1,6 @@
 export interface ModalFooterShadowProps {
+  /**
+   * Controls the visibility of the shadow.
+   */
   show: boolean;
 }

packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.types.ts

@@ -1,7 +1,16 @@
 import { ReactNode, UIEventHandler } from "react";
 
 export interface ModalLayoutScrollableContentProps {
+  /**
+   * Callback fired when the content is scrolled.
+   */
   onScroll?: UIEventHandler<HTMLDivElement>;
+  /**
+   * Additional class name.
+   */
   className?: string;
+  /**
+   * Scrollable content.
+   */
   children: ReactNode;
 }

packages/core/src/components/ModalNew/layouts/ModalMedia.types.ts

@@ -2,5 +2,8 @@ import React from "react";
 import { VibeComponentProps } from "../../../types";
 
 export interface ModalMediaProps extends VibeComponentProps {
+  /**
+   * Media content to be displayed in the modal (image, video, Lottie, etc.).
+   */
   children: React.ReactNode;
 }

packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.types.ts

@@ -2,5 +2,11 @@ import React from "react";
 import { VibeComponentProps } from "../../../../types";
 
 export interface ModalMediaLayoutProps extends VibeComponentProps {
+  /**
+   * Layout children in the following order:
+   * 1. Media content
+   * 2. Header content
+   * 3. Main content
+   */
   children: React.ReactNode;
 }

packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts

@@ -2,5 +2,11 @@ import { VibeComponentProps } from "../../../../types";
 import React from "react";
 
 export interface ModalSideBySideLayoutProps extends VibeComponentProps {
+  /**
+   * Layout children in the following order:
+   * 1. Header content
+   * 2. Main content
+   * 3. Media content
+   */
   children: React.ReactNode;
 }