ButtonBar

Button Bar

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

const widthInput = document.getElementById("button-bar-width");
const frame = document.getElementById("button-bar-demo-frame");
const status = document.getElementById("button-bar-demo-status");

const updateWidth = () => {
  const width = widthInput.value;
  frame.style.maxWidth = width + "px";
  status.textContent =
    "Width: " +
    width +
    "px. Reduce the space to push actions into the overflow menu.";
};

widthInput.addEventListener("input", updateWidth);
updateWidth();<script type="module">import "@schukai/monster/source/components/form/button-bar.mjs";
import "@schukai/monster/source/components/form/button.mjs";

const widthInput = document.getElementById("button-bar-width-run");
const frame = document.getElementById("button-bar-demo-run-frame");
const status = document.getElementById("button-bar-demo-run-status");

const updateWidth = () => {
  const width = widthInput.value;
  frame.style.maxWidth = width + "px";
  status.textContent =
    "Width: " +
    width +
    "px. Reduce the space to push actions into the overflow menu.";
};

widthInput.addEventListener("input", updateWidth);
updateWidth();</script>

<div
  style="display: grid; gap: 1rem; container-type: inline-size;"
  id="button-bar-demo"
>
  <label
    for="button-bar-width"
    style="display: grid; gap: 0.5rem; color: var(--monster-color-primary-1);"
  >
    Available width
    <input
      id="button-bar-width"
      type="range"
      min="220"
      max="720"
      step="10"
      value="420"
    />
  </label>

  <div
    id="button-bar-demo-frame"
    style="max-width: 420px; padding: 0.75rem; border: 1px solid var(--monster-color-primary-2); border-radius: var(--monster-border-radius); background: var(--monster-bg-color-primary-1);"
  >
    <monster-button-bar id="button-bar-demo-control">
      <monster-button>Save</monster-button>
      <monster-button>Preview</monster-button>
      <monster-button>Duplicate</monster-button>
      <monster-button>Export</monster-button>
      <monster-button>Archive</monster-button>
      <monster-button>Delete</monster-button>
    </monster-button-bar>
  </div>

  <p
    id="button-bar-demo-status"
    style="margin: 0; color: var(--monster-color-primary-1);"
  >
    Width: 420px. Reduce the space to push actions into the overflow menu.
  </p>
</div>

/** no additional stylesheet is defined **/

Component Design

This component is built using the Shadow DOM, which encapsulates its internal structure and styling. By utilizing a shadow root, the component ensures its internal elements remain isolated from the surrounding webpage, preventing external styles or scripts from unintentionally altering its layout or behavior.

Shadow DOM and Accessibility

The Shadow DOM encapsulation restricts direct access to the internal structure of the component. This ensures that developers cannot manipulate or style these internal elements directly. The Shadow DOM also helps maintain a clean and consistent design for the component, avoiding external interference and promoting a more modular architecture.

Customizing Through Exported Parts

Although the Shadow DOM restricts direct styling, the component exposes specific exported parts that developers can target using CSS. This allows for controlled customization while preserving the component's encapsulation.

Available Part Attributes

• control: Represents the main container of the button bar, including its structure.
• button-bar: Represents the area where visible buttons are displayed.
• popper: Represents the dropdown container where overflow buttons are moved.
• popper-nav: Represents the navigation area for interacting with the dropdown.
• popper-switch: Represents the button that triggers the display of the dropdown for overflow buttons.

Below is an example of how to use CSS part attributes to customize different parts of the ButtonBar component.

monster-button-bar::part(control) {
    background-color: #f8f9fa;
    padding: 10px;
}

monster-button-bar::part(button-bar) {
    display: flex;
    gap: 8px;
}

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

monster-button-bar::part(popper-switch) {
    background-color: #007bff;
    color: #ffffff;
    border-radius: 4px;
    padding: 5px;
}

Explanation of the Example

• monster-button-bar::part(control): Styles the main container with a light background and padding.
• monster-button-bar::part(button-bar): Ensures buttons within the button bar are displayed inline with gaps.
• monster-button-bar::part(popper): Adds a white background, border, and shadow to the dropdown container.
• monster-button-bar::part(popper-switch): Styles the trigger button for overflow buttons with a blue background and rounded corners.

Accessibility

Accessibility is a fundamental part of this component's design. It supports keyboard navigation, screen readers, and other assistive technologies to ensure an inclusive user experience. Overflow buttons are automatically managed and remain accessible through the dropdown control when space is limited.