Modal

Focus with Clarity: Your Gateway to Streamlined Interactions With Modal

The Modal Component is a dynamic UI element designed to capture user attention by overlaying the main content. It facilitates focused interactions, such as completing tasks or entering information, by temporarily pausing interaction with the background content. This component is essential for guiding users through specific processes without distractions, making it a cornerstone of effective user interface design.

Anatomy

The anatomy of a Modal Component typically includes a backdrop that dims the underlying content, a central window that displays the primary content or form, a close button to exit the modal, and may also feature headers and footers for additional information or actions. This structured layout focuses the user's attention on the task at hand.

anatomy of modal component

Properties

The Modal Component is designed with two distinct sizing properties to ensure flexibility and adaptability in various UI contexts:

Size	Modal Size
Small	XSmall
Medium	Small
Large	Medium
	Large

Size (Component Size within the Modal)

• Small: Optimized for minimal content or compact displays.

• Medium: Balances detail and space, suitable for most use cases.

• Large: Provides ample space for complex content or detailed interactions.

React

import React from 'react';
import { PlusModal, PlusButton } from '@plusui/react';

const SmallModalExample = () => {
  const showModal = () => {
    document.getElementById("sm-modal").show();  // Show modal
  };

  return (
    <>
      <PlusButton onClick={showModal}>Show Small Modal</PlusButton>  {/* Button to open modal */}

      <PlusModal id="sm-modal" size="sm">
        <div slot="header">Small Modal Header</div>
        <div slot="body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
        <div slot="footer">
          <PlusButton onClick={() => document.getElementById("sm-modal").hide()}>Close</PlusButton>
        </div>
      </PlusModal>
    </>
  );
};

export default SmallModalExample;

Angular

<!-- Button to Open the Modal -->
<plus-button (plus-click)="showModal()">Show Small Modal</plus-button>

<!-- Plus-Modal with 'sm' Size -->
<plus-modal #smModal size="sm">
  <div slot="header">Small Modal Header</div>
  <div slot="body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div slot="footer">
    <plus-button (plus-click)="closeModal()">Close</plus-button>
  </div>
</plus-modal>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-small-modal-example',
  templateUrl: './small-modal-example.component.html',
})
export class SmallModalExampleComponent {
  @ViewChild('smModal') smModal;

  showModal() {
    this.smModal.show();  // Show modal
  }

  closeModal() {
    this.smModal.hide();  // Hide modal
  }
}

Vue

<template>
  <!-- Button to Open the Modal -->
  <plus-button @plus-click="showModal">Show Small Modal</plus-button>

  <!-- Plus-Modal with 'sm' Size -->
  <plus-modal ref="smModal" size="sm">
    <div slot="header">Small Modal Header</div>
    <div slot="body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div slot="footer">
      <plus-button @plus-click="closeModal">Close</plus-button>
    </div>
  </plus-modal>
</template>

<script>
export default {
  methods: {
    showModal() {
      this.$refs.smModal.show();  // Show modal
    },
    closeModal() {
      this.$refs.smModal.hide();  // Hide modal
    }
  }
}
</script>

Javascript

<!-- Button to Open the Modal -->
<plus-button onclick="showModal()">Show Small Modal</plus-button>

<!-- Plus-Modal with 'sm' Size -->
<plus-modal id="sm-modal" size="sm">
  <div slot="header">Small Modal Header</div>
  <div slot="body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div slot="footer">
    <plus-button onclick="closeModal()">Close</plus-button>
  </div>
</plus-modal>

<script>
function showModal() {
  document.getElementById("sm-modal").show();  // Show modal
}

function closeModal() {
  document.getElementById("sm-modal").hide();  // Hide modal
}
</script>

Modal Size (Overall Modal Size)

• XSmall: Extremely compact, focusing on the most critical content.

• Small: Slightly larger, offering a bit more space while remaining unobtrusive.

• Medium: A versatile size that accommodates a wide range of content without overwhelming the screen.

• Large: Maximizes space for extensive information, complex forms, or interactive content.

React

Angular

Vue

Javascript

Layout & Spacing

The layout and spacing within the Modal Component are crucial for readability and user comfort. Adequate spacing between elements within the modal, as well as between the modal and the edges of the screen, ensures that the content is easy to interact with, without overwhelming the user.

layout & spacing of modal component

Light & Dark Mode

The Modal Component is designed to seamlessly integrate with both light and dark mode preferences, adapting its color scheme to match the user’s or system's settings. This ensures a consistent and strain-free viewing experience regardless of the ambient lighting conditions or user preferences.

Accessibility

Accessibility features in the Modal Component are paramount, including keyboard navigation for interacting with the modal (such as tabbing through form fields), screen reader support to announce the modal's presence and content, and ARIA roles and properties to denote the modal's status and function. These features ensure that all users, regardless of their abilities, can interact with the modal effectively.

Criteria	Description	Status
ARIA Attributes	Ensures ARIA attributes are allowed for an element's role	✔️ Passed
ARIA Hidden Elements	Ensures aria-hidden elements are not focusable nor contain focusable elements	✔️ Passed
ARIA Valid Values	Ensures all ARIA attributes have valid values	✔️ Passed
ARIA Valid Names	Ensures attributes that begin with aria- are valid ARIA attributes	✔️ Passed
Discernible Text	Ensures buttons have discernible text	✔️ Passed
Nested Interactive Controls	Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies	✔️ Passed
Tabindex Attribute	Ensures tabindex attribute values are not greater than 0	✔️ Passed
ID Attributes	Ensures every id attribute value is unique	✔️ Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	✔️ AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
size	Determines the size of the modal	String	xs, sm, md, lg	md
is-open	Indicates if the modal is open or closed	Boolean	true, false	false

Method	Description
show	Opens the modal
hide	Closes the modal

Event	Description
plus-modal-before-show	Triggered before the modal is opened
plus-modal-show	Triggered when the modal is opened
plus-modal-before-hide	Triggered before the modal is closed
plus-modal-hide	Triggered when the modal is closed