Suggest Input component: our brand new Suggest Input component is an enhanced version of our text input. It displays suggestions from a list as the user types — similarly how search engines across the internet auto-complete your sentences. This component is really useful when we want to help the user enter a value that already exists in a list, but also want to give them the ability to use a new value that doesn't exist in that list.
Popup utility: the Popup utility helps in the creation of custom popover panels. Before this, only certain components had the ability to display popover panels, but now it's a lot easier to give this functionality to UI elements.
Enhancements
Notification components with the type attribute can be implemented in an alternative style, which looks better on light-gray backgrounds than the regular Notifications.
Notification components now can remember their closed state even if they were closed through methods other than the close button.
Using our brand new Truncate component, it's super easy to cut long words and sentences into a shorter form. Just set how many characters you want to display, and the Truncate component will do the dirty work. You can also set how many characters you want to preserve from the end of the long word, in case you want to cut out the middle.
This functionality is super helpful when you have to design with user generated content, where you cannot be exactly sure how long values will be.
We've expanded the search functionality in our Datagrid component. You can now search for multiple keywords, and also use quotation marks to search for exact matches. You can check it out in action on the documentation page
With the new Duration utility, there's now an easy way to format a duration in seconds in a human readable way. Previously this functionality was only available in the Datagrid component. Learn more about this utility on its documentation page
We've introduced a standalone Time Picker component! Up until now, this handy input was only available as part of the date-time picker - but now, it can be used on its own, giving our users the power to select hours and minutes easily. Learn more about this component on its documentation page
The new Notification component merges our old Notice and Alert components into one neat, flexible web component! This new component can be used in a myriad of different ways: for displaying useful heads-ups inside the page, or floating an error message over the whole layout. You can check out this new component at the design system website
Just a while ago, we've gone public with our Emarsys redesign. This was the first major design iteration on the Emarsys UI in more than 4 years, and so far we've received incredibly positive feedback from both our customers and our colleagues! There are so many things this redesign contains, including:
A new vertical navigation sidebar with overhauled information architecture.
An improved look and feel that brings the Emarsys UI closer to the Emarsys brand with fresh colours and typography.
Please welcome our new family of components: e-upgrade. The various Upgrade components can help teams introduce upgrade opportunities for our beloved customers, to boost the capabilities of the Emarsys products they use.
New Components:
Upgrade components
Layout component, back button in page title
New Utilities:
CSS Utility Classes: border utilities added
Translation: you can get translations for your product via the suite
New Features:
The empty state of action list can now be customized
Select now has a loading state
Numeric component can auto-trim values (i.e. ditching unnecessary zeroes from the end of the value)
You know how the saying goes: "pepper is small, but strong". This update is just like pepper.
e-actionlist: you can now hide the search field with the search-hidden attribute.
trackEvent(): implement analytics using our new trackEvent() JS utility. Read more about it in [Utility / Tracking](/utilities/functions/tracking.
CSS Border utility classes: add borders to your components with ease. Find out more in CSS Utility Classes.
Coming Soon: New Navigation
As you might already know, we're working hard on a brand new navigation bar — and since you've made it this far, let us reward you with a small sneak peek…
Introducing the e-widget. Widgets are ideal to display standalone data, like charts and tables — but they can also be used to include some controls that make sense on their own. Widgets feel right at home in dashboard-like pages. Head over to the guidelines page to see some pointers and examples.
New Components:
e-inputgroup: "stick together" certain input components, like text input fields and buttons. Help a lot with rounded corners, too!
Please welcome our new family of components: e-upgrade. The various Upgrade components can help teams introduce upgrade opportunities for our beloved customers, to boost the capabilities of the Emarsys products they use.
New Components:
Upgrade components
Layout component, back button in page title
New Utilities:
CSS Utility Classes: border utilities added
Translation: you can get translations for your product via the suite
New Features:
The empty state of action list can now be customized
Select now has a loading state
Numeric component can auto-trim values (i.e. ditching unnecessary zeroes from the end of the value)
We're introducing a new component: e-criteria. This component provides an easy-to-use interface for users to set up complex queries to filter a dataset. It's ideal for finding resources based on multiple criteria – e.g. segmentation, filtering for users, filtering for products, etc.
New Documents
Design Principles
Contribution Guideline
Documentation for utility functions: Flipper Service, Config, Authentication Token
Sample component (available in GitHub only)
New Features
e-actionlist: items now can be defined by item setter
e-actionlist: max-height now can be defined
e-datagrid: added search-keyword and search-keys attributes
e-datagrid: individual words in search query are now processed (e.g. the item "hello beautiful world" will be found when searching for "hello world")
e-datagrid: added Multiselect filter
New utility class: .e-hoverable
Presets can be hidden in e-datetimepicker and e-datetimerange with the attribute presets=hidden
e-device: now compatible with VCE components
Fixes
This time we don't want to lengthen the release note with the countless small fixes we've done — you can find them all in the repo's GitHub history.
We're introducing e-actionlist, a brand new component which can display a list of actions — kind of like the list that's opened by our e-dropdown component. The items are searchable, group-able, and can have various different states.
This component will be used by Personalization, when users are inserting tokens: clicking on the "Insert Personalization" button brings up an Action List full of tokens, and the token is automatically inserted when the user picks it from the list.
As always, if you feel like you have something that could be replaced by this new component, go ahead and implement it — or if you'd like to have it expanded by new functionalities for your product, get in touch with us!
New Features
e-datetimepicker handles ISO datetime string (without timezone)
e-datagrid can display errors from server-side
e-numeric can display numbers in humanized format (e.g. 200K)
e-style icon
e-dialog handles HTML in headline attribute
e-daterangepicker-preset handles last hour(s) (e.g. "Last 6 hours")
Improvements
e-multiselect dispatches events for clear and select all
e-datepicker dispatches event on clear
Bug Fixes
e-datetimepicker time parsing if value is not a datetime
