Release Notes

Design System Updates for 2024 November

Date: 2024-11-14 11:05:00

Enhancements

  • Datagrid: columns can be hidden by default.

Fixes

  • Password Input: copy button now works in iframes.
  • Modals: inner content now can be scrollable.
  • Tooltip: fixed screen reader bug.
  • Multiselect: false value doesn’t appear as empty string anymore.

Icon Library Updates

  • Added headset icon.

Deprecation

  • "iframe-fit" component has been deprecated.

Design System Updates for 2024 October

Date: 2024-10-10 11:25:00

Enhancements

  • Checkbox: added ability to use different checkbox labels for screen readers through “sr-label” attribute.
  • Theme selector: UI theme now can be changed based on system settings.
  • Utility: API for user authentication (thank you Security Team!).

Changes

  • Datagrid: added tooltip to column sort button.
  • Datagrid: bulk action accessibility improvements.
  • Date-Time Picker: accessibility improvements.
  • Pagination: screen reader accessibility improvements.

Fixes

  • Datagrid: fixed bulk selection display issues.
  • Dialog Action: fixed issue with disabled state.
  • Icon: fixed display issues in dark mode.
  • Order: fixed display issues.

Design System Updates for 2024 September

Date: 2024-09-10 14:20:00

Enhancements

  • Datagrid: search function now searches in the items' non-visible data.
  • Datagrid: added feature to manually hide-show columns.
  • Dropdown: buttons with “data-open-disabled” option won't open popup.

Changes

  • Action List: search query is cleared on disconnect.
  • Datagrid: HTML columns are sorted by text content (excluding HTML tags).
  • Datagrid: Searching Numeric columns return results for both source and formatted data.
  • Datagrid: Searching Time columns only return results for formatted data.

Fixes

  • Button: fixed screen reader accessibility issue for icon only buttons.
  • Datagrid: fixed rendering issue on window resize.
  • Datagrid: loading performance improvements.
  • Validator: fixed spacing issue.

Design System Updates for 2024 August

Date: 2024-08-12 14:05:00

New Releases

Ellipsis: the Ellipsis component truncates text by number of rows and appends an ellipsis at the end.

Enhancements

  • Datagrid: new "List" column type.
  • Validator: added support for buttons.
  • Separator: added faint variant.
  • Duration: max-precision attribute can define the largest unit to display (e.g. minutes).

Changes

  • Duration: support for screen readers.
  • Duration: changed UI text, made localization easier.
  • Time Picker: support for screen readers.
  • Accordion: support for screen readers.
  • Truncate: support for screen readers.
  • Select: support for screen readers.
  • Multi Select: support for screen readers.
  • Disabled state in components: cursor changes to not-allowed.

Fixes

  • Dialog: fixed focus when Dialog is opened from iframe.

Deprecation

  • Deprecated unused color tokens (e.g. gray-850).
  • Deprecated legacy component "Info Layer".

Design System Updates for 2024 June

Date: 2024-06-04 11:55:00

New Releases

Component List and Collections: we've been doing some housekeeping here on the documentation site, to make it easier to find components! From now on, you'll find an alphabetical list of all our main components under the Components section. And under the new Collections section, you'll find various component sets based on use-case (e.g. creating forms), function (e.g. data input), looks (e.g. floating), and other attributes!

Enhancements

  • Password Input: added read-only state.
  • Password Input: clicking the copy password button shows feedback.
  • Rule List: added read-only state.

Fixes

  • Tooltip: fixed bug affecting screen readers.

Guidelines Updates

  • Toolbox: rewritten examples.

Design System Updates for 2024 May

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.

Design System Updates for 2024 April

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

Design System Updates for 2024 February

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.

Design System Updates for 2024 January

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.

Design System Updates for 2023 December

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.

Design System Updates for 2023 November

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

  • Improved icon search.

Design System Updates for 2023 October

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.

Design System Updates for 2023 September

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.

Design System Updates for 2023 August

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).

Design System Updates for 2023 July

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!

Design System Updates for 2023 June

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

Design System Updates for 2023 May

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.

Design System Updates for 2023 April

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

  • Added e-history .

Design System Updates for 2023 March

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.

Design System Updates for 2023 February

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