Illustrated Message: we're introducing a new web component, Illustrated Message, which is replacing our old CSS component, Empty State. The new component is more flexible, and supports more use-cases than just empty state, such as success, warning, and error feedback!
Enhancements
Action List: added spacing attribute, which can be set from the default cozy to none to remove spacing.
Datagrid: field clearing can be disabled for date-time filter using the clear-hidden attribute.
Datagrid: added min-date and max-date to date-time filter.
Password Input: added copy to clipboard button.
Password Input: added hide-reveal value button.
Rule Builder: component is now keyboard accessible.
Tooltip: component is now keyboard accessible.
Changes
Alert (Deprecated): display style looks like Notification Component now.
Field: adjusted typography style for text content.
Fixes
Datagrid: datagrid now gets settings even when the page id is set later.
Date-Time Picker: fixed issue where component didn't display properly if user's selected language was not available for the component. Component now falls back to English when an untranslated language is selected for the user.
Dialog: fixed padding issue for floating page variant.
Native Select: fixed issue where setting the value didn’t work for native select.
Deprecation
Empty State component is deprecated, replaced by Illustrated Message.
Chart Colors: we've added new color aliases to be used in charts. These aliases, from chart-01 to chart-10, make it easy to pick distinct colors for charts and still keep a consistent look across the platform. You can find these colors on our Colors page, and read more about them in our Data Visualization Guideline.
Enhancements
Date-Time Picker: by default, selecting values in the Date-Time Picker panel applies them automatically. With the new manual-apply attribute, the value will only be applied when the user presses the Apply button, and they can cancel their changes as well.
Validator: added support for keyboard navigation.
Password Input: pressing the Reveal Password / Hide Password button now sends events (reveal, hide), useful for security features.
Horizon theme: we'll be rolling out a brand new look and feel for Emarsys at the end of November, based on SAP's new Horizon theme. This fresh look will introduce updated visual styles for our components. You can preview the theme on staging and demo environments, or look at the various components and page layouts example pages here on this documentation site!
Dialog improvements: we've added a bunch of improvements to our Dialog component, big and small: fully customizable header and footer, support for keyboard accessibility, the ability to add cover image, and a more elegant way to handle multiple dialogs on top of each other.
Enhancements
Label: added “highlight” variant, replacing the deprecated "primary" terminology.
Rule Builder: the summary now can display any property, not just the value.
Select and Multiselect: added “content” API for getting value of a list item in a human readable format.
Changes
Label: the close button now has a hover state.
Multiselect: the "selection tokens" now use the Label component's style.
Fixes
Navigation Sidebar: removed unnecessary group headers for sub-menu items.
Shell Bar: fixed visual glitch that interfered with the Notification component's shadow.
Switch component: fixed issue where getting the “checked” status didn’t return the correct value.
Date-Time Picker: added option to reset the time value when the user selects a new date.
Dialog: a "Back" button can be displayed in the Dialog title bar, similarly to the page title bar.
Dialog: the Dialog now supports keyboard accessibility guidelines.
Changes
Step Bar: the "Previous Step" and "Next Step" buttons are disabled when no step is set as selected.
Our purify utility will allow links to open in new windows with target=_blank", e.g. links to documentation. The related XSS vulnerability is handled appropriately.
Fixes
Chart: fixed issue where items with the value "0" did not display in tootlips.
Datagrid: we've added a lot of usability features to our Datagrid component, including user-adjustable columns sizes, support for horizontal scrolling with a floating item action panel, loading state for item actions, button groups and dropdowns for the bulk action bar, and the ability to enable bulk action mode with a button.
Enhancements
Step Bar: added next step and previous step buttons.
Tab Bar: tabs can have tooltips now.
Date-Time Picker: added error change event.
Fixes
Rule Builder: fixed issue where value getter didn't work as expected.
Date-Time Picker: fixed issue where error state was unexpectedly removed after changing selection.
Action List: fixed issue where page scrolled to top after selection.
Tab Bar: removed the ability to focus on disabled tabs.
Deprecation
Toggle Button CSS component is deprecated, the Button component can be used with a toggle function if necessary.
Accordion: our new Accordion web component is the modernized version of our old Accordion CSS component. It supports accessibility standards and received some minor design touch-ups.
Step Bar: our new Step Bar is the new web component version of our old Steps CSS component. It supports accessibility standards and comes with some new features, like the ability to display icons.
Enhancements
Tab Bar: the Tab Bar component can be used for both horizontal and vertical tabs, replacing the old Vertical Tab CSS component.
Select: the Select component can be opened even when there are no options to list, displaying an empty state message.
Popup utility: onFocusForward and onFocusBackward are used in the tab chain to make interactions accessible.
Changes
Input components, like Text Input and Number Input, now share a common background color.
Fixes
Input Group: fixed border style bug.
Date-Time Picker: fixed performance issue in presets.
Datagrid: invalid values are now handled properly in datagrid-column-numeric.
Deprecation
The old Steps CSS component has been replaced by the new Step Bar web component.
The old Vertical Tab CSS component has been replaced by the Tab Bar web component.
The old Accordion CSS component has been replaced by the Accordion web component.
Tab Bar: we turned our old Tab component into a web component called the Tab Bar, supporting accessibility features and attributes that make it easy to modify the content of tabs — like adding icons.
Password Input: we're introducing a new input component, the Password Input. It comes with a built-in show/hide text feature, which helps usability.
Enhancements
Messages in the Field component now have semantic colors: error, warning, success.
Labels in the Field component can now have an "optional" suffix.
Changes
Faint text color has been changed from gray-400 to gray-500 to increase contrast, improving accessibility.
Inline links are now underlined, adhering to web standards and improving accessibility.
Fixes
The Checkbox, Radio, and Switch web components can be used on their own.
Icon Library Updates
Added e-empty , e-conversation , e-checkbox- family, and e-radio- family.
Guideline Updates
Updated UI Text Guidelines, added UI Text Vocabulary.
Deprecation
The old CSS Tab component is being replaced by the new Tab Bar.
Confetti: the shiny new Confetti component can shoot a blast of confetti when triggered, which can be used in success states for a more delightful user experience. Check it out in action! 🎉
Fixes
Fixed margin issues when the Steps component was used in an iframe.
Fixed some spacing issues in the Datagrid component.
The Progress component now can be used in flex.
Enhancements
The Datagrid component now has an autofocus attribute.
The File Upload component now can be used in full width with the full-width modifier.
In the past few weeks the Design System team has been busy planning out some major updates for both the foundations of our UI Framework and some complex components. We've updated our public roadmap accordingly, so you can see what's in store for the next few quarters!
Enhancements
The Emarsys frame now can be implemented without the Shell Bar (.e-layout-without_shellbar), or without the Navigation Menu (.e-layout-without_menu).
Rule Builder: We're kicking off the new year with a powerful new component: the Rule Builder!
The new Rule Builder is the successor of our Criteria component. Similarly to the Criteria component, the Rule Builder provides an UI for creating a complex set of rules. This can be used in products like Segmentation, where a set of rules determine a group of contacts.
The Rule Builder comes with useful new features, such as sub groups, better error and event handling, and a vastly expanded API so product teams can customize the behavior of this component. And of course: it supports keyboard navigation!
We're really looking forward to seeing what our product teams will do with these new features!
Deprecation
With the brand new Rule Builder component released, we're also deprecating the old Criteria component. Deprecating a component means we're still supporting existing implementations, but we won't add new features and will advise against implementing it in new projects.
Enhancements
Accessibility features for multiple components have been enabled by default, without the need of a UI flipper.
Keyboard Support: here comes a pretty huge accessibility milestone: we've added keyboard navigation features to all our Design System components, so it's easier than ever to turn Emarsys into a fully keyboard-accessible application. Sorry mice, we don't need you anymore! 🐁
Icon Library Updates
New icons: e-copy, e-paste, e-cut, e-duplicate, e-celebrate, e-light, e-dark.
Fiori Theme: After nearly 2 years, we've updated the look and feel of the Emarsys UI Framework. This fresh coat of paint was applied to match the style of the SAP Fiori Design System, including a new color palette, a new typeface, and a few changes to the base layout — such as the introduction of the Shell Bar. We had been busy working on this update for months, so we're really excited to release this hot new look to all our customers!
Enhancements
The entire Field component now can have an error state, instead of the labels and inputs separately.
The Suggest Input component has been enhanced with performance improvements, with an error state, and Action List was implemented for its list.
The performance of the Datagrid component has been improved.
Changes
Buttons in the Page Title are now vertically aligned to the middle instead of the top.
Icons in inputs have been changed to a uniform color token instead of black.
Fixes
Removed unintended horizontal scrollbar from popup panels.
Native select performance fixes.
Fixed an issue with the Multiselect component where reloading the items of an open list broke the component.
The items in the Action List component can work as action buttons, instead of selectable options.
In the Datagrid priority mode, pressing the escape key exits the mode.
Fixes
When a Datagrid has an id, the page-size attribute will store the value for that specific Datagrid. For Datagrids without an id, the number of rows shown in a page will be a global setting for the user.
We improved the performance of the Select component by implementing render debouncing.
Deprecation
window.e.variables is being deprecated. We have a migration document to help product teams move to different solutions.
New date formats are supported by the Time utility.
Popup Panel component now has a no-padding variant.
Fixes
Fixed issues with error event handling in the range variant of e-datetime.
Fixed an issue in the Select component where the opened state didn't update its content properly asynchronously.
Normalized the usage of color variables in components.
Fixed icon style bug in e-notice legacy component.
Beside these fixes above, the Design System Team spent the past few weeks improving the security and code quality of the UI Framework. Lots of under the hood fixes!
Web Component-ification: we've created Web Component variants for some of our commonly used CSS components: Switch, Radio Button, and Checkbox. These Web Components will help product teams with implementation, as there's less room for error with the markup than with the old CSS components — and they'll be way easier to update in the future! The original CSS components still work (in fact, that's what these new Web Components use as foundation), but we strongly recommend only using the Web Component variants from now on.
Popup Panel component: building on top of our recently released Popup Utility, the piping hot Popup Panel makes it fairly effortless to create your own custom popup panels — so you can insert your very own layouts for drop-down menus and such!
Enhancements
The option selected in our Select component can be cleared, returning it to an empty state — similarly to how it works in Multiselect. Use the "clear-visible" attribute to enable this feature.
The Multiselect filter in Datagrid now can be used on cells that contain arrays.
The Chart Columns can now use colors from our Color Library.
Changes
The Icon component got a new "default" value for its "size" attribute. Use this when you want to use the default size for the icon (typically 24x24 pixels), so parent elements cannot accidentally resize it.
Fixes
Date-Time Picker now uses the date format set by the user in My Profile.
The icon in the Notification component is now displayed in the correct size.
The Select component now can have a loading state even when the option list is empty.
Fixed Link Button style bug for its :active state.
Criteria component doesn’t break anymore when it receives an invalid JSON, instead it falls back to an empty object.
Icon Library Updates
Added new AC icons: ac-event-false, ac-event-true, ac-message-false, ac-message-true, ac-testing
Added new generic icons: e-tag, e-tag-remove, e-move-reorder
Excellent news, everyone! We're rolling out a brand new version of the Emarsys Design System website, which is the foundation for turning our Design System into something truly world-class.
In the past, updating the Design System website was somewhat cumbersome: creating, editing, and organizing content required the assistance of Design System developers, as the documentation lived inside the UI Framework's codebase. This made it difficult for other developers and designers to contribute to the Design System.
With the new Design System website, we've detached the documentation from the codebase, and put a lightweight and flexible CMS under it. This makes adding, editing, and organizing content a breeze for anyone who wants to contribute.
The CMS also comes with a lot of bells and whistles, which will help us implementing exciting new features in the future — and let me tell you, we are full of ideas!
With this initial release, we were aiming to cover all the existing functions and use cases of our old Design System website, and adding a few CMS-based features.
Here are some of the new features:
The admin panel makes adding, editing, and organizing content easier — but you can still edit the documentation on the code level, if you want to.
The search now has the ability to search for anything in the Design System — including guidelines, icons, and even release notes.
A new Health Check page shows the development status of all the components and guidelines.
The code examples are opened in the new and improved Design System Playground.
…and this is just the beginning, we're planning to enhance this new website with useful new features, such as the ability to cross-link documentation chunks, new content blocks in guidelines, and making content available only for authenticated Emarsys employees.
Outdated versions of the UI Framework documentation will remain available on their version-specific URLs. The last version to receive the old documentation was 14.880.0. Also, if you feel like taking a walk down memory lane, check out our Design System Museum for some nostalgia fuel.
If you have any feedback or questions, please get in touch with the Design System team via Slack!
