Open
Conversation
github-actions
bot
assigned
ciastektk,
dew326,
mikadamczyk and
ViniTou and unassigned
mikadamczyk,
ciastektk and
ViniTou
Migrate filter buttons and edit translation buttons to use the design system twig:ibexa:button component for consistent styling. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Automated migration tool for migrating legacy UI components to design system. Features: - Chunk-based processing with OpenCode CLI integration - Automatic branch creation for isolated migrations - Retry logic with automatic rollback on failure - Frontend validation (yarn test) integration - Progress tracking, logging, and error reporting - Component-agnostic architecture (supports buttons, badges, etc.) Components: - migrate-buttons.sh: Bash orchestrator (789 LOC) - MIGRATION_RULES.md: Button migration guide with variant mappings - BUTTON_MIGRATION_PLAN.txt: Chunk definitions and file inventory - .claude/: Skills and settings for AI-assisted migrations - .button-migration/: Working directory for logs and state Usage: ./migrate-buttons.sh --chunk CHUNK_03 ./migrate-buttons.sh --start-from 5 ./migrate-buttons.sh --dry-run See: MIGRATION_RULES.md, BUTTON_MIGRATION_PLAN.txt
- Move BUTTON_MIGRATION_PLAN.txt → migrations/button/ - Move MIGRATION_RULES.md → migrations/button/ - Move prompts/ → migrations/button/prompts/ - Add .migration-state/ for runtime tracking (gitignored) - Prepare structure for multi-component migrations (badges, etc.)
Rewrite of bash script with enhanced features: Features: - Component-agnostic architecture (buttons, badges, alerts, etc.) - Automatic branch isolation (migrate/buttons, migrate/badges) - Type-safe with comprehensive TypeScript types - Modular library structure (git, opencode, validation, etc.) - Skip-on-failure with progress tracking - Real-time output streaming - Colored logging with progress indicators Structure: - scripts/migrate-component.ts - Main orchestrator - scripts/lib/ - Modular utilities (9 modules) - scripts/config/ - Component configurations - scripts/types.ts - TypeScript definitions Usage: cd scripts/ npm run migrate:button -- --chunk CHUNK_03 npm run migrate:badge -- --chunk CHUNK_01 Branch Strategy: - Migrations run on isolated branches (migrate/*) - Never merged back to base branch - Clean separation of tool commits vs migration commits Removed: - migrate-buttons.sh (789 LOC bash script) - .button-migration/ working directory See: scripts/README.md
…stem-twig - Replace 1 button-styled link with <twig:ibexa:link variant="button"> - Map to primary button type - Preserve ibexa-btn--login class - Preserve translation strings and href path Refs: BUTTON_MIGRATION_PLAN.md
- Replace 1 button-styled link with <twig:ibexa:link variant="button"> - Map ghost style to tertiary type with small size - Add edit icon (icon="edit", icon_size="small-medium") - Preserve conditional rendering logic Refs: BUTTON_MIGRATION_PLAN.md
…esign-system-twig - Replace 2 button-styled links with <twig:ibexa:link variant="button"> - Back button: tertiary with back icon - Sign in button: primary type - Preserve custom classes and translations Refs: BUTTON_MIGRATION_PLAN.md
…twig - Replace 1 show more/less toggle button with <twig:ibexa:button> - Map ghost style to tertiary type with small size - Add arrow-caret-down icon - Preserve custom classes and complex nested label structure Refs: BUTTON_MIGRATION_PLAN.md
…m-twig - Replace 1 upload file button with <twig:ibexa:button> - Map to secondary button type - Preserve conditional disabled state - Preserve custom data-source classes and nested label Refs: BUTTON_MIGRATION_PLAN.md
- Remove double curly braces from :disabled attribute
- Twig component attributes with colon prefix should not have {{ }}
Refs: BUTTON_MIGRATION_PLAN.md
- Replace legacy button-styled link with <twig:ibexa:link variant="button"> - Replace legacy button with <twig:ibexa:button> - Migrate continue link (primary type) - Migrate cancel button (secondary type, modal dismiss) - Preserve modal dismiss functionality via attr parameter
- Replace legacy ghost button link with <twig:ibexa:link variant="button"> - Migrate download button for binary file field (ghost type, download icon) - Preserve download attribute and ml-4 spacing class
- Replace legacy button-styled links with <twig:ibexa:link variant="button"> - Replace legacy button with <twig:ibexa:button> - Migrate create section link (primary type, create icon) - Migrate assign content link (ghost type, assign-section icon, UDW config) - Migrate edit section link (ghost type, edit icon) - Migrate delete button (ghost type, trash icon, modal trigger) - Preserve all data attributes and modal functionality
Replace attr prop with direct data-bs-dismiss attribute. The Symfony UX Twig Component system automatically collects unrecognized attributes - no need for attr prop wrapper.
Replace attr prop with direct class and download attributes. Pass attributes directly as component props instead of using non-existent attr wrapper.
Replace attr prop with direct attribute passing in 3 locations: - Assign content button: Pass data attributes individually - Edit button: Pass title attribute directly - Delete button: Use :data-bs-target for dynamic value All attributes now passed directly as component props instead of using non-existent attr wrapper.
- Add critical warning about attr prop usage at top - Document correct attribute passing syntax - Add comprehensive testing strategy section - Explain why Behat tests are unreliable - Update progress tracking (8/100 files completed) - Document all fixes applied - Add common issues and troubleshooting
design-system-twig button component does not support type="ghost". Valid types are: primary, secondary, tertiary, secondary-alt, tertiary-alt. Changed 4 instances across 2 files: - section/list.html.twig: 3 buttons (assign, edit, delete) - content_fields.html.twig: 1 download button Legacy 'ibexa-btn--ghost' maps to 'tertiary' in design-system-twig.
- Add critical warning about ghost type not being supported - Update type mapping table to highlight ghost -> tertiary - Add ghost type error to common issues section - Document fixes applied (4 instances across 2 files) - Emphasize only 5 valid type values accepted
…Page and CreateNewPopup
UserProfilePage: .ibexa-user-profile-summary__header .ibexa-btn -> .ids-btn
account/profile/view.html.twig migrated edit link to twig:ibexa:link (ids-btn)
UserSettingsPage:
- .ibexa-btn -> .ids-btn (changePassword button lookup)
- .ibexa-btn__label -> .ids-btn__label (x2, openAutosaveDraftEditionPage
and openBrowsingEditionPage)
account/settings/list.html.twig migrated edit links to twig:ibexa:link (ids-btn)
CreateNewPopup: cancelButton adds .ids-btn--secondary alongside .ibexa-btn--secondary
content_create.html.twig cancel button migrated to twig:ibexa:button type=secondary
(ids-btn--secondary); confirm button still uses form_widget (ibexa-btn--primary),
so addButton locator is unchanged
…ation template, add title selector for policy edit button
… and Dashboard
- section/view.html.twig: extract conditional data-bs-toggle/target attrs to
Twig variables to avoid invalid {% if %} block inside <twig:ibexa:button>
- ibexa_image.html.twig, ibexa_media.html.twig: add ?? '' fallback on href to
prevent DS Link component crash when no file is uploaded yet (uri is null)
- field_definitions.html.twig: revert DS component migration for the info-style
button and restore stripped ibexa-btn--ghost class in extra_actions; ibexa-btn--info
is out of scope for this branch
- DashboardPage.php: remove verifyHttpStatus() call that referenced a non-existent
method on the Page base class
- ContentActionsMenu.php: extend menuButton locator to also match .ids-btn so
DS-migrated standalone buttons (Languages, ContentType) are found correctly
- admin.section.view.js: extend selector to match both legacy ibexa-btn--open-udw and new ids-button--open-udw classes, fixing UDW not opening on section details assign action - collapse.html.twig: revert DS button migration back to plain <button> elements (collapse has its own DS component, out of scope) - collapse_all_btn.html.twig: same revert, restoring ibexa-btn--ghost
- admin.limitation.pick.js: fix event.target -> event.currentTarget in handleUdwConfirm.bind() call; DS button wraps label in ids-btn__label div, so event.target was the inner div lacking data-* attributes, causing addLocationsToInput() to throw before closeUDW() ran and leaving the UDW permanently open (Roles.feature subtree limitation) - admin.trash.list.js: extend btns selector to also match legacy ibexa-btn--open-udw class; the trash restore button is rendered via form_widget()/UniversalDiscoveryWidgetType which injects ibexa-btn-- open-udw in PHP, so the migrated ids-button--open-udw selector never matched it (Trash.feature restore-under-new-location)
- ContentTypeUpdatePage: click .ibexa-collapse__toggle-btn--title directly instead of the outer div; Bootstrap collapse requires a click on the data-bs-toggle element, not its container. Fix fieldDefinitionOpenContainer selector from the non-existent [data-collapsed="false"] attribute to .ibexa-collapse__body.show which is the actual Bootstrap expanded-state class. - UniversalDiscoveryWidget: raise confirm() wait from hardcoded 5s to LONG_TIMEOUT (20s); the onConfirmCallback in the UDW React module runs an async loadVersions() network fetch before calling closeUDW(), and 5s was insufficient in slow CI runs (Roles subtree limitation).
addItemToMultiSelection() clicks the checkbox then confirm() runs immediately. React batches state updates asynchronously, so the confirm button (.c-actions-menu__confirm-btn) is still disabled (isConfirmDisabled = selectedLocations.length === 0) at click time — the click is silently dropped and the UDW never closes. Wait for .c-actions-menu__confirm-btn:not([disabled]) before clicking, ensuring React has processed the ADD_SELECTED_LOCATION dispatch and re-rendered with the button enabled. Keeps the existing post-click wait (LONG_TIMEOUT) for the UDW to unmount.
…ibexa-collapse__body.show The previous logic clicked the toggle button unconditionally on every retry of the outer waitUntil loop, then waited 3s for button.collapsed to disappear. If the inner wait timed out (e.g. Bootstrap collapse not yet initialised on a freshly dragged-in field), the outer loop would re-click the button, collapsing a panel that may have just opened - causing an infinite toggle loop. Fix: - Check .ibexa-collapse__body.show to detect already-expanded state; skip the click if the panel is already open (idempotent retry) - Replace ElementNotExistsCondition(button.collapsed) with ElementExistsCondition(.ibexa-collapse__body.show) - more reliable since 'show' is Bootstrap's authoritative expanded-state marker and is unambiguous regardless of how many buttons exist in the collapse header - Remove now-unused ElementNotExistsCondition import
…lain HTML" This reverts commit fd0ff2de68154ac3ee61a166b90b543dc6fc6d37.
Packages that have migrated their extra-actions templates to use <twig:ibexa:button type="primary"> render ids-btn--primary instead of ibexa-btn--primary. Add the ids-btn--primary variant to the addButton locator so the Behat component can find the Create button in both legacy and design-system-twig rendered popups. Affected test suites: ProductVariants, PaymentMethods, Currencies, AttributeGroups, form-builder OtherFields/TechnicalFields.
…ix-entry DS class
tischsoic
force-pushed
the
IBX-11236-use-ds-btn-component
branch
from
69e583a to
2ccfc8f
Compare
…g DS button component The DS .ids-btn base class sets display:inline-flex with specificity (0,1,0), which overrode the display:none rule on the disable button (also 0,1,0). Wrapping the visibility rules inside the parent __distraction-free-mode-btns selector raises specificity to (0,2,0)/(0,3,0), restoring correct visibility.
- Replace legacy <button> with <twig:ibexa:button> in context_menu.html.twig for the 'more' overflow button (DS path when selector_btn_classes is empty, legacy raw <button> preserved when selector_btn_classes is set) - Add selector_btn_type and selector_btn_size variables for typed DS overrides - In menu/context_menu.html.twig, add DS path for simple items using <twig:ibexa:button> / <twig:ibexa:link variant="button"> with primary_item_type/secondary_item_type/primary_item_size/secondary_item_size options - Legacy path preserved when noDefaultBtnStyling=true or primary_item_class/secondary_item_class options are passed (e.g. page-builder)
…ponent
Twig UX components do not support dynamic attribute splatting via
{{ macros.attributes(...) }} inside component tags, causing a parse error.
Replace <twig:ibexa:button>/<twig:ibexa:link> in the DS path with a raw
<button>/<a> element that manually applies ids-btn ids-btn--{type} ids-btn--{size}
classes, preserving full arbitrary attribute passthrough from KnpMenu items.
tischsoic
force-pushed
the
IBX-11236-use-ds-btn-component
branch
from
7f3c0d1 to
d2c5252
Compare
- split_btn.html.twig: add dual DS/legacy path based on type value. DS path (primary/secondary/tertiary/secondary-alt/tertiary-alt) uses ids-btn classes on main-btn and toggle-btn, ids-btn__label wrapper on main btn label, and <twig:ibexa:icon> inside ids-btn__icon for the caret icon. Legacy path (null/filled-info) unchanged. - _split-button.scss: add .ids-icon alongside .ibexa-icon for caret transition/rotation; add .ids-btn.ids-btn--primary alongside .ibexa-btn.ibexa-btn--primary for gradient suppression. - admin.context.menu.js: add .ids-btn to the menu item button selector so DS-migrated simple buttons are still detected by the adaptive items / overflow menu logic.
caret-down is a legacy alias resolved by ibexa_icon_path() but not recognised by <twig:ibexa:icon> which constructs the path directly. The correct DS icon name is arrow-chevron-down.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description:
For QA:
Documentation: