Markup for: theme_status_messages() [#1982202]

Meta issue: #1980004: [meta] Creating Dream Markup
Issue based on: #1939082: Convert theme_status_messages() to Twig

Questions:

Why do we use .messages class, when it can be more conveniently be used in the actual design?

Markup proposal:

{% for type, messages in messages_display %}
   <div class="site-messages {{ type }}">
    {% if status_headings[type] %}
      <h2 class="element-invisible">{{ status_headings[type] }}</h2>
    {% endif %}
    {% if messages|length > 1 %}
      <ul class="site-messages-list">
        {% for message in messages %}
          <li class="site-messages-single">{{ message }}</li>
        {% endfor %}
      </ul>
    {% else %}
      {{ messages.0 }}
    {% endif %}
  </div>
{% endfor %}

Comment	File	Size	Author
#6	twig-status-messages-1982202-6.patch	2.16 KB	pbz1912
#6

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #2

LewisNyman

he/him

CreditAttribution: LewisNyman commented 20 May 2013 at 18:21

RELATED: #1986408: Message style update

Comment #3

ry5n CreditAttribution: ry5n commented 28 May 2013 at 04:45

This is the current markup from #1986408: Message style update with a few bug fixes and enhancements:

<div class="messages messages--{{ type }}">
  <h2 class="visually-hidden">{{ title }}</h2>
  
  {% if messages|length > 1 %}
    <ul class="messages__list">
      {% for message in messages %}
      <li class="messages__item">{{ message }}</li>
      {% endfor %}
    </ul>
  {% else %}
    <div class="messages__item">{{ message }}</div>
  {% endif %}
</div>

This version is basically the same as in the summary, but it uses the new CSS standards: modifier class is used for the message type, and the component elements use the 'component__element' convention.