What's new - ECL v4

ECL v4 contains changes focused on improving the visual identity of the EC components. Detailed release information is available on Github.

4.8.0

:warning: Markup Changes

#3656 fix(site-header): Removing containers when removing notification - FRONT-4637
#3645 feat(notification): Adding links, updating styles - FRONT-4630

:warning: Data Changes

#3645 feat(notification): Adding links, updating styles - FRONT-4630

:bug: Bug Fix

#3668 fix(datepicker): Parsing user input, use moment for custom formats, handle resize - FRONT-4643
#3670 fix(language-list): Fixing styles - FRONT-4647
#3660 fix(mega-menu): Setting opacity: 1 on the container when opened - FRONT-4641
#3666 fix(content-item): revert height change - FRONT-4645
#3661 fix(multiselect): Setting margin-top when there is a label and no helper text - FRONT-4640
#3656 fix(site-header): Removing containers when removing notification - FRONT-4637
#3653 fix(tabs): fix icon position on mobile - FRONT-4321
#3647 fix(menu): fix touch devices - FRONT-4632
#3649 fix(modal): fix close button position on rtl - FRONT-4623

:nail_care: Enhancement

#3654 feat(content-item): set 100% height - FRONT-4627
#3657 feat(js): Adding version propery to the ECL object - FRONT-4638
#3645 feat(notification): Adding links, updating styles - FRONT-4630

:house: Internal

#3673 feat(featured-item): Deprecating footer - FRONT-4650
#3674 chore(deps): Updates 14-10-24
#3664 chore(deps): Updates - 07-10-24
#3593 docs(showcase): provide example of full pages - FRONT-4383
#3659 chore(deps): Updates 01-10-24
#3651 feat(apis): Adding api docs for media container - FRONT-4635

4.7.0

:warning In this version of ECL node 20.9.0 is being used, for those who need to compile ECL on their side please upgrade the node version before integrating this release.

:rocket: New Feature

#3634 feat(easy-to-read): Adding optional "easy-to-read" css - FRONT-4598
#3577 feat(file-download): add preview link - FRONT-4574
#3604 feat(picture): zoom effect - FRONT-4599
#3538 feat(gallery): grid templates - FRONT-4622
#3605 feat(separator): Adding new component - FRONT-4597

:warning: Markup Changes

#3648 fix(mega-menu): Improving height calculations for the second panel - FRONT-4633
#3577 feat(file-download): add preview link - FRONT-4574
#3604 feat(picture): zoom effect - FRONT-4599
#3538 feat(gallery): grid templates - FRONT-4622
#3603 feat(video): Adding support for muted, autoplay and loop - Media container adding autoplay video option - FRONT-4600

:warning: Data Changes

#3577 feat(file-download): add preview link - FRONT-4574
#3604 feat(picture): zoom effect - FRONT-4599
#3538 feat(gallery): grid templates - FRONT-4622
#3603 feat(video): Adding support for muted, autoplay and loop - Media container adding autoplay video option - FRONT-4600

:bug: Bug Fix

#3644 fix(file-download): fix transparent background - FRONT-4628
#3637 fix(table): fix rtl display on mobile - FRONT-4624
#3639 fix(table): Fixing js for the sortable table - FRONT-4625
#3633 fix(unordered-list): Setting list style position to outside also in print - FRONT-4602
#3621 fix(menu): fix focus color on EU menu - FRONT-4613
#3611 fix(form): Fixing styles for the label - FRONT-4605
#3606 fix(range): fix bubble position when setting min value - FRONT-4603
#3601 fix(site-header): fix icon alignment - FRONT-4596

:nail_care: Enhancement

#3615 fix(mega-menu): Mega menu content position fix - FRONT-4606
#3648 fix(mega-menu): Improving height calculations for the second panel - FRONT-4633
#3642 feat(page-header): transparent background on EC - FRONT-4361
#3638 feat(link): update EU inverted link color - FRONT-4629
#3632 feat(youtube): Removing disablekb parameter - FRONT-4616
#3603 feat(video): Adding support for muted, autoplay and loop - Media container adding autoplay video option - FRONT-4600
#3629 feat(inpage): Using the right element to determine the top position in mobile - FRONT-4620
#3613 feat(banner): add rounded corners on EU - FRONT-4607
#3622 feat(templates): Removing trailing slashes from void elements - FRONT-4612
#3620 feat(separator): update default css rules - FRONT-4611
#3583 feat(carousel): Styles update - FRONT-4571
#3587 feat(table): improve border display - FRONT-4584
#3596 feat(file-upload): Adding onSelection event - FRONT-4589

:memo: Documentation

#3617 docs(menu): remove single menu showcase - FRONT-4494

4.6.0

:rocket: New Feature

#3553 feat(gallery): add thumbnail - FRONT-4565

:warning: Markup Changes

#3559 feat(menus): Removing role application from the inner section of the menus - FRONT-4568
#3561 fix(site-header): fixing language switcher in rtl - FRONT-4569
#3553 feat(gallery): add thumbnail - FRONT-4565
#3563 feat(mega-menu): Removing aria label from see all links - FRONT-4572
#3551 feat(menu/mega-menu): remove aria-current=true - FRONT-4545
#3540 feat(menu): add aria-label on main nav - FRONT-4478
#3544 feat(site-header): Eu revamp, again - FRONT-4556
#3529 feat(splash-page): change markup for "lang" attribute

:warning: Data Changes

#3543 feat(form): update for optional elements - FRONT-4319
#3553 feat(gallery): add thumbnail - FRONT-4565
#3540 feat(menu): add aria-label on main nav - FRONT-4478

:bug: Bug Fix

#3564 fix(site-header): Fixing margin reset for search button in EU - FRONT-4575
#3561 fix(site-header): fixing language switcher in rtl - FRONT-4569
#3546 fix(breadcrumb): fix wrap when expanding - FRONT-4558
#3547 fix(button): fix print css - FRONT-4561

:nail_care: Enhancement

#3535 feat(logo): update EC logo - FRONT-4547
#3543 feat(form): update for optional elements - FRONT-4319
#3559 feat(menus): Removing role application from the inner section of the menus - FRONT-4568
#3562 feat(utilities): Adding margin-top and margin-bottom auto in the spacing utilities - FRONT-4573
#3563 feat(mega-menu): Removing aria label from see all links - FRONT-4572
#3556 feat(inpage): Making the list scrollable, moving scrollbar to the left in EC - FRONT-4563
#3557 feat(language-list): Making the list scrollable - FRONT-4564
#3551 feat(menu/mega-menu): remove aria-current=true - FRONT-4545
#3530 feat(media-container): update control - FRONT-4546
#3540 feat(menu): add aria-label on main nav - FRONT-4478
#3545 feat(link): increase underline offset - FRONT-4555
#3544 feat(site-header): Eu revamp, again - FRONT-4556
#3539 feat(social-media-follow): update spacing - FRONT-4552
#3537 feat(timeline): improve focus after expand - FRONT-4484
#3529 feat(splash-page): change markup for "lang" attribute

4.5.0

:rocket: New Feature

#3505 feat(icons): Adding eye icon in the main sprite - FRONT-4528

:warning: Markup Changes

#3534 feat(mega-menu): aria-labelledby for the featured links - FRONT-4543
#3504 feat(gallery, media container): add title to videos - FRONT-4526
#3515 feat(featured-item): change order - FRONT-4476
#3522 feat(banner): Description as a link, some fixes - FRONT-4353
#3494 feat(mega-menu): Using buttons for parent elements - FRONT-4514
#3507 feat(logo): update logo markup - FRONT-4480
#3514 feat(accordion): Rendering two icons, toggling them via css - FRONT-4529
#3498 fix(range): fix aria label - FRONT-4524
#3500 fix(footer): fix accessibility issue in link - FRONT-4496

:warning: Data Changes

#3504 feat(gallery, media container): add title to videos - FRONT-4526
#3522 feat(banner): Description as a link, some fixes - FRONT-4353
#3494 feat(mega-menu): Using buttons for parent elements - FRONT-4514
#3514 feat(accordion): Rendering two icons, toggling them via css - FRONT-4529
#3500 fix(footer): fix accessibility issue in link - FRONT-4496

:bug: Bug Fix

#3533 fix(site-header): Preventing rendering of an empty banner - FRONT-4550
#3521 fix(social-media-follow): add missing tag - FRONT-4536
#3509 fix(range): fix bubble position on rtl - FRONT-4531

:nail_care: Enhancement

#3526 feat(mega-menu): Fixing styles in EU, adding demo in site header - FRONT-4541
#3534 feat(mega-menu): aria-labelledby for the featured links - FRONT-4543
#3536 feat(page header): deprecate overlay - FRONT-4548
#3504 feat(gallery, media container): add title to videos - FRONT-4526
#3515 feat(featured-item): change order - FRONT-4476
#3531 feat(mega-menu): Adding blur handler on featured links - FRONT-4544
#3522 feat(banner): Description as a link, some fixes - FRONT-4353
#3519 feat(splash-page): use headings - FRONT-4481
#3494 feat(mega-menu): Using buttons for parent elements - FRONT-4514
#3525 feat(site-header): add menu to core site header - FRONT-4535
#3503 feat(mega-menu): Adding style for the current sub-items in desktop - FRONT-4527
#3499 feat(form): update required fields - FRONT-4495
#3517 feat(site-header): Adding language code to the button aria-label - FRONT-4483
#3507 feat(logo): update logo markup - FRONT-4480
#3510 feat(footer): 22px line height (from the standalone link) for all the links, EC and EU - FRONT-4511
#3514 feat(accordion): Rendering two icons, toggling them via css - FRONT-4529
#3511 feat(utilities): deprecate ecl-u-sr-only--focusable utilities - FRONT-4500
#3508 feat(banner): update control - FRONT-4530
#3512 feat(max-width): Setting values for the --max-w variable in the utilities - FRONT-4532
#3501 feat(inpage): Consistent border and padding in different states - FRONT-4508
#3495 feat(textarea): Using outline for focus styles - FRONT-4512
#3500 fix(footer): fix accessibility issue in link - FRONT-4496
#3492 feat(social media follow): update icons size and spacing - FRONT-4523
#3479 feat(date-block): Small adjustments in the year block - FRONT-4510

:memo: Documentation

#3513 docs(typography): add accessibility warnings - FRONT-4507

4.4.0

:rocket: New Feature

#3471 feat(flags): Adding new non members flags - FRONT-4498
#3465 feat(banner): new options and video - FRONT-4488

:warning: Markup Changes

#3486 feat(mega-menu): Adding aria-describedby in info link - FRONT-4520
#3487 feat(mega-menu): Aria-describedby on featured column title - FRONT-4522
#3484 feat(mega-menu): Aria-label on view all link - FONT-4516
#3483 feat(mega-menu): Removing unneded aria-label - FRONT-4521
#3482 feat(mega-menu): Supporting aria-labels for nested lists - FRONT-4515
#3421 feat(form): update style of all form elements - FRONT-4432
#3372 feat(menu): add aria-current - FRONT-4405
#3465 feat(banner): new options and video - FRONT-4488
#3462 feat(search-form): Removing aria label, adding support for extra classes for the button and the input - FRONT-4479

:warning: Data Changes

#3489 feat(social-media-follow): add position right - FRONT-4505
#3480 feat(pagination): update EU display - FRONT-4509
#3484 feat(mega-menu): Aria-label on view all link - FONT-4516
#3483 feat(mega-menu): Removing unneded aria-label - FRONT-4521
#3482 feat(mega-menu): Supporting aria-labels for nested lists - FRONT-4515
#3431 feat(modal): update styles - FRONT-4453
#3465 feat(banner): new options and video - FRONT-4488

:nail_care: Enhancement

#3486 feat(mega-menu): Adding aria-describedby in info link - FRONT-4520
#3489 feat(social-media-follow): add position right - FRONT-4505
#3490 feat(mega-menu): Making the hamburger a button with javascript - FRONT-4519
#3480 feat(pagination): update EU display - FRONT-4509
#3488 feat(mega-menu): Not moving the focus when opening the menu - FRONT-4518
#3485 feat(mega-menu): Handling focus on Esc - FRONT-4517
#3481 docs(website): update color page - FRONT-4506
#3487 feat(mega-menu): Aria-describedby on featured column title - FRONT-4522
#3484 feat(mega-menu): Aria-label on view all link - FONT-4516
#3474 feat(button): setting height, using same values for padding in default and hover - FRONT-4499
#3483 feat(mega-menu): Removing unneded aria-label - FRONT-4521
#3482 feat(mega-menu): Supporting aria-labels for nested lists - FRONT-4515
#3478 fix(file-upload): Button only taking the needed space - FRONT-4493
#3477 feat(input): Using outline for focus style - FRONT-4504
#3431 feat(modal): update styles - FRONT-4453
#3353 feat(media container): disable Youtube shortcuts - FRONT-4363
#3449 feat(tabs): EU styles - FRONT-4451
#3473 feat(inpage-nav): improve mobile keyboard navigation - FRONT-4501
#3475 feat(video): homogenize track name - FRONT-4503
#3456 feat(twig): cleanup and update parameters - FRONT-4438
#3421 feat(form): update style of all form elements - FRONT-4432
#3450 feat(mega-menu): New info in mobile, mobile scroll, limiting element's height - FRONT-4447
#3372 feat(menu): add aria-current - FRONT-4405
#3448 feat(list with illustration fact and figures): update styles - FRONT-4468
#3462 feat(search-form): Removing aria label, adding support for extra classes for the button and the input - FRONT-4479

4.3.0

:warning: Markup Changes

#3447 feat(news-ticker): Icon or image for each item, iteration on styles for EC and EU - FRONT-4463)
#3402 feat(media-container, gallery): embedded video audio description information - FRONT-4362
#3439 fix(breadcrumb): Returning a promise from computeVisibilityMap - FRONT-4314)
#3374 feat(site-header): Logo sizes and EU revamp - FRONT-4390 )
#3420 feat(range): add bubble for value - FRONT-4436
#3400 feat(meta): update meta list display - FRONT-4419
#3390 feat(gallery): design update - FRONT-4387

:warning: Data Changes

#3447 feat(news-ticker): Icon or image for each item, iteration on styles for EC and EU - FRONT-4463)
#3459 feat(category-filter): Adding support for current item at init, extra attributes for the items - FRONT-4475)
#3452 feat(gallery): add "no hover" variant - FRONT-4464
#3436 feat(select): Making the select all and search field optional in the multiselect - FRONT-4462)
#3402 feat(media-container, gallery): embedded video audio description information - FRONT-4362
#3374 feat(site-header): Logo sizes and EU revamp - FRONT-4390 )
#3434 feat(gallery): add grid display - FRONT-4459
#3414 feat(icon): add control for icon title - FRONT-4399
#3397 feat(inpage-navigation): improve labels - FRONT-4398

:bug: Bug Fix

#3453 fix(multi-select): Fixing width in mobile - FRONT-4471)
#3444 feat(mega-menu): Fixing static position of the mega menu wrapper and toggle button - FRONT-4469)
#3441 fix(utilities): Ratio for safari - FRONT-4408)

:nail_care: Enhancement

#3447 feat(news-ticker): Icon or image for each item, iteration on styles for EC and EU - FRONT-4463)
#3463 feat(typography): update line height - FRONT-4487
#3460 feat(custom-properties): Adding custom props for font family, using them in the components - FRONT-4490)
#3459 feat(category-filter): Adding support for current item at init, extra attributes for the items - FRONT-4475)
#3458 feat(select): Removing unneeded aria-label - FRONT-4477)
#3452 feat(gallery): add "no hover" variant - FRONT-4464
#3436 feat(select): Making the select all and search field optional in the multiselect - FRONT-4462)
#3457 feat(breadcrumb): Changing aria-label for the ellipsis in our demos - FRONT-4474)
#3402 feat(media-container, gallery): embedded video audio description information - FRONT-4362
#3389 feat(lists): Styles - FRONT-4417)
#3443 feat(style): update typography - FRONT-4467
#3427 feat(button): update font size - FRONT-4457
#3445 feat(menu): improve focus loop - FRONT-4402
#3439 fix(breadcrumb): Returning a promise from computeVisibilityMap - FRONT-4314)
#3374 feat(site-header): Logo sizes and EU revamp - FRONT-4390 )
#3434 feat(gallery): add grid display - FRONT-4459
#3414 feat(icon): add control for icon title - FRONT-4399
#3438 feat(accordion): Removing outdated code in the js - FRONT-4465)
#3191 feat(website): update display - FRONT-4208
#3407 feat(table): table without header - FRONT-4437
#3420 feat(range): add bubble for value - FRONT-4436
#3400 feat(meta): update meta list display - FRONT-4419
#3425 feat(pagination): update styles - FRONT-4445
#3424 feat(timeline): update style and example - FRONT-4452
#3396 feat(inpage-navigation): improve keyboard navigation - FRONT-4397
#3397 feat(inpage-navigation): improve labels - FRONT-4398
#3393 feat(list with illustration): add center for vertical list (icons) and improve print - FRONT-4428
#3430 feat(accordion): update styles - FRONT-4455
#3423 feat(blockquote): update styles - FRONT-4448
#3390 feat(gallery): design update - FRONT-4387

:house: Internal

#3461 chore(deps): Updates - 03-07-24)
#3455 chore(deps): Updates 27-06-24)
#3446 chore(deps): Updates 21-06-24)
#3442 chore(storybook): Showing description for the controls - FRONT-4466)
#3437 chore(deps): Updates 18-06-24)
#3435 chore(deps): Updates 14 06 24)

4.2.0

:rocket: New Feature

#3383 feat(icons): One single package for EC and EU - FRONT-4421

:warning: Markup Changes

#3401 feat(mega-menu): New version - FRONT-4426
#3387 feat(footer): update eu footer links - FRONT-4394
#3386 fix(mega menu): fix accessibility issues - FRONT-4424
#3251 feat(table): add id and headers - FRONT-4260
#3369 feat(icon): add screen reader label for external icons - FRONT-4373
#3385 feat(list-illustration): use list markup - FRONT-4400
#3354 feat(gallery): add item title for share link - FRONT-4369
#3350 feat(footer): update links - FRONT-4375
#3347 feat(media-container): add html video title - FRONT-4359
#3333 feat(gallery): fix aria-label and alt text for video - FRONT-4364
#3343 feat(multi-select): add aria-live - FRONT-4336
#3309 feat(radio): improve accessibility for required radio group - FRONT-4329
#3305 feat(file-upload): add aria-live - FRONT-4318
#3340 feat(loading indicator): add accessibility role - FRONT-4187

:warning: Data Changes

#3401 feat(mega-menu): New version - FRONT-4426
#3387 feat(footer): update eu footer links - FRONT-4394
#3386 fix(mega menu): fix accessibility issues - FRONT-4424
#3251 feat(table): add id and headers - FRONT-4260
#3369 feat(icon): add screen reader label for external icons - FRONT-4373
#3354 feat(gallery): add item title for share link - FRONT-4369
#3368 feat(fact-figures): EC iteration - FRONT-4391
#3347 feat(media-container): add html video title - FRONT-4359
#3333 feat(gallery): fix aria-label and alt text for video - FRONT-4364
#3335 feat(gallery): add iframe title for video player - FRONT-4365

:bug: Bug Fix

#3406 fix(file): improve file download rtl - FRONT-4434
#3394 fix(carousel): remove unneeded fixed id - FRONT-4431
#3298 fix(icon): rename whatsapp icons - FRONT-4315
#3370 fix(menu): fix EU hamburger menu color and padding - FRONT-4401
#3379 fix(range): Fixing display in firefox - FRONT-4414
#3363 fix(tabs): Setting z-index for the dropdown visibility - FRONT-4376
#3358 fix(inpage): Renaming selector for active element - FRONT-4386
#3352 fix(menu): fix resize on mobile - FRONT-4382
#3355 fix(website): Fixing link showcase page in EC and EU - FRONT-4333
#3332 fix(range): fix aria-label value - FRONT-4341
#3336 fix(gallery): fix close button focus - FRONT-4367
#3300 fix(carousel): fix keyboard navigation - FRONT-4316

:nail_care: Enhancement

#3326 feat(link): update link styles - FRONT-4325
#3403 feat(notification): add border, update close - FRONT-4435
#3398 feat(tag): update styles - FRONT-4418
#3401 feat(mega-menu): New version - FRONT-4426
#3399 feat(featured-item): update border radius - FRONT-4344
#3387 feat(footer): update eu footer links - FRONT-4394
#3376 feat(banner): keep aspect ration between mobile and desktop - FRONT-4412
#3391 feat(color): update neutral color - FRONT-4427
#3386 fix(mega menu): fix accessibility issues - FRONT-4424
#3251 feat(table): add id and headers - FRONT-4260
#3369 feat(icon): add screen reader label for external icons - FRONT-4373
#3385 feat(list-illustration): use list markup - FRONT-4400
#3354 feat(gallery): add item title for share link - FRONT-4369
#3350 feat(footer): update links - FRONT-4375
#3378 feat(typography): update EC and EU text styles - FRONT-4392
#3382 feat(menu): improve focus navigation on mobile - FRONT-4404
#3367 feat(featured-item): add shadow - FRONT-4393
#3371 feat(content-item): remove icons in demo - FRONT-4396
#3366 feat(popover): EU styles - FRONT-4388
#3368 feat(fact-figures): EC iteration - FRONT-4391
#3341 feat(mega-menu): 2 columns panel alignment - FRONT 4378
#3362 feat(gallery): focus first element when expanding - FRONT-4370
#3351 feat(layout): update max width - FRONT-4381
#3312 feat(banner): add xs banner - FRONT-4321
#3337 feat(colors): update EU colors - FRONT-4326
#3349 feat(social media follow): update EU display - FRONT-4354
#3333 feat(gallery): fix aria-label and alt text for video - FRONT-4364
#3343 feat(multi-select): add aria-live - FRONT-4336
#3324 feat(media-container): update caption style - FRONT-4324
#3309 feat(radio): improve accessibility for required radio group - FRONT-4329
#3305 feat(file-upload): add aria-live - FRONT-4318
#3340 feat(loading indicator): add accessibility role - FRONT-4187
#3346 feat(select): change optgroup label order - FRONT-4380
#3335 feat(gallery): add iframe title for video player - FRONT-4365
#3339 feat(mega-menu): Label for view all customisable in each sublist - FRONT-4377
#3338 feat(media container): update iframe title - FRONT-4361

:memo: Documentation

#3384 fix(color): fix website colors - FRONT-4423
#3361 docs(typography): fix font size information - FRONT-4385
#3348 fix(banner): fix documentation - FRONT-4358

4.1.0

:rocket: New Feature

#3297 feat(mega-menu): Adding component - FRONT-4279

:bug: Bug Fix

#3313 fix(banner): Fixing height for the plain background variant
#3310 fix(page-header): Fix closure tag for the description wrapper - FRONT-4347
#3303 fix(file-upload): add focus styles - FRONT-4317
#3306 fix(menu): Fixing position in the site-header and inner styles for RTL support - FRONT-4327
#3307 fix(checkbox): fix website demo - FRONT-4328
#3276 fix(menu): Bring the user back to the open/close button when reaching the last item in mobile - FRONT-4288

:nail_care: Enhancement

#3118 feat(icon): use css cutom properties - FRONT-4152
#3253 feat(table): add optional caption - FRONT-4274
#3302 feat(button): update EU button styles - FRONT-4323
#3304 feat(modal): add screen reader text to icon - FRONT-4320
#3247 feat(table): add accessibility scope - FRONT-4259
#3246 feat(tag-set): use html list markup - FRONT-4262
#3291 feat(button): remove tertiary button background and update components using it - FRONT-4295

:house: Internal

#3308 chore: Storybook 8 - FRONT-4292