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
…filters.html.twig
…lation in admin.location.add.translation.js
tischsoic
force-pushed
the
IBX-11236-use-ds-btn-component
branch
from
30c24df to
5c13474
Compare
Revert commit 9607803. A new input component is being developed that will replace this component. Reverting button migration to avoid unnecessary work that will be superseded.
tischsoic
force-pushed
the
IBX-11236-use-ds-btn-component
branch
from
3c7ea8a to
579e283
Compare
…ses in button.trigger.js
…ons CSS classes in extra.actions.js
…ibexa:link component
… classes RolePage 'button' locator updated from .ibexa-btn to .ids-btn to match the new Design System classes emitted by twig:ibexa:link and twig:ibexa:button components used in role_assignment/list.html.twig and policy/list.html.twig. Dialog 'decline' locator updated to support both .ids-btn--secondary (new DS) and .ibexa-btn--secondary (legacy) for backward compatibility with modals across all packages.
…classes Replace broken ibexa-btn/ibexa-icon-- locators with selectors that match the HTML emitted by twig:ibexa:button and twig:ibexa:link components after template migration on this branch. Changes by category: Generic .ibexa-btn -> .ids-btn (base class rename): - LanguagePage, ObjectStateGroupPage, ObjectStatePage, SectionPage Icon-based locators (.ibexa-icon--create/trash) replaced with stable id/href selectors (icon SVG classes no longer emitted by DS components): - LanguagesPage: .ibexa-icon--trash -> #delete-languages - ObjectStateGroupPage: .ibexa-icon--create -> a[href*='/state/state/create'] - ObjectStateGroupPage: .ibexa-icon--trash -> #delete-object-state - ObjectStateGroupsPage: .ibexa-icon--create -> a[href$='/state/group/create'] - SectionsPage: .ibexa-icon--create -> a[href$='/section/create'] - SectionsPage: .ibexa-icon--trash -> #delete-sections - ContentTypeGroupPage: .ibexa-icon--create -> a[href*='/contenttype/add'] - ContentTypeGroupPage: .ibexa-icon--trash -> #delete-content-types - ContentTypeGroupsPage: .ibexa-icon--create -> a[href$='/contenttypegroup/create'] - ContentTypeGroupsPage: .ibexa-icon--trash -> #delete-content-type-groups - ContentTypePage: .btn-icon .ibexa-icon--create -> a[href*='/contenttype/add'] Renamed custom functional classes (ibexa-btn-- -> ids-button--): - DashboardPage: .ibexa-btn--cotf-create -> .ids-button--cotf-create - DraftConflictDialog: .ibexa-btn--add-draft -> .ids-button--add-draft - Fields/MapLocation: .ibexa-btn--search-by-address -> .ids-button--search-by-address - ContentViewPage: .ibexa-btn--add-translation -> .ids-button--add-translation
…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)
|
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: