ActionButton

Inline Menu

import '@schukai/monster/source/components/form/action-button.mjs';

const element = document.querySelector('monster-action-button');


element.setOption("buttons" , [
    {
        label: "Button 1",
        class: "monster-button-primary-1",
        action: () => {
            console.log("Button 1 clicked");
        }
    },
    {
        label: "Button 2",
        class: "monster-button-primary-2",
        action: () => {
            console.log("Button 2 clicked");
        }
    }
])<script type="module">import '@schukai/monster/source/components/form/action-button.mjs';

const element = document.getElementById('Agh3a')


element.setOption("buttons" , [
    {
        label: "Button 1",
        class: "monster-button-primary-1",
        action: () => {
            console.log("Button 1 clicked");
        }
    },
    {
        label: "Button 2",
        class: "monster-button-primary-2",
        action: () => {
            console.log("Button 2 clicked");
        }
    }
])</script>

<monster-action-button>
    click me!
</monster-action-button>

/** no additional stylesheet is defined **/

Bulk Action Menu

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

const element = document.getElementById("action-button-bulk-actions-demo");
const status = document.getElementById("action-button-bulk-actions-status");

element.setOption("buttons", [
  {
    label: "Archive selected",
    class: "monster-button-outline-primary",
    action: () => {
      status.textContent = "Archived the selected entries.";
    },
  },
  {
    label: "Assign reviewer",
    class: "monster-button-outline-secondary",
    action: () => {
      status.textContent = "Opened the reviewer assignment flow.";
    },
  },
  {
    label: "Export CSV",
    class: "monster-button-outline-tertiary",
    action: () => {
      status.textContent = "Started the CSV export.";
    },
  },
]);<script type="module">import "@schukai/monster/source/components/form/action-button.mjs";

const element = document.getElementById("action-button-bulk-actions-demo-run");
const status = document.getElementById("action-button-bulk-actions-status-run");

element.setOption("buttons", [
  {
    label: "Archive selected",
    class: "monster-button-outline-primary",
    action: () => {
      status.textContent = "Archived the selected entries.";
    },
  },
  {
    label: "Assign reviewer",
    class: "monster-button-outline-secondary",
    action: () => {
      status.textContent = "Opened the reviewer assignment flow.";
    },
  },
  {
    label: "Export CSV",
    class: "monster-button-outline-tertiary",
    action: () => {
      status.textContent = "Started the CSV export.";
    },
  },
]);</script>

<div style="display:grid;gap:1rem;">
  <monster-action-button id="action-button-bulk-actions-demo">
    Bulk actions
  </monster-action-button>
  <div id="action-button-bulk-actions-status">No action selected yet.</div>
</div>

/** no additional stylesheet is defined **/

Component Design

The ActionButton component is built using the Shadow DOM to encapsulate its structure and styling. By utilizing a shadow root, the component ensures its internal elements and styles remain protected from unintended interference caused by external CSS or JavaScript.

Shadow DOM and Accessibility

The Shadow DOM encapsulates the component's internal structure, preventing direct access to its elements. This ensures a consistent and predictable design. The component is designed with accessibility in mind, supporting semantic structure and keyboard navigation to provide an inclusive user experience.

Customizing Through Exported Parts

Specific internal elements of the ActionButton component are made available for external styling through exported parts. These parts allow developers to apply custom styles to specific sections of the component while maintaining its encapsulation.

Available Part Attributes

• control: Represents the main container for the button and its popper content.
• button: Represents the main button element that triggers the actions.
• popper: Represents the dropdown area where additional action buttons are displayed.
• content: Represents the container for the content inside the popper.
• buttons: Represents the group of action buttons displayed inside the popper.

Below is an example of how to use CSS part attributes to customize the ActionButton component:

monster-action-button::part(control) {
    background-color: #f0f0f0;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 5px;
}

monster-action-button::part(button) {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

monster-action-button::part(popper) {
    background-color: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px;
}

monster-action-button::part(buttons) {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

Explanation of the Example

• monster-action-button::part(control): Styles the main container with padding, a border, and background color.
• monster-action-button::part(button): Customizes the trigger button with a background color, padding, and rounded corners.
• monster-action-button::part(popper): Adds styling to the dropdown container, including a border and shadow for visibility.
• monster-action-button::part(buttons): Ensures the action buttons inside the dropdown are displayed in a vertical layout with spacing.

Accessibility

The ActionButton component follows accessibility best practices, ensuring support for keyboard navigation and screen readers. Users can interact with the popper actions using standard navigation methods, making the component inclusive for all users.