New Changes for Aura Components in Winter '21 release

With the upcoming Salesforce Winter ’21 Release, We are expecting a new changes that will bring us the ability to build UI easily with these new and changed components.

Here are some of the new and modified Components:

lightning:clickToDial Has the following structure with these attributes in Component:

<aura:component>
    <p><lightning:clickToDial value="14155555551"/></p>
    <p><lightning:clickToDial value="14155555552" recordId="5003000000D9duF"/></p>
    <p><lightning:clickToDial value="14155555553" recordId="5003000000D8cuI" params="accountSid=xxx, sourceId=xxx, apiVersion=123"/></p>
</aura:component>

  

and with the new release we are expecting this new method:

• click()—Dials the phone number by passing the parameters and record Id to the phone system if they are provided. Only an enabled phone number can be clicked.

lightning:combobox

The following property is new for the options attribute

• description—Defines descriptive text for a list item. The descriptive text displays below the label of the list item. When adding descriptions, specify a description for each item in a list. If some items are missing descriptions, the text of the items can be misaligned. Here’s an example using the description property in a component’s JavaScript:

options = [
        {value: 'new', label: 'New', description: 'A new item'},
        {value: 'in-progress', label: 'In Progress', description: 'Currently working on this item'},
        {value: 'finished', label: 'Finished', description: 'Done working on this item'}
    ];

lightning:datatable

Columns with the text data type now don’t display any content if you pass in an object value.

lightning:input

The input type email has changed.

• UTF-8 encoding is supported for entering an international email address

lightning:inputAddress

<aura:component>
    <div style="max-width: 400px;">
        <lightning:inputAddress
            addressLabel="Address"
            streetLabel="Street"
            cityLabel="City"
            countryLabel="Country"
            provinceLabel="Province"
            postalCodeLabel="PostalCode"
            street="121 Spear St."
            city="San Francisco"
            country="US"
            province="CA"
            postalCode="94105"
            required="true"
            fieldLevelHelp="Help Text for inputAddress field"
        />
    </div>
</aura:component>

with the upcoming release these new attributes will be added to the list above:

• addressLookupPlaceholder—The placeholder for the address lookup field, which is visible only when you use showAddressLookup.
• streetPlaceholder—The placeholder for the street field.
• cityPlaceholder—The placeholder for the city field.
• provincePlaceholder—The placeholder for the province field.
• countryPlaceholder—The placeholder for the country field.
• postalCodePlaceholder—The placeholder for the postal code field.

lightning:inputField

The following field types have changed.

• The picklist field type displays in a disabled and read-only state if you don’t provide a controlling field.
• The email field type supports UTF-8 encoding for entering an international email address.
• The name field type supports the suffix field. For more information on enabling this field in your org, see User Fields in Salesforce Help.
• setRangeText()—Inserts text in a specified range of index values, replacing content or inserting new content. This method follows the API of the HTMLInputElement.setRangeText() method, and enables you to insert formatted text when you use it with the setFormat() method.

The setFormat() method has changed. You can programmatically set these additional formats: bold, italic, underline, strike, code, code-block, link, color, background, and header. Previously, only align, font, and size were supported.

Apply formats to selected text by calling the method with key-value pairs as parameters. For example:

setFormat({bold: true, italic: true, link: "google.com", color: "green", header: 2})

lightning:textarea

setRangeText()—Inserts text in a specified range of index values, replacing content or inserting new content. This method follows the API of the HTMLInputElement.setRangeText() method.

NOTE! that The setRangeText() and setRangeText() methods are (beta) which means, they are preview and aren’t part of the “Services” under your master subscription agreement with Salesforce.

lightning:pillContainer

It used to have this structure:

<aura:component>
    <aura:attribute ndisame="items" type="List" default="[
                {
                    type: 'avatar',
                    href: '',
                    label: 'Avatar Pill',
                    src: '/docs/component-library/app/images/examples/avatar2.jpg',
                    fallbackIconName: 'standard:user',
                    variant: 'circle',
                    alternativeText: 'User avatar',
                },
                {
                    type: 'icon',
                    href: '',
                    label: 'Icon Pill',
                    iconName: 'standard:account',
                    alternativeText: 'Account',
                },
            ]"/>
    <p><lightning:pillContainer items="{!v.items}"></lightning:pillContainer></p>
</aura:component>

But with the new release When a pill contains an href value, the optional icon or avatar is no longer nested within the hyperlink tag. Clicking the icon or avatar doesn’t navigate to the hyperlink. This behaviour is consistent with a lightning:pill component that’s rendered without lightning:pillContainer.

The bare variant no longer renders pills in an unordered list element. However, the standard and bare variants are visually the same. The bare variant provides a focusable remove button on each pill. Tab to focus on the pill, and tab again to focus on the remove button.