http://localhost:8298/assets/img/favicon.svg 2025-03-17T12:25:00+00:00 http://localhost:8298/release-notes 2025-03-17T12:25:00+00:00 2025-03-17T12:25:00+00:00 <h3>Enhancements</h3> <ul> <li>Datagrid: added multi-line support for cells.</li> <li>Datagrid: added support for digital binary (e.g. kilobyte, megabyte) in numeric column. </li> <li>Utilities: added support for traditional Chinese localization in dates. </li> </ul> <h3>Changes</h3> <ul> <li>Suggest Input: improved keyboard accessibility.</li> <li>Suggest Multiple Input: trailing space is escaped when entering a value.</li> </ul> <h3>Fixes</h3> <ul> <li>Actionlist: fixed issue where focus was lost when item was clicked.</li> <li>Multiselect: fixed issue where "Select All" button disappeared in specific contexts.</li> </ul> <h3>Image Library Updates</h3> <ul> <li>Added conversation channel category.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2025-march 2025-02-19T10:25:00+00:00 2025-02-19T10:25:00+00:00 <h3>New Component</h3> <ul> <li><strong>Suggest Multiple Input</strong>: the <a href="/components/suggest-multiple-input">Suggest Multiple Input</a> web component lets users enter multiple custom text values while also getting suggestions from a pre-defined list as they type.</li> </ul> <h3>Enhancements</h3> <ul> <li>Illustrated Message: added "AI" style.</li> <li>Select: option now supports false and 0 as value.</li> <li>Tab Bar: added on before change callback (e.g. validating before leaving a tab).</li> </ul> <h3>Fixes</h3> <ul> <li>Actionlist: fix group rendering issue.</li> <li>Datagrid: recalculate space when hiding-showing columns (to show floating action bar).</li> <li>Datagrid: fixed pagination issue for server side datagrids with hidden pagination.</li> <li>Datagrid: fixed issue with previously filled in filters.</li> <li>Datagrid: fixed performance issue caused by sanitizing not visible data.</li> <li>Datagrid: fixed issue with request caching.</li> </ul> <h3>Image Library Updates</h3> <p>Added tactics images, and new SAP Emarsys logo.</p> http://localhost:8298/release-notes/design-system-updates-for-2025-february 2025-01-07T10:05:00+00:00 2025-01-07T10:05:00+00:00 <h3>Enhancements</h3> <ul> <li>Password Input: added error state.</li> </ul> <h3>Fixes</h3> <ul> <li>Datagrid: fixed issue with server-side loading state.</li> <li>Multiselect: fixed issue where loading state change didn't update the list.</li> </ul> <h3>Change</h3> <ul> <li>Dialog: header is now sanitized.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Added <code>grid</code> and <code>list</code> icons.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2025-january 2024-11-14T11:05:00+00:00 2024-11-14T11:05:00+00:00 <h3>Enhancements</h3> <ul> <li>Datagrid: columns can be hidden by default.</li> </ul> <h3>Fixes</h3> <ul> <li>Password Input: copy button now works in iframes.</li> <li>Modals: inner content now can be scrollable.</li> <li>Tooltip: fixed screen reader bug.</li> <li>Multiselect: false value doesn’t appear as empty string anymore.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Added <code>headset</code> icon.</li> </ul> <h3>Deprecation</h3> <ul> <li>"iframe-fit" component has been deprecated.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2024-november 2024-10-10T11:25:00+00:00 2024-10-10T11:25:00+00:00 <h3>Enhancements</h3> <ul> <li>Checkbox: added ability to use different checkbox labels for screen readers through “sr-label” attribute.</li> <li>Theme selector: UI theme now can be changed based on system settings.</li> <li>Utility: API for user authentication (thank you Security Team!).</li> </ul> <h3>Changes</h3> <ul> <li>Datagrid: added tooltip to column sort button.</li> <li>Datagrid: bulk action accessibility improvements.</li> <li>Date-Time Picker: accessibility improvements.</li> <li>Pagination: screen reader accessibility improvements.</li> </ul> <h3>Fixes</h3> <ul> <li>Datagrid: fixed bulk selection display issues.</li> <li>Dialog Action: fixed issue with disabled state.</li> <li>Icon: fixed display issues in dark mode.</li> <li>Order: fixed display issues.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2024-october 2024-09-10T14:20:00+00:00 2024-09-10T14:20:00+00:00 <h3>Enhancements</h3> <ul> <li>Datagrid: search function now searches in the items' non-visible data.</li> <li>Datagrid: added feature to manually hide-show columns.</li> <li>Dropdown: buttons with “data-open-disabled” option won't open popup.</li> </ul> <h3>Changes</h3> <ul> <li>Action List: search query is cleared on disconnect.</li> <li>Datagrid: HTML columns are sorted by text content (excluding HTML tags).</li> <li>Datagrid: Searching Numeric columns return results for both source and formatted data.</li> <li>Datagrid: Searching Time columns only return results for formatted data.</li> </ul> <h3>Fixes</h3> <ul> <li>Button: fixed screen reader accessibility issue for icon only buttons.</li> <li>Datagrid: fixed rendering issue on window resize.</li> <li>Datagrid: loading performance improvements. </li> <li>Validator: fixed spacing issue.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2024-september 2024-08-12T14:05:00+00:00 2024-08-12T14:05:00+00:00 <h3>New Releases</h3> <p><strong>Ellipsis</strong>: the <a href="/components/ellipsis">Ellipsis</a> component truncates text by number of rows and appends an ellipsis at the end.</p> <h3>Enhancements</h3> <ul> <li>Datagrid: new "List" column type.</li> <li>Validator: added support for buttons.</li> <li>Separator: added faint variant.</li> <li>Duration: <code>max-precision</code> attribute can define the largest unit to display (e.g. minutes).</li> </ul> <h3>Changes</h3> <ul> <li>Duration: support for screen readers.</li> <li>Duration: changed UI text, made localization easier.</li> <li>Time Picker: support for screen readers.</li> <li>Accordion: support for screen readers.</li> <li>Truncate: support for screen readers.</li> <li>Select: support for screen readers.</li> <li>Multi Select: support for screen readers.</li> <li>Disabled state in components: cursor changes to <code>not-allowed</code>.</li> </ul> <h3>Fixes</h3> <ul> <li>Dialog: fixed focus when Dialog is opened from iframe.</li> </ul> <h3>Deprecation</h3> <ul> <li>Deprecated unused color tokens (e.g. <code>gray-850</code>).</li> <li>Deprecated legacy component "Info Layer".</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2024-august 2024-06-04T11:55:00+00:00 2024-06-04T11:55:00+00:00 <h3>New Releases</h3> <p><strong>Component List and Collections</strong>: 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 <a href="/components">Components</a> section. And under the new <a href="/collections">Collections</a> 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!</p> <h3>Enhancements</h3> <ul> <li>Password Input: added read-only state.</li> <li>Password Input: clicking the copy password button shows feedback.</li> <li>Rule List: added read-only state.</li> </ul> <h3>Fixes</h3> <ul> <li>Tooltip: fixed bug affecting screen readers.</li> </ul> <h3>Guidelines Updates</h3> <ul> <li>Toolbox: rewritten examples.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2024-june 2024-05-09T10:55:00+00:00 2024-05-09T10:55:00+00:00 <h3>New Releases</h3> <ul> <li><strong>Separator</strong>: the new <a href="/components/layout/separator">Separator</a> web component can be used both horizontally and vertically, and also display a text label.</li> </ul> <h3>Enhancements</h3> <ul> <li>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 <code>item-limit</code> attribute.</li> <li>Card: added support for labels in hover state.</li> </ul> <h3>Changes</h3> <ul> <li>Chart: improved display for null values.</li> </ul> <h3>Fixes</h3> <ul> <li>Button: fixed alignment for back button in dialog.</li> <li>Date-Time Picker: fixed issue with AM-PM selectors when changing time.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2024-may 2024-04-04T09:15:00+00:00 2024-04-04T09:15:00+00:00 <h3>New Component</h3> <ul> <li><strong>Rule List</strong>: 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.</li> </ul> <h3>Enhancements</h3> <ul> <li>Utility Function: the <code>getTopOrigin</code> method helps navigate in Suite from iframes by returning the origin of the top window.</li> <li>Layout: in <code>.e-layout__content_vertical</code> blocks, sections will be placed vertically, not horizontally.</li> <li>Datagrid: bulk action buttons can be disabled, and a tooltip can be displayed for them.</li> <li>Datagrid: dispatching event on selection in bulk select mode.</li> </ul> <h3>Icon Library Updates</h3> <p>Added new icons: <code>logo-line</code>, <code>logo-mparticle</code>, <code>logo-viber</code>, <code>logo-whatsapp</code>.</p> <h3>Deprecation</h3> <ul> <li>Rule Builder (has been replaced by Rule List)</li> <li>Datepicker and Date Select (replaced by Date-Time Picker)</li> <li>Top Nav</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2024-april 2024-02-08T09:20:00+00:00 2024-02-08T09:20:00+00:00 <h3>Enhancements</h3> <ul> <li>Charts: line charts now display <code>null</code> values as greyed-out "data not available" areas instead of not displaying anything at all.</li> <li>Datagrid: added support for custom empty state and error state.</li> <li>Tab Bar: added support for screen readers.</li> <li>Tooltip: added support for screen readers.</li> </ul> <h3>Changes</h3> <ul> <li>Datagrid: the empty state in Datagrid now uses Illustrated Message.</li> <li>Date-Time Picker: updated error message upon validation so it's more concrete about the nature of the error.</li> <li>Input: changed component height.</li> </ul> <h3>Fixes</h3> <ul> <li>Tooltip: fixed issue where disabled tooltips could be selected with tabbing.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Added new icon <code>ai</code>.</li> <li>Renamed icon <code>update</code> to <code>insert</code> (kept original name as alias).</li> </ul> <h3>Deprecation</h3> <ul> <li>Deprecated the Token Input component.</li> <li>Deprecated the old Emoji and Emojipicker components.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2024-february 2024-01-09T12:05:00+00:00 2024-01-09T12:05:00+00:00 <h3>Changes</h3> <ul> <li>Dialog Action: added support for keyboard focusing.</li> <li>Colors: removed old utility colors.</li> </ul> <h3>Fixes</h3> <ul> <li>Password Input: the password input now sends one event instead of two events.</li> <li>Select: disabled items are no longer recognized as selection in JavaScript.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Added new icon 'logo-sinch-engage`.</li> </ul> <h3>Deprecation</h3> <ul> <li>Deprecated the "Upgrade" component, which was used to show upselling and cross-selling opportunities to our customers.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2024-january 2023-12-13T10:40:00+00:00 2023-12-13T10:40:00+00:00 <h3>Enhancements</h3> <ul> <li>Multiselect, Action List: the number of items selectable by the user can be limited with the <code>selection-max</code> attribute.</li> <li>Slider: added support for fraction numbers.</li> <li>Flex Grid: added class for a full-height grid, with both horizontal and vertical alignment.</li> </ul> <h3>Changes</h3> <ul> <li>Icons: the Icon component is now displaying icons as webfont glyphs instead of SVGs.</li> <li>Action List: made component work better with screen readers.</li> <li>Step Bar: made component work better with screen readers.</li> </ul> <h3>Fixes</h3> <ul> <li>Notification: component now uses color tokens instead of legacy colors.</li> <li>Popup Panel: fixed issue where clicking an element with a tooltip didn’t close other open popups.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Updated graphics for <code>edit-copy</code> and <code>edit-paste</code> icons.</li> </ul> <h3>Documentation Site Updates</h3> <ul> <li>Added <a href="/product-components">Product Components</a> section, for less generic components which are designed to be used by specific Emarsys products.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-december 2023-11-06T14:50:00+00:00 2023-11-06T14:50:00+00:00 <h3>Enhancements</h3> <ul> <li>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 <code>count-excluded</code> attribute.</li> </ul> <h3>Changes</h3> <ul> <li>Truncate: component is now screen reader accessible.</li> <li>Button: changed look to match the latest Horizon update.</li> <li>Input: changed look to match the latest Horizon update.</li> <li>Table: selected row now has a blue background to match Horizon style.</li> <li>Removed "glow" effect from most components to match the latest Horizon update.</li> </ul> <h3>Fixes</h3> <ul> <li>Checkbox: fixed issue with displaying the indeterminate state icon.</li> <li>Multiselect: fixed issue where disabled options could be removed.</li> <li>Datagrid: fixed issue with autofocus.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Added <code>wallet</code>, <code>logo-x</code>, <code>logo-google-analytics</code></li> </ul> <h3>Documentation Site Updates</h3> <ul> <li>Improved icon search.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-november 2023-10-05T13:40:00+00:00 2023-10-05T13:40:00+00:00 <h3>Enhancements</h3> <ul> <li>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.</li> </ul> <h3>Changes</h3> <ul> <li>Added theming support for components used in the HTML email editor and the Block-based email editor.</li> <li>Added theming support for legacy components to avoid issues in the products.</li> <li>Chart component: uses color tokens to support theming.</li> <li>Color token usage are now more consistent across components.</li> </ul> <h3>Deprecation</h3> <ul> <li>Emoji Input component is replaced by Emoji Picker.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-october 2023-09-14T10:50:00+00:00 2023-09-14T10:50:00+00:00 <h3>New Releases</h3> <ul> <li> <p><strong>Dark Theme:</strong> 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 <strong>Evening Horizon</strong>. Emarsys users can switch between themes by opening the "Appearance" options under the Profile menu.</p> </li> <li> <p><strong>Image Component:</strong> the new <a href="/style/images">Image Component</a> 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.</p> </li> </ul> <h3>Enhancements</h3> <ul> <li>Action list: the component now sends events when a list item is hovered or focused. </li> <li>Chart: animation now can be disabled for charts.</li> <li>Chart: data now can be highlighted to make it more prominent.</li> <li>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.</li> </ul> <h3>Changes</h3> <ul> <li>Switch: updated visual style for hover state.</li> <li>Tooltip, Popup Panel, Dialog: we increased the contrast of the borders for better accessibility and better theme supports.</li> </ul> <h3>Fix</h3> <ul> <li>Datagrid: the Multiselect component now won't close when an item is selected.</li> <li>Login Page: fixed style bugs on components used on the Login Page.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-september 2023-08-09T10:45:00+00:00 2023-08-09T10:45:00+00:00 <h3>Enhancements</h3> <ul> <li>Datagrid: added event for sorting columns.</li> <li>Slider: added attribute to hide the bubble over the slider’s thumb.</li> <li>File Upload: added disabled state.</li> </ul> <h3>Changes</h3> <ul> <li>Navigation: added support for screen readers (accessibility).</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-august 2023-07-12T12:15:00+00:00 2023-07-12T12:15:00+00:00 <h3>Enhancements</h3> <ul> <li>Radio Button: added semantic styles (warning, success, etc.).</li> <li>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.</li> <li>Rule Builder: added ability to access any values in templates.</li> </ul> <h3>Changes</h3> <ul> <li>Action List: single select and multiselect modes now use different checkmarks icons for selected items.</li> </ul> <h3>Fixes</h3> <ul> <li>Icons: fixed icon display issue when 3rd party cookies were blocked in the browser.</li> </ul> <h3>Guidelines</h3> <ul> <li>Updated <a href="/style/style-rules/styles-and-states">Styles and States</a> guideline to cover semantic styles (error, warning, success, and highlight).</li> <li>Added <a href="/getting-started/usage-with-frameworks">Usage with Framework</a> guide.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Added <code>e-editable</code> and <code>e-email-preview</code> </li> </ul> <h3>Other</h3> <ul> <li>We started to display commit messages in a categorized manner for <code>ui-framework-service</code> on its <a href="https://github.com/emartech/ui-framework-service/releases/">GitHub Releases</a> page, which is essentially a "rawer" version of this Release Notes section. Give it a look!</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-july 2023-06-07T10:15:00+00:00 2023-06-07T10:15:00+00:00 <h3>Enhancements</h3> <ul> <li>Action List: list items now can be colored with the <code>color</code> attribute.</li> <li>Date-Time Picker: start date, end date, and preset selector can be disabled individually.</li> <li>Time Picker: added disabled state.</li> </ul> <h3>Changes</h3> <ul> <li>Notification: added countdown indicator for Notifications that disappear automatically.</li> <li>Notification: component is now keyboard accessible.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Added <code>e-logo-tiktok</code> , <code>e-logo-tiktok-clr</code> , <code>e-twitter-clr</code> , <code>e-linkedin-clr</code> </li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-june 2023-05-12T15:10:00+00:00 2023-05-12T15:10:00+00:00 <h3>Enhancements</h3> <ul> <li>Rule Builder: the component now can validate with custom summary.</li> <li>Rule Builder: support for checkbox, radio button, and switch components.</li> <li>Rule Builder: rules now have an error state, and the component provides an API to validate the content.</li> </ul> <h3>Fixes</h3> <ul> <li>Inputs: fixed issue that made inputs appear incorrectly on darker backgrounds.</li> <li>Datagrid: fixed issue that resulted in duplicate selection in Bulk Edit mode.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-may 2023-04-06T16:50:00+00:00 2023-04-06T16:50:00+00:00 <h3>New Releases</h3> <p><strong>Horizon Icons:</strong> 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. </p> <h3>Enhancements</h3> <ul> <li>Numeric: currency now can be formatted with 3 letter currency code with <code>type=currency-code</code>.</li> <li>Notification: added support for auto-close through HTML insertion.</li> <li>Rule Builder: templates now support select, multiselect, and date-time.</li> <li>Rule Builder: added read-only and disabled states.</li> <li>Date-Time Picker: added <code>content</code> property that gives back human readable string instead of the default machine readable value.</li> <li>Emoji Picker: added keyboard accessibility.</li> <li>Accordion: now has <code>open</code> and <code>close</code> events, which can be used to change the title of the accordion based on their opened-closed state.</li> </ul> <h3>Changes</h3> <ul> <li>Multiselect: "Select All" button has been moved to the footer.</li> <li>Humanize: changed abbreviations in some languages (German, Spanish, Czech).</li> <li>Rule Builder: editing and adding rules now display the rule’s name.</li> <li>Suggest Input: "Use…" button has been moved to the footer.</li> <li>Datagrid: moved column sorting and column settings button in right-aligned columns.</li> <li>Date-Time Picker: added labels and buttons.</li> <li>Emoji Picker: iterated on the look and feel of the emoji picker.</li> </ul> <h3>Fixes</h3> <ul> <li>Rule Builder: fixed issue when editing the rule’s name, it started editing the group's name.</li> <li>Rule Builder: fixed issue where summary was not displayed properly when loaded via javascript.</li> <li>Accordion: fixed issue when content didn't work with event handlers and javascript.</li> <li>Popup Utility: cleans up global event handler.</li> </ul> <h3>Guideline Updates</h3> <p>Icon Examples: removed deprecated color variants.</p> <h3>Icon Library Updates</h3> <ul> <li>Added <code>e-history</code> .</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-april 2023-03-07T10:05:00+00:00 2023-03-07T10:05:00+00:00 <h3>Enhancements</h3> <ul> <li>Tab Bar: label and icon now can be hidden separately.</li> <li>Numeric: now can humanize 1024-base content with <code>type=digital-binary</code>.</li> <li>Popup Panel: added semantic styles.</li> <li>Widget: added semantic styles.</li> <li>Illustrated Message: now can handle small-sized icons.</li> <li>Datagrid: added support for humanized output for numbers in numeric columns.</li> <li>Token Input: improved keyboard accessibility.</li> <li>Color Picker: improved keyboard accessibility.</li> </ul> <h3>Changes</h3> <ul> <li>Rule Builder: changed gray background to white background.</li> </ul> <h3>Fixes</h3> <ul> <li>Input: fixed issue where the read-only input didn't have the correct background color.</li> <li>Dialog: fixed issue where the drop shadow of the dialog was cropped by the shell bar.</li> <li>Notification: fixed issue where notifications couldn't be closed inside dialogs.</li> <li>Dialog: fixed issue where the destructive button didn't appear in the correct style.</li> <li>Validator: fixed issue with changing text color when status was set via javascript.</li> <li>Radio: fixed misaligned graphic in the block radio variant.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-march 2023-02-06T14:55:00+00:00 2023-02-06T14:55:00+00:00 <h3>Enhancements</h3> <ul> <li>Multiselect: value setter can be used to set the value of the selected item via JavaScript.</li> <li>Datagrid: time columns with duration type has precision now.</li> <li>Colors: added contrast spectrum for chart colors (<code>chart-01-100</code> to <code>chart-01-900</code>)</li> <li>Color Picker: combined color picker input and color picker panel into a single color picker web component for better accessibility support.</li> <li>Time Picker: input value now loops.</li> <li>Time Picker: the inputs now can have empty state.</li> <li>Duration: now handles milliseconds.</li> <li>Typography: added monospace font family as available CSS style.</li> </ul> <h3>Changes</h3> <ul> <li>Updated focus style for inline links and helper links.</li> <li>Utility: “target=_blank” now can be used in sanitization.</li> <li>Select: the component now doesn’t throw change event when selecting an already selected event.</li> </ul> <h3>Fixes</h3> <ul> <li>Button: updated style for link buttons.</li> <li>Tooltip: fixed performance issue when too many tooltips were on the page.</li> <li>Date-Time Picker: fixed issue with keyboard accessibility.</li> </ul> <h3>Guideline Updates</h3> <ul> <li><a href="/accessibility/product-accessibility">Product Accessibility Guidelines</a></li> <li><a href="/migration">Component Migration Guidelines</a></li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-february 2023-01-11T11:15:00+00:00 2023-01-11T11:15:00+00:00 <h3>New Releases</h3> <p><strong>Illustrated Message:</strong> we're introducing a new web component, <a href="/components/feedback/illustrated-message">Illustrated Message</a>, 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!</p> <h3>Enhancements</h3> <ul> <li>Action List: added <code>spacing</code> attribute, which can be set from the default <code>cozy</code> to <code>none</code> to remove spacing.</li> <li>Datagrid: field clearing can be disabled for date-time filter using the <code>clear-hidden</code> attribute.</li> <li>Datagrid: added <code>min-date</code> and <code>max-date</code> to date-time filter.</li> <li>Password Input: added copy to clipboard button.</li> <li>Password Input: added hide-reveal value button.</li> <li>Rule Builder: component is now keyboard accessible.</li> <li>Tooltip: component is now keyboard accessible.</li> </ul> <h3>Changes</h3> <ul> <li>Alert (Deprecated): display style looks like Notification Component now.</li> <li>Field: adjusted typography style for text content.</li> </ul> <h3>Fixes</h3> <ul> <li>Datagrid: datagrid now gets settings even when the page id is set later.</li> <li>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.</li> <li>Dialog: fixed padding issue for floating page variant.</li> <li>Native Select: fixed issue where setting the value didn’t work for native select.</li> </ul> <h3>Deprecation</h3> <ul> <li>Empty State component is deprecated, replaced by Illustrated Message.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2023-january 2022-12-14T14:10:00+00:00 2022-12-14T14:10:00+00:00 <h3>New Releases</h3> <p><strong>Chart Colors:</strong> we've added new color aliases to be used in charts. These aliases, from <code>chart-01</code> to <code>chart-10</code>, 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 <a href="/style/color">Colors</a> page, and read more about them in our <a href="/patterns/data-visualization">Data Visualization Guideline</a>.</p> <h3>Enhancements</h3> <ul> <li>Date-Time Picker: by default, selecting values in the Date-Time Picker panel applies them automatically. With the new <code>manual-apply</code> attribute, the value will only be applied when the user presses the Apply button, and they can cancel their changes as well.</li> <li>Validator: added support for keyboard navigation.</li> <li>Password Input: pressing the Reveal Password / Hide Password button now sends events (<code>reveal</code>, <code>hide</code>), useful for security features.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Added <code>e-file-js</code> , <code>e-pending</code> , <code>e-caret-horizontal</code> .</li> <li>Updated <code>e-caret-vertical</code> .</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-december 2022-11-15T14:05:00+00:00 2022-11-15T14:05:00+00:00 <h3>New Releases</h3> <p><strong>Horizon theme:</strong> we'll be rolling out a brand new look and feel for Emarsys at the end of November, based on <a href="https://youtu.be/35AGfnzvarI">SAP's new Horizon theme</a>. 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 <a href="/components">components</a> and <a href="/structure/steps-page/examples">page layouts</a> example pages here on this documentation site!</p> <p><strong>Dialog improvements</strong>: we've added a bunch of improvements to our <a href="/components/action/dialog/examples">Dialog</a> 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.</p> <h3>Enhancements</h3> <ul> <li>Label: added “highlight” variant, replacing the deprecated "primary" terminology.</li> <li>Rule Builder: the summary now can display any property, not just the value.</li> <li>Select and Multiselect: added “content” API for getting value of a list item in a human readable format.</li> </ul> <h3>Changes</h3> <ul> <li>Label: the close button now has a hover state.</li> <li>Multiselect: the "selection tokens" now use the Label component's style.</li> </ul> <h3>Fixes</h3> <ul> <li>Navigation Sidebar: removed unnecessary group headers for sub-menu items.</li> <li>Shell Bar: fixed visual glitch that interfered with the Notification component's shadow.</li> <li>Switch component: fixed issue where getting the “checked” status didn’t return the correct value.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-november 2022-10-06T10:25:00+00:00 2022-10-06T10:25:00+00:00 <h3>Enhancements</h3> <ul> <li>Color Library: added CSS utility classes for all color tokens, such as <code>.text-color-primary</code>.</li> <li>Tab Bar: added <code>spacing</code> attribute to define the padding around the content area. Default is <code>none</code> (no padding), but there's also <code>cozy</code> (normal padding).</li> <li>Dialog: you can now add extra content to Dialog footers, such as extra buttons.</li> </ul> <h3>Fixes</h3> <ul> <li>Action List: fixed issue in Action List where deleting item from a group didn’t work properly.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-october 2022-09-12T11:30:00+00:00 2022-09-12T11:30:00+00:00 <h3>Enhancements</h3> <ul> <li>Date-Time Picker: added option to reset the time value when the user selects a new date.</li> <li>Dialog: a "Back" button can be displayed in the Dialog title bar, similarly to the page title bar.</li> <li>Dialog: the Dialog now supports keyboard accessibility guidelines.</li> </ul> <h3>Changes</h3> <ul> <li>Step Bar: the "Previous Step" and "Next Step" buttons are disabled when no step is set as selected.</li> <li>Our purify utility will allow links to open in new windows with <code>target=_blank"</code>, e.g. links to documentation. The related XSS vulnerability is handled appropriately.</li> </ul> <h3>Fixes</h3> <ul> <li>Chart: fixed issue where items with the value "0" did not display in tootlips.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-september 2022-08-04T11:50:00+00:00 2022-08-04T11:50:00+00:00 <h3>New Releases</h3> <p><strong>Datagrid</strong>: we've added a lot of usability features to our <a href="/components/data_display/datagrid">Datagrid</a> 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. </p> <h3>Enhancements</h3> <ul> <li>Step Bar: added next step and previous step buttons. </li> <li>Tab Bar: tabs can have tooltips now.</li> <li>Date-Time Picker: added error change event.</li> </ul> <h3>Fixes</h3> <ul> <li>Rule Builder: fixed issue where value getter didn't work as expected.</li> <li>Date-Time Picker: fixed issue where error state was unexpectedly removed after changing selection.</li> <li>Action List: fixed issue where page scrolled to top after selection.</li> <li>Tab Bar: removed the ability to focus on disabled tabs.</li> </ul> <h3>Deprecation</h3> <ul> <li>Toggle Button CSS component is deprecated, the Button component can be used with a toggle function if necessary.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-august 2022-07-11T12:10:00+00:00 2022-07-11T12:10:00+00:00 <h3>New Releases</h3> <p><strong>Accordion</strong>: our new <a href="/components/navigation/accordion">Accordion</a> web component is the modernized version of our old Accordion CSS component. It supports accessibility standards and received some minor design touch-ups.</p> <p><strong>Step Bar</strong>: our new <a href="/components/navigation/step-bar">Step Bar</a> 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.</p> <h3>Enhancements</h3> <ul> <li>Tab Bar: the Tab Bar component can be used for both horizontal and <a href="/components/navigation/tab-bar/examples#tab-bar-vertical">vertical tabs</a>, replacing the old Vertical Tab CSS component.</li> <li>Select: the Select component can be opened even when there are no options to list, displaying an empty state message.</li> <li>Popup utility: <code>onFocusForward</code> and <code>onFocusBackward</code> are used in the tab chain to make interactions accessible.</li> </ul> <h3>Changes</h3> <ul> <li>Input components, like Text Input and Number Input, now share a common background color.</li> </ul> <h3>Fixes</h3> <ul> <li>Input Group: fixed border style bug.</li> <li>Date-Time Picker: fixed performance issue in presets.</li> <li>Datagrid: invalid values are now handled properly in <code>datagrid-column-numeric</code>. </li> </ul> <h3>Deprecation</h3> <ul> <li>The old Steps CSS component has been replaced by the new Step Bar web component.</li> <li>The old Vertical Tab CSS component has been replaced by the Tab Bar web component.</li> <li>The old Accordion CSS component has been replaced by the Accordion web component.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-july 2022-06-14T11:15:00+00:00 2022-06-14T11:15:00+00:00 <h3>New Releases</h3> <p><strong>Tab Bar</strong>: we turned our old Tab component into a web component called the <a href="/components/navigation/tab-bar">Tab Bar</a>, supporting accessibility features and attributes that make it easy to modify the content of tabs — like adding icons.</p> <p><strong>Password Input</strong>: we're introducing a new input component, the <a href="/components/input/password-input">Password Input</a>. It comes with a built-in show/hide text feature, which helps usability.</p> <h3>Enhancements</h3> <ul> <li>Messages in the Field component now have semantic colors: error, warning, success.</li> <li>Labels in the Field component can now have an "optional" suffix.</li> </ul> <h3>Changes</h3> <ul> <li>Faint text color has been changed from gray-400 to gray-500 to increase contrast, improving accessibility.</li> <li>Inline links are now underlined, adhering to web standards and improving accessibility.</li> </ul> <h3>Fixes</h3> <ul> <li>The Checkbox, Radio, and Switch web components can be used on their own.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Added <code>e-empty</code> , <code>e-conversation</code> , <code>e-checkbox-</code> family, and <code>e-radio-</code> family.</li> </ul> <h3>Guideline Updates</h3> <ul> <li>Updated UI Text Guidelines, added UI Text Vocabulary.</li> </ul> <h3>Deprecation</h3> <ul> <li>The old CSS Tab component is being replaced by the new Tab Bar.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-june 2022-05-19T13:05:00+00:00 2022-05-19T13:05:00+00:00 <h3>New Releases</h3> <p><strong>Confetti</strong>: the shiny new <a href="/components/feedback/confetti">Confetti</a> component can shoot a blast of confetti when triggered, which can be used in success states for a more delightful user experience. <a href="/structure/steps-page/examples#done-step-blueprint">Check it out in action</a>! 🎉</p> <h3>Fixes</h3> <ul> <li>Fixed margin issues when the Steps component was used in an iframe.</li> <li>Fixed some spacing issues in the Datagrid component.</li> <li>The Progress component now can be used in flex.</li> </ul> <h3>Enhancements</h3> <ul> <li>The Datagrid component now has an autofocus attribute.</li> <li>The File Upload component now can be used in full width with the full-width modifier.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-may 2022-04-12T12:10:00+00:00 2022-04-12T12:10:00+00:00 <h3>Roadmap Update</h3> <p>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 <a href="/roadmap">public roadmap</a> accordingly, so you can see what's in store for the next few quarters!</p> <h3>Enhancements</h3> <ul> <li>The <a href="/structure/navigation/examples#navigation-menu-without-shellbar">Emarsys frame</a> now can be implemented without the Shell Bar (<code>.e-layout-without_shellbar</code>), or without the Navigation Menu (<code>.e-layout-without_menu</code>).</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-april 2022-03-09T14:00:00+00:00 2022-03-09T14:00:00+00:00 <h3>Improvements</h3> <ul> <li>Dialog handler is now keyboard accessible.</li> <li>Dropdown component is now keyboard accessible.</li> <li>Device Display: focusing into component now can be disabled with the <code>focus-disabled</code> attribute.</li> </ul> <h3>Fixes</h3> <ul> <li>Dialog handler: fixed issue of dialog could be opened even when it was disabled.</li> <li>Datagrid: fixed issues in priority mode.</li> <li>Layout: fixed issue of unnecessary horizontal scrollbar appearing.</li> <li>Vertical Tabs: fixed issue of tab label overflow.</li> <li>Popup utility: fixed issue of panel opening only vertically even when there's no vertical space available.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-march 2022-02-08T15:05:00+00:00 2022-02-08T15:05:00+00:00 <h3>Enhancements</h3> <ul> <li>Accessibility: Token Input, Steps, Back Button, Inplace Editor, and Card component now support keyboard navigation.</li> <li>Datagrid: the page size selector in the Datagrid footer now can be hidden with <code>page-size-hidden</code>.</li> <li>Datagrid: the <code>selectedItems</code> getter-setter was added to the API.</li> <li>Rule Builder: number of rules now can have an upper limited.</li> <li>Rule Builder: custom summary rule number can be used as placeholder.</li> <li>Rule Builder: custom relations can be added, overwriting the default AND and OR relations.</li> </ul> <h3>Changes</h3> <ul> <li>Datagrid: <code>hide-pagination</code> attribute was renamed to <code>pagination-hidden</code> to follow our naming conventions.</li> <li>The back button next to the page title has an href attribute to make it accessible. </li> </ul> <h3>Fixes</h3> <ul> <li>Datagrid: fixed issue where the sort column icon was displayed twice.</li> <li>Dropdown: fixed issue with counter.</li> <li>Multiselect: fixed issue with search event.</li> <li>Fixed issue where displaying any icon resulted in showing the <code>cog</code> icon.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-february 2022-01-21T10:40:00+00:00 2022-01-21T10:40:00+00:00 <h3>New Releases</h3> <p><strong>Rule Builder</strong>: We're kicking off the new year with a powerful new component: the <a href="/components/input/rule-builder">Rule Builder</a>!</p> <p>The new Rule Builder is the successor of our <a href="/components/input/criteria">Criteria</a> 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.<br /> 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!</p> <p>We're really looking forward to seeing what our product teams will do with these new features!</p> <h3>Deprecation</h3> <ul> <li>With the brand new <a href="/components/input/rule-builder">Rule Builder</a> component released, we're also deprecating the old <a href="/components/input/criteria">Criteria</a> 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.</li> </ul> <h3>Enhancements</h3> <ul> <li>Accessibility features for multiple components have been enabled by default, without the need of a UI flipper.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2022-january 2021-12-14T00:00:00+00:00 2021-12-14T00:00:00+00:00 <h3>New Releases</h3> <p><strong>Keyboard Support:</strong> 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 <em>need</em> you anymore! 🐁</p> <h3>Icon Library Updates</h3> <ul> <li>New icons: <code>e-copy</code>, <code>e-paste</code>, <code>e-cut</code>, <code>e-duplicate</code>, <code>e-celebrate</code>, <code>e-light</code>, <code>e-dark</code>.</li> </ul> <h3>Guideline Updates</h3> <ul> <li>Updated the documentation for our <a href="/utilities/functions/config">JavaScript Config Utility</a>.</li> <li>Added design guidelines for the <a href="/structure/steps-page/guidelines">Steps Page</a>.</li> <li>Added design guidelines for <a href="/patterns/permission-handling-guidelines">Permission Handling</a>.</li> </ul> <h3>Deprecation</h3> <ul> <li>We're deprecating our <code>e-iframe</code> container. Use our <code>e-layout</code> solution instead. New integrations will automatically use the recommended solution.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2021-december 2021-11-08T14:20:00+00:00 2021-11-08T14:20:00+00:00 <h3>New Releases</h3> <p><strong>Fiori Theme:</strong> 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!</p> <h3>Enhancements</h3> <ul> <li>The entire <a href="/components/input/field">Field component</a> now can have an error state, instead of the labels and inputs separately.</li> <li>The <a href="/components/input/suggest_input">Suggest Input</a> component has been enhanced with performance improvements, with an error state, and Action List was implemented for its list.</li> <li>The performance of the <a href="/components/data_display/datagrid">Datagrid</a> component has been improved.</li> </ul> <h3>Changes</h3> <ul> <li>Buttons in the Page Title are now vertically aligned to the middle instead of the top.</li> <li>Icons in inputs have been changed to a uniform color token instead of black.</li> </ul> <h3>Fixes</h3> <ul> <li>Removed unintended horizontal scrollbar from popup panels.</li> <li>Native select performance fixes.</li> <li>Fixed an issue with the Multiselect component where reloading the items of an open list broke the component.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2021-november 2021-10-14T17:00:00+00:00 2021-10-14T17:00:00+00:00 <h3>Enhancements</h3> <ul> <li>The items in the <a href="/components/action/actionlist">Action List</a> component can work as action buttons, instead of selectable options.</li> <li>In the <a href="/components/data_display/datagrid">Datagrid</a> priority mode, pressing the escape key exits the mode.</li> </ul> <h3>Fixes</h3> <ul> <li>When a <a href="/components/data_display/datagrid">Datagrid</a> 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.</li> <li>We improved the performance of the <a href="/components/input/select">Select</a> component by implementing render debouncing.</li> </ul> <h3>Deprecation</h3> <ul> <li><code>window.e.variables</code> is being deprecated. We have a migration document to help product teams move to different solutions.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2021-october 2021-09-10T11:05:00+00:00 2021-09-10T11:05:00+00:00 <h3>Enhancements</h3> <ul> <li>New date formats are supported by the <a href="utilities/components/time">Time</a> utility.</li> <li><a href="components/action/popup-panel">Popup Panel</a> component now has a no-padding variant.</li> </ul> <h3>Fixes</h3> <ul> <li>Fixed issues with error event handling in the range variant of <code>e-datetime</code>.</li> <li>Fixed an issue in the Select component where the opened state didn't update its content properly asynchronously.</li> <li>Normalized the usage of color variables in components.</li> <li>Fixed icon style bug in <code>e-notice</code> legacy component.</li> </ul> <p>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!</p> http://localhost:8298/release-notes/design-system-updates-for-2021-september 2021-08-04T10:05:00+00:00 2021-08-04T10:05:00+00:00 <h3>New Releases</h3> <p><strong>Web Component-ification:</strong> we've created Web Component variants for some of our commonly used CSS components: <a href="/components/action/switch/examples">Switch</a>, <a href="/components/input/radio-button/examples">Radio Button</a>, and <a href="/components/input/checkbox/examples">Checkbox</a>. 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.</p> <h3>Enhancements</h3> <ul> <li>Multiselect component now has an <a href="/components/input/multiselect/api">"open" event</a>.</li> <li><a href="/components/action/dropdown/examples">Dropdown</a> component now opens a list that supports keyboard navigation.</li> <li>Input Group now can have <a href="/components/input/input-group/examples#input_and_postfix">postfixes</a>.</li> </ul> <h3>Changes</h3> <ul> <li>Based on customer feedback, the <a href="/structure/navigation-sidebar/examples">Navigation Sidebar</a> now opens with less delay.</li> </ul> <h3>Fixes</h3> <ul> <li>Datagrid rendering speed is vastly improved.</li> <li>Fixed icon style-bug in the <code>e-alert</code> legacy component.</li> <li>Datetime does not reformat invalid dates anymore.</li> <li>Datetime picker now uses the user’s preferred date formatting.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2021-august 2021-07-06T15:20:00+00:00 2021-07-06T15:20:00+00:00 <h3>New Releases</h3> <p><strong>Popup Panel component:</strong> building on top of our recently released Popup Utility, the piping hot <a href="/components/action/popup-panel">Popup Panel</a> 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! </p> <h3>Enhancements</h3> <ul> <li>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.</li> <li>The Multiselect filter in Datagrid now can be used on cells that contain arrays.</li> <li>The Chart Columns can now use colors from our Color Library.</li> </ul> <h3>Changes</h3> <ul> <li>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.</li> </ul> <h3>Fixes</h3> <ul> <li>Date-Time Picker now uses the date format set by the user in My Profile.</li> <li>The icon in the Notification component is now displayed in the correct size.</li> <li>The Select component now can have a loading state even when the option list is empty.</li> <li>Fixed Link Button style bug for its :active state.</li> <li>Criteria component doesn’t break anymore when it receives an invalid JSON, instead it falls back to an empty object.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Added new AC icons: <code>ac-event-false</code>, <code>ac-event-true</code>, <code>ac-message-false</code>, <code>ac-message-true</code>, <code>ac-testing</code></li> <li>Added new generic icons: <code>e-tag</code>, <code>e-tag-remove</code>, <code>e-move-reorder</code></li> </ul> <h3>Guideline Updates</h3> <ul> <li>Improved the "Getting Started" documents for <a href="http://localhost:8298/getting-started/for-developers">developers</a> and <a href="/getting-started/for-designers">designers</a>.</li> <li>Added design guidelines (and some code examples!) for the <a href="/structure/navigation-sidebar">Navigation Sidebar</a> component.</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2021-july 2021-06-14T13:20:00+00:00 2021-06-14T13:20:00+00:00 <p>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.</p> <p>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.</p> <p>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.<br /> 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 <em>are</em> full of ideas!</p> <p>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.</p> <p>Here are some of the new features:</p> <figure><img alt="" src="http://localhost:8298/media/pages/release-notes/new-emarsys-design-system-website/483c0dda72-1729241324/01-admin-panel.jpg"></figure> <ol> <li>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.<br /> <br></li> </ol> <figure><img alt="" src="http://localhost:8298/media/pages/release-notes/new-emarsys-design-system-website/30accfacee-1729241324/02-search.jpg"></figure> <ol start="2"> <li>The search now has the ability to search for anything in the Design System — including guidelines, icons, and even release notes.<br /> <br></li> </ol> <figure><img alt="" src="http://localhost:8298/media/pages/release-notes/new-emarsys-design-system-website/8b205b86ad-1729241324/03-health-check.jpg"></figure> <ol start="3"> <li>A new <a href="http://localhost:8298/health">Health Check</a> page shows the development status of all the components and guidelines.<br /> <br></li> </ol> <figure><img alt="" src="http://localhost:8298/media/pages/release-notes/new-emarsys-design-system-website/13a45c28c9-1729241324/04-playground.jpg"></figure> <ol start="4"> <li>The code examples are opened in the new and improved Design System Playground.<br /> <br></li> </ol> <p>…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.</p> <p>Outdated versions of the UI Framework documentation will remain available on their version-specific URLs. The last version to receive the old documentation was <a href="https://assets.emarsys.net/ui/14.880.0/doc/index.html" rel="noreferrer" target="_blank">14.880.0</a>. Also, if you feel like taking a walk down memory lane, check out our <a href="http://localhost:8298/misc/design-system-museum">Design System Museum</a> for some nostalgia fuel.</p> <p>If you have any feedback or questions, please get in touch with the Design System team via Slack!</p> http://localhost:8298/release-notes/new-emarsys-design-system-website 2021-06-01T14:30:00+00:00 2021-06-01T14:30:00+00:00 <h3>New Releases</h3> <p><strong>Suggest Input component</strong>: our brand new <a href="http://localhost:8298/components/input/suggest_input" rel="noreferrer" target="_blank">Suggest Input</a> 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.</p> <p><strong>Popup utility</strong>: the <a href="http://localhost:8298/utilities/functions/popup" rel="noreferrer" target="_blank">Popup utility</a> 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.</p> <h3>Enhancements</h3> <ul> <li>Notification components with the type attribute can be implemented in an <a href="http://localhost:8298/components/feedback/notification/examples#notification-types-with-alternative-style" rel="noreferrer" target="_blank">alternative style</a>, which looks better on light-gray backgrounds than the regular Notifications. </li> <li>Notification components now can remember their closed state even if they were closed through methods other than the close button.</li> </ul> <h3>Changes</h3> <ul> <li>The <a href="http://localhost:8298/components/data_display/charts/examples#chart-loading" rel="noreferrer" target="_blank">loading state in the ec-chart component</a> is now lighter and visually less intrusive.</li> </ul> <h3>Fixes</h3> <ul> <li>Fixed hover state style-bug in the borderless variant of our Button component.</li> </ul> <h3>Icon Library Updates</h3> <ul> <li>Updated existing icons: <code>e-error</code>, <code>e-commenting</code>, <code>e-logic-and</code>, <code>e-logic-or</code>, <code>e-times-circle</code>, <code>e-underline</code>, <code>ac-action-sms</code>, <code>ac-sms</code></li> <li>Added new icons: <code>e-accessibility</code>, <code>e-edit-cut</code>, <code>ac-settings-immediate</code>, <code>ac-select-branch</code>, <code>ac-select-multiple</code>, <code>ac-settings-anytime</code>, <code>ac-settings-indefinite</code>, <code>ac-settings-once</code>, <code>ac-settings-repeat</code></li> </ul> <h3>Guideline Updates</h3> <ul> <li>Added <a href="http://localhost:8298/accessibility/keyboard-support" rel="noreferrer" target="_blank">Keyboard Support guideline</a> in Accessibility</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2021-june 2021-04-21T08:55:00+00:00 2021-04-21T08:55:00+00:00 <h3>Enhancements</h3> <ul> <li><code>e-widget</code> now can be implemented without shadow.</li> <li>Improved error message handling for <code>e-datetime</code> component.</li> <li>The emoji picker has been updated with new emojis.</li> <li>In destructive dialogs, the destructive button can now be disabled.</li> <li><code>e-datagrid</code> action icons can now open a new tab.</li> </ul> <h3>Changes</h3> <ul> <li>Unified the look of <code>e-multiselect</code> and <code>e-select</code>.</li> <li>Icon usage in “error state” and “warning state” are now consistent across components.</li> <li>Improved copywriting in <code>e-datetime</code> error state.</li> <li>Unified hover and select style in <code>e-multiselect</code>, <code>e-select</code>, and <code>e-dropdown</code>.</li> <li>The "close button" in <code>e-dialog</code> now use the <code>e-button</code> component, instead of an <code>e-icon</code>.</li> <li>Added border around tabbed page layout to make it consistent with other layouts.</li> <li>“Danger” state has been renamed to “error” state to distance it from “warning” state.</li> </ul> <h3>Fixes</h3> <ul> <li>Fixed button labels and caret position in Editor toolbar.</li> <li>Fixed header in form layout.</li> </ul> <h3>Icon updates</h3> <ul> <li>We’ve replaced most of our “fill-style” icons with “outline-style” icons for a consistent visual look.</li> <li>Added <code>e-logo-sap</code>, <code>ac-doi</code>, <code>ac-contacts-delete</code>, and <code>e-error</code> icons.</li> <li>Updated <code>warning</code>, <code>exclamation</code>, <code>exclamation-circle</code> icons.</li> <li>Fixed color problems with some icons.</li> </ul> <h3>Deprecation</h3> <ul> <li>Old date formatter has been deprecated. Pages that use the deprecated date formatter will get a warning in the console. Use new “date utils” instead.</li> <li>We’ve officially removed the old 2015 design from the current code. It's been a long journey!</li> </ul> http://localhost:8298/release-notes/design-system-updates-for-2021-april 2021-02-05T12:45:00+00:00 2021-02-05T12:45:00+00:00 <p>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.</p> <p>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.</p> <p>Learn more about this component on its <a href="/components/data_display/truncate">documentation page</a></p> http://localhost:8298/release-notes/truncate-component 2021-02-05T12:40:00+00:00 2021-02-05T12:40:00+00:00 <p>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 <a href="components/data_display/datagrid">documentation page</a></p> http://localhost:8298/release-notes/better-datagrid-search 2021-01-22T12:40:00+00:00 2021-01-22T12:40:00+00:00 <p>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 <a href="/utilities/components/duration">documentation page</a></p> http://localhost:8298/release-notes/duration-utility 2020-12-11T12:40:00+00:00 2020-12-11T12:40:00+00:00 <p>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 <a href="/components/input/timepicker">documentation page</a></p> http://localhost:8298/release-notes/time-picker-component 2020-11-23T10:00:00+00:00 2020-11-23T10:00:00+00:00 <p>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 <a href="/components/feedback/notification">design system website</a></p> http://localhost:8298/release-notes/notification-component 2020-11-23T09:50:00+00:00 2020-11-23T09:50:00+00:00 <p>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:</p> <ul> <li>A new vertical navigation sidebar with overhauled information architecture.</li> <li>An improved look and feel that brings the Emarsys UI closer to the Emarsys brand with fresh colours and typography.</li> <li>Icons have been redrawn to have a unified style.</li> <li>A nicer and more usable login page.</li> </ul> http://localhost:8298/release-notes/2020-redesign 2020-09-24T13:00:00+00:00 2020-09-24T13:00:00+00:00 <p>Please welcome our new family of components: <a href="/components/action/upgrade"><em>e-upgrade</em></a>. The various Upgrade components can help teams introduce upgrade opportunities for our beloved customers, to boost the capabilities of the Emarsys products they use.</p> <h2 id="new-components"><a href="#new-components">New Components:</a></h2> <ul> <li>Upgrade components</li> <li>Layout component, back button in page title</li> </ul> <h2 id="new-utilities"><a href="#new-utilities">New Utilities:</a></h2> <ul> <li>CSS Utility Classes: border utilities added</li> <li>Translation: you can get translations for your product via the suite</li> </ul> <h2 id="new-features"><a href="#new-features">New Features:</a></h2> <ul> <li>The empty state of action list can now be customized</li> <li>Select now has a loading state</li> <li>Numeric component can auto-trim values (i.e. ditching unnecessary zeroes from the end of the value)</li> </ul> <h2 id="fixes"><a href="#fixes">Fixes:</a></h2> <ul> <li><code>e-datetimerange</code>: AM / PM issues were fixed</li> </ul> http://localhost:8298/release-notes/upgrade-component 2020-05-16T12:05:00+00:00 2020-05-16T12:05:00+00:00 <p>You know how the saying goes: <em>"pepper is small, but strong"</em>. This update is just like pepper. </p> <ul> <li><code>e-actionlist</code>: you can now hide the search field with the <em>search-hidden</em> attribute.</li> <li><code>trackEvent()</code>: implement analytics using our new <em>trackEvent()</em> JS utility. Read more about it in [Utility / Tracking](/utilities/functions/tracking.</li> <li>CSS Border utility classes: add borders to your components with ease. Find out more in <a href="/utilities/css-utility-classes">CSS Utility Classes</a>.</li> </ul> <h3>Coming Soon: New Navigation</h3> <p>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 <a href="/structure/navigation-sidebar">small sneak peek…</a></p> http://localhost:8298/release-notes/updates-for-2019-may 2020-01-03T16:10:00+00:00 2020-01-03T16:10:00+00:00 <figure><img alt="" src="http://localhost:8298/media/pages/release-notes/e-widget/27a6c21c2a-1729241324/widget-1.png"></figure> <p>Introducing the <a href="/components/layout/widget"><em>e-widget</em></a>. 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 <a href="/components/layout/widget">guidelines page</a> to see some pointers and examples.</p> <h2 id="new-components"><a href="#new-components">New Components:</a></h2> <ul> <li><code>e-inputgroup</code>: "stick together" certain input components, like text input fields and buttons. Help a lot with rounded corners, too!</li> </ul> <h2 id="new-features"><a href="#new-features">New Features:</a></h2> <ul> <li><code>e-select</code>: a borderless variant has been added.</li> </ul> http://localhost:8298/release-notes/e-widget 2019-09-24T12:40:00+00:00 2019-09-24T12:40:00+00:00 <figure><img alt="" src="http://localhost:8298/media/pages/release-notes/salesperson-update/daa6a6553f-1729241324/upgrade.png"></figure> <p>Please welcome our new family of components: <a href="/components/action/upgrade"><code>e-upgrade</code></a>. The various Upgrade components can help teams introduce upgrade opportunities for our beloved customers, to boost the capabilities of the Emarsys products they use.</p> <h2 id="new-components"><a href="#new-components">New Components:</a></h2> <ul> <li>Upgrade components</li> <li>Layout component, back button in page title</li> </ul> <h2 id="new-utilities"><a href="#new-utilities">New Utilities:</a></h2> <ul> <li>CSS Utility Classes: border utilities added</li> <li>Translation: you can get translations for your product via the suite</li> </ul> <h2 id="new-features"><a href="#new-features">New Features:</a></h2> <ul> <li>The empty state of action list can now be customized</li> <li>Select now has a loading state</li> <li>Numeric component can auto-trim values (i.e. ditching unnecessary zeroes from the end of the value)</li> </ul> <h2 id="fixes"><a href="#fixes">Fixes:</a></h2> <ul> <li><code>e-datetimerange</code>: AM / PM issues were fixed</li> </ul> http://localhost:8298/release-notes/salesperson-update 2019-03-29T12:35:00+00:00 2019-03-29T12:35:00+00:00 <figure><img alt="" src="http://localhost:8298/media/pages/release-notes/criteria-update/8f6e76dcc9-1729241324/criteria.png"></figure> <p>We're introducing a new component: <code>e-criteria</code>. 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.</p> <h2 id="new-documents"><a href="#new-documents">New Documents</a></h2> <ul> <li>Design Principles</li> <li>Contribution Guideline</li> <li>Documentation for utility functions: Flipper Service, Config, Authentication Token</li> <li>Sample component (available in GitHub only)</li> </ul> <h2 id="new-features"><a href="#new-features">New Features</a></h2> <ul> <li><code>e-actionlist</code>: items now can be defined by <em>item setter</em></li> <li><code>e-actionlist</code>: max-height now can be defined</li> <li><code>e-datagrid</code>: added search-keyword and search-keys attributes</li> <li><code>e-datagrid</code>: individual words in search query are now processed (e.g. the item "hello beautiful world" will be found when searching for "hello world")</li> <li><code>e-datagrid</code>: added Multiselect filter</li> <li>New utility class: <code>.e-hoverable</code></li> <li>Presets can be hidden in <code>e-datetimepicker</code> and <code>e-datetimerange</code> with the attribute <em>presets=hidden</em></li> <li><code>e-device</code>: now compatible with VCE components</li> </ul> <h2 id="fixes"><a href="#fixes">Fixes</a></h2> <p>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.</p> http://localhost:8298/release-notes/criteria-update 2018-11-05T11:20:00+00:00 2018-11-05T11:20:00+00:00 <h2 id="breaking-change"><a href="#breaking-change">Breaking Change</a></h2> <ul> <li>The <code>e-datagrid</code> select filter now returns a value without the "option-" prefix.</li> </ul> <h2 id="new-features"><a href="#new-features">New Features</a></h2> <ul> <li>New icons for various Email Campaign types: <code>e-email-block-based</code>, <code>e-email-custom-html</code>, and <code>e-email-template-based</code>.</li> <li><code>e-dialog</code> now has an "opened" property.</li> <li><code>e-validator</code> now has an "opened" property, and now dispatches an event on open and on close.</li> <li><code>e-select</code> now has a loading state.</li> <li><code>e-actionlist</code> now has a loading state.</li> <li>Added documentation for config-service.</li> <li>Added documentation for authentication token service.</li> <li>Added a new <code>help</code> color, to be used for tooltip icons.</li> <li>Datagrid filters now have a "custom" attribute. When enabled, you can override the default logic of the filter with your own custom logic.</li> </ul> <h2 id="improvements"><a href="#improvements">Improvements</a></h2> <ul> <li><code>.e-label-outline</code> labels are not in uppercase anymore.</li> <li>Checkbox filters in datagrid can contain tooltips.</li> <li><code>e-actionlist</code> has two empty states: one for no data, one for no search results.</li> </ul> <h2 id="bug-fixes"><a href="#bug-fixes">Bug Fixes</a></h2> <ul> <li><code>e-datepicker</code> does not dispatch an event when disabled.</li> <li>Datagrid filters are laid out in multiple rows if they can't fit in a single row.</li> </ul> http://localhost:8298/release-notes/updates-for-2018-november 2018-09-07T11:10:00+00:00 2018-09-07T11:10:00+00:00 <figure><img alt="" src="http://localhost:8298/media/pages/release-notes/action-list/2aa55a7697-1729241324/actionlist.png"></figure> <p>We're introducing <a href="/components/action/actionlist"><code>e-actionlist</code></a>, a brand new component which can display a list of actions — kind of like the list that's opened by our <code>e-dropdown</code> component. The items are searchable, group-able, and can have various different states.</p> <p>This component will be used by <em>Personalization</em>, 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.</p> <p>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!</p> <h2 id="new-features"><a href="#new-features">New Features</a></h2> <ul> <li><code>e-datetimepicker</code> handles ISO datetime string (without timezone)</li> <li><code>e-datagrid</code> can display errors from server-side</li> <li><code>e-numeric</code> can display numbers in humanized format (e.g. 200K)</li> <li><code>e-style</code> icon</li> <li><code>e-dialog</code> handles HTML in headline attribute</li> <li><code>e-daterangepicker-preset</code> handles last hour(s) (e.g. "Last 6 hours")</li> </ul> <h2 id="improvements"><a href="#improvements">Improvements</a></h2> <ul> <li><code>e-multiselect</code> dispatches events for clear and select all</li> <li><code>e-datepicker</code> dispatches event on clear</li> </ul> <h2 id="bug-fixes"><a href="#bug-fixes">Bug Fixes</a></h2> <ul> <li><code>e-datetimepicker</code> time parsing if value is not a datetime</li> <li><code>e-datepicker</code> disable state in <code>e-input</code> fixed</li> </ul> http://localhost:8298/release-notes/action-list