MessageStateButton

Success Message

import "@schukai/monster/source/components/form/message-state-button.mjs";

const button = document.getElementById("message-state-button-demo");
const status = document.getElementById("message-state-button-demo-status");

button.addEventListener("click", () => {
  button.setState("successful", 1500);
  button.setMessage("Your changes were stored successfully.", "Saved");
  button.showDialog();
  status.textContent = "Message opened and success state applied.";
});<script type="module">import "@schukai/monster/source/components/form/message-state-button.mjs";

const button = document.getElementById("message-state-button-demo-run");
const status = document.getElementById("message-state-button-demo-run-status");

button.addEventListener("click", () => {
  button.setState("successful", 1500);
  button.setMessage("Your changes were stored successfully.", "Saved");
  button.showDialog();
  status.textContent = "Message opened and success state applied.";
});</script>

<div style="display:grid;gap:1rem;align-items:start;">
  <monster-message-state-button id="message-state-button-demo">
    Save changes
  </monster-message-state-button>
  <p
    id="message-state-button-demo-status"
    style="margin:0;color:var(--monster-color-primary-1);"
  >
    Click the button to show a success message.
  </p>
</div>

/** no additional stylesheet is defined **/

Retry And Error Message

import "@schukai/monster/source/components/form/message-state-button.mjs";

const button = document.getElementById("message-state-button-retry-demo");
const status = document.getElementById("message-state-button-retry-status");
let attempts = 0;

button.addEventListener("click", () => {
  attempts += 1;

  if (attempts === 1) {
    button.setState("failed", 1800);
    button.setMessage("The publish job could not acquire a deployment lock.", "Try again");
    button.showDialog();
    status.textContent = "First attempt failed.";
    return;
  }

  button.setState("successful", 1800);
  button.setMessage("The release was queued and rollout has started.", "Published");
  button.showDialog();
  status.textContent = "Second attempt succeeded.";
});<script type="module">import "@schukai/monster/source/components/form/message-state-button.mjs";

const button = document.getElementById("message-state-button-retry-demo-run");
const status = document.getElementById("message-state-button-retry-status-run");
let attempts = 0;

button.addEventListener("click", () => {
  attempts += 1;

  if (attempts === 1) {
    button.setState("failed", 1800);
    button.setMessage("The publish job could not acquire a deployment lock.", "Try again");
    button.showDialog();
    status.textContent = "First attempt failed.";
    return;
  }

  button.setState("successful", 1800);
  button.setMessage("The release was queued and rollout has started.", "Published");
  button.showDialog();
  status.textContent = "Second attempt succeeded.";
});</script>

<div style="display:grid;gap:1rem;align-items:start;">
  <monster-message-state-button id="message-state-button-retry-demo">
    Publish
  </monster-message-state-button>
  <p id="message-state-button-retry-status" style="margin:0;">
    First click shows an error, second click shows success.
  </p>
</div>

/** no additional stylesheet is defined **/

Component Design

The monster-message-state-button component combines a button with a dynamic message display system. It leverages the Shadow DOM to encapsulate its internal structure and styles, ensuring that the internal elements are isolated from the rest of the page.

This component includes a stateful button and a pop-up area (popper) for displaying messages. The encapsulation guarantees consistent styling and behavior, unaffected by external scripts or stylesheets.

Shadow DOM and Accessibility

The component uses the Shadow DOM to encapsulate its button, control container, and message elements. This ensures that external styles do not interfere with the component’s visual presentation. It also provides proper ARIA roles and attributes to support accessibility and usability.

Customizing Through Exported Parts

The monster-message-state-button component exposes its internal parts using the exportparts attribute. This allows developers to apply custom styles to specific parts of the component.

Available Part Attributes

• control: Represents the main container for the button and message popper.
• button: Styles the button element itself.
• popper: Targets the message pop-up container, which appears when a message is displayed.
• message: Represents the message content container inside the popper.
• arrow: Targets the directional arrow displayed on the popper.

Below is an example of how to customize the component's parts using CSS:

monster-message-state-button::part(button) {
    background-color: #0078d4;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

monster-message-state-button::part(popper) {
    background-color: #f0f0f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 6px;
}

monster-message-state-button::part(message) {
    font-size: 14px;
    color: #333;
}

monster-message-state-button::part(arrow) {
    width: 12px;
    height: 12px;
    background-color: #f0f0f0;
    transform: rotate(45deg);
    margin-top: -6px;
}

Explanation of the Example

• monster-message-state-button::part(button): Customizes the button's appearance, including background color, padding, and border radius.
• monster-message-state-button::part(popper): Styles the popper container with a light background and box shadow.
• monster-message-state-button::part(message): Defines the font and color for the message content.
• monster-message-state-button::part(arrow): Adjusts the size and orientation of the directional arrow.

Accessibility

The component is designed to be accessible, supporting keyboard navigation and screen readers. It includes the following accessibility features:

• Proper ARIA roles for the button and message elements.
• Keyboard focus management for the button and popper.
• Logical and semantic structure for screen readers to interpret messages.

Developers can further enhance accessibility by ensuring meaningful message content and labels.