Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 299077

[meta] Round-up of form buttons, buttons, link buttons, and links

$
0
0

Background

  1. #1845728: Refactor and introduce generic button CSS styles for forms and links revamped and generalized the CSS for all possible buttons:

    .button,
    button

    Note: Seven does not implement styles for .button.

  2. #1238484: [docs update] Ability to mark the form buttons to be of a specific type (so that they can be styled differently) advanced on it and introduced support for specific button "types":

    <?php
    $form
    ['actions']['submit']['#button_type'] = 'primary';
    $form['actions']['delete']['#button_type'] = 'danger';
    ?>


    .button--primary { color: blue; }
    .button--danger  { color: red; }

    Relevant case study: http://www.lukew.com/ff/entry.asp?571

    #button_style is not limited to 'primary' and 'danger'. The value is simply taken over as .button--$value CSS class name. See http://getbootstrap.com/css/#buttons for common button types.

    Note: Bartik does not implement styles for .button--danger.

  3. Based on the last two building blocks, #1719640: Use 'button' element instead of empty links introduced dynamic/on-page buttons for JS interactions which masquerade as links, in order to avoid <a href="#"></a> as well as href="javascript:void(0)":

    <button type="button" class="link">Show summary</button>

    /**
    * Show buttons as links.
    */
    button.link {
      background: transparent;
      border: 0;
      cursor: pointer;
      margin: 0;
      padding: 0;
    }

    Note: Styling is broken in Bartik (faulty font override).

  4. #216064: Entity form "Delete" button triggers server-side + HTML5 form validation; change "Delete" button to a link is about to convert all "Delete" buttons into links, so as to avoid HTML5 front-end form validation and needless back-end form processing code:

    <?php
    $actions
    ['delete'] = array(
     
    '#type'=> 'link',
     
    '#title'=> $this->t('Delete'),
     
    '#attributes'=> array(
       
    'class'=> array('button', 'button--danger'),
      ),
    );
    ?>


    <a class="button button--danger" href=".../delete">Delete</a>

    Note: That patch will not adjust/fix the link button styles in Bartik/Seven.

Goal

  1. Every button has a .button class or is a <button> or [type=submit] or [type=button].

  2. By default, every link in a form actions container has a .button class, so as to appear as a button. A theme is easily able to override this.

  3. Every link/button that (1) will trigger a confirmation for a destructive action or (2) immediately causes a destructive action uses .button--danger. A theme is easily able to override this button type styling (in both places).


Viewing all articles
Browse latest Browse all 299077

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>