BaseModal Component Documentation

Overview

The BaseModal component is a versatile modal dialog UI element designed for the "Vantage" analytics and data platform. This component can be utilized to present information, gather user input, or display confirmations in a user-friendly manner, enhancing the user experience by providing a structure to overlay content without navigating away from the current page.

Purpose

The BaseModal serves as a container for other components, allowing developers to display various types of content within a modal dialog. This component is particularly useful for scenarios where a focused user interaction is required, such as user confirmations, alerts, or forms.

Settings

The BaseModal component accepts the following props:

Title

• Input Type: string
• Description: This prop defines the title displayed at the top of the modal. It helps users understand the context of the modal content.
• Default Value: None (must be provided).

Children

• Input Type: UIElement
• Description: This prop accepts any valid UI element (text, components, etc.) to render the content within the modal. It's where the body content is displayed, allowing for customizable interaction.
• Default Value: None (must be provided).

Footer

• Input Type: UIElement (optional)
• Description: This prop is used for rendering footer content within the modal. It is often used for actions like "Save" or "Cancel" buttons. If not provided, the modal will not display a footer.
• Default Value: None.

OnClose

• Input Type: function
• Description: This callback function is triggered when the modal is requested to close, such as when clicking the close button. It enables developers to handle any cleanup or state changes needed when the modal is dismissed.
• Default Value: None (must be provided).

Size

• Input Type: string (options: 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl')
• Description: This setting controls the maximum width of the modal. By adjusting this prop, developers can customize the size of the modal to suit different content types. Changing the size alters the modal’s maximum width:
  • sm: max width 28rem
  • md: max width 36rem (default)
  • lg: max width 48rem
  • xl: max width 64rem
  • 2xl: max width 80rem
  • 3xl: max width 88rem
  • 4xl: max width 90vw
• Default Value: 'md'.

ScrollBody

• Input Type: boolean
• Description: When set to true, this prop enables scrollable content in the modal body if the content exceeds a certain height, providing a better experience when displaying large amounts of information. If set to false, excess content will be cut off.
• Default Value: false.

Variant

• Input Type: string (options: 'default', 'clean')
• Description: This setting alters the visual style of the modal. The 'default' variant includes a border and background, while the 'clean' variant opts for a more minimalistic design without borders or backgrounds. This affects both the header and the footer styles.
• Default Value: 'default'.

How It Works

The BaseModal component operates in the following manner:

1. Rendering: It first generates the modal structure with specified title, children, and footer. The appropriate class for the modal size is assigned based on the size prop.

2. Visual Styles: It applies styles conditionally, particularly for the header and the overall look based on the variant. The body content can either scroll or not based on the scrollBody prop, ensuring that users can access all content without losing focus on modal interaction.

3. Closing Mechanism: The modal provides a close button that invokes the onClose callback function when clicked, allowing developers to implement specific functionalities upon modal closure.

Use Cases & Examples

Use Case 1: User Confirmation

A scenario where users are required to confirm their actions, such as deleting a file or submitting a form.

Use Case 2: Form Input

Displaying a form to gather information from the user, such as profile updates or feedback submission.

Example Configuration

Scenario

Let's say you want to create a user feedback submission modal. You'll allow users to enter their comments and rate their experience.

Configuration

<BaseModal
    title="Submit Your Feedback"
    onClose={() => console.log("Modal closed")}
    footer={
        <>
            <button className="btn btn-primary">Submit</button>
            <button className="btn btn-secondary" onClick={() => console.log("Cancelled")}>Cancel</button>
        </>
    }
    size="lg"
    scrollBody={true}
    variant="default"
>
    <div>
        <label htmlFor="feedback">Your Feedback:</label>
        <textarea id="feedback" rows="4" placeholder="Enter your comments here..."></textarea>
        <label htmlFor="rating">Rating:</label>
        <select id="rating">
            <option value="1">1 - Poor</option>
            <option value="2">2 - Fair</option>
            <option value="3">3 - Good</option>
            <option value="4">4 - Very Good</option>
            <option value="5">5 - Excellent</option>
        </select>
    </div>
</BaseModal>

In this configuration, the modal asks for user feedback with a scrollable body for entering comments and selecting a rating. The footer includes actionable buttons for submission and cancellation, linked to the respective functionalities.