Problem/Motivation
Today, we have 2 issues with the tabs pattern:
- the tab pattern, which was extracted from the tabs pattern, is not used in the tabs pattern
- for this reason, the data model of the tab pattern is complicated and not site builder friendly
Proposed resolution 1
Not tested, just brainstorming....
Tabs pattern fields are using the tab pattern:
fields:
items:
type: render
label: Tabs items
description: A list of "tab" patterns.
preview:
- type: pattern
variant: selected
id: tab
icon: fr-icon-checkbox-circle-line
title: Tab label 1
- type: pattern
id: tab
title: Tab label 2
- type: pattern
id: tab
title: Tab label 3
content:
type: render
label: Tabs content
description: A list of renderable content.
preview:
- type: html_tag
tag: p
value: Tab content 1
- type: html_tag
tag: p
value: Tab content 2
- type: html_tag
tag: p
value: Tab content 3
Tabs pattern tempalte is using the new add_attribute filter:
{% set unique = random() %}
{% if items %}
<div{{ attributes.addClass('fr-tabs') }}>
<ul class="fr-tabs__list" role="tablist" aria-label="{{ label }}">
{% for item in items %}
<li role="presentation">
{{ item|add_attribute('id': 'tabpanel-'~loop.index~'-'~unique)|add_attribute('aria-controls': 'tabpanel-'~loop.index~'-panel-'~unique) }}
</li>
{% endfor %}
</ul>
{% for panel in content %}
{% set panel_attributes = create_attribute({
'id': 'tabpanel-'~loop.index~'-panel'~'-'~unique,
'aria-labelledby': 'tabpanel-'~loop.index~'-'~unique,
'role': 'tabpanel',
'tabindex': 0
}) %}
{% set panel_attributes = loop.first ? panel_attributes.addClass('fr-tabs__panel--selected') : panel_attributes %}
<div{{ panel_attributes.addClass('fr-tabs__panel') }}>
{{ panel }}
</div>
{% endfor %}
</div>
{% endif %}
Proposed resolution 1
Create a tab_panel component.
API changes
Yes, the data model of "tabs" pattern will change, and that will break very usage of it.
That's why there is ⚠️ in the ticket title.