Date: 2024-05-09 10:55:00
New Releases
- Separator: the new Separator web component can be used both horizontally and vertically, and also display a text label.
Enhancements
- Action List and Select: the new "item limit" feature limits how many options are loaded in the list. This fixes performance issues when there are too many items. The default value is 1000, but can be overwritten with the
item-limit attribute.
- Card: added support for labels in hover state.
Changes
- Chart: improved display for null values.
Fixes
- Button: fixed alignment for back button in dialog.
- Date-Time Picker: fixed issue with AM-PM selectors when changing time.
Date: 2024-04-04 09:15:00
New Component
- Rule List: this new component is replacing Rule Builder. We've made it more flexible by removing use-case specific features, and enabling product teams to build their own logic.
Enhancements
- Utility Function: the
getTopOrigin method helps navigate in Suite from iframes by returning the origin of the top window.
- Layout: in
.e-layout__content_vertical blocks, sections will be placed vertically, not horizontally.
- Datagrid: bulk action buttons can be disabled, and a tooltip can be displayed for them.
- Datagrid: dispatching event on selection in bulk select mode.
Icon Library Updates
Added new icons: logo-line, logo-mparticle, logo-viber, logo-whatsapp.
Deprecation
- Rule Builder (has been replaced by Rule List)
- Datepicker and Date Select (replaced by Date-Time Picker)
- Top Nav
Date: 2024-02-08 09:20:00
Enhancements
- Charts: line charts now display
null values as greyed-out "data not available" areas instead of not displaying anything at all.
- Datagrid: added support for custom empty state and error state.
- Tab Bar: added support for screen readers.
- Tooltip: added support for screen readers.
Changes
- Datagrid: the empty state in Datagrid now uses Illustrated Message.
- Date-Time Picker: updated error message upon validation so it's more concrete about the nature of the error.
- Input: changed component height.
Fixes
- Tooltip: fixed issue where disabled tooltips could be selected with tabbing.
Icon Library Updates
- Added new icon
ai.
- Renamed icon
update to insert (kept original name as alias).
Deprecation
- Deprecated the Token Input component.
- Deprecated the old Emoji and Emojipicker components.
Date: 2024-01-09 12:05:00
Changes
- Dialog Action: added support for keyboard focusing.
- Colors: removed old utility colors.
Fixes
- Password Input: the password input now sends one event instead of two events.
- Select: disabled items are no longer recognized as selection in JavaScript.
Icon Library Updates
- Added new icon 'logo-sinch-engage`.
Deprecation
- Deprecated the "Upgrade" component, which was used to show upselling and cross-selling opportunities to our customers.
Date: 2023-12-13 10:40:00
Enhancements
- Multiselect, Action List: the number of items selectable by the user can be limited with the
selection-max attribute.
- Slider: added support for fraction numbers.
- Flex Grid: added class for a full-height grid, with both horizontal and vertical alignment.
Changes
- Icons: the Icon component is now displaying icons as webfont glyphs instead of SVGs.
- Action List: made component work better with screen readers.
- Step Bar: made component work better with screen readers.
Fixes
- Notification: component now uses color tokens instead of legacy colors.
- Popup Panel: fixed issue where clicking an element with a tooltip didn’t close other open popups.
Icon Library Updates
- Updated graphics for
edit-copy and edit-paste icons.
Documentation Site Updates
- Added Product Components section, for less generic components which are designed to be used by specific Emarsys products.
Date: 2023-11-06 14:50:00
Enhancements
- Step Bar: changed behavior for numbering steps. Steps now will increase the number count, even if the step doesn't display a number but an icon, unless it's excluded from this logic using the
count-excluded attribute.
Changes
- Truncate: component is now screen reader accessible.
- Button: changed look to match the latest Horizon update.
- Input: changed look to match the latest Horizon update.
- Table: selected row now has a blue background to match Horizon style.
- Removed "glow" effect from most components to match the latest Horizon update.
Fixes
- Checkbox: fixed issue with displaying the indeterminate state icon.
- Multiselect: fixed issue where disabled options could be removed.
- Datagrid: fixed issue with autofocus.
Icon Library Updates
- Added
wallet, logo-x, logo-google-analytics
Documentation Site Updates
Date: 2023-10-05 13:40:00
Enhancements
- Emoji Picker: the new Emoji Picker component is replacing the old Emoji Input component. The main enhancement of the new component is the ability to use the picker panel on its own, without depending on the Emoji input field.
Changes
- Added theming support for components used in the HTML email editor and the Block-based email editor.
- Added theming support for legacy components to avoid issues in the products.
- Chart component: uses color tokens to support theming.
- Color token usage are now more consistent across components.
Deprecation
- Emoji Input component is replaced by Emoji Picker.
Date: 2023-09-14 10:50:00
New Releases
-
Dark Theme: we're excited to announce that the Emarsys Design System now supports themes! 🎉 It's a long-awaited feature, and we've had to make huge changes under the hood to enable our UI Framework to work with multiple themes. The first new theme we added is the dark version of the default Horizon theme, called Evening Horizon. Emarsys users can switch between themes by opening the "Appearance" options under the Profile menu.
-
Image Component: the new Image Component can display image assets from our shared image library, so products can easily pick logos and illustrations to show on their UI without the need for them to host it.
Enhancements
- Action list: the component now sends events when a list item is hovered or focused.
- Chart: animation now can be disabled for charts.
- Chart: data now can be highlighted to make it more prominent.
- Popup: we added a new keyboard accessibility option to our Popup Component called ”loop focus”, which keeps the tab focus in the popup until the user closes the popup.
Changes
- Switch: updated visual style for hover state.
- Tooltip, Popup Panel, Dialog: we increased the contrast of the borders for better accessibility and better theme supports.
Fix
- Datagrid: the Multiselect component now won't close when an item is selected.
- Login Page: fixed style bugs on components used on the Login Page.
Date: 2023-08-09 10:45:00
Enhancements
- Datagrid: added event for sorting columns.
- Slider: added attribute to hide the bubble over the slider’s thumb.
- File Upload: added disabled state.
Changes
- Navigation: added support for screen readers (accessibility).
Date: 2023-07-12 12:15:00
Enhancements
- Radio Button: added semantic styles (warning, success, etc.).
- Color Picker: clicking the color swatch next to the HEX code in the color input now brings up the browser's native color input interface. The look and functionality of this interface will vary between OS-es and browsers, but generally it enables the user to choose a color from the full spectrum, and also pick any color from the screen to use.
- Rule Builder: added ability to access any values in templates.
Changes
- Action List: single select and multiselect modes now use different checkmarks icons for selected items.
Fixes
- Icons: fixed icon display issue when 3rd party cookies were blocked in the browser.
Guidelines
Icon Library Updates
- Added
e-editable and e-email-preview
Other
- We started to display commit messages in a categorized manner for
ui-framework-service on its GitHub Releases page, which is essentially a "rawer" version of this Release Notes section. Give it a look!
Date: 2023-06-07 10:15:00
Enhancements
- Action List: list items now can be colored with the
color attribute.
- Date-Time Picker: start date, end date, and preset selector can be disabled individually.
- Time Picker: added disabled state.
Changes
- Notification: added countdown indicator for Notifications that disappear automatically.
- Notification: component is now keyboard accessible.
Icon Library Updates
- Added
e-logo-tiktok , e-logo-tiktok-clr , e-twitter-clr , e-linkedin-clr
Date: 2023-05-12 15:10:00
Enhancements
- Rule Builder: the component now can validate with custom summary.
- Rule Builder: support for checkbox, radio button, and switch components.
- Rule Builder: rules now have an error state, and the component provides an API to validate the content.
Fixes
- Inputs: fixed issue that made inputs appear incorrectly on darker backgrounds.
- Datagrid: fixed issue that resulted in duplicate selection in Bulk Edit mode.
Date: 2023-04-06 16:50:00
New Releases
Horizon Icons: we've updated the icons in our library to match the Fiori Horizon icon style. The content of the icons didn't change, only their style, so they should work well in their existing place on the UI.
Enhancements
- Numeric: currency now can be formatted with 3 letter currency code with
type=currency-code.
- Notification: added support for auto-close through HTML insertion.
- Rule Builder: templates now support select, multiselect, and date-time.
- Rule Builder: added read-only and disabled states.
- Date-Time Picker: added
content property that gives back human readable string instead of the default machine readable value.
- Emoji Picker: added keyboard accessibility.
- Accordion: now has
open and close events, which can be used to change the title of the accordion based on their opened-closed state.
Changes
- Multiselect: "Select All" button has been moved to the footer.
- Humanize: changed abbreviations in some languages (German, Spanish, Czech).
- Rule Builder: editing and adding rules now display the rule’s name.
- Suggest Input: "Use…" button has been moved to the footer.
- Datagrid: moved column sorting and column settings button in right-aligned columns.
- Date-Time Picker: added labels and buttons.
- Emoji Picker: iterated on the look and feel of the emoji picker.
Fixes
- Rule Builder: fixed issue when editing the rule’s name, it started editing the group's name.
- Rule Builder: fixed issue where summary was not displayed properly when loaded via javascript.
- Accordion: fixed issue when content didn't work with event handlers and javascript.
- Popup Utility: cleans up global event handler.
Guideline Updates
Icon Examples: removed deprecated color variants.
Icon Library Updates
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.