Contrib.social

Create SDC for EU ECL Button Component

Open on Drupal.org →
Created on 11 May 2025, 5 months ago

Purpose

The button component is designed to:

  • Support various levels of importance and usage through its variants:
    • Primary: For the most important actions (e.g., "Submit", "Register").
    • Secondary: For negative or secondary actions paired with Primary (e.g., "Cancel", "Delete").
    • Tertiary: For less prominent actions (e.g., "Show more").
    • CTA: To highlight critical user goals with a bold style (e.g., "Search by priority").
    • Ghost and Ghost Inverted: For subtle or inverted styling.
    • Icon-only: For buttons with hidden labels, relying on icons with accessible text for screen readers.
  • Ensure accessibility, particularly for icon-only buttons, by providing screen-reader-friendly labels.
  • Offer flexibility through customizable properties like variant, type, icon placement, and additional classes/attributes.

Requirements

The button component must include the following props, as defined in the specifications:

  • label (string, default: '')

    The button's text label (e.g., "Primary button").
  • variant (string, default: 'primary')

    Defines the button style. Options: 'primary', 'secondary', 'tertiary', 'cta', 'ghost', 'ghost-inverted'.
  • type (string, default: 'submit')

    HTML button type. Options: 'submit', 'reset', 'button'.
  • disabled (boolean, default: false)

    Disables the button when true.
  • hide_label (boolean, default: false)

    Hides the label visually for icon-only buttons; requires an icon and a label for screen readers.
  • icon_position (string, default: 'after')

    Positions the icon relative to the label. Options: 'before', 'after'.
  • icon (associative array or array of associative arrays, optional)

    Defines the icon(s) using the ECL Icon component structure (e.g., { name: 'corner-arrow', size: 's' }).
  • indicator (object, default: {})

    An Indicator object (details TBD); displayed only if defined, an icon is present, and no label is shown.
  • extra_classes (string, default: '')

    Space-separated additional CSS classes.
  • extra_attributes (array, default: [])

    Additional HTML attributes (e.g., [{ name: 'data-test', value: 'data-test-1' }]).

Implementation Details

The component will consist of:

  1. button.component.yml
  2. button.twig:

    Render a <button> element with dynamic classes, attributes, and content. Structure:
    • Base class: ecl-button.
    • Variant class: ecl-button--{{ variant }} (e.g., ecl-button--primary).
    • Icon-only class: ecl-button--icon-only if hide_label is true.
    • Type attribute: type="{{ type }}".
    • Disabled attribute: disabled if disabled is true.
    • Content:
      • If icon and icon_position == 'before': Render icon first (SVG from sprite sheet).
      • Label: <span class="ecl-button__label" data-ecl-label="true"&>{{ label }}</span> (hidden visually if hide_label is true).
      • If icon and icon_position == 'after': Render icon after label.
      • If indicator, icon exists, and no label: Render indicator (placeholder for now).
    • Add extra_classes and extra_attributes as answerneeded.

    Next Steps

    1. Test the component across all variants, with and without icons, and in different states (e.g., disabled).
    2. Update the module’s documentation and demo files to showcase the button component.

    Additional Notes

    • This issue focuses on the initial implementation. Future enhancements (e.g., Indicator object details or Icon API fallbacks) can be addressed in separate issues.
    • The component assumes the ECL Icon component and Drupal 11.1+ Icon API are available. Fallbacks will be considered later.
✨ Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇧🇪Belgium raluelrusu Brussels

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024