IBX-11416: Use ibexa DS tag component

composer.json

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

src/bundle/Resources/encore/ibexa.css.config.js

@@ -5,6 +5,7 @@ module.exports = (Encore) => {
         path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'),
         path.resolve(__dirname, '../public/scss/ibexa.scss'),
         path.resolve(__dirname, '../public/scss/ui/ibexa-modules.scss'),
+        path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/css/styles.css'),
         path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/flatpickr.min.css'),
         path.resolve(
             './vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/plugins/confirmDate/confirmDate.css',
@@ -18,6 +19,7 @@ module.exports = (Encore) => {
         ])
         .addEntry('ibexa-admin-ui-security-base-css', [
             path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'),
+            path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/css/styles.css'),
             path.resolve(__dirname, '../public/scss/ibexa.scss'),
         ]);
 };

src/bundle/Resources/public/scss/_page-title.scss

@@ -28,7 +28,8 @@
         white-space: nowrap;
     }
 
-    .ibexa-badge {
+    .ibexa-badge,
+    .ids-tag {
         margin-left: calculateRem(16px);
         font-family: $ibexa-font-family;
     }

src/bundle/Resources/views/themes/admin/account/profile/view.html.twig

@@ -91,11 +91,9 @@
                         </div>
 
                         {% for role_assigment in roles %}
-                            <div class="ibexa-tag">
-                                <div class="ibexa-tag__content">
-                                    {{ role_assigment.identifier }}
-                                </div>
-                            </div>
+                            <twig:ibexa:tag type="neutral">
+                                {{ role_assigment.identifier }}
+                            </twig:ibexa:tag>
                         {% endfor %}
                     </div>
                 {% endif %}

src/bundle/Resources/views/themes/admin/limitation/udw_limitation_value.html.twig

@@ -37,11 +37,9 @@
                 }) }}
             {% else %}
                 <li class="mt-2">
-                    <div class="ibexa-tag">
-                        <div class="ibexa-tag__content">
-                            {{ "role.policy.limitation.location_deleted"|trans({}, 'ibexa_content_forms_role')|desc("Location deleted") }}
-                        </div>
-                    </div>
+                    <twig:ibexa:tag type="neutral">
+                        {{ "role.policy.limitation.location_deleted"|trans({}, 'ibexa_content_forms_role')|desc("Location deleted") }}
+                    </twig:ibexa:tag>
                 </li>
             {% endif %}
         {% endfor %}

src/bundle/Resources/views/themes/admin/ui/field_type/preview/content_fields.html.twig

@@ -150,21 +150,24 @@
         {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ibexa_selection-multiple')|trim}) %}
         <ul {{ block( 'field_attributes' ) }}>
         {% for selectedIndex in field.value.selection %}
-            <li class="ibexa-selection__item ibexa-tag">
-                <div class="ibexa-tag__content">
+            <li class="ibexa-selection__item">
+                <twig:ibexa:tag type="neutral">
                     {{ options[selectedIndex] }}
-                </div>
+                </twig:ibexa:tag>
             </li>
         {% endfor %}
         </ul>
     {% elseif not fieldSettings.isMultiple %}
-        {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ibexa_selection-single ibexa-tag')|trim}) %}
+        {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ibexa_selection-single')|trim}) %}
 
         {% set field_value = options[field.value.selection|first]|escape %}
-
-        <div class="ibexa-tag__content">
+        {% set simple_block_field_content %}
             {{ block( 'simple_block_field' ) }}
-        </div>
+        {% endset %}
+
+        <twig:ibexa:tag type="neutral">
+            {{ simple_block_field_content }}
+        </twig:ibexa:tag>
     {% endif %}
 {% endblock %}
 

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

@@ -1,21 +1,18 @@
-{% import '@ibexadesign/ui/component/macros.html.twig' as html %}
-
 {% if title is defined %}
     <div class="ibexa-page-title {% if page_title_class is defined %}{{ page_title_class }}{% endif %}">
         <div class="ibexa-page-title__top">
             <h1 class="ibexa-page-title__title">
                 <span class="ibexa-page-title__content" title="{{ title }}">{{ title }}</span>
                 {% block tag %}
                     {% if tag is defined %}
-                        {% set attr = tag_attr|default({})|merge({
-                            class: (tag_attr.class|default('')
-                                ~ ' ibexa-badge ' ~ tag_extra_classes|default('')
-                            )|trim,
-                        }) %}
-
-                        <div {{ html.attributes(attr) }}>
+                        {% set tag_attr = tag_attr|default({}) %}
+                        <twig:ibexa:tag
+                            :type="tag_type|default('neutral')"
+                            class="{{ (tag_attr.class|default('') ~ ' ' ~ tag_extra_classes|default(''))|trim }}"
+                            style="{{ tag_attr.style|default('') }}"
+                        >
                             {{ tag }}
-                        </div>
+                        </twig:ibexa:tag>
                     {% endif %}
                 {% endblock %}
             </h1>

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 %}

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

@@ -1,3 +1,4 @@
+{# TODO IBX-11417: Migrate to <twig:ibexa:chip> when DS chip supports a loading/spinner state (ibexa-tag__spinner / is_loading_state) #}
 {% import '@ibexadesign/ui/component/macros.html.twig' as html %}
 
 {% set is_deletable = is_deletable is defined ? is_deletable : true %}

src/lib/Behat/Page/ContentTypeUpdatePage.php

@@ -1,4 +1,4 @@
 <?php
 
 /**
  * @copyright Copyright (C) Ibexa AS. All rights reserved.
@@ -37,10 +37,10 @@
             'lastFieldDefinition',
             'div.ibexa-collapse__body-content div.ibexa-collapse--field-definition'
         );
-
+        
         $this->getHTMLPage()->setTimeout(10)->waitUntil(function () use ($fieldDefinitionLocator): bool {
             $fieldDefinition = $this->getHTMLPage()->findAll($fieldDefinitionLocator)->last();
-            $fieldDefinition->click();
+            $fieldDefinition->find(new VisibleCSSLocator('collapseButton', 'button.ibexa-collapse__toggle-btn'))->click();
             $this->getHTMLPage()->setTimeout(3)->waitUntilCondition(
                 new ElementNotExistsCondition(
                     $fieldDefinition,