IBX-11506: Use design-system checkbox/radio/toggle components

features/standard/UserCreation.feature

@@ -37,8 +37,8 @@ Feature: User management
       | First name  | testuseredited |
       | Last name   | lastnameedited |
     And I set content fields for user
-      | label         | Username  | Password    | Confirm password  | Email          |
-      | User account  | testuser  | Test123456  | Test123456        | test@test.org  |
+      | label         | Username  | Password    | Confirm password  | Email          | Enabled |
+      | User account  | testuser  | Test123456  | Test123456        | test@test.org  | Yes     | 
     And I perform the "Update" action
     Then I should be on Content view Page for "Users/testuseredited lastnameedited"
     And content attributes equal

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',

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

@@ -49,6 +49,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.focus.mode.js'),
     path.resolve(__dirname, '../public/js/scripts/sidebar/main.menu.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
+    path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
     path.resolve(__dirname, '../public/js/scripts/admin.table.js'),
     path.resolve(__dirname, '../public/js/scripts/core/collapse.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.dropdown.js'),

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

@@ -1,4 +1,5 @@
 (function (global, doc) {
+    const SELECTOR_FILTER_CHECKBOX = '.ids-input--checkbox:not([name="dropdown-checkbox"])';
     const searchForm = doc.querySelector('.ibexa-list-search-form');
     const filtersContainerNode = doc.querySelector('.ibexa-list-filters');
     const applyFiltersBtn = filtersContainerNode.querySelector('.ibexa-btn--apply');
@@ -13,9 +14,7 @@
         }
 
         const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select');
-        const checkboxes = filterNode.querySelectorAll(
-            '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])',
-        );
+        const checkboxes = filterNode.querySelectorAll(`.ibexa-list-filters__item-content ${SELECTOR_FILTER_CHECKBOX}`);
         const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input');
 
         if (sourceSelect) {
@@ -45,9 +44,7 @@
             return;
         }
 
-        const checkboxes = filterNode.querySelectorAll(
-            '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])',
-        );
+        const checkboxes = filterNode.querySelectorAll(`.ibexa-list-filters__item-content ${SELECTOR_FILTER_CHECKBOX}`);
         checkboxes.forEach((checkbox) => {
             checkbox.addEventListener('change', filterChange, false);
         });
@@ -80,7 +77,7 @@
         }
 
         const select = filterNode.querySelector('.ibexa-dropdown__source .ibexa-input--select');
-        const checkedCheckboxes = filterNode.querySelectorAll('.ibexa-input--checkbox:checked');
+        const checkedCheckboxes = filterNode.querySelectorAll(`${SELECTOR_FILTER_CHECKBOX}:checked`);
 
         if (isNodeDatePicker(filterNode)) {
             const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input');

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

@@ -1,6 +1,7 @@
 import { isFirefox } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/browser.helper.js';
 
 (function (global, doc, ibexa, Translator, Routing) {
+    const SELECTOR_NOTIFICATION_CHECKBOX = '.ibexa-notification-list__mark-row-checkbox';
     const SELECTOR_MODAL_ITEM = '.ibexa-notifications-modal__item';
     const SELECTOR_GO_TO_NOTIFICATION = '.ibexa-notification-view-all__show';
     const SELECTOR_TOGGLE_NOTIFICATION = '.ibexa-notification-view-all__mail';
@@ -10,7 +11,7 @@ import { isFirefox } from '@ibexa-admin-ui/src/bundle/Resources/public/js/script
     const markAsReadBtn = doc.querySelector('.ibexa-notification-list__btn-mark-as-read');
     const deleteBtn = doc.querySelector('.ibexa-notification-list__btn-delete');
     const notificationsCheckboxes = [
-        ...doc.querySelectorAll('.ibexa-notification-list .ibexa-table__cell--has-checkbox .ibexa-input--checkbox'),
+        ...doc.querySelectorAll(`.ibexa-notification-list .ibexa-table__cell--has-checkbox ${SELECTOR_NOTIFICATION_CHECKBOX}`),
     ];
     const notificationsTable = doc.querySelector('.ibexa-table--notifications');
     const uncheckCheckboxesEvent = new CustomEvent('ibexa-uncheck-checkboxes', {

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

@@ -1,4 +1,5 @@
 (function (global, doc) {
+    const SELECTOR_TABLE_CHECKBOX = '.ids-input--checkbox';
     const ibexaTables = doc.querySelectorAll('.ibexa-table');
     const setMainCheckboxState = (mainCheckbox, subCheckboxes, event) => {
         const isFromJS = event?.detail?.isFromJS ?? false;
@@ -61,9 +62,9 @@
             }
 
             const mainCheckboxIndex = [...headCells].indexOf(headCellWithCheckbox);
-            const mainCheckbox = headCellWithCheckbox.querySelector('.ibexa-input--checkbox');
+            const mainCheckbox = headCellWithCheckbox.querySelector(SELECTOR_TABLE_CHECKBOX);
             const subCheckboxes = tableBody.querySelectorAll(
-                `.ibexa-table__cell--has-checkbox:nth-child(${mainCheckboxIndex + 1}) .ibexa-input--checkbox`,
+                `.ibexa-table__cell--has-checkbox:nth-child(${mainCheckboxIndex + 1}) ${SELECTOR_TABLE_CHECKBOX}`,
             );
 
             if (!mainCheckbox) {
@@ -138,7 +139,7 @@
 
     const uncheckCheckboxes = (table) => {
         const mainCheckbox = table.querySelector('.ibexa-table__header-cell-checkbox');
-        const subCheckboxes = [...table.querySelectorAll('.ibexa-table__cell--has-checkbox .ibexa-input--checkbox')];
+        const subCheckboxes = [...table.querySelectorAll(`.ibexa-table__cell--has-checkbox ${SELECTOR_TABLE_CHECKBOX}`)];
 
         mainCheckbox.checked = false;
         mainCheckbox.indeterminate = false;

src/bundle/Resources/public/js/scripts/button.state.toggle.js

@@ -1,8 +1,9 @@
 (function (global, doc) {
+    const SELECTOR_TABLE_CHECKBOX = '.ids-input--checkbox';
     const toggleForms = doc.querySelectorAll('.ibexa-toggle-btn-state');
 
     toggleForms.forEach((toggleForm) => {
-        const checkboxes = [...toggleForm.querySelectorAll('.ibexa-table__cell--has-checkbox .ibexa-input--checkbox')];
+        const checkboxes = [...toggleForm.querySelectorAll(`.ibexa-table__cell--has-checkbox ${SELECTOR_TABLE_CHECKBOX}`)];
         const buttonRemove = doc.querySelector(toggleForm.dataset.toggleButtonId);
 
         if (!buttonRemove) {

src/bundle/Resources/public/js/scripts/core/dropdown.js

@@ -152,7 +152,7 @@
 
             this.sourceInput.querySelectorAll('option').forEach((option) => (option.selected = false));
             this.itemsListContainer.querySelectorAll('.ibexa-dropdown__item--selected').forEach((option) => {
-                const checkbox = option.querySelector('.ibexa-input--checkbox');
+                const checkbox = option.querySelector('.ibexa-dropdown__item-checkbox');
 
                 option.classList.remove('ibexa-dropdown__item--selected');
 
@@ -211,7 +211,11 @@
             const value = this.getValueFromElement(element);
 
             if (value && !this.canSelectOnlyOne) {
-                element.querySelector('.ibexa-input').checked = selected;
+                const checkbox = element.querySelector('.ibexa-dropdown__item-checkbox');
+
+                if (checkbox) {
+                    checkbox.checked = selected;
+                }
             }
 
             this.itemsListContainer.querySelector(`[data-value=${value}]`).classList.toggle('ibexa-dropdown__item--selected', selected);
@@ -314,7 +318,11 @@
             itemSelected.classList.remove('ibexa-dropdown__item--selected');
 
             if (!this.canSelectOnlyOne) {
-                itemSelected.querySelector('.ibexa-input').checked = false;
+                const checkbox = itemSelected.querySelector('.ibexa-dropdown__item-checkbox');
+
+                if (checkbox) {
+                    checkbox.checked = false;
+                }
             }
 
             if (optionSelect) {

src/bundle/Resources/public/js/scripts/core/toggle.button.js

@@ -4,7 +4,10 @@
     class ToggleButton {
         constructor(config) {
             this.toggleNode = config.toggleNode;
-            this.inputsSelector = config?.inputsSelector || 'input';
+            this.inputsSelector = config?.inputsSelector || (this.toggleNode.classList.contains('ids-toggle') ? '.ids-toggle__source input' : 'input');
+            this.checkedClass = this.toggleNode.classList.contains('ids-toggle') ? 'ids-toggle--checked' : 'ibexa-toggle--is-checked';
+            this.disabledClass = this.toggleNode.classList.contains('ids-toggle') ? 'ids-toggle--disabled' : 'ibexa-toggle--is-disabled';
+            this.focusedClass = this.toggleNode.classList.contains('ids-toggle') ? 'ids-toggle--focused' : 'ibexa-toggle--is-focused';
 
             this.toggleState = this.toggleState.bind(this);
             this.addFocus = this.addFocus.bind(this);
@@ -18,18 +21,18 @@
 
             const toggler = event.currentTarget;
 
-            if (toggler.classList.contains('ibexa-toggle--is-disabled')) {
+            if (toggler.classList.contains(this.disabledClass)) {
                 return;
             }
 
-            const isChecked = toggler.classList.toggle('ibexa-toggle--is-checked');
+            const isChecked = toggler.classList.toggle(this.checkedClass);
 
             if (toggler.classList.contains('ibexa-toggle--radio')) {
                 const valueToSet = isChecked ? 1 : 0;
 
                 toggler.querySelector(`.form-check input[value="${valueToSet}"]`).checked = true;
             } else {
-                const toggleInput = toggler.querySelector('.ibexa-toggle__input');
+                const toggleInput = toggler.querySelector(this.inputsSelector);
 
                 toggleInput.checked = isChecked;
                 toggleInput.dispatchEvent(new Event('change'));
@@ -39,25 +42,25 @@
         addFocus(event) {
             event.preventDefault();
 
-            const toggler = event.currentTarget.closest('.ibexa-toggle');
+            const toggler = event.currentTarget.closest('.ibexa-toggle, .ids-toggle');
 
-            if (toggler.classList.contains('ibexa-toggle--is-disabled')) {
+            if (toggler.classList.contains(this.disabledClass)) {
                 return;
             }
 
-            toggler.classList.add('ibexa-toggle--is-focused');
+            toggler.classList.add(this.focusedClass);
         }
 
         removeFocus(event) {
             event.preventDefault();
 
-            const toggler = event.currentTarget.closest('.ibexa-toggle');
+            const toggler = event.currentTarget.closest('.ibexa-toggle, .ids-toggle');
 
-            if (toggler.classList.contains('ibexa-toggle--is-disabled')) {
+            if (toggler.classList.contains(this.disabledClass)) {
                 return;
             }
 
-            toggler.classList.remove('ibexa-toggle--is-focused');
+            toggler.classList.remove(this.focusedClass);
         }
 
         toggleStateOnSpacePressed(event) {

src/bundle/Resources/public/js/scripts/fieldType/ibexa_author.js

@@ -1,6 +1,7 @@
 (function (global, doc, ibexa) {
     const SELECTOR_REMOVE_AUTHOR = '.ibexa-btn--remove-author';
     const SELECTOR_AUTHOR = '.ibexa-data-source__author';
+    const SELECTOR_AUTHOR_CHECKBOX = '.ibexa-data-source__author-checkbox';
     const SELECTOR_FIELD = '.ibexa-field-edit--ibexa_author';
     const SELECTOR_LABEL = '.ibexa-data-source__label';
     const SELECTOR_FIELD_EMAIL = '.ibexa-data-source__field--email';
@@ -104,7 +105,7 @@
 
         toggleBulkDeleteButtonState(event) {
             const container = event.target.closest(SELECTOR_FIELD);
-            const checkboxes = container.querySelectorAll('.ibexa-input--checkbox');
+            const checkboxes = container.querySelectorAll(SELECTOR_AUTHOR_CHECKBOX);
             const isAnyCheckboxSelected = [...checkboxes].some((checkbox) => checkbox.checked);
             const bulkDeleteButton = container.querySelector('.ibexa-btn--bulk-remove-author');
 
@@ -113,7 +114,7 @@
 
         removeSelectedItems(event) {
             const container = event.target.closest(SELECTOR_FIELD);
-            const selectedCheckboxes = container.querySelectorAll('.ibexa-input--checkbox:checked');
+            const selectedCheckboxes = container.querySelectorAll(`${SELECTOR_AUTHOR_CHECKBOX}:checked`);
             const bulkDeleteButton = container.querySelector('.ibexa-btn--bulk-remove-author');
 
             selectedCheckboxes.forEach((checkbox) => checkbox.closest(SELECTOR_AUTHOR).remove());
@@ -246,7 +247,7 @@
             },
             {
                 isValueValidator: false,
-                selector: '.ibexa-data-source__author .ibexa-input--checkbox',
+                selector: `.ibexa-data-source__author ${SELECTOR_AUTHOR_CHECKBOX}`,
                 eventName: 'change',
                 callback: 'toggleBulkDeleteButtonState',
             },

src/bundle/Resources/public/js/scripts/sidebar/btn/content.edit.js

@@ -3,7 +3,7 @@
 
     editButtons.forEach((editButton) => {
         const languageRadioOption = doc.querySelector(
-            `.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show[data-actions="${editButton.dataset.actions}"] .ibexa-input--radio`,
+            `.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show[data-actions="${editButton.dataset.actions}"] .ids-input--radio`,
         );
 
         if (!languageRadioOption) {

src/bundle/Resources/public/js/scripts/sidebar/btn/contenttype.edit.js

@@ -1,6 +1,6 @@
 (function (global, doc) {
     const editButton = doc.querySelector('.ibexa-btn--edit');
-    const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show .ibexa-input--radio');
+    const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show .ids-input--radio');
     const editActions = doc.querySelector('.ibexa-extra-actions--edit');
     const btns = editActions.querySelectorAll('.form-check [type="radio"]');
     const changeHandler = () => {

src/bundle/Resources/public/js/scripts/sidebar/btn/user.edit.js

@@ -1,6 +1,6 @@
 (function (global, doc) {
     const editButton = doc.querySelector('.ibexa-btn--edit-user');
-    const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit-user.ibexa-extra-actions--prevent-show .ibexa-input--radio');
+    const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit-user.ibexa-extra-actions--prevent-show .ids-input--radio');
     const editActions = doc.querySelector('.ibexa-extra-actions--edit-user');
 
     if (!editActions || !languageRadioOption) {

src/bundle/Resources/public/scss/_custom-url-form.scss

@@ -25,13 +25,13 @@
         &--checked {
             display: none;
 
-            .ibexa-toggle--is-checked + & {
+            .ids-toggle--checked + & {
                 display: block;
             }
         }
 
         &--unchecked {
-            .ibexa-toggle--is-checked + .ibexa-custom-url-from__info-text--checked + & {
+            .ids-toggle--checked + .ibexa-custom-url-from__info-text--checked + & {
                 display: none;
             }
         }

src/bundle/Resources/public/scss/_dropdown.scss

@@ -281,7 +281,7 @@
             }
         }
 
-        .ibexa-input {
+        .ibexa-dropdown__item-checkbox {
             flex-shrink: 0;
             margin: 0 calculateRem(16px) 0 0;
         }

src/bundle/Resources/public/scss/_grid-view-item.scss

@@ -28,8 +28,8 @@
         border-color: $ibexa-color-dark;
         text-decoration: none;
 
-        .ibexa-input--checkbox,
-        .ibexa-input--radio {
+        .ids-input--checkbox,
+        .ids-input--radio {
             border-color: $ibexa-color-primary;
         }
     }
@@ -179,9 +179,16 @@
         top: calculateRem(10px);
         display: none;
 
-        .ibexa-input {
+        .ibexa-input,
+        .ids-input {
             background-color: $ibexa-color-white;
         }
+
+        &--hovered {
+            .ids-input {
+                border-color: $ibexa-color-primary;
+            }
+        }
     }
 
     &:hover {

src/bundle/Resources/public/scss/_inputs.scss

@@ -528,3 +528,15 @@
         }
     }
 }
+
+.form-check-input:checked {
+  background-color: $ibexa-color-white;
+}
+
+.form-check-input:checked[type=checkbox] {
+  --bs-form-check-bg-image: none;
+}
+
+.form-check-input[type=checkbox] {
+    border-radius: calculateRem(2px);
+}

src/bundle/Resources/public/scss/_tables.scss

@@ -40,8 +40,8 @@
                     border-color: $ibexa-color-primary;
                 }
 
-                .ibexa-input--checkbox,
-                .ibexa-input--radio {
+                .ids-input--checkbox,
+                .ids-input--radio {
                     border-color: $ibexa-color-primary;
                 }
             }
@@ -149,7 +149,7 @@
     }
 
     &__header-cell-checkbox {
-        &.ibexa-input--checkbox {
+        &.ids-input--checkbox {
             margin-bottom: 0;
         }
     }
@@ -186,7 +186,7 @@
         &--has-checkbox {
             width: calculateRem(48px);
 
-            .ibexa-input--checkbox {
+            .ids-input--checkbox {
                 float: left;
                 margin-bottom: 0;
             }
@@ -212,12 +212,12 @@
         &--content-center {
             text-align: center;
 
-            .ibexa-input--checkbox {
+            .ids-input--checkbox {
                 margin-bottom: 0;
             }
         }
 
-        .ibexa-input--radio {
+        .ids-input--radio {
             vertical-align: middle;
         }
     }