By sun on
Change record status: 
Published (View all published change records)
Project: 
Drupal core
Introduced in branch: 
8.x
Issue links: 
https://www.drupal.org/node/1168246
https://www.drupal.org/node/1892182
Description: 

Previous versions of Drupal used the FIELDSET and LEGEND HTML elements to achieve "grouped, collapsible form elements". Fieldsets/legends are very hard to style, since all user agents handle them differently, and they have not been designed for the job of being a collapsible user interface element.

Drupal 8 leverages the new HTML5 DETAILS and SUMMARY elements, which were designed for exactly this job, and start to see native user agent implementations for the collapsible behavior (e.g., latest Chrome).

The HTML5 spec defines details elements as always collapsible. This means that there is no "uncollapsible" details are no longer possible (which is good for usability, since forms in Drupal typically over-used fieldsets). In Drupal details elements are closed by default.

You are still able to use the old "fieldset" element type, but now they are always "uncollapsible".

Drupal 7

$form['advanced'] = array(
  '#type' => 'fieldset',
  '#title' => t('Advanced settings'),
  '#collapsible' => TRUE,
  '#collapsed' => FALSE,
  '#description' => t('Lorem ipsum.'),
);

<fieldset class="collapsible form-wrapper collapse-processed" id="edit-advanced">
  <legend>
    <span class="fieldset-legend">
      <a class="fieldset-title" href="#">
        <span class="fieldset-legend-prefix element-invisible">Hide</span>
        Advanced settings
      </a>
      <span class="summary"></span>
    </span>
  </legend>
  <div class="fieldset-wrapper">
    <div class="fieldset-description">Lorem ipsum.</div>
  </div>
</fieldset>

Drupal 8

$form['advanced'] = [
  '#type' => 'details',
  '#title' => t('Advanced settings'),
  '#description' => t('Lorem ipsum.'),
  '#open' => TRUE, // Controls the HTML5 'open' attribute. Defaults to FALSE.
];

<details open="open" class="form-wrapper" id="edit-advanced">
  <summary>Advanced settings</summary>
  <div class="details-wrapper">
    <div class="details-description">Lorem ipsum.</div>
  </div>
</details>
Impacts: 
Module developers
Themers
Updates Done (doc team, etc.)
Online documentation: 
Not done
Theming guide: 
Not done
Module developer documentation: 
Not done
Examples project: 
Not done
Coder Review: 
Not done
Coder Upgrade: 
Not done
Other: 
Other updates done

Comments

pjcdawkins’s picture

pjcdawkins commented

Why does the FAPI property remain "#collapsed", when it now translates into HTML5 attribute "open"? Can we have "#open" instead?

I never really liked the terms "collapsible" & "collapsed" and it looks like the HTML5 spec designers agree.

nod_’s picture

nod_
Primary language French
Location Lille
commented

done.

pjcdawkins’s picture

pjcdawkins commented

:)

Chi’s picture

Chi commented

It is not commited yet.
#1892182: #type details: Rename #collapsed to #open

________________________
Override, don't change!

raushan’s picture

raushan commented

Done.

diamondsea’s picture

diamondsea
he/him/his
Primary language English
commented

Example using HereDoc notation to store the HTML Description:

$desc_html = <<<HTML
<p>
  <strong>Put the HTML to be displayed when open in here.</strong>
<p>
HTML;

$form['advanced'] = array(
  '#type' => 'details',
  '#title' => t('Advanced settings'),
  '#description' => t($desc_html),
  '#open' => TRUE, // Controls the HTML5 'open' attribute. Defaults to FALSE.
);
2pha’s picture

2pha
Primary language English
commented

might have to update the list of supported browsers seeing as IE11 does not support the details tag.
https://www.drupal.org/docs/8/system-requirements/browser-requirements

A nightmare now I am trying to make it accessible.

blog

wdev’s picture

wdev commented 
function hook_field_group_form_process_build_alter(array &$element, FormStateInterface $form_state, &$complete_form) {
      $node = $form_state->getFormObject()->getEntity();
      if ($node->hasField('field_pub_date') && !$node->get('field_pub_date')->isEmpty()) {
        $element['field_pub_date']['#attributes']['open'] = TRUE;
      }
}