Add unique identifiers or classes for further buttons

Created on 4 September 2024, 12 days ago
Updated 12 September 2024, 5 days ago

Problem/Motivation

Buttons in Drupal (Commerce) are hard to select theme-wise. Most buttons don't have a dedicated id or even class.

For example, see /cart:

<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
	<input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Update cart" class="button js-form-submit form-submit btn btn-outline-primary">
	<input data-drupal-selector="edit-checkout" type="submit" id="edit-checkout" name="op" value="Checkout" class="button js-form-submit form-submit btn btn-primary">
</div>
  • edit-submit
  • edit-checkout

Neither really unique nor semantic.

I know that in contrast to other parts in Drupal, buttons are not well contexted semantically in many cases, but at least in this user-focused area that would make sense to me to have semantically clearer classes available for use in CSS and theme.

Steps to reproduce

Proposed resolution

Remaining tasks

See #3

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

Feature request
Status

Needs review

Version

3.0

Component

Developer experience

Created by

🇩🇪Germany Anybody Porta Westfalica

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

Merge Requests

Comments & Activities

  • Issue created by @Anybody
  • 🇩🇪Germany Anybody Porta Westfalica

    I just saw that there are already places, where this is done very well, e.g. AddToCartForm.php:

    /**
       * {@inheritdoc}
       */
      protected function actions(array $form, FormStateInterface $form_state) {
        $actions['submit'] = [
          '#type' => 'submit',
          '#value' => $this->t('Add to cart'),
          '#submit' => ['::submitForm'],
          '#attributes' => [
            'class' => ['button--add-to-cart'],
          ],
        ];
        return $actions;
      }
    

    So we just have to find the missing pieces :)

  • 🇩🇪Germany Anybody Porta Westfalica

    Okay, here's the first shot. For now to show the expectation and to discuss details.

    One thing I'm a bit curious about is that typically button--XYZ is a modifier and the button should have "button" as base class? But for example in #2 that's not the case, so I didn't change that yet and used the same naming logic.

    This might (already in #2) be against BEM.
    In that case, we should either add a "button" class or remove the "button--" prefix?

    I'm quite happy to see possible improvements for themers here with minimal effort on programming side.

  • Merge request !329Added submit class examples → (Open) created by Anybody
  • Status changed to Needs review 12 days ago
  • 🇩🇪Germany Anybody Porta Westfalica

    Let's do this in general and make the commerce world a bit better for themers :)

  • Pipeline finished with Canceled
    12 days ago
    Total: 112s
    #273589
  • 🇩🇪Germany Anybody Porta Westfalica
  • Pipeline finished with Canceled
    12 days ago
    Total: 110s
    #273595
  • 🇩🇪Germany Anybody Porta Westfalica
  • 🇩🇪Germany Anybody Porta Westfalica
  • Pipeline finished with Success
    12 days ago
    Total: 422s
    #273596
  • 🇮🇱Israel jsacksick

    Why is this categorized as a bug report? This is going to have to wait until we have availability to review this internally...

  • 🇩🇪Germany Anybody Porta Westfalica

    @jsacksick thanks, my fault. This was initially going into a different direction and then I forgot to change the value. Pardon!

Production build 0.71.5 2024