What's New in Elentra JS 1.3?

Overview

Elentra JS 1.3 is an incremental update that adds many quality of life improvements for Elentra JS that have often been requested by members of the Elentra Consortium.

This update is not intended to bridge the gap between versions 1.2 and the newly released 2.0 (included in Elentra ME 1.16 for purposes of socializing its codebase and concepts). Rather, it is a series of enhancements to some of the more commonly used components in the EJS Component Library, meant to streamline their use and improve the quality of both the user and developer experiences.

Change Log

EJS-48: Non-collapsible EjsAlerts can now enable a content area

Previously, the only way to have a content area for an EjsAlert was to enable the collapsible prop by passing true. With these changes, the content area will now be shown when an EjsAlert's content slot is passed a value, even if the collapsible prop is not enabled.

EJS-50: EjsAlerts now have an optional prop that allows dismissal

EjsAlerts now have an additional, optional prop, dismissible. When set to true, a circular "X" button will appear in the top right of the EjsAlert panel, and it will hide the entire component when clicked. The button is circular and matches the styling of the existing More/Less button that is displayed when collapsible is true.

EJS-93: EjsSwitchToggle now has two optional icon labels

EjsSwitchToggles now have four optional label props (icon and text labels, one each for both the on and off toggle states). If a true or false icon prop value is provided, it will override the equivalent text label on that toggle, if both have values.

EJS-98: EjsTooltips now dismiss more reliably

EjsTooltips had some reliability issues in previous versions of Elentra JS. Clicking on a tooltip itself would trigger parent action click events, and would sometimes be difficult to dismiss even when hovering off of the element that the tooltip was for. Elentra JS 1.3 updates the EjsTooltip component so that when the cursor stops hovering the target element, the tooltip will always disappear, even if the cursor starts hovering over the tooltip itself.

EJS-39: Fixed Default/Disabled buttons appearing larger in EjsButtonGroups

Previously, when an EjsButtonGroup was wrapped around multiple EjsButtons, any buttons of type default or disabled were displaying slightly taller by a couple of pixels. All EjsButtons in a grouping are now the same height, and should align properly.

EJS-40: EjsButtonGroups in an EjsCard footer no longer have erroneous gaps

Previously, if an EjsButtonGroup was placed in the footer of an EjsCard, unsightly gaps would appear between the grouped buttons. This update remedies this issue.

EJS-180: EjsButtonGroups now have an optional prop for a vertical mode

Passing true to the new, optional prop, vertical, will create a vertically stacked EjsButtonGroup that is similarly styled.

EJS-218: Clicking off of an open EjsSelect causes a blur event that hides options

This is a heavily requested improvement! Previously, clicking outside of an open EjsSelect did not hide or close the window containing the options. Now, when any EjsSelect is open and displaying its options, clicking outside or off of EjsSelect component itself will close / hide the list of options, instead of needing to be manually closed by selecting an option, or by clicking on the same button that opened it. This behaviour can be disabled if needed, by passing false to the prop closeOnBlur.

EJS-219: EjsSingleLineInput now causes a blur event to be emitted

Any EjsSingleLineInput will fire the @blur event which is emitted upwards. This will allow any EjsInput to similarly listen for the child component's @blur event, and respond to it as needed.

EJS-220: EjsModal now has an optional prop to allow modal close on blur

Previously, EjsModals had no way to be closed through an @blur event. Now, if true is passed to the optional prop, closeOnBlur, clicking off of the body of an open modal (anywhere on the dimmer overlay / modal backdrop) will dismiss the modal.

EJS-221: EjsCards now have an optional "expanded by default" prop

Previously, if an EjsCard was set to be collapsible (:contentToggle="true"), when the component loaded, the content was hidden as EjsCards always rendered in their collapsed state. Now, if a developer wants an EjsCard to be collapsible, but open/expanded by default upon initial load, they can pass true to the prop defaultOpen.