Menu Item CSS class changes and removal of .leaf

Summary

Updated the menu item classes to adhere to our CSS coding standards. https://www.drupal.org/node/1887918#extend

We are not using .leaf in core for styling and it's use-case is limited. We removed automatically adding it in favour of providing a way to accomplish the same class in a template.

Before

<ul class="menu">
  <li class="collapsed"><ul class="menu"><li class="leaf">Link</li></ul></li>
  <li class="expanded"><ul class="menu"><li class="leaf">Link</li></ul></li>
  <li class="leaf">Link</li>
</ul>

After

To achieve the .leaf class you can now modify the menu tree template to add the following condition:

{% if item.below|length == 0 %}
  <li{{ item.attributes.addClass('leaf') }}>
{% else %}
  <li{{ item.attributes }}>
{% endif %}

Full example:

{% import _self as menus %}

{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('menu') }}>
    {% else %}
      <ul class="menu">
    {% endif %}
      {% for item in items %}

          {#
            test if theres more menu items to be printed
            if there is add a class for it
          #}
          {% if item.below|length == 0 %}
            <li{{ item.attributes.addClass('leaf', 'im-like-a-leaf-on-the-wind') }}>
          {% else %}
            <li{{ item.attributes }}>
          {% endif %}

          {# print out the link & test if theres more items #}
          {{ link(item.title, item.url) }}
          {% if item.below %}
            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}