Changed Aura Components

Build UI easily with these changed components.

Components that support icons use a right-to-left (RTL) version of an icon when you set your personal Salesforce language setting to an RTL language such as Arabic, Hebrew, or Urdu. Only icons that imply a reading direction have an RTL version.

  • lightning:avatar
  • lightning:button
  • lightning:buttonIcon
  • lightning:buttonMenu
  • lightning:buttonIconStateful
  • lightning:buttonStateful
  • lightning:card
  • lightning:dualListbox
  • lightning:helptext
  • lightning:icon
  • lightning:menuItem
  • lightning:pill
  • lightning:tab
  • lightning:verticalNavigationItemIcon
force:recordEdit
On desktop, the Image button on the rich text editor now opens the Select Image dialog, which enables you to select an image available in your Files Home. You can also upload an image from the Select Image dialog. Selecting an image is not supported in Lightning Out and standalone apps. To display a record form with a rich text editor that uses the system file selector, use lightning:recordEditForm instead. On mobile devices, the rich text editor continues to use the native file selector.
lightning:buttonIcon
The following attribute is new.
  • tooltip—Text to display when the user mouses over or focuses on the button. The tooltip is auto-positioned relative to the button and screen space.
lightning:buttonMenu
The following attribute is new.
  • tooltip—Text to display when the user mouses over or focuses on the button. The tooltip is auto-positioned relative to the button and screen space.
lightning:checkboxGroup
The following attribute is new.
  • variant—The variant changes the appearance of the checkbox group. Accepted variants include standard, label-hidden, label-inline, and label-stacked. The default is standard. Use label-hidden to hide the label but make it available to assistive technology. Use label-inline to horizontally align the label and checkbox group. Use label-stacked to place the label above the checkbox group. Use these variants instead of the slds-form-element_horizontal or slds-form-element_stacked Lightning Design System classes.
lightning:combobox
The following attribute has changed.
  • variant—The label-inline and label-stacked variants have been added. Use label-inline to horizontally align the label and combobox. Use label-stacked to place the label above the combobox. Use these variants instead of the slds-form-element_horizontal or slds-form-element_stacked Lightning Design System classes.
lightning:datatable
The following types have changed.
  • date—The hour12 attribute is determined by the user’s locale. To display time in a 12-hour format, use typeAttributes: { hour12: true } in the column definition.
  • url—Links now open in a new tab by default. To open a link in the current tab or window, use typeAttributes: { target: '_self' } in the column definition.
lightning:dualListbox
The following attribute has changed.
  • variant—The label-inline and label-stacked variants have been added. Use label-inline to horizontally align the label and dual listbox. Use label-stacked to place the label above the dual listbox. Use these variants instead of the slds-form-element_horizontal or slds-form-element_stacked Lightning Design System classes.
lightning:icon
The following attribute has changed.
  • variant—The success variant has been added. Use the success variant to change the fill of an icon to green.
lightning:input
The following attributes are new.
  • dateStyle—The display style of the date when type='date' or type='datetime'. Valid values are short, medium, and long. The default value is medium. The format of each style is specific to the locale. This attribute has no effect on mobile devices.

    Dates are displayed by default in a medium-length style, such as Jan 7, 2019 in the en-US locale. To specify a short style such as 01/07/2019, set dateStyle="short". To specify a long style such as January 7, 2019, set dateStyle="long".

    If a user enters a date using a different style, the component accepts the input and reformats it to the specified dateStyle during the blur event. The date entered must be valid for the user's Salesforce locale, and match one of the short, medium, or long styles.

  • timeStyle—The display style of the time when type='time' or type='datetime'. Valid values are short, medium, and long. The default value is short. The medium and long styles currently have the same formatting.

    Times are displayed by default in a short style, such as 6:53 PM in the en-US locale. To specify a style to include seconds such as 6:53:33 PM, set timeStyle="medium" or timeStyle="long".

  • autocomplete—Controls autofilling of the field. This attribute is supported for email, search, tel, text, and url input types. The values on and off are supported, but the autofill behavior depends on the browser. When you set the autocomplete attribute, the lightning:input component passes the value through to be interpreted by the browser.
The following attribute has changed.
  • variant—The label-inline and label-stacked variants have been added. Use label-inline to horizontally align the label and input fields. Use label-stacked to place the label above the input fields. Use these variants instead of the slds-form-element_horizontal or slds-form-element_stacked Lightning Design System classes.
lightning:inputAddress
The following attribute has changed.
  • variant—The label-inline and label-stacked variants have been added. Use label-inline to horizontally align the label and address fields. Use label-stacked to place the label above the address fields. Use these variants instead of the slds-form-element_horizontal or slds-form-element_stacked Lightning Design System classes.
lightning:inputField
The following method is new.
  • reset()—Resets the form fields to their initial values.
The following attribute has changed.
  • class—The slds-form-element_1-col class is now supported. Use this Lightning Design System class when your parent form uses a compact density and you want to reduce the 33/66% distribution of the label and input field.
lightning:inputLocation
The following attribute has changed.
  • variant—The label-inline and label-stacked variants have been added. Use label-inline to horizontally align the label and geolocation fields. Use label-stacked to place the label above the geolocation fields. Use these variants instead of the slds-form-element_horizontal or slds-form-element_stacked Lightning Design System classes.
lightning:inputName
The following attribute has changed.
  • variant—The label-inline and label-stacked variants have been added. Use label-inline to horizontally align the label and name fields. Use label-stacked to place the label above the name fields. Use these variants instead of the slds-form-element_horizontal or slds-form-element_stacked Lightning Design System classes.
lightning:inputRichText
Strikethrough text now uses the <strike> tag instead of the <s> tag to support updating of rich text fields in Lightning Experience, Salesforce Classic, and the Salesforce app.
The following methods are new.
  • getFormat—Returns an object representing the formats of the currently selected content. Valid formats are font, size, and align.
  • setFormat(formats)—Sets a format in the editor from the cursor point onward. The format also applies to currently selected content. Valid formats are font, size, and align. formats is an array of key-value pairs with a format name and value.
lightning:map
lightning:map loads content from the Salesforce domain maps.a.forceusercontent.com in an iframe. You must whitelist maps.a.forceusercontent.com if you want to use this component in your own domain and you use the Content Security Policy frame-src directive, such as in Lightning Communities or Lightning Out.
The following attribute is new.
  • listView—Displays or hides the list of locations. Valid values are visible, hidden, or auto. The default is auto, which shows the list only when multiple markers are present. Passing in an invalid value hides the list view.
lightning:navigation
Several enhancements for Lightning Communities have been added for the pageReference object.
  • Added state property support.
  • The Named Page type standard__namedPage is deprecated in communities. Use comm__namedPage for communities references.
  • Added Login to the supported pages for Communities.
lightning:outputField
The following attribute has changed.
  • class—The slds-form-element_1-col class is now supported. Use this Lightning Design System class when your parent form uses a compact density and you want to reduce the 33/66% distribution of the label and output field.
lightning:radioGroup
The following attribute is new.
  • variant—The variant changes the appearance of the radio group. Accepted variants include standard, label-hidden, label-inline, and label-stacked. The default is standard. Use label-hidden to hide the label but make it available to assistive technology. Use label-inline to horizontally align the label and radio group. Use label-stacked to place the label above the radio group. Use these variants instead of the slds-form-element_horizontal or slds-form-element_stacked Lightning Design System classes.
lightning:recordEditForm
The following attribute is new.
  • density—Sets the arrangement style of fields and labels in the form. Accepted values are compact, comfy, and auto. The default is auto, which lets the component dynamically set the density according to the user’s Display Density setting and the width of the form. Use compact to display fields and their labels on the same line. Use comfy to display fields stacked below their labels.
The following event handler has changed.
  • onerror—You can now return the error details when a required field is missing using event.getParam("output").fieldErrors. To display the error message automatically on the form, include lightning:messages immediately before or after the lightning:inputField components.
Other changes include:
  • In view mode, edit icons appear only on editable fields. Previously, edit icons appeared on all fields. Editable fields are fields that are marked updateable in the User Interface API. The edit icon on an editable field is grayed out until you hover over it.
  • Encrypted fields are now masked only after the field is saved.
  • When using the fields attribute, lightning:messages displays an error message about missing required fields if you don’t include them.
lightning:recordForm
The following attribute is new.
  • density—Sets the arrangement style of fields and labels in the form. Accepted values are compact, comfy, and auto. The default is auto, which lets the component dynamically set the density according to the user’s Display Density setting and the width of the form. Use compact to display fields and their labels on the same line. Use comfy to display fields stacked below their labels.
The following event handler has changed.
  • onerror—You can now return the error details when a required field is missing using event.getParam("output").fieldErrors. To display the error message automatically on the form, include lightning:messages immediately before or after the lightning:inputField components.
Other changes include:
  • In view mode, edit icons appear only on editable fields. Previously, edit icons appeared on all fields. Editable fields are fields that are marked updateable in the User Interface API. The edit icon on an editable field is grayed out until you hover over it.
  • Encrypted fields are now masked only after the field is saved.
  • When using the fields attribute, lightning:messages displays an error message about missing required fields if you don’t include them.
lightning:recordViewForm
The following attribute is new.
  • density—Sets the arrangement style of fields and labels in the form. Accepted values are compact, comfy, and auto. The default is auto, which lets the component dynamically set the density according to the user’s Display Density setting and the width of the form. Use compact to display fields and their labels on the same line. Use comfy to display fields stacked below their labels.
lightning:textarea
The following attribute has changed.
  • variant—The label-inline and label-stacked variants have been added. Use label-inline to horizontally align the label and textarea field. Use label-stacked to place the label above the textarea field. Use these variants instead of the slds-form-element_horizontal or slds-form-element_stacked Lightning Design System classes.