BX-11236: Use design-system button component

.gitignore

@@ -11,3 +11,9 @@ package-lock.json
 composer.lock
 /var
 tsconfig.json
+.button-migration/*.log
+
+# Migration tool runtime state
+.button-migration/
+migrations/*/.migration-state/
+*.migration.log

composer.json

@@ -3,6 +3,12 @@
     "license": "(GPL-2.0-only or proprietary)",
     "type": "project",
     "description": "Ibexa Admin Ui",
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/ibexa/design-system-twig"
+        }
+    ],
     "replace": {
         "ezsystems/ezplatform-admin-ui": "*"
     },
@@ -27,6 +33,8 @@
         "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/polyfill-php82": "^1.0",
         "ibexa/rest": "~6.0.x-dev",
         "ibexa/search": "~6.0.x-dev",
         "ibexa/twig-components": "~6.0.x-dev",

dependencies.json

@@ -0,0 +1,11 @@
+{
+    "recipesEndpoint": "",
+    "packages": [
+        {
+            "requirement": "dev-IBX-11332-link-c as 5.0.x-dev",
+            "repositoryUrl": "https://github.com/ibexa/design-system-twig",
+            "package": "ibexa/design-system-twig",
+            "shouldBeAddedAsVCS": false
+        }
+    ]
+}

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/js/scripts/admin.contenttype.copy.js

@@ -1,5 +1,5 @@
 (function (global, doc, ibexa, Routing) {
-    const copyButtons = doc.querySelectorAll('.ibexa-btn--copy-content-type');
+    const copyButtons = doc.querySelectorAll('.ids-btn--copy-content-type');
     const copyContentType = ({ currentTarget }) => {
         const contentTypeCopyForm = doc.querySelector('form[name="content_type_copy"]');
         const contentTypeIdentifierInput = contentTypeCopyForm.querySelector('#content_type_copy_content_type');

src/bundle/Resources/public/js/scripts/admin.contenttype.relation.default.location.js

@@ -53,7 +53,7 @@ import * as middleEllipsisHelper from '@ibexa-admin-ui/src/bundle/Resources/publ
     };
     const resetStartingLocation = ({ currentTarget }) => {
         const container = currentTarget.closest('.ibexa-default-location');
-        const udwBtn = container.querySelector('.ibexa-btn--udw-relation-default-location');
+        const udwBtn = container.querySelector('.ids-btn--udw-relation-default-location');
         const pathSelector = container.querySelector('.ibexa-default-location__path-selector');
         const { relationRootInputSelector } = udwBtn.dataset;
 
@@ -62,7 +62,7 @@ import * as middleEllipsisHelper from '@ibexa-admin-ui/src/bundle/Resources/publ
         pathSelector.classList.remove('ibexa-default-location__path-selector--filled');
     };
     const attachEvents = (container) => {
-        const udwBtn = container.querySelector('.ibexa-btn--udw-relation-default-location');
+        const udwBtn = container.querySelector('.ids-btn--udw-relation-default-location');
         const deleteBtn = container.querySelector(SELECTOR_RESET_STARTING_LOCATION_BTN);
         const choices = container.querySelectorAll('input[type="radio"]');
 
@@ -71,10 +71,20 @@ import * as middleEllipsisHelper from '@ibexa-admin-ui/src/bundle/Resources/publ
         choices.forEach((choice) => choice.addEventListener('change', toggleDisabledState.bind(null, container), false));
     };
     const toggleDisabledState = (container) => {
-        const locationBtn = container.querySelector('.ibexa-btn--udw-relation-default-location');
+        const locationBtn = container.querySelector('.ids-btn--udw-relation-default-location');
         const deleteBtn = container.querySelector(SELECTOR_RESET_STARTING_LOCATION_BTN);
         const isDisabled = !container.querySelector('input[value="1"]').checked;
 
+        // Toggle disabled attribute for native HTML behavior
+        if (isDisabled) {
+            locationBtn.setAttribute('disabled', true);
+            deleteBtn?.setAttribute('disabled', true);
+        } else {
+            locationBtn.removeAttribute('disabled');
+            deleteBtn?.removeAttribute('disabled');
+        }
+
+        // Keep legacy 'disabled' class for backward compatibility with existing CSS
         locationBtn.classList.toggle('disabled', isDisabled);
         deleteBtn?.classList.toggle('disabled', isDisabled);
     };

src/bundle/Resources/public/js/scripts/admin.context.menu.js

@@ -7,11 +7,13 @@
 
     const menuButtons = [
         ...adaptedItemsContainer.querySelectorAll(
-            '.ibexa-context-menu__item > .ibexa-btn:not(.ibexa-btn--more), .ibexa-context-menu__item > .ibexa-split-btn',
+            '.ibexa-context-menu__item > .ibexa-btn:not(.ibexa-btn--more), .ibexa-context-menu__item > .ids-btn:not(.ibexa-btn--more), .ibexa-context-menu__item > .ibexa-split-btn',
         ),
     ];
     const popupMenuElement = adaptedItemsContainer.querySelector('.ibexa-context-menu__item--more .ibexa-multilevel-popup-menu');
     const showPopupButton = adaptedItemsContainer.querySelector('.ibexa-btn--more');
+    const getButtonLabel = (button) => button.querySelector('.ids-btn__label, .ibexa-btn__label')?.textContent ?? '';
+    const getItemButton = (item) => item.querySelector('.ids-btn, .ibexa-btn');
 
     if (!showPopupButton) {
         return;
@@ -24,7 +26,7 @@
             return adaptedItemsContainer.querySelector('.ibexa-context-menu__item');
         },
         onAdapted: (visibleItems, hiddenItems) => {
-            const hiddenButtonsIds = [...hiddenItems].map((item) => item.querySelector('.ibexa-btn').id);
+            const hiddenButtonsIds = [...hiddenItems].map((item) => getItemButton(item)?.id).filter(Boolean);
             const topBranchItems = multilevelPopupMenu.getBranchItems(topBranch);
 
             topBranchItems.forEach((branchItem) => {
@@ -51,7 +53,7 @@
             const mainBtn = menuButton.querySelector('.ibexa-split-btn__main-btn');
             const splitBtn = menuButton.querySelector('.ibexa-split-btn__toggle-btn');
             const relatedMainBtnId = mainBtn.id;
-            const mainBtnLabel = mainBtn.querySelector('.ibexa-btn__label').textContent;
+            const mainBtnLabel = getButtonLabel(mainBtn);
             const {
                 alternativeMainBtnLabel: mainBtnAlternativeLabel,
                 alternativeMainBtnSublabel: mainBtnAlternativeSublabel,
@@ -60,7 +62,7 @@
             const subitemsBtns = [...splitBtn.branchElement.querySelectorAll('.ibexa-popup-menu__item-content')];
 
             const subitems = subitemsBtns.map((subitemBtn) => {
-                const subitemLabel = subitemBtn.querySelector('.ibexa-btn__label').textContent;
+                const subitemLabel = getButtonLabel(subitemBtn);
                 const relatedSubitemBtnId = subitemBtn.id;
 
                 return {
@@ -108,7 +110,7 @@
         }
 
         const relatedBtnId = menuButton.id;
-        const label = menuButton.querySelector('.ibexa-btn__label').textContent;
+        const label = getButtonLabel(menuButton);
 
         return {
             label,

src/bundle/Resources/public/js/scripts/admin.limitation.pick.js

@@ -176,7 +176,7 @@
         udwRoot = ReactDOMClient.createRoot(udwContainer);
         udwRoot.render(
             React.createElement(ibexa.modules.UniversalDiscovery, {
-                onConfirm: handleUdwConfirm.bind(this, event.target),
+                onConfirm: handleUdwConfirm.bind(this, event.currentTarget),
                 onCancel: closeUDW,
                 title,
                 multiple: true,

src/bundle/Resources/public/js/scripts/admin.location.add.translation.js

@@ -9,7 +9,7 @@
         if (!modal) {
             return;
         }
-        const buttonCreate = modal.querySelector('.ibexa-btn--create-translation');
+        const buttonCreate = modal.querySelector('.ids-btn--create-translation');
         if (!buttonCreate) {
             return;
         }

src/bundle/Resources/public/js/scripts/admin.location.view.js

@@ -29,15 +29,15 @@ import { checkIsContainer } from './helpers/content.type.helper';
             bootstrap.Modal.getOrCreateInstance(doc.querySelector('#version-draft-conflict-modal')).hide();
         };
         const attachModalListeners = (wrapper) => {
-            const addDraftButton = wrapper.querySelector('.ibexa-btn--add-draft');
+            const addDraftButton = wrapper.querySelector('.ids-btn--add-draft');
             const conflictModal = doc.querySelector('#version-draft-conflict-modal');
 
             if (addDraftButton) {
                 addDraftButton.addEventListener('click', addDraft, false);
             }
 
             wrapper
-                .querySelectorAll('.ibexa-btn--prevented')
+                .querySelectorAll('.ids-btn--prevented')
                 .forEach((btn) => btn.addEventListener('click', (event) => event.preventDefault(), false));
 
             if (conflictModal) {

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

@@ -1,8 +1,8 @@
 (function (global, doc) {
     const searchForm = doc.querySelector('.ibexa-list-search-form');
     const filtersContainerNode = doc.querySelector('.ibexa-list-filters');
-    const applyFiltersBtn = filtersContainerNode.querySelector('.ibexa-btn--apply');
-    const clearFiltersBtn = filtersContainerNode.querySelector('.ibexa-btn--clear');
+    const applyFiltersBtn = filtersContainerNode.querySelector('.ids-btn--apply');
+    const clearFiltersBtn = filtersContainerNode.querySelector('.ids-btn--clear');
     const statusFilterNode = filtersContainerNode.querySelector('.ibexa-list-filters__item--statuses');
     const typeFilterNode = filtersContainerNode.querySelector('.ibexa-list-filters__item--type');
     const datetimeFilterNodes = filtersContainerNode.querySelectorAll('.ibexa-list-filters__item--date-time .ibexa-picker');

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

@@ -7,8 +7,8 @@
     const token = doc.querySelector('meta[name="CSRF-Token"]').content;
     const siteaccess = doc.querySelector('meta[name="SiteAccess"]').content;
     const filters = doc.querySelector('.ibexa-filters');
-    const clearBtn = filters.querySelector('.ibexa-btn--clear');
-    const applyBtn = filters.querySelector('.ibexa-btn--apply');
+    const clearBtn = filters.querySelector('.ids-btn--clear');
+    const applyBtn = filters.querySelector('.ids-btn--apply');
     const contentTypeSelect = doc.querySelector('.ibexa-filters__item--content-type .ibexa-filters__select');
     const sectionSelect = doc.querySelector('.ibexa-filters__item--section .ibexa-filters__select');
     const lastModifiedSelectNode = doc.querySelector('.ibexa-filters__item--modified .ibexa-filters__select');
@@ -108,6 +108,7 @@
         const methodName = isEnabled ? 'removeAttribute' : 'setAttribute';
 
         applyBtn[methodName]('disabled', !isEnabled);
+        // ids-btn--disabled class no longer needed - native [disabled] attribute handles styling
     };
     const toggleDatesSelectVisibility = (event, select, dateRange) => {
         const datesRangeNode = doc.querySelector(event.target.dataset.targetSelector);

src/bundle/Resources/public/js/scripts/admin.section.list.js

@@ -1,5 +1,5 @@
 (function (global, doc, ibexa, React, ReactDOMClient) {
-    const btns = doc.querySelectorAll('.ibexa-btn--open-udw');
+    const btns = doc.querySelectorAll('.ids-btn--open-udw');
     const udwContainer = doc.getElementById('react-udw');
     let udwRoot = null;
     const closeUDW = () => udwRoot.unmount();

src/bundle/Resources/public/js/scripts/admin.section.view.js

@@ -1,5 +1,5 @@
 (function (global, doc, ibexa, React, ReactDOMClient) {
-    const btns = doc.querySelectorAll('.ibexa-btn--open-udw');
+    const btns = doc.querySelectorAll('.ids-btn--open-udw, .ids-btn--open-udw');
     const udwContainer = doc.getElementById('react-udw');
     let udwRoot = null;
     const closeUDW = () => udwRoot.unmount();

src/bundle/Resources/public/js/scripts/admin.trash.js

@@ -16,7 +16,7 @@
         const { numberOfSubitems } = event.detail;
         const sendToTrashModal = document.querySelector('.ibexa-modal--trash-location');
         const modalBody = sendToTrashModal.querySelector('.modal-body');
-        const modalSendToTrashButton = sendToTrashModal.querySelector('.modal-footer .ibexa-btn--confirm-send-to-trash');
+        const modalSendToTrashButton = sendToTrashModal.querySelector('.modal-footer .ids-btn--confirm-send-to-trash');
         const { contentName } = sendToTrashModal.dataset;
 
         if (numberOfSubitems) {

src/bundle/Resources/public/js/scripts/admin.trash.list.js

@@ -17,10 +17,10 @@
     const sortDirection = doc.querySelector('#trash_search_sort_direction');
     const creatorInput = doc.querySelector('.ibexa-trash-search-form__item--creator .ibexa-trash-search-form__input');
     const usersList = doc.querySelector('.ibexa-trash-search-form__item--creator .ibexa-trash-search-form__user-list');
-    const resetCreatorBtn = doc.querySelector('.ibexa-btn--reset-creator');
+    const resetCreatorBtn = doc.querySelector('.ids-btn--reset-creator');
     const searchCreatorInput = doc.querySelector('#trash_search_creator');
     const sortableColumns = doc.querySelectorAll('.ibexa-table__sort-column');
-    const btns = doc.querySelectorAll('.ibexa-btn--open-udw');
+    const btns = doc.querySelectorAll('.ids-btn--open-udw, .ids-btn--open-udw');
     const udwContainer = doc.getElementById('react-udw');
     const autoSendNodes = doc.querySelectorAll('.ibexa-trash-search-form__item--auto-send');
     const errorMessage = Translator.trans(/* @Desc("Cannot fetch user list") */ 'trash.user_list.error', {}, 'ibexa_trash_ui');

src/bundle/Resources/public/js/scripts/admin.version.edit.conflict.js

@@ -41,5 +41,5 @@
             .catch(showErrorNotification);
     };
 
-    doc.querySelectorAll('.ibexa-btn--content-draft-edit').forEach((button) => button.addEventListener('click', editVersion, false));
+    doc.querySelectorAll('.ids-btn--content-draft-edit').forEach((button) => button.addEventListener('click', editVersion, false));
 })(window, window.document, window.bootstrap, window.ibexa, window.Translator, window.Routing);

src/bundle/Resources/public/js/scripts/button.content.edit.js

@@ -35,14 +35,14 @@
             wrapper.innerHTML = modalHtml;
 
             const conflictModal = doc.querySelector('#version-draft-conflict-modal');
-            const addDraftButton = wrapper.querySelector('.ibexa-btn--add-draft');
+            const addDraftButton = wrapper.querySelector('.ids-btn--add-draft');
 
             if (addDraftButton) {
                 addDraftButton.addEventListener('click', addDraft, false);
             }
 
             wrapper
-                .querySelectorAll('.ibexa-btn--prevented')
+                .querySelectorAll('.ids-btn--prevented')
                 .forEach((btn) => btn.addEventListener('click', (wrapperBtnEvent) => wrapperBtnEvent.preventDefault(), false));
 
             bootstrap.Modal.getOrCreateInstance(conflictModal).show();
@@ -80,5 +80,5 @@
             .catch(showErrorNotification);
     };
 
-    doc.querySelectorAll('.ibexa-btn--content-edit').forEach((button) => button.addEventListener('click', editVersion, false));
+    doc.querySelectorAll('.ids-btn--content-edit').forEach((button) => button.addEventListener('click', editVersion, false));
 })(window, window.document, window.bootstrap, window.ibexa, window.Translator, window.Routing);

src/bundle/Resources/public/js/scripts/button.prevent.default.js

@@ -1,3 +1,3 @@
 (function (global, doc) {
-    doc.querySelectorAll('.ibexa-btn--prevented').forEach((btn) => btn.addEventListener('click', (event) => event.preventDefault(), false));
+    doc.querySelectorAll('.ids-btn--prevented').forEach((btn) => btn.addEventListener('click', (event) => event.preventDefault(), false));
 })(window, window.document);

src/bundle/Resources/public/js/scripts/button.translation.edit.js

@@ -2,11 +2,11 @@
     class EditTranslation {
         constructor(config) {
             this.container = config.container;
-            this.toggler = config.container.querySelector('.ibexa-btn--translations-list-toggler');
+            this.toggler = config.container.querySelector('.ids-btn--translations-list-toggler');
             this.extraActionsContainer = config.container.querySelector('.ibexa-extra-actions');
             this.closeBtn = config.container.querySelector('.ibexa-extra-actions__close-btn');
             this.confirmBtn = config.container.querySelector('.ibexa-extra-actions__confirm-btn');
-            this.languagesBtns = config.container.querySelectorAll('.ibexa-btn--select-language');
+            this.languagesBtns = config.container.querySelectorAll('.ids-btn--select-language');
             this.backdrop = config.backdrop;
 
             this.tableNode = null;
@@ -64,16 +64,16 @@
             this.confirmBtn.dataset.languageCode = languageCode;
             this.confirmBtn.disabled = false;
 
-            this.languagesBtns.forEach((btn) => btn.classList.remove('ibexa-btn--active'));
-            event.currentTarget.classList.add('ibexa-btn--active');
+            this.languagesBtns.forEach((btn) => btn.classList.remove('ids-btn--active'));
+            event.currentTarget.classList.add('ids-btn--active');
         }
 
         resetLanguageSelector() {
             this.confirmBtn.dataset.contentId = null;
             this.confirmBtn.dataset.languageCode = null;
             this.confirmBtn.disabled = true;
 
-            this.languagesBtns.forEach((btn) => btn.classList.remove('ibexa-btn--active'));
+            this.languagesBtns.forEach((btn) => btn.classList.remove('ids-btn--active'));
         }
 
         init() {

src/bundle/Resources/public/js/scripts/button.trigger.js

@@ -2,7 +2,7 @@
     doc.addEventListener(
         'DOMContentLoaded',
         () => {
-            const buttons = doc.querySelectorAll('.ibexa-btn--trigger');
+            const buttons = doc.querySelectorAll('.ids-btn--trigger');
             const trigger = (event) => {
                 event.preventDefault();
 

src/bundle/Resources/public/js/scripts/cotf/create.js

@@ -1,5 +1,5 @@
 (function (global, doc, ibexa, React, ReactDOMClient, Translator, Routing) {
-    const btns = doc.querySelectorAll('.ibexa-btn--cotf-create');
+    const btns = doc.querySelectorAll('.ids-btn--cotf-create');
     const udwContainer = doc.getElementById('react-udw');
     let udwRoot = null;
     const closeUDW = () => udwRoot.unmount();