Date: 2023-03-07 10:05:00
Enhancements
- Tab Bar: label and icon now can be hidden separately.
- Numeric: now can humanize 1024-base content with
type=digital-binary.
- Popup Panel: added semantic styles.
- Widget: added semantic styles.
- Illustrated Message: now can handle small-sized icons.
- Datagrid: added support for humanized output for numbers in numeric columns.
- Token Input: improved keyboard accessibility.
- Color Picker: improved keyboard accessibility.
Changes
- Rule Builder: changed gray background to white background.
Fixes
- Input: fixed issue where the read-only input didn't have the correct background color.
- Dialog: fixed issue where the drop shadow of the dialog was cropped by the shell bar.
- Notification: fixed issue where notifications couldn't be closed inside dialogs.
- Dialog: fixed issue where the destructive button didn't appear in the correct style.
- Validator: fixed issue with changing text color when status was set via javascript.
- Radio: fixed misaligned graphic in the block radio variant.
Date: 2023-02-06 14:55:00
Enhancements
- Multiselect: value setter can be used to set the value of the selected item via JavaScript.
- Datagrid: time columns with duration type has precision now.
- Colors: added contrast spectrum for chart colors (
chart-01-100 to chart-01-900)
- Color Picker: combined color picker input and color picker panel into a single color picker web component for better accessibility support.
- Time Picker: input value now loops.
- Time Picker: the inputs now can have empty state.
- Duration: now handles milliseconds.
- Typography: added monospace font family as available CSS style.
Changes
- Updated focus style for inline links and helper links.
- Utility: “target=_blank” now can be used in sanitization.
- Select: the component now doesn’t throw change event when selecting an already selected event.
Fixes
- Button: updated style for link buttons.
- Tooltip: fixed performance issue when too many tooltips were on the page.
- Date-Time Picker: fixed issue with keyboard accessibility.
Guideline Updates
Date: 2023-01-11 11:15:00
New Releases
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.
Date: 2022-12-14 14:10:00
New Releases
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.
Icon Library Updates
- Added
e-file-js , e-pending , e-caret-horizontal .
- Updated
e-caret-vertical .
Date: 2022-11-15 14:05:00
New Releases
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: 2022-10-06 10:25:00
Enhancements
- Color Library: added CSS utility classes for all color tokens, such as
.text-color-primary.
- Tab Bar: added
spacing attribute to define the padding around the content area. Default is none (no padding), but there's also cozy (normal padding).
- Dialog: you can now add extra content to Dialog footers, such as extra buttons.
Fixes
- Action List: fixed issue in Action List where deleting item from a group didn’t work properly.
Date: 2022-09-12 11:30:00
Enhancements
- 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.
Date: 2022-08-04 11:50:00
New Releases
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.
Date: 2022-07-11 12:10:00
New Releases
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.
Date: 2022-06-14 11:15:00
New Releases
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.
Date: 2022-05-19 13:05:00
New Releases
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.
Date: 2022-04-12 12:10:00
Roadmap Update
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).
Date: 2022-03-09 14:00:00
Improvements
- Dialog handler is now keyboard accessible.
- Dropdown component is now keyboard accessible.
- Device Display: focusing into component now can be disabled with the
focus-disabled attribute.
Fixes
- Dialog handler: fixed issue of dialog could be opened even when it was disabled.
- Datagrid: fixed issues in priority mode.
- Layout: fixed issue of unnecessary horizontal scrollbar appearing.
- Vertical Tabs: fixed issue of tab label overflow.
- Popup utility: fixed issue of panel opening only vertically even when there's no vertical space available.
Date: 2022-02-08 15:05:00
Enhancements
- Accessibility: Token Input, Steps, Back Button, Inplace Editor, and Card component now support keyboard navigation.
- Datagrid: the page size selector in the Datagrid footer now can be hidden with
page-size-hidden.
- Datagrid: the
selectedItems getter-setter was added to the API.
- Rule Builder: number of rules now can have an upper limited.
- Rule Builder: custom summary rule number can be used as placeholder.
- Rule Builder: custom relations can be added, overwriting the default AND and OR relations.
Changes
- Datagrid:
hide-pagination attribute was renamed to pagination-hidden to follow our naming conventions.
- The back button next to the page title has an href attribute to make it accessible.
Fixes
- Datagrid: fixed issue where the sort column icon was displayed twice.
- Dropdown: fixed issue with counter.
- Multiselect: fixed issue with search event.
- Fixed issue where displaying any icon resulted in showing the
cog icon.
Date: 2022-01-21 10:40:00
New Releases
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.
Date: 2021-12-14 00:00:00
New Releases
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.
Guideline Updates
Deprecation
- We're deprecating our
e-iframe container. Use our e-layout solution instead. New integrations will automatically use the recommended solution.
Date: 2021-11-08 14:20:00
New Releases
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.
Date: 2021-10-14 17:00:00
Enhancements
- 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.
Date: 2021-09-10 11:05:00
Enhancements
- 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!
Date: 2021-08-04 10:05:00
New Releases
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.
Enhancements
- Multiselect component now has an "open" event.
- Dropdown component now opens a list that supports keyboard navigation.
- Input Group now can have postfixes.
Changes
Fixes
- Datagrid rendering speed is vastly improved.
- Fixed icon style-bug in the
e-alert legacy component.
- Datetime does not reformat invalid dates anymore.
- Datetime picker now uses the user’s preferred date formatting.