Avonni Components Documentation

Release Notes

We're continually improving Avonni Components. The following changes are listed by the date the package version has been released.

Release 1.5.1 - October 12, 2022

Features

Alert

Added attribute icon-size.
Added styling hook for horizontal content alignment.

Barcode

Created the component.

Color Picker

Added hide-clear-icon attribute.

Fixes

Avatar

Fixed the size of the fallback icon for x-large and xx-large sizes.
Fixed the --avonni-avatar-radius-border styling hook.

Calendar

Added validation for date-labels.

Combobox

Fixed the removal and reordering of vertical selected options.
Fixed the error message not appearing when removing an option from a required multi-select combobox.

Expandable Section

Fixed issue with styling hooks when collapsible:
- --avonni-expandable-section-base-header-color-background
- --avonni-expandable-section-shaded-header-color-background

Input Pen

Fixed header styling hooks.

Input Toggle

Prevented an error with Lightning Locker when implemented in Salesforce.

List

Prevented the list from overflowing its parent horizontally.

Tab Bar

Fixed the update of any property after the component has been inserted into the DOM.

Vertical Visual Picker

Fixed background and border styling hooks.
Fixed figure styling hooks.

Release 1.5.0 - October 6, 2022

Breaking Changes

Carousel

The current-panel attribute now takes the name of an item, instead of its index.

Combobox

Merged border and border-radius styling hooks into two shorthands.
- Removed:
  - --avonni-combobox-input-radius-border-bottom-left
  - --avonni-combobox-input-radius-border-bottom-right
  - --avonni-combobox-input-radius-border-top-left
  - --avonni-combobox-input-radius-border-top-right
  - --avonni-combobox-input-sizing-border-bottom
  - --avonni-combobox-input-sizing-border-top
  - --avonni-combobox-input-sizing-border-left
  - --avonni-combobox-input-sizing-border-right
- Added:
  - --avonni-combobox-input-radius-border
  - --avonni-combobox-input-sizing-border

Datatable

The color type attribute has been deprecated for the progress-circle type.

List

The image-width attribute has been deprecated. Use the key width in the image-attributes object instead.

Progress Circle

The color attribute has been deprecated and replaced by the --avonni-progress-circle-bar-color styling hook.

Tree

Standardized the default action names, to follow the format Standard.Tree.ActionName. For example, edit has been renamed to Standard.Tree.Edit.

Features

Activity Timeline

Added formatted date, description and actions to items popover, when the orientation is horizontal.

Alert

Added border styling hooks:
- --avonni-alert-color-border
- --avonni-alert-sizing-border
- --avonni-alert-styling-border

Color Picker

Added a loading spinner if the color palette is loading when the dropdown is opened.

Implemented customization of the primary button:
- Added primary-button-icon-name, primary-button-icon-size, primary-button-icon-position and primary-button-variant attributes.
- Added primarybuttonclick event.
Implemented customization of the secondary button:
- Added secondary-button-icon-name, secondary-button-icon-size, secondary-button-icon-position and secondary-button-variant attributes.
- Added secondarybuttonclick event.
Implemented background and image customization.
- Added image-layout and image-position attributes.
Added 122 new styling hooks.

Icon Picker

Added hide-clear-icon attribute.

Input Date Range

Fixed selected time zone not being properly added to the dates when the user's locale is not English.

Input Pen

Added color swatches to the color picker.
Added support for touch and small screens.

List

Implemented infinite scrolling:
- Added the enable-infinite-scrolling and load-more-offset attributes.
- Added the loadmore event.
Implemented columns, allowing for a grid-like display:
- Added the cols attribute.
- Added the small-container-cols attribute.
- Added the medium-container-cols attribute.
- Added the large-container-cols attribute.
Added the image-attributes attribute.
Added the media-actions attribute.
Added the variant attribute, allowing for a single-line display.
Added spacing styling hooks.

Progress Circle

Added styling hooks for the value:
- --avonni-progress-circle-value-text-color
- --avonni-progress-circle-value-font-style
- --avonni-progress-circle-value-font-weight

Fixes

Activity Timeline

Fixed an error with the interval width when scrolling horizontally, in the horizontal orientation.
Added a checked key to the items, to allow for pre-checked items.

Avatar

Fixed issue with entity icon name when icon name included a _.
Added action-menu-icon as a default value for action items with no icon.

Avatar Group

Fixed issue with avatarclick event.
Fixed issue with avatar details in the "show more" popover.
Fixed issue with dropdown menu.

Carousel

Fixed issues with indicators styling hooks.
Stopped the propagation of the click event, on click on an action.

Datatable

Normalized progress bar and progress circle values to be between 0 and 1.
Allowed for either a source or a fallbackIconName type attribute to be provided for the avatar type.

Dual Listbox

Fixed options movement when using Lightning Locker on the Salesforce platform.

Used button icons instead of buttons when there are only icons.

Icon Picker

Removed the fixed width of 17rem. The icon picker width will now adapt to its parent.

Input Counter

Prevented the normalization of a null min or max into a 0.

Input Pen

Fixed ink mode cursor not appearing.
Fixed error when the component had no height.

Pill Container

Fixed error on action click, when using Lightning Locker on the Salesforce platform.

Progress Indicator

Fixed overflow issue.

Separator

Fixed issue with separators growing full width.

Slider

Fixed the height of the responsive slider to take into account the unit and label in the calculation.
Fixed the maximum value to 1 when the unit is percent.

Visual Picker

Fixed issue with radio type picker.

Release 1.4.2 - September 1, 2022

Breaking Changes

Renamed --avonni-hero-banner-secondary-buttont-text-color to --avonni-hero-banner-secondary-button-text-color.

Input Pen

Default pen size is now 10px instead of 2px.

Metric

Removed the default value of 0 for the value attribute. The value attribute is not required anymore.
A null value passed to value or secondary-value will not be normalized to 0 anymore.

Changed size attribute to avatarSize.

Tree

Renamed --avonni-tree-item-text-color-header to --avonni-tree-item-header-text-color.
Renamed --avonni-tree-item-text-color-header-disabled to --avonni-tree-item-header-text-color-disabled.
Renamed --avonni-tree-item-text-color-metatext to --avonni-tree-item-metatext-text-color.
Renamed --avonni-tree-item-text-color-metatext-disabled to --avonni-tree-item-metatext-text-color-disabled.

Features

Activity Timeline

Added support for the itemclick event in the vertical orientation.

Input Pen

Added show-signature-pad property to display a signature line.
Added a paintbrush tool.
Added an ink pen tool that draws smooth lines and varies stroke width depending on velocity.
Added a background color fill option.
Added a button to download the canvas as a PNG file.
Added undo/redo buttons and corresponding keyboard shortcuts:
- On Windows: Ctrl + Z & Ctrl + Y.
- On Mac: ⌘ Cmd + Z & ⌘ Cmd + ⇧ Shift + Z.
Moved the clear button to the top right of the canvas and changed its icon.

List

Added the getItemPosition() method, used to retrieve the size of an item and its position in the viewport.

Fixes

Activity Timeline

Fixed the firing of the itemclick event in a grouped timeline.
In the horizontal orientation:
- Improved performance.
- Fixed an issue displaying icons.
- Changed the size of action icons.
- Improved date validation to prevent adding items with invalid dates.
- If there is no item with valid date, an empty timeline is displayed.
- Made icons compatible with the Salesforce platform.
- Fixed position offset due to difference in hours.

Avatar Group

Fixed the display of Primary Text, Secondary Text, Tags and Tertiary Text in the Show more section.

Calendar

Fixed error when an invalid date is passed to min or max. The default min and max values will be used instead.
Fixed the interval display when the component is used on the Salesforce platform.
Implemented support of string dates in date-labels.
Blocked the number of markers displayed on a single date to a maximum of three.
Fixed year combobox being overflown by other elements.

Combobox

Prevented the dropdown content from being inserted in the DOM, unless the combobox is opened.
Fixed the scroll position not being reset when the combobox level changes.

Date Time Picker

Added support for ISO8601 dates in disabled-date-times.

Dual Listbox

Stopped the propagation of the search engine change event.
Fixed an error when the value is a string.

Stopped the propagation of the search engine change event.

Input Date Range

Updated the change event to return valid ISO8601 strings as startDate or endDate values.
Prevented the change event keys from containing time strings with no date.
Prevented null from being used as a valid date in start-date and end-date.
Added the possibility to clear the date inputs with the keyboard.

Input Pen

Fixed validity reporting issue.

Slider

Set any invalid property to its default value.

Wizard

Fixed the indicator display on small screens. The wizard will now default to a bar indicator if the available space is smaller than 480 pixels.

New Styling Hooks

Avatar Group

--avonni-avatar-group-avatar-stack-styling-border

Color Picker

--avonni-color-picker-label-text-color
--avonni-color-picker-label-font-size
--avonni-color-picker-label-font-style
--avonni-color-picker-label-font-weight

Date Time Picker

--avonni-date-time-picker-label-text-color
--avonni-date-time-picker-label-font-size
--avonni-date-time-picker-label-font-weight
--avonni-date-time-picker-label-font-style

Icon Picker

--avonni-icon-picker-label-text-color
--avonni-icon-picker-label-font-size
--avonni-icon-picker-label-font-weight
--avonni-icon-picker-label-font-style

Illustration

--avonni-illustration-title-text-color
--avonni-illustration-title-font-size
--avonni-illustration-title-font-weight
--avonni-illustration-title-font-style

Metric

--avonni-metric-description-font-style
--avonni-metric-label-font-style
--avonni-metric-prefix-font-style
--avonni-metric-secondary-prefix-font-style
--avonni-metric-secondary-suffix-font-size
--avonni-metric-secondary-value-font-style
--avonni-metric-suffix-font-style
--avonni-metric-value-font-style

Pill Container

--avonni-pill-color-background-hover

Tree

--avonni-tree-header-font-style
--avonni-tree-item-header-text-font-size
--avonni-tree-item-header-text-font-style
--avonni-tree-item-header-text-font-weight

Release 1.4.1 - August 5, 2022

Features

Calendar

Added hide-header attribute.
Added navigation methods nextMonth, previousMonth and goToDate(date).

Fixes

Activity Timeline

Fixed the dragging and resizing of the time interval in the horizontal variant.

Removed the duplicated actions slot. It caused problems when the slot contained conditional declarations.

Tree

Clear selection when selected-items is passed an empty value.

Wizard

Only display header if title, title slot or icon name are present.

Release 1.4.0 - July 13, 2022

Breaking Changes

Scheduler

The toolbar-time-spans attribute is deprecated. The time-spans attribute replaces toolbar-time-spans.
The time-span attribute is deprecated. The selected-time-span attribute replaces time-span.
The custom-headers attribute is deprecated. Custom headers are now set in each time span object.
The headers attribute is deprecated. Headers are now set in each time span object.
The resources-key-field attribute is deprecated. The key field is always name: all resource objects must now have a name key.

New Components

Metric

Created new Metric component.

Slider

Created new Slider component.

Card

Created new Card component.

Features

Activity Timeline

Added option to specify a datetime format.
Added orientation attribute to enable a new horizontal view.

Avatar Group

Added name property to identify avatars.
Added name parameter to avatarclick event.
Added targetName parameter to avataractionclick event.

Combobox

Added the sortable-selected-options-icon-name attribute.

Chip Container

Added option to generate chips from a list of items.
Added option to display either an avatar or icon as media (left or right).
Added option to change media size.
Added is-collapsible and is-expanded attributes.

List

Added name to list item. The name is returned when the item is clicked.

Pill Container

Added name to pill container items.

Progress Indicator

Added value as detail to each events.

Scheduler

Added timespanselect event.

Fixes

Avatar Group

Fixed initials background color.
Removed extra border around avatars.
Fixed focus management in show more section.

Calendar

Fixed the setting of value outside of min/max.

Carousel

Corrected display of multiple items per panel.
Converted bare and border action variants to menu variant on small and large mobile devices.

Input Choice Set

Prevented the deselection of an option when the input is not multi-select and the type is button.

Scheduler

Fixed the timeline headers not being narrowed when the visible time span changed.
Fixed the "Previous" button of the toolbar blocking the navigation when the immediate previous time was unavailable. The "Previous" button now goes to the previous available time.

New Styling Hooks

Carousel

--avonni-carousel-item-image-background
--avonni-carousel-item-image-sizing-height

Release 1.3.1 - June 13, 2022

Breaking Changes

Timer

Value attribute is now given in milliseconds instead of seconds.
Duration caps at 24 hours.

Features

Set focus on first item when opening menu.
Added keyboard navigation (up and down) to focus items.

Calendar

Added keyboard accessibility support for calendar.
Added clickedDate parameter to change event.
Added focusDate method to set the focused date.
Matched accessibility behavior to the calendar in the date type lightning-input.

Color Picker

Improved keyboard accessibility by trapping the focus inside the picker menu.

Combobox

Added resetLevel method.

Scheduler

Added variant attibute.
Added vertical variant. Previous view is now the horizontal variant.
Added zoom-to-fit attribute.

Rating

Added required attribute.

Timer

Added two new display formats: "mm:ss.ms" & "ss.ms".

Tree

Added previousLevelPath to the change event, to identify the previous position of the item when the action is move.

Fixes

Alert

Fixed is-dismissible being true by default.

Avatar

Improved text truncation in the avatar.

Input Date Range

Fixed focus management and keyboard date selection.

Range

Fixed visual wobble on range change.
Fixed thumb overlap if two inputs have the same value.

Scheduler

Fixed the resizing of a full day event.

Timer

Fixed the pause button.
Fixed the countdown type timer.
Fixed reset method.
Fixed the repeat attribute.

Tree

Fixed the indentation removal when an item was sorted.
Fixed the inline editing: the last character entered is now saved when clicking on the check button.
Fixed the action menu of nested items being overlayed by the next items.

New Styling Hooks

Calendar

--avonni-calendar-week-label-font-size
--avonni-calendar-week-label-font-weight
--avonni-calendar-week-label-text-color
--avonni-calendar-weekdays-text-color

Release 1.3.0 - May 20, 2022

Breaking Changes

Carousel

Renamed the item's id to name

Scheduler

To simplify the navigation, we removed the infinite scroll and replaced it by a toolbar visible by default.
- Added the hide-toolbar attribute.
- Added the toolbar-time-spans attribute.
- If the selected time span is one of the toolbar time spans, and the start date is in the middle of the time span's unit, the scheduler will no longer end in the middle of the unit. The end of the time span will automatically be adjusted at the end of the time span unit. The previous behaviour still applies to cases where the time span is not one of the toolbar time spans, or when the toolbar is hidden.
Changed the default time span to be one day, instead of 12 hours.

Features

Activity Timeline

Added icon-size and item-icon-size attributes to customize size of icons
Added an option to set a maximum of visible items to display and show more / show less button

Avatar

Replaced lightning badges with avonni chips
Added auto truncation of the avatar's details

Calendar

Added the focus() public method

Added the name attribute

Icon Picker

Added the focus() public method
Hidden categories are no longer displayed in tabs or in tabs popover

Scheduler

Added the goToDate() public method

Fixes

Calendar

Fixed issue of setting 'Sun' in disabled dates

Color Gradient

The color picker indicator is now draggable
Fixed the hue slider position when the selected color is in the corner of the gradient

Combobox

Removed the "remove" action on selected options when the combobox is disabled.

Date Time Picker

Fixed the clearing of the displayed value when an empty value is passed to the component

Updated the events, so the value returned is always an array when the selection is multiple, and always a string (or null) if the selection is single.

Dual List Box

Fixed issue with disabled lists and list height
Changed default size to responsive

Changed the width of the centered example
Renamed the centered example

Icon Picker

Fixed action button sizing overflow

Input Counter

'-' and '+' now scale relative to top of input rather than height of element, which was bigger when a help message was shown

Actions now appear on small and large mobile devices for base, object home and record home variants

Rating

Reversed the order of displayed ratings

Splitter

Small input containers not longer clip text and overflow is hidden
Fixed console error message on collapsing
Basic horizontal example fixed to work on small mobile devices (by using %)

Release 1.2.6 - May 5, 2022

Features

List

Added support for richtext to list items

Datatable

Changed Lightning badges to Avonni Chip

Fixes

Activity Timeline, Color Palette, Color Picker, Input Choice Set, Output Data, Path, Relationship Graph and Tree

Fixed the update of specific properties after the component insertion into the DOM, when used on the Salesforce platform.

Datatable

Fixed issue with state when editing cell in datatable
Set edit panel position to absolute

Expandable Section

Made the toggle icon smaller

Input Rich Text

Fixed variant update after the input value has been changed by the user.

Tree

Fixed issue with level and spacing

New Styling Hooks

Expandable Section

--avonni-expandable-section-base-header-text-color-focus
--avonni-expandable-section-base-header-text-color-hover
--avonni-expandable-section-base-header-text-decoration-focus
--avonni-expandable-section-shaded-header-text-color-focus
--avonni-expandable-section-shaded-header-text-color-hover
--avonni-expandable-section-shaded-header-text-decoration-focus
--avonni-expandable-section-base-header-icon-color-foreground-default-hover
--avonni-expandable-section-base-header-icon-color-foreground-default-focus
--avonni-expandable-section-shaded-header-icon-color-foreground-default-hover
--avonni-expandable-section-shaded-header-icon-color-foreground-default-focus

Release 1.2.5 - Apr 21, 2022

Features

Input Choice Set

Added is-loading attribute

Fixes

Combobox

Fixed selected-options-direction with vertical value

Datatable

Fixed issue with hideDefaultActions and wrapText column attributes

Visual Picker

Fixed display issues and responsiveness of middle image

Release 1.2.4 - Apr 11, 2022

Fixes

Calendar

Included time zone in calendar's change event value

Combobox

If new options are set after a levelchange event, the combobox will stay open and display the updated options for the level picked.

Input Date Range

Fixed wrong date selection depending on the time zone

Visual Picker

Improved image display

Release 1.2.3 - Apr 5, 2022

Features

Activity Timeline

Added new default display mode where a bullet replaces omitted icons

Avatar

Added optional action button or action menu to the avatar

Added a hide-down-arrow option to display an icon without a down arrow

Calendar

Added labels with icons under dates

Combobox

Added back-action attribute
Added isLoading key to option objects
Added levelchange and backactionclick events

Tree

Added blur() and focus() methods

Visual Picker

Added validation for checked input

Fixes

Calendar

The change event value is an ISO formatted string if the selection mode is single, or an array of ISO formatted strings otherwise.

Color Palette

Show the color label on hover, in the list variant

Combobox

Fixed dropdown not overlapping content
Fixed systematic bad input error when options are nested more than one level
Fixed selected options update, when the value is changed after the component first insertion into the DOM