1. Replace pattern()
Twig function by component()
in components/
$ grep -r "pattern(" components/
components/france_connect/france_connect.twig: {{ pattern('link',
components/nav_menu/nav_menu.twig: {{ pattern('link', {
components/consent_banner/consent_banner.twig: pattern('button', {label: 'Accept all'|t,
components/consent_banner/consent_banner.twig: pattern('button', {label: 'Refuse all'|t,
components/consent_banner/consent_banner.twig: pattern('button', {label: 'Personalize'|t,
components/consent_banner/consent_banner.twig: {{ pattern('button_group', {
components/consent_banner/consent_banner.twig:{{ pattern('modal', {
components/consent_banner/consent_banner.twig: body: pattern('consent_manager', {
components/content_media/content_media.twig: {{ pattern('transcription', {
components/consent_manager/consent_manager.twig: {{ pattern('button_group', {
components/consent_manager/consent_manager.twig: buttons: [pattern('button', {label: 'Confirm my choices'|t})]
Careful, the functions are different:
pattern(string $id, array $fields = [], string $variant = "")
where $fields
has both slots and props
component(string $component_id, array $slots = [], array $props = [])
where $component_id
is provider:component
and variant is a prop
1. Replace pattern()
Twig function by component()
in templates/
$ grep -r "pattern(" templates/
templates/views/views-mini-pager.html.twig:{{ pattern('pagination', {
templates/system/menu--footer.html.twig:{{ pattern('footer_menu', {
templates/system/pager.html.twig:{{ pattern('pagination', {
templates/system/menu-local-tasks.html.twig: {{ pattern('tabs', {
templates/system/menu-local-tasks.html.twig: {{ pattern('tabs', {
templates/system/page.html.twig: {{ pattern('skiplinks', {
templates/system/page.html.twig: pattern('link', {
templates/system/page.html.twig: pattern('link', {
templates/system/page.html.twig: pattern('link', {
templates/system/page.html.twig: {{ pattern('header', {
templates/system/page.html.twig: {{ pattern('footer', {
templates/overrides/system/status-messages.html.twig: {{ pattern('alert', {
templates/overrides/system/menu-local-task.html.twig:{{ pattern('tab', {
templates/overrides/system/breadcrumb.html.twig: {{ pattern('breadcrumb', {
templates/system/menu--main.html.twig: {{ pattern('nav_menu', {
Remove UI Patterns Legacy dependency from info.yml
What else?
Steps to reproduce
Proposed resolution
Remaining tasks
User interface changes
API changes
Data model changes