Skip to content

IBX-11236: Use design-system button component #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dew326 merged 7 commits into from
Jun 10, 2026
Merged

IBX-11236: Use design-system button component #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b4a2d37
fix: Rename ibexa-btn--* to ids-button--* in matrix JS files
tischsoic Feb 25, 2026
329c98e
fix: Migrate buttons in matrix_fieldtype/content_edit_form_fields.htm…
tischsoic Feb 25, 2026
2c795fb
fix: Migrate buttons in matrix_fieldtype/field_types.html.twig
tischsoic Feb 25, 2026
11063ea
fix: Replace 'create' icon with 'add' icon in matrix add-row DS button
tischsoic Mar 8, 2026
cf4e7d1
fix: use DS add icon alias in matrix buttons
tischsoic Mar 23, 2026
7f9db17
fix: finish fieldtype matrix DS button migration
tischsoic Apr 22, 2026
1857a71
style: remove redundant Twig button html_type attrs
tischsoic May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/bundle/Resources/public/js/scripts/admin.contenttype.matrix.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
const SELECTOR_COLUMN = '.ibexa-matrix-settings__column';
const SELECTOR_COLUMNS_CONTAINER = '.ibexa-table__body';
const SELECTOR_COLUMN_CHECKBOX = '.ibexa-matrix-settings__column-checkbox';
const SELECTOR_ADD_COLUMN = '.ibexa-btn--add-column';
const SELECTOR_REMOVE_COLUMN = '.ibexa-btn--remove-column';
const SELECTOR_ADD_COLUMN = '.ids-btn--add-column';
const SELECTOR_REMOVE_COLUMN = '.ids-btn--remove-column';
const SELECTOR_TEMPLATE = '.ibexa-matrix-settings__column-template';
const ERROR_NODE_SELECTOR = '.ibexa-form-error';
const NUMBER_PLACEHOLDER = /__number__/g;
Expand Down
6 changes: 3 additions & 3 deletions src/bundle/Resources/public/js/scripts/fieldType/ibexa_matrix.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(function (global, doc, ibexa) {
const SELECTOR_REMOVE_MATRIX_BULK = '.ibexa-btn--bulk-remove-matrix';
const SELECTOR_REMOVE_MATRIX_ENTRY = '.ibexa-btn--remove-matrix-entry';
const SELECTOR_ADD_MATRIX_ENTRY = '.ibexa-btn--add-matrix-entry';
const SELECTOR_REMOVE_MATRIX_BULK = '.ids-btn--bulk-remove-matrix';
const SELECTOR_REMOVE_MATRIX_ENTRY = '.ids-btn--remove-matrix-entry';
const SELECTOR_ADD_MATRIX_ENTRY = '.ids-btn--add-matrix-entry';
const SELECTOR_MATRIX_ENTRIES_CONTAINER = '.ibexa-table__body';
const SELECTOR_MATRIX_ENTRY_TEMPLATE = '.ibexa-data-source__entry-template';
const SELECTOR_MATRIX_ENTRY_CHECKBOX = '.ibexa-table__ibexa_matrix-entry-checkbox';
Expand Down
2 changes: 1 addition & 1 deletion src/bundle/Resources/public/scss/fieldType/_ibexa_matrix.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}

.ibexa-table__cell {
.ibexa-btn--remove-matrix-entry {
.ids-btn--remove-matrix-entry {
padding: calculateRem(4px);
}
}
Expand Down
53 changes: 26 additions & 27 deletions src/bundle/Resources/views/themes/admin/matrix_fieldtype/content_edit_form_fields.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,26 +32,26 @@
{% trans_default_domain 'ibexa_matrix_fieldtype' %}

{% block actions %}
<button
type="button"
class="btn ibexa-btn ibexa-btn--secondary ibexa-btn--small ibexa-btn--add-matrix-entry"
{{ readonly ? 'disabled' }}
<twig:ibexa:button
type="secondary"
size="small"
icon="add"
icon_size="small-medium"
:disabled="readonly"
class="ids-btn--add-matrix-entry"
>
<svg class="ibexa-icon ibexa-icon--small-medium ibexa-icon--edit">
<use xlink:href="{{ ibexa_icon_path('create') }}"></use>
</svg>
<span class="ibexa-btn__label">{{ 'ibexa_matrix.add'|trans|desc('Add') }}</span>
</button>
<button
type="button"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-btn--bulk-remove-matrix"
{{ readonly ? 'disabled' }}
{{ 'ibexa_matrix.add'|trans|desc('Add') }}
</twig:ibexa:button>
<twig:ibexa:button
type="tertiary-alt"
size="small"
icon="trash"
icon_size="small-medium"
:disabled="readonly"
class="ids-btn--bulk-remove-matrix"
>
<svg class="ibexa-icon ibexa-icon--small-medium ibexa-icon--edit">
<use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
</svg>
<span class="ibexa-btn__label">{{ 'ibexa_matrix.remove'|trans|desc('Delete') }}</span>
</button>
{{ 'ibexa_matrix.remove'|trans|desc('Delete') }}
</twig:ibexa:button>
{% endblock %}
{% endembed %}
{% endblock %}
Expand All @@ -72,15 +72,14 @@
{% endset %}

{% set col_actions %}
<button
type="button"
class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-btn--remove-matrix-entry"
{{ readonly ? 'disabled' }}
>
<svg class="ibexa-icon ibexa-icon--small-medium ibexa-icon--edit">
<use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
</svg>
</button>
<twig:ibexa:button
type="tertiary-alt"
icon="trash"
icon_size="small-medium"
:disabled="readonly"
title="{{ 'ibexa_matrix.remove_entry'|trans|desc('Remove') }}"
class="ids-btn--remove-matrix-entry"
/>
{% endset %}

{% set body_row_cols = [{ has_checkbox: true, content: col_checkbox }] %}
Expand Down
34 changes: 18 additions & 16 deletions src/bundle/Resources/views/themes/admin/matrix_fieldtype/field_types.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,22 +73,24 @@
{% embed '@ibexadesign/ui/component/table/table_header.html.twig' %}
{% trans_default_domain 'ibexa_matrix_fieldtype' %}
{% block actions %}
<button type="button" class="btn ibexa-btn ibexa-btn--tertiary ibexa-btn--small ibexa-btn--add-column">
<svg class="ibexa-icon ibexa-icon--small-medium ibexa-icon--create">
<use xlink:href="{{ ibexa_icon_path('create') }}"></use>
</svg>
<span class="ibexa-btn__label">
{{ 'field.column.add_new'|trans|desc('Add') }}
</span>
</button>
<button type="button" class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-btn--remove-column">
<svg class="ibexa-icon ibexa-icon--small-medium ibexa-icon--trash">
<use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
</svg>
<span class="ibexa-btn__label">
{{ 'field.column.delete'|trans|desc('Delete') }}
</span>
</button>
<twig:ibexa:button
type="tertiary"
size="small"
icon="add"
icon_size="small-medium"
class="ids-btn--add-column"
>
{{ 'field.column.add_new'|trans|desc('Add') }}
</twig:ibexa:button>
<twig:ibexa:button
type="tertiary-alt"
size="small"
icon="trash"
icon_size="small-medium"
class="ids-btn--remove-column"
>
{{ 'field.column.delete'|trans|desc('Delete') }}
</twig:ibexa:button>
{% endblock %}
{% endembed %}
{% endblock %}
Expand Down
Loading