IBX-11416: Use ibexa DS chip component

composer.json

@@ -27,6 +27,7 @@
         "ibexa/content-forms": "~5.0.x-dev",
         "ibexa/core": "~5.0.x-dev",
         "ibexa/design-engine": "~5.0.x-dev",
+        "ibexa/design-system-twig": "~5.0.x-dev",
         "ibexa/polyfill-php82": "^1.0",
         "ibexa/rest": "~5.0.x-dev",
         "ibexa/search": "~5.0.x-dev",
@@ -97,5 +98,11 @@
         "branch-alias": {
             "dev-main": "5.0.x-dev"
         }
-    }
+    },
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/ibexa/design-system-twig"
+        }
+    ]
 }

src/bundle/Resources/public/js/scripts/admin.search.filters.js

@@ -1,9 +1,11 @@
+import Chip from '@ibexa-design-system/src/bundle/Resources/public/ts/components/chip';
+
 (function (global, doc, ibexa, flatpickr, React, ReactDOMClient) {
     const { escapeHTML, escapeHTMLAttribute } = ibexa.helpers.text;
     const { dangerouslySetInnerHTML } = ibexa.helpers.dom;
     const { getInstance } = ibexa.helpers.objectInstances;
     let getUsersTimeout;
-    const SELECTOR_TAG = '.ibexa-tag';
+    const SELECTOR_TAG = '.ids-chip';
     const token = doc.querySelector('meta[name="CSRF-Token"]').content;
     const siteaccess = doc.querySelector('meta[name="SiteAccess"]').content;
     const filters = doc.querySelector('.ibexa-filters');
@@ -233,7 +235,7 @@
         form.submit();
     };
     const clearContentType = (event) => {
-        const checkbox = doc.querySelector(event.currentTarget.dataset.targetSelector);
+        const checkbox = doc.querySelector(event.currentTarget.closest('.ids-chip').dataset.targetSelector);
 
         checkbox.checked = false;
         removeSearchTag(event);
@@ -264,6 +266,21 @@
         'last-modified': (event) => clearDataRange(event, lastModifiedSelect, lastModifiedDateRange),
         'last-created': (event) => clearDataRange(event, lastCreatedSelect, lastCreatedDateRange),
     };
+    const initSearchTagChips = () => {
+        for (const tagType in clearSearchTagBtnMethods) {
+            const chips = doc.querySelectorAll(`.ibexa-search-criteria-tags__tag--${tagType}.ids-chip`);
+
+            chips.forEach((chip) => {
+                if (!chip.dataset.idsInitialized) {
+                    const chipInstance = new Chip(chip);
+
+                    chipInstance.init();
+                }
+
+                chip.addEventListener('ids:chip:delete:before', clearSearchTagBtnMethods[tagType], false);
+            });
+        }
+    };
     const showMoreContentTypes = (event) => {
         const btn = event.currentTarget;
         const contentTypesList = btn
@@ -314,11 +331,7 @@
         sectionSelect.addEventListener('change', toggleDisabledStateOnApplyBtn, false);
     }
 
-    for (const tagType in clearSearchTagBtnMethods) {
-        const tagBtns = doc.querySelectorAll(`.ibexa-tag__remove-btn--${tagType}`);
-
-        tagBtns.forEach((btn) => btn.addEventListener('click', clearSearchTagBtnMethods[tagType], false));
-    }
+    initSearchTagChips();
 
     lastModifiedPeriod.addEventListener('change', toggleDisabledStateOnApplyBtn, false);
     lastModifiedStartDate.addEventListener('change', toggleDisabledStateOnApplyBtn, false);

src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig

@@ -2,13 +2,11 @@
 
 <div class="ibexa-search-criteria-tags">
     {% if form.children.search_language.vars.value != '' %}
-        <div class="ibexa-tag ibexa-search-criteria-tags__tag">
-            <div class="ibexa-tag__content">
-                {{ 'search.in_language'|trans({
-                    '%search_language%': form.children.search_language.vars.data.name,
-                })|desc('in %search_language%')}}
-            </div>
-        </div>
+        <twig:ibexa:tag type="neutral" class="ibexa-search-criteria-tags__tag">
+            {{ 'search.in_language'|trans({
+                '%search_language%': form.children.search_language.vars.data.name,
+            })|desc('in %search_language%')}}
+        </twig:ibexa:tag>
     {% endif %}
 
     {% if form.content_types.vars.data is not empty %}
@@ -17,7 +15,7 @@
                 'content': content_type.name,
                 'title': "#{'search.content.type'|trans|desc('Content type')}: #{content_type.name}",
                 'target_selector': "#search_content_types_#{content_type.identifier}",
-                'btn_class': "ibexa-tag__remove-btn--content-types",
+                'tag_class': "ibexa-search-criteria-tags__tag--content-types",
             }) }}
         {% endfor %}
     {% endif %}
@@ -26,15 +24,15 @@
         {{ include('@ibexadesign/ui/search_tag.html.twig', {
             'content': form.section.vars.data.name,
             'title': "#{'search.section'|trans|desc('Section')}: #{form.section.vars.data.name}",
-            'btn_class': "ibexa-tag__remove-btn--section",
+            'tag_class': "ibexa-search-criteria-tags__tag--section",
         }) }}
     {% endif %}
 
     {% if form.subtree.vars.value is not empty %}
         {{ include('@ibexadesign/ui/search_tag.html.twig', {
             'content': content_breadcrumbs,
             'title':  "#{'search.subtree'|trans|desc('Subtree')}: #{content_breadcrumbs}",
-            'btn_class': "ibexa-tag__remove-btn--subtree",
+            'tag_class': "ibexa-search-criteria-tags__tag--subtree",
         }) }}
     {% endif %}
 
@@ -48,7 +46,7 @@
 
         {{ include('@ibexadesign/ui/search_tag.html.twig', {
             'content': "#{'search.last.modified'|trans|desc('Last modified')}: #{start_date} - #{end_date}",
-            'btn_class': "ibexa-tag__remove-btn--last-modified",
+            'tag_class': "ibexa-search-criteria-tags__tag--last-modified",
         }) }}
     {% endif %}
 
@@ -62,15 +60,15 @@
 
         {{ include('@ibexadesign/ui/search_tag.html.twig', {
             'content': "#{'search.created'|trans|desc('Created')}: #{start_date} - #{end_date}",
-            'btn_class': "ibexa-tag__remove-btn--last-created",
+            'tag_class': "ibexa-search-criteria-tags__tag--last-created",
         }) }}
     {% endif %}
 
     {% if form.creator.vars.data is not empty %}
         {{ include('@ibexadesign/ui/search_tag.html.twig', {
             'content': form.creator.vars.data.name,
             'title': "#{'search.creator'|trans|desc('Creator')}: #{form.creator.vars.data.name}",
-            'btn_class': "ibexa-tag__remove-btn--creator",
+            'tag_class': "ibexa-search-criteria-tags__tag--creator",
         }) }}
     {% endif %}
 </div>

src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig

@@ -1,19 +1,12 @@
-{% set btn_class = btn_class|default('') %}
+{% set tag_class = tag_class|default('') %}
 {% set content = content|default('') %}
 {% set target_selector = target_selector|default('') %}
 {% set title = title|default('') %}
 
-<div class="ibexa-tag ibexa-search-criteria-tags__tag"{% if title %} title="{{ title }}{% endif %}">
-    <div class="ibexa-tag__content">
-        {{ content }}
-    </div>
-    <button
-        type="button"
-        class="ibexa-tag__remove-btn {{ btn_class }}"
-        data-target-selector="{{ target_selector }}"
-    >
-        <svg class="ibexa-icon ibexa-icon--tiny">
-            <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-        </svg>
-    </button>
-</div>
+<twig:ibexa:chip
+    class="ibexa-search-criteria-tags__tag {{ tag_class }}"
+    title="{{ title }}"
+    data-target-selector="{{ target_selector }}"
+>
+    {{ content }}
+</twig:ibexa:chip>