From 6e74ceebc834366b6e35de48df09ea7c8572de75 Mon Sep 17 00:00:00 2001 From: rmccar <42928680+rmccar@users.noreply.github.com> Date: Tue, 14 Jan 2025 13:06:16 +0000 Subject: [PATCH] Restructure list attributes to be set on correct elements (#3472) --- __snapshots__/layout/_template.spec.js.snap | 128 +++++++++++++------- src/components/list/_list.scss | 3 + src/components/list/_macro.njk | 30 ++--- src/components/list/_macro.spec.js | 18 +-- 4 files changed, 108 insertions(+), 71 deletions(-) diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index 29380095bf..bc80c256e6 100644 --- a/__snapshots__/layout/_template.spec.js.snap +++ b/__snapshots__/layout/_template.spec.js.snap @@ -1399,10 +1399,6 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - - - - @@ -1411,7 +1407,12 @@ exports[`base page template matches the full configuration snapshot 1`] = ` -
  • + + + + + +
  • @@ -1422,10 +1423,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    • - -
  • + + + + + +
  • @@ -1436,10 +1441,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    • - -
  • + + + + + +
  • @@ -1447,8 +1456,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Respondent Charter -
    • - + @@ -1468,10 +1476,6 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - - - - @@ -1480,7 +1484,12 @@ exports[`base page template matches the full configuration snapshot 1`] = ` -
  • + + + + + +
  • @@ -1491,10 +1500,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    • - -
  • + + + + + +
  • @@ -1505,10 +1518,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    • - -
  • + + + + + +
  • @@ -1516,8 +1533,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Contact us -
    • - + @@ -1537,10 +1553,6 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - - - - @@ -1549,7 +1561,12 @@ exports[`base page template matches the full configuration snapshot 1`] = ` -
  • + + + + + +
  • @@ -1567,10 +1584,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    • - -
  • + + + + + +
  • @@ -1581,10 +1602,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    • - -
  • + + + + + +
  • @@ -1592,8 +1617,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` News -
    • - + @@ -1622,10 +1646,6 @@ exports[`base page template matches the full configuration snapshot 1`] = ` - - - - @@ -1634,7 +1654,12 @@ exports[`base page template matches the full configuration snapshot 1`] = ` -
  • + + + + + +
  • @@ -1645,10 +1670,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    • - -
  • + + + + + +
  • @@ -1659,10 +1688,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    • - -
  • + + + + + +
  • @@ -1673,10 +1706,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
    • - -
  • + + + + + +
  • @@ -1684,8 +1721,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` Terms and conditions -
    • - + diff --git a/src/components/list/_list.scss b/src/components/list/_list.scss index 1fadac6ca9..a3d85de4fb 100644 --- a/src/components/list/_list.scss +++ b/src/components/list/_list.scss @@ -90,6 +90,9 @@ &--p { padding: 0; + .ons-list__item { + margin: 0; + } } &--summary { diff --git a/src/components/list/_macro.njk b/src/components/list/_macro.njk index 5a09b0a824..184035ecde 100644 --- a/src/components/list/_macro.njk +++ b/src/components/list/_macro.njk @@ -16,23 +16,15 @@ {% if params.element and listLength > 1 %} {% set listEl = params.element | lower %} {% elif (params.element == 'ol') and listLength < 2 %} - {% set listEl = 'p' %} + {% set listEl = 'div' %} {% else %} {% set listEl = 'ul' %} {% endif %} - - {% if listLength < 2 and not params.attributes %} - {% set attributes = [params.itemsList[0].attributes] %} - {% elif listLength < 2 and params.attributes and params.itemsList[0].attributes and listEl == 'p' %} - {% set attributes = [params.attributes, params.itemsList[0].attributes] %} - {% else %} - {% set attributes = [params.attributes] %} - {% endif %} {% set openingTag = "<" + listEl %} {% set closingTag = "" %} {{ openingTag | safe }}{% if params.id %}{{ ' ' }}id="{{ params.id }}"{% endif %} - class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes or params.itemsList[0].attributes %}{% for attributeList in attributes %}{% for attribute, value in (attributeList.items() if attributeList is mapping and attributeList.items else attributeList) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endfor %}{% endif %}> + class="ons-list{{ ' ons-list--p' if listEl == 'div' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes %}{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}{% endif %}> {%- for item in params.itemsList -%} {% set sublistClasses = item.listClasses if item.listClasses %} {% @@ -124,16 +116,18 @@ {% endset %} {% if listLength > 1 or listEl == 'ul' %} -
  • - {{- listItem | safe -}} -
    • + {% set listItemEl = 'li' %} {% else %} - {{- listItem | safe -}} + {% set listItemEl = 'p' %} {% endif %} + {% set openingItemTag = "<" + listItemEl %} + {% set closingItemTag = "" %} + + {{ openingItemTag | safe }} + class="ons-list__item{{ ' ' + item.listClasses if item.listClasses else '' }}" {% if item.current %}aria-current="true"{% endif %} + {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %} + > {{- listItem | safe -}} + {{ closingItemTag | safe }} {%- endfor -%} {{ closingTag | safe }} {% endmacro %} diff --git a/src/components/list/_macro.spec.js b/src/components/list/_macro.spec.js index 2f3c5de6d2..9f8f2976f4 100644 --- a/src/components/list/_macro.spec.js +++ b/src/components/list/_macro.spec.js @@ -194,11 +194,15 @@ describe('macro: list', () => { }), ); - it('renders a

    element', () => { - expect($('.ons-list')[0].tagName).toBe('p'); + it('renders the list as a

    container element', () => { + expect($('.ons-list')[0].tagName).toBe('div'); }); - it('has `ons-list--p` modifier class', () => { + it('renders the list item as a

    element', () => { + expect($('.ons-list__item')[0].tagName).toBe('p'); + }); + + it('the list has `ons-list--p` modifier class', () => { expect($('.ons-list').hasClass('ons-list--p')).toBe(true); }); @@ -206,14 +210,14 @@ describe('macro: list', () => { expect($('.ons-list li').length).toBe(0); }); - it('has additionally provided list `attributes`', () => { + it('has additionally provided list `attributes` on the

    ', () => { expect($('.ons-list').attr('a')).toBe('123'); expect($('.ons-list').attr('b')).toBe('456'); }); - it('has additionally provided list item `attributes`', () => { - expect($('.ons-list--p').attr('c')).toBe('789'); - expect($('.ons-list--p').attr('d')).toBe('123'); + it('has additionally provided list item `attributes` on the

    ', () => { + expect($('.ons-list--p > .ons-list__item').attr('c')).toBe('789'); + expect($('.ons-list--p > .ons-list__item').attr('d')).toBe('123'); }); });