New and Changed Lightning Web Components

Build UI easily with these new and changed components.

Changed Lightning Web Components

The following components have changed.

lightning-badge
The following attributes are now supported.
  • icon-alternative-text—The alternative text used to describe the icon, which is displayed as tooltip text.
  • icon-name—The Lightning Design System name of the icon to display inside the badge. Specify the name in the format utility:down where utility is the category, and down is the specific icon to be displayed.
  • icon-position—The position for the icon inside the badge. Specify the value start to display the icon before the text or end to display it after the text. The default is start.
lightning-breadcrumb
The following methods are now supported.
  • blur()—Removes focus on the link.
  • focus()—Sets focus on the link.
lightning-datatable
Columns with the text data type have changed.
  • The Clip text action now shows only the truncated text of the first line. Previously, when content contained newline characters, the table displayed truncated text for each new line. The Wrap text action no longer preserves extra whitespace in the content, and breaks lines and hyphenates words as needed to fit the column.
  • Boolean values now display either “true” or “false”. Previously, a column with the text data type displayed an empty column for boolean values. We recommend that you use the boolean data type to display the utility:check icon for a field that returns true.
  • Currency values now display as an unformatted number. Previously, a column with the text data type displayed an empty column for currency values. We recommend that you use the currency data type to format your currency values correctly.
The following attribute is new.
  • column-widths-mode—Specifies how column widths are calculated. Set to fixed for columns with equal widths. Set to auto for column widths based on the width of the column content and the table width. The default is fixed.
The following property for the columns attribute is new.
  • hideDefaultActions—Specifies whether the default header actions are available on a column. The default is false.
lightning-file-upload
The following attributes are new.
  • file-field-name—Specifies the API name of a custom field on the ContentVersion object that can be used to enable guest users to upload files to a record.
  • file-field-value—Specifies a value for the custom field defined by file-field-name.
lightning-input
The input type color has changed.
  • The commit event is supported.
The input type number has changed.
  • Shortcuts k, K, m, M, b, B, t, and T are allowed. For example, in the en-US locale, when you enter 1k the field displays 1,000. Entering 1m results in 1,000,000. When the input field is focused, it displays the multiplied number. For example, entering 1k results in 1,000 on blur, and 1000 when the input is focused again. You can’t use these shortcuts when programmatically assigning input values to the value attribute.
The input types date and datetime have changed.
  • On the current month view of the date picker, you can now select a date from the previous and next month. Previously, dates from the previous and next month were disabled on the current month view unless you navigated directly to those months.
  • When you specify min and max values, users can still select a date outside of the min and max range. However, the blur event triggers the field to display a validation error message.
  • The names for months and weekdays in the date picker now use your Salesforce language setting. Previously, these names used your locale setting.
lightning-input-address
The default placeholder values have been removed because they duplicate the field labels and were not helpful for screen readers. Adding a placeholder value on address compound fields is currently not supported.
lightning-input-field
Lookup fields are now supported in the Salesforce mobile app. When using the mobile app, users can do a lookup search for a supported object. The mobile lookup doesn't support creating a new record from the lookup field's dropdown menu.
Name fields now support the Middle Name and Suffix fields on contact, lead, and user records. To display the complete name compound field, specify field-name="Name". Alternatively, display the fields individually by using a separate lightning-input-field component for each field. Pass in FirstName, MiddleName, or LastName to the field-name attribute for each component.
Note

Note

To enable the Middle Name and Suffix fields, from Setup enter User Interface in the Quick Find box, then select User Interface. In Lightning Experience, the User Interface page is the last item under the User Interface node. On the User Interface page, select Enable Middle Names for Person Names and Enable Name Suffixes for Person Names.

The field data types date and datetime have changed.
  • On the current month view of the date picker, you can now select a date from the previous and next month. Previously, dates from the previous and next month were disabled on the current month view unless you navigated directly to those months.
  • The names for months and weekdays in the date picker now use your Salesforce language setting. Previously, these names used your locale setting.
The name field type has changed.
  • The suffix constituent field is now supported. To enable this field, from Setup enter User Interface in the Quick Find box, then select User Interface. In Lightning Experience, the User Interface page is the last item under the User Interface node. On the User Interface page, select Enable Name Suffixes for Person Names.
lightning-map
The following attribute has changed.
  • map-markers—HTML tags you include in the title property are displayed as unescaped markup in the location list and info window. A subset of HTML tags are supported for use with the description property. The tags are: b, br, del, em, h1-h6, i, ins, mark, p, small, strong, sub, and sup.
lightning-tabset
The following method is new.
  • focus—Apply focus on the tab that’s currently selected.
lightning-tree-grid
The following types are now supported for the first data column in the table.
  • button—Displays a button using lightning-button.
  • button-icon—Displays a button icon using lightning-button-icon.