Commit a195d925 authored by Pierre Dureau's avatar Pierre Dureau
Browse files

Issue #3319153, list_group pattern: remove non-compliant #active & #disabled... 

Issue #3319153, list_group pattern: remove non-compliant #active & #disabled properties by splitting list_group & list_group_item patterns
parent f08dcd42

templates/patterns/list_group/list_group.ui_patterns.yml

+26 −21
Original line number Diff line number Diff line
@@ -15,25 +15,30 @@ list_group: 
    items:

      type: render

      label: Items

      description: "An array of render arrays, with 2 specific optional properties: active & disabled"

      description: "A list of List Group Items patterns."

      preview:

        - type: html_tag

          tag: span

          value: "Cras justo odio"

          active: FALSE

        - type: html_tag

          tag: span

          value: "Dapibus ac facilisis in (active)"

          active: TRUE

          disabled: FALSE

        - type: html_tag

          tag: span

          value: "Morbi leo risus"

          active: FALSE

        - type: html_tag

          tag: span

          value: "Porta ac consectetur ac (disabled)"

          disabled: TRUE

        - type: html_tag

          tag: span

          value: "Vestibulum at eros"
 
        - type: pattern

          id: list_group_item

          fields:

            content: The current link item

          settings:

            active: true

        - type: pattern

          id: list_group_item

          fields:

            content: A second link item

        - type: pattern

          id: list_group_item

          fields:

            content: A third link item

        - type: pattern

          id: list_group_item

          fields:

            content: A fourth link item, with a link

            url: "#"

        - type: pattern

          id: list_group_item

          fields:

            content: The disabled link item

          settings:

            disabled: true

templates/patterns/list_group/pattern-list_group.html.twig

+3 −8
Original line number Diff line number Diff line
@@ -2,11 +2,6 @@ 
  {% set attributes = attributes.addClass('list-group-' ~ variant|lower|replace({'_': '-'})) %}

{% endif %}



<ul{{ attributes.addClass('list-group') }}>

  {% for item in items %}

    {% set item_attributes = create_attribute({'class': ['list-group-item']}) %}

    {% set item_attributes = item['#active'] ? item_attributes.addClass('active') : item_attributes %}

    {% set item_attributes = item['#disabled'] ? item_attributes.addClass('disabled') : item_attributes %}

    <li{{item_attributes}}>{{ item }}</li>

  {% endfor %}

</ul>
 
<div{{ attributes.addClass('list-group') }}>

  {{ items }}

</div>

templates/patterns/list_group_item/list_group_item.ui_patterns.yml

0 → 100644
+41 −0
Original line number Diff line number Diff line 
list_group_item:

  label: List Group Item

  description: "List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. https://getbootstrap.com/docs/4.6/components/list-group/"

  variants:

    primary:

      label: Primary

    secondary:

      label: Secondary

    success:

      label: Success

    danger:

      label: Danger

    warning:

      label: Warning

    info:

      label: Info

    light:

      label: Light

    dark:

      label: Dark

  settings:

    active:

      type: boolean

      label: Active?

      description: Indicate the current active selection.

      preview: False

    disabled:

      type: boolean

      label: Disabled?

      description: Make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).

      preview: False

  fields:

    content:

      type: render

      label: Content

      description: "Plain text, or any kind of content."

      preview: "An item"

    url:

      type: text

      label: URL

      description: The button URL. Optional.

templates/patterns/list_group_item/pattern-list_group_item.html.twig

0 → 100644
+17 −0
Original line number Diff line number Diff line 
{% if variant != '' and variant|lower != 'default' %}

  {% set variants = variant|split('__') %}

  {% for variant in variants %}

    {% set attributes = attributes.addClass('list-group-item-' ~ variant|lower|replace({'_': '-'})) %}

  {% endfor %}

{% endif %}



{% set attributes = attributes.addClass('list-group-item') %}

{% set attributes = disabled ? attributes.addClass('disabled').setAttribute("aria-disabled", "true") : attributes %}

{% set attributes = active ? attributes.addClass('active').setAttribute("aria-current", "true") : attributes %}



{% if url or attributes.href %}

  {% set url = url ?: attributes.href %}

  <a{{ attributes.addClass('list-group-item-action').setAttribute('href', url) }}>{{ content }}</a>

{% else %}

  <span{{ attributes }}>{{ content }}</span>

{% endif %}