Skip to content

Latest commit

 

History

History
1251 lines (981 loc) · 39 KB

70.x.x-to-72.0.0-migration-guide.md

File metadata and controls

1251 lines (981 loc) · 39 KB

Migration Guide from version 70.x.x to 72.0.0

Introduction

This document outlines the steps needed to migrate to version 72.0.0 of our Design System library from versions 70.x.x. This release includes several breaking-changes that may impact your projects. Please follow this guide to ensure a smooth transition.

Version 71.0.0 wasn't used due to having previously published a version 71.0.0 to npm.

Global changes

This section will list the changes that will impact more than one component

New sizes introduced for margin and padding utility classes

Link to PR

  • Description of change: New margin and padding sizes and have been introduced and relevant utility classes have been updated with the new corresponding size

  • Reason for change: As we have changed the size of our rems to be 16px we needed to introduce new sizes to support our updated spacing grid.

  • Components impacted:

    • Any component or layout where you have manually set our margin or padding utility classes.

  • Migration steps:

    1. Locate all instances of the utility classes in your codebase.
    2. Replace old size name with new corresponding size name:
    • Click for example: 
      //OLD Sizes
$sizes: (
    no: 0,
    xxs: 0.25rem,
    xs: 0.5rem,
    s: 1rem,
    m: 1.5rem,
    l: 2rem,
    xl: 3rem,
    auto: auto,
);

//NEW Sizes
$sizes: (
    no: 0,
    4xs: 0.125rem,
    3xs: 0.25rem,
    2xs: 0.5rem,
    xs: 0.75rem,
    s: 1rem,
    m: 1.25rem,
    l: 1.5rem,
    xl: 2rem,
    2xl: 2.5rem,
    3xl: 3rem,
    4xl: 4rem,
    5xl: 5rem,
    auto: auto,
);

Standardisation of icon size naming

Link to PR

  • Description of change: Icon sizes have been updated to reflect the new size naming convention. This change replaces the old naming convention (e.g., xxxl, xxl) with a numerical system (e.g., 3xl, 2xl), the same as the one that has been brought for padding and margins.

  • Reason for change: This update standardises how sizes are referenced across the system.

  • Components impacted:

    Anywhere an icon size parameter is set to xxxl or xxl.

  • Migration steps:

    1. Locate all instances of the iconSize parameter in your codebase.
    2. Replace old size name with new corresponding size name:
    • Click for example: 
      //OLD Sizes
$sizes:
[
    "iconSize": 'xxxl',
    "iconSize": 'xxl'
    "iconSize": 'xl'
    "iconSize": 'l'
    "iconSize": 'm'
    "iconSize": 's'
];

//NEW Sizes
$sizes:
[
    "iconSize": '3xl',
    "iconSize": '2xl'
    "iconSize": 'xl'
    "iconSize": 'l'
    "iconSize": 'm'
    "iconSize": 's'
];

Standardisation of font size naming

Link to PR

  • Description of change: Font size classes have been updated to reflect the new size naming convention. This change replaces the old naming convention (e.g., xxxl, xxl) with a numerical system (e.g., 3xl, 2xl), the same as the one that has been brought for padding and margins.

  • Reason for change: This update standardises how sizes are referenced across the system.

  • Components impacted:

    Anywhere you use the xxl or xxxl font-size utility classes.

  • Migration steps:

    1. Locate all instances of the font size utility classes in your codebase.
    2. Replace old size name with new corresponding size name:
    • Click for example: 
      //OLD Sizes
$sizes:
[
    'ons-u-fs-xxxl',
    'ons-u-fs-xxl',
    'ons-u-fs-xl',
    'ons-u-fs-l',
    'ons-u-fs-m',
    'ons-u-fs-r--b',
    'ons-u-fs-r',
    'ons-u-fs-s--b',
    'ons-u-fs-s'
];

//NEW Sizes
$sizes:
[
    'ons-u-fs-3xl',
    'ons-u-fs-2xl',
    'ons-u-fs-xl',
    'ons-u-fs-l',
    'ons-u-fs-m',
    'ons-u-fs-r--b',
    'ons-u-fs-r',
    'ons-u-fs-s--b',
    'ons-u-fs-s'
];

Standardisation of breakpoint size naming

Link to PR

  • Description of change: Breakpoint size names have been updated to reflect the new size naming convention. This change replaces the old naming convention (e.g., xxxl, xxl) with a numerical system (e.g., 3xl, 2xl), the same as the one that has been brought for padding and margins.

  • Reason for change: The new naming convention standardizes how breakpoints are referenced across the design system.

  • Components impacted:

    Any component or layout that references breakpoints using the previous naming convention will need to be updated.

  • Migration steps:

    1. Locate all instances of breakpoints in your codebase.
    2. Replace old breakpoint names with the new corresponding names:
    • Click for example: 
      // OLD Breakpoints
$breakpoints: [
    xxs: 300px,
    xs: 400px,
    s: 500px,
    m: 740px,
    l: 980px,
    xl: 1300px,
    xxl: 1600px,
];

// NEW Breakpoints
$breakpoints: [
    2xs: 300px,
    xs: 400px,
    s: 500px,
    m: 740px,
    l: 980px,
    xl: 1300px,
    2xl: 1600px,
];

Standardisation of setting heading level across components

Link to PR

  • Description of change: titleTag which usually expects a string like h3 is being replace by a headingLevel which now expects an integer.

  • Reason for change: In this update, we are addressing an inconsistency in the components/patterns within our system. Some components use titleTag while others use headingLevel to set the HTML tag for titles/headings. This update aims to standardise the usage by migrating all components using titleTag to using headingLevel.

    It's important to note that while a default value is set for the heading level, this could be a breaking change as it may alter the heading level in existing use cases and that the new headingLevel param will need an integer from now on and not the whole tag.

  • Components impacted:

    • accordion
    • details
    • document-list
    • panel
    • share-page
    • tabs
    • timeline

  • Migration steps:

    1. Locate all instances of titleTag in your codebase.
    2. Replace titleTag with headingLevel and replace the heading tag you had with the relevant integer like below
    • Click for example: 
      OLD
{{
    onsTimeline({
        "titleTag": "h3"
    })
}}

NEW
{{
    onsTimeline({
        "headingLevel" : 3
    })
}}

Update parameter names to camel case naming standard

Link to PR

  • Description of change: Many parameter names have been updated.

  • Reason for change: Updated various parameters to use the camel case naming standard.

    This will be a breaking change and will require the renaming of some parameters for the following components and parameters:

  • Components impacted:

    • Card - image.placeholderURL will need to be renamed image.placeholderUrl
    • Cookies Banner - settingsLinkTextURL will need to be renamed settingsLinkTextUrl
    • Header - logo.logoURL will need to be renamed logo.logoUrl
    • Header - ISOCode will need to be renamed isoCode
    • Header - navigation.subNavigation.overviewURL will need to be renamed navigation.subNavigation.overviewUrl
    • Share Page -pageURL will need to be renamed pageUrl
    • Video - videoLinkURL will need to be renamed videoLinkUrl
    • Page Template - assetsURL will need to be renamed assetsUrl
    • Footer - OGLLink will need to be renamed oglLink
    • Footer - oglLink.HTML will need to be renamed oglLink.html
    • Message - messageID will need to be renamed messageId
    • Access Code - maxlength will need to be renamed maxLength
    • Address input - APIDomain will need to be renamed apiDomain
    • Address input - APIDomainBearerToken will need to be renamed apiDomainBearerToken
    • Address input - APIManualQueryParams will need to be renamed apiManualQueryParams
    • Address input - errorMessageAPI will need to be renamed errorMessageApi
    • Address input - errorMessageAPILinkText will need to be renamed errorMessageApiLinkText

  • Migration steps:

    1. Locate all instances of the above parameters in your codebase.
    2. Replace oldParameter with newParameter.
    • Click for example: 
      OLD
{{
    onsHeader({
        "title": 'Page title',
        "mastheadLogoUrl": {
            "multipleLogos": {
                "logo1": {
                    "logoURL" : "https..."
                }
            }
        },
        "titleUrl": '#0',
        "language": {
            "languages": [
                {
                    "url": '#0',
                    "ISOCode": 'en',
                    "text": 'English',
                    "current": true
                },
                {
                    "url": '#0',
                    "ISOCode": 'cy',
                    "text": 'Cymraeg',
                    "current": false
                }
            ]
        },
        "navigation": {
            "subNavigation": {
                "overviewURL": "https..."
            }
        }
    })
}}

NEW
{{
    onsHeader({
        "title": 'Page title',
        "mastheadLogoUrl": {
            "multipleLogos": {
                "logo1": {
                    "logoUrl" : "https..."
                }
            }
        },
        "titleUrl": '#0',
        "language": {
            "languages": [
                {
                    "url": '#0',
                    "isoCode": 'en',
                    "text": 'English',
                    "current": true
                },
                {
                    "url": '#0',
                    "isoCode": 'cy',
                    "text": 'Cymraeg',
                    "current": false
                }
            ]
        },
        "navigation": {
            "subNavigation": {
                "overviewUrl": "https..."
            }
        }
    })
}}

Renamed utility class from ons-grid--flex to ons-grid-flex

Link to PR

  • Description of change: The following classes have been renamed:

    • ons-grid--flex to ons-grid-flex
    • ons-grid--center to ons-grid-flex--center
    • ons-grid--between to ons-grid-flex--between
    • ons-grid--vertical-top to ons-grid-flex--vertical-top
    • ons-grid--vertical-center to ons-grid-flex--vertical-center

  • Reason for change: The ons-grid--flex utility class has been updated to follow the correct BEM model.

    This will be a breaking change and will require the update of the old classes name with the new one:

  • Components impacted:

    Any component that used the old class name.

  • Migration steps:

    1. Locate all instances of the above classes in your codebase.
    2. Replace the old class name with the new one.
    • Click for example: 
      OLD
<div
    class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ons-grid--gutterless"
></div>

NEW
<div
    class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless"
></div>

Components

This section will list all the changes that are specific to one component.

List of components

Metadata

Removed metadata component

Link to PR

  • Description of change: The onsMetadata component has been removed.

  • Reason for change: The component was removed as it has been replaced by the descriptionList component.

  • Migration steps:

    1. Locate all instances of onsMetadata in your codebase.
    2. You could update any instance of onsMetadata with onsDescriptionList.
    • Click for example: 
      OLD
{% from "components/onsMetadata/_macro.njk" import onsMetadata %}

{{
    onsMetadata({ ... })
}}

NEW
{% from "components/description-list/_macro.njk" import onsDescriptionList %}

{{
    onsDescriptionList({ ... })
}}

Call to action

Remove call to action component and all references

Link to PR

  • Description of change: The onsCallToAction component has been removed.

  • Reason for change: The component was removed as it was only developed for use on the Census website.

  • Migration steps:

    1. Locate all instances of onsCallToAction in your codebase.
    2. You could update any instance of onsCallToAction with onsButton. The onsButton component is not a replacement for the onsCallToAction component so transition will not be like for like.
    • Click for example: 
      OLD
{% from "components/call-to-action/_macro.njk" import onsCallToAction %}

{{-
    onsCallToAction({
        "headingText": 'Call to action heading.',
        "paragraphText": 'Descriptive text about call to action',
        "button": {
            "text": 'Start',
            "url": '#0'
        }
    })
}}

SUGGESTED REPLACEMENT
{% from "components/button/_macro.njk" import onsButton %}

{{
    onsButton({
        "text": 'Get started',
        "url": '#0'
    })
}}

Message

Update parameter from UnreadLink to UnreadLinkUrl in Message component

Link to PR

  • Description of change: The unreadLink parameter has been renamed to unreadLinkUrl in the Message component.

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of unreadLink in your codebase.
    2. Replace unreadLink with unreadLinkUrl.
    • Click for example: 
      OLD
{{
    onsMessage({
        "unreadLink": "www.google.com"
    })
}}

NEW
{{
    onsMessage({
        "unreadLinkUrl": "www.google.com"
    })
}}

Update parameter subject from text to object type in Message list component

Link to PR

  • Description of change: In Message List component, subject parameter is changed to an object which contains text and url parameter. url parameter is moved inside subject

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of subject parameter, and include text and url within the subject.
    • Click for example 
      OLD
{{
    onsMessageList({
        "messages": [{
            "url": "#0",
            "subject": "survey response query",
        }]
    })
}}

NEW
{{
    onsMessageList({
        "messages": [{
            "subject":{
                "url": "#0",
                "text":"survey response query",
            }
        }]
    })
}}

Footer

Add option for additional logo in footer

Link to PR

  • Description of change: The poweredBy parameter has been removed in favour of footerLogo.

  • Reason for change: This updates the footer component to support an additional logo, allowing for two logos instead of just one. It introduces the link param for each logo and offers an alternative layout option to display the logos on opposite sides of the footer. The default layout positions the logos next to each other. Additionally, the implementation is aligned with the header component's multipleLogo feature to ensure consistency across the application. The focus and hover states are also adjusted to avoid extra underlines and to ensure the highlight colour wraps only the SVG.

  • Migration steps:

    1. Locate all instances of poweredBy in your codebase.
    2. Replace poweredBy with footerLogo.
    • Click for example: 
      OLD
{{
    onsFooter({
        "poweredBy": "<svg></svg>"
    })
}}

NEW
{{
    onsFooter({
        "footerLogo": {
            "logos": {
                "logo1": {
                    "logoImage": '<svg></svg>',
                    "logoUrl": "#0"
                },
            }
        }
    })
}}

Update parameter from link to text in Footer Component

Link to PR

  • Description of change: The link parameter has been renamed to text in the Footer component.

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of link in the Footer component within your codebase.
    2. Replace link with text.
    • Click for example: 
      OLD
{{-
    onsFooter({
        "OGLLink": {
            "link": "www.google.com"
        }
    })
}}

NEW
{{
    onsFooter({
        "OGLLink": {
            "text": "www.google.com"
        }
    })
}}

Image

Update parameter name from url to src in Image Component

Link to PR

  • Description of change: The url parameter has been renamed to src in the Image component.

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of url in the Image component within your codebase.
    2. Replace url with src.
    • Click for example: 
      OLD
{{
    onsImage({
        "url": "www.google.com"
    })
}}

NEW
{{
    onsImage({
        "src": "www.google.com"
    })
}}

Header

Update parameter names from LogoImage and LogoURL to image and url in header component

Link to PR

  • Description of change: In header component, renamed the LogoImage parameter to image and LogoURL to url.

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of LogoImage and LogoURL.
    2. Replace LogoImage to image and LogoURL to url.
    • Click for example 
      OLD
{{
    onsHeader({
        "mastheadLogo": {
            "multipleLogos":{
                "logo1": {
                    "LogoImage": "ONS Logo",
                    "LogoURL": "https://www.ons.gov.uk/"
                }
            }
        }
    })
}}

NEW
{{
    onsHeader({
        "mastheadLogo": {
            "multipleLogos":{
                "logo1": {
                    "image": "ONS Logo",
                    "url": "https://www.ons.gov.uk/"
                }
            }
        }
    })
}}

Feedback

Update parameter name from url to linkUrl in feedback component

Link to PR

  • Description of change: url parameter is named to linkUrl

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of url parameter
    2. Replace url to linkUrl.
    • Click for example 
      OLD
{{
    onsFeedback({
        "url": "#0",
    })
}}

NEW
{{
    onsFeedback({
        "linkUrl": "#0",
    })
}}

Summary

Rename summary component parameters

Link to PR

  • Description of change:

    • summary.summaryTitle is renamed to summary.title
    • group.groupTitle is renamed to group.title
    • row.rowTitle is renamed to row.title
    • row.rowItems is renamed to row.itemsList
    • rowItem.rowTitle is renamed to item.title
    • rowItem.rowTitleAttributes is renamed to item.titleAttributes

  • Reason for change: In this update, we are addressing an inconsistency in the naming of parameters within the summary component. This change aims to standardise the parameter names for clarity and consistency.

  • Migration steps:

    1. Locate all instances of the above parameters in your codebase.
    2. Replace old parameters with new parameters as per below example.
    • Click for example: 
      OLD
{{
    onsSummary({
        "summaries": [
            {
                "groups": [
                    {
                        "placeholderText": 'test',
                        "id": "turnover",
                        "groupTitle": "Turnover",
                        "rows": [
                            {
                                "id": "sales-dates-row",
                                "rowTitle": "What are the dates of the sales period you are reporting for?",
                                "rowItems": [
                                    {
                                        "id": "sales-dates",
                                        "valueList": [
                                            {
                                                "text": "1 January 2015 to 2 February 2017"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}

NEW
{{
    onsSummary({
        "summaries": [
            {
                "groups": [
                    {
                        "placeholderText": 'test',
                        "id": "turnover",
                        "title": "Turnover",
                        "rows": [
                            {
                                "id": "sales-dates-row",
                                "title": "What are the dates of the sales period you are reporting for?",
                                "itemsList": [
                                    {
                                        "id": "sales-dates",
                                        "valueList": [
                                            {
                                                "text": "1 January 2015 to 2 February 2017"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}

Timeline

Refactor timeline macro for compatibility with Jinja2 templates

Link to PR

  • Description of change: We have made a breaking change to the timeline macro by renaming the items parameter to timelineItems.

  • Reason for change: The reason the parameter is being renamed is to fix a bug which takes place in Jinja environments where "items" is a reserved word.

  • Migration steps:

    1. Locate all instances of items in your codebase within the timeline component.
    2. Replace items with timelineItems.
    • Click for example: 
      OLD
{{
    onsTimeline({
        "items": [. . . ],
        "titleTag": "h3"
    })
}}

NEW
{{
    onsTimeline({
        "timelineItems": [. . . ],
        "headingLevel" : 3
    })
}}

Document List

Update parameter names in document list component

Link to PR

  • Description of change::

    1. type has been renamed to object within the metadata object.
    2. The title and url parameters have been combined into an object named title, which now contains text and url.

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of type parameter and replace with object.
    2. Locate all instances where url and title were separate parameters.
    3. Restructure title to include both text and url
    • Click for example 
      OLD
{{
    onsDocumentList({
        "url": '#0',
        "title": 'ONS launches Integrated Data Service to boost government collaboration on data sharing',
        "metadata": {
            "type": {
                "text": 'Press releases',
                "ref": 'Ref 008052'
            },
        },
    })
}}

NEW
{{
    onsDocumentList({
        "title": {
            "text": 'ONS launches Integrated Data Service to boost government collaboration on data sharing',
            "url": '#0'
        },
        "metadata": {
            "object": {
                "text": 'Press releases',
                "ref": 'Ref 008052'
            },
        },
    })
}}

Cookies Banner

Update param name settingsLinkTextURL to settingsLinkURL in Cookies Banner component

Link to PR

  • Description of change: settingsLinkTextURL parameter is named to settingsLinkURL

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of settingsLinkTextURL parameter
    2. Replace settingsLinkTextURL to settingsLinkURL.
    • Click for example 
      OLD
{{
    onsCookiesBanner({
        "settingsLinkTextURL": "/cookiesoverride",
    })
}}

NEW
{{
    onsCookiesBanner({
        "settingsLinkURL": "/cookiesoverride",
    })
}}

Card

Update parameter names in card component

Link to PR

  • Description of change:

    1. headingLevel, id, titleClasses, title, and url are now combined into a title object with headingLevel, id, classes, text, and url properties.
    2. text, textId, and itemsList have been consolidated into a body object with text, id, and itemsList properties.

  • Reason for change: This update ensures consistency in parameter naming across the project.

  • Migration steps:

    1. Locate all instances of the headingLevel, id, titleClasses, title, and url parameters.
    2. Restructure these parameters into the title object, including headingLevel, id, classes, text, and url.
    3. Locate all instances of the text, textId, and itemsList parameters.
    4. Restructure these into the body object, containing text, id, and itemsList.
    • Click for example 
      OLD
{{
    onsCard({
        "id": 'card-example',
        "textId": 'text',
        "title": 'Your data and security',
        "url": '#0',
        "text": 'How we keep your data safe and what happens to your personal information.',
        "headingLevel": 2,
        "classes": "random-class",
        "itemsList": [
            {
                "url": '#0',
                "text": 'List item 1 about the census'
            },
            {
                "url": '#0',
                "text": 'List item 2 about the census'
            }
        ]
    })
}}

NEW
{{
    onsCard({
        "title": {
            "id": 'card-example',
            "text": 'Your data and security',
            "url": '#0'
            "headingLevel": 2,
            "titleClasses": "random-class"
        },
        "body":{
            "id": 'text',
            "text": 'How we keep your data safe and what happens to your personal information.',
            "itemsList": [
                {
                    "url": '#0',
                    "text": 'List item 1 about the census'
                },
                {
                    "url": '#0',
                    "text": 'List item 2 about the census'
                }
            ]
        }
    })
}}

External links

Update parameter from linkText to text in external link component

Link to PR

  • Description of change: linkText parameter is named to text

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of linkText parameter in external link component
    2. Replace linkText to text.
    • Click for example 
      OLD
{{
    onsExternalLink({
        "url": "#0",
        "linkText": "link to an external website"
    })
}}

NEW
{{
    onsExternalLink({
        "url": "#0",
        "text": "link to an external website"
    })
}}

Section navigation

Update param name from title to text in section navigation component

Link to PR

  • Description of change: The title parameter for the objects itemsList and anchor is renamed to text

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of the title parameter in the objects itemList and anchor
    2. Replace title with text.
    • Click for example 
      OLD
{{
    onsSectionNavigation({
        "sections":[{
            "itemsList": [{
                "title": "Section 1"
                "anchors": [{
                    "title": "Sub section 1"
                }]
            }]
        }]
    })
}}

NEW
{{
    onsSectionNavigation({
        "sections":[{
            "itemsList": [{
                "text": "Section 1"
                "anchors": [{
                    "text": "Sub section 1"
                }]
            }]
        }]
    })
}}

Video

Update parameter from linkText to videoLinkText in Video Component

Link to PR

  • Description of change: linkText parameter is named to videoLinkText

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of linkText parameter in video component
    2. Replace linkText to videoLinkText.
    • Click for example 
      OLD
{{
    onsVideo({
        "linkText": "Example link text"
    })
}}

NEW
{{
    onsVideo({
        "videoLinkText": "Example link text"
    })
}}

Address input

Update parameter from manualLink to manualLinkUrl in Address Input component

Link to PR

  • Description of change: manualLink parameter is renamed manualLinkUrl

  • Reason for change: This update helps to standardise the parameter names within the project.

  • Migration steps:

    1. Locate all instances of the manualLink parameter in the Address Input component
    2. Replace manualLink with manualLinkUrl.
    • Click for example 
      OLD
{{
    onsAddressInput({
        "manualLink": "Example-manual-link"
    })
}}

NEW
{{
    onsAddressInput({
        "manualLinkUrl": "Example-manual-link"
    })
}}

Ensure list item custom attributes are always set on list item

Link to PR

  • Description of change: Custom list item attributes are now always set on the <li> element not the <a> when using the url param.

  • Reason for change: To make the application of custom attributes more consistent and allow they to be used without the need for a link.

  • Migration steps:

    Some selectors (e.g. in automated tests or triggers in GA) may need to be updated as the attributes will now be on the parent element for the link element it was on before.

Contact Information

For further assistance, please reach out to our support team: