UI MarCom 3
Latest (3.5.1)
Previous versions
UI MarCom
Getting Started
About UI MarCom Develop Design
Fundamentals
Overview Colors Elevation Icons Image Aspect Ratios Interaction Responsive Behavior Spacing States Typography
Components
Component status Overview Accordion Alerts Application Bar Aspect Ratio Back to top Breadcrumbs Button Card Slider Cards Carousel Checkboxes Collection Country and Language Selector Date-Time-Picker Disclaimer Dropdown Eyecatcher Feedback Module Figure Footer Header Hero Block Hotspots Label Links Lists Loading Animation Log In Dialog Logo Media Object Menu Modal Dialog Multi-column Navigation bar Overlay Pagination Progress Quotation Radio Buttons Search Field Search Results Select Box Stage Steps Bar Table Tabs Tags Textfield Toggle Button Group Toggle Switch Tooltip User Identifier Value Slider
Updates
Component Library Changelog Design Files Changelog
Help
Contact us

Component Library Changelog

3.5.1

Added
  • Include all new icons also as single SVG files and SVG sprite
Changed
  • Minor changes to new icon set
Fixed
  • Adjust icons on buttons, hotspots, carousel controls and breadcrumbs

3.5.0

Changed
  • Updated redesigned icons based on the Shui next level icon set

3.4.2

Changed
  • Selectbox onChange callback is only called if the selected value changes
  • Value Sliders second handle does not limit the value of the first handle
Fixed
  • Filtered Selectbox is not closed if spaces are entered in the filter input
  • Value Slider updates progress bar when value attribute or property is changed by script
  • Value Slider validity check no longer interferes when typing in values in number inputs

3.4.1

Changed
  • Update icon font with the new Twitter / X icon
Fixed
  • Fix Multi Select did not open when clicked

3.4.0

Added
  • Selectbox filter feature
  • Selectbox onOpen and onClose callbacks
  • Radio Button with separate callbacks for onClick and onChange
  • Siemens Healthineers logo is linkable
  • App identifier in the Application Bar is linkable
Changed
  • Darker Selectbox border color matches other form inputs
  • Refactor Selectbox to reduce lifecycle loops
  • Refactor Country & Language Selector to work with new Selectbox
Fixed
  • Logo SVG without annoying title attribute
  • Register customElements.define() natively w/o the window object
  • Country & Language Selector filtered selection keyboard control
  • Documentation is freed from dead links and inline scripts

3.3.3

Security
  • Replace deprecated Node Sass as a dev dependency with sass-embedded using Dart Sass

3.3.2

Security
  • Update Webpack and other dev dependencies

3.3.1

Fixed
  • Pagination items background hover restored

3.3.0

Added
  • Dark theme support for many components to implement dark user interfaces
Changed
  • Increase focus ring thickness to 3px
  • Some callback functions now using the component object as parameter instead of the value.
  • All Sass mixins now using the @content rule consistently
Fixed
  • Change license string to LicenseRef to match SPDX standard
  • Radio Button component disabled state
  • Value Slider resizes responsivly

3.2.4

Changed
  • Selectboxes got improved usability inspired by the native select element
  • Remove the bottom margin inside form input components
  • Add date attribute to Date Picker, which sets an initially selected date or reflects the choosen date
  • Textarea, Textfield and Selectbox can expand width to their container
  • Media Object displays the image even if no width is specified
Fixed
  • Textarea resizes with multi line text
  • Textarea now supports hinttext below it like Textfields
  • Textfields focus state is visible even if validation states are applied
  • Selectbox closes when focus drops
  • Multiselect is now focusable
  • Tabs are focusable to be controlled via keyboard
  • Menu items are focusable to be controlled via keyboard
  • Collection Items that are linked get the proper orange focusring
  • Search result items focus is visibility corrected
  • Searchfield bottom border does not disappear on focus
  • Application Bar Meta Menu focus visibility corrected
  • Value Slider range thumb shows visible focus
  • Value Slider with double range got draggability of the right thumb fixed
  • Overlay closes when Esc key is pressed or the surrounding fog is clicked
  • Modal Dialog closes when Esc key is pressed or the surrounding fog is clicked
  • Date Picker label stays on top after a date is choosen
  • Country and Language Selector error when only one of both is changed is fixed
  • Superscript and subscript does not increase the spacing between lines

3.2.3

Changed
  • Button component supports disabled state
  • Card gets an card-title slot to for a headline with proper margins
  • Card Slider UI/UX improved
  • Language Selector is observable with an onChange event callback
  • Country and Language Selector is observable with an onChange event callback
  • Country and Language Selector has customizable headings and button label
Fixed
  • Fix Textfield label position issue when focus is lost
  • Eye Catcher updates when text attribute changes
  • Fix dark theme support for Footer component
  • Fix double rule issue on slim footer
  • Multiselect does not list group names alongside their nested items
  • Multiselect is now focusable for keyboard control
  • Card borders can not be hidden by container in Card Slider or Carousel
  • Card border does not disappear on focus state
  • Covered Card image leaves no bottom margin
  • Card Slider number of visible cards respond to viewport
  • Cards inside the Card Slider apply headline, anchor and paragraph styles
  • Country and Language Selector suppresses the native select options on iOS
  • Alert clears auto-hide timeout on manual close

3.2.2

Fixed
  • Selectbox suppresses the appearance of native select options on iOS
  • Selectbox passes selected item to callback function
  • Fix Selectbox theming issue with the items in option list

3.2.1

Changed
  • Deploy dist files with npm package

3.2.0

Added
  • Add Toggle Button Group component as segmented controls
  • Add Value/Range Slider component
  • Add Multiselect component as a Select Box variant with support for nesting checkboxes
  • Add a downloadable boilerplate template to quickstart prototyping with UI MarCom 3 components
Changed
  • Redesign Alerts component to support inline or overlay appearance with automatic hiding
  • Add labeled variant to Hotspots component
  • Add indeterminate state to Checkbox component
  • Add dark theme support for Breadcrumbs
  • Fix dark theme support for Select Box
  • Streamline internal build process to reduce dependencies
Fixed
  • Include required sub-components in each component
  • Checkbox state change triggers a callback event hook
  • Fix icon set documentation
  • Avoid loading external images inside the documentation
Removed
  • Alerts no longer have buttons by design

3.1.6

  • Streamline internal build process to reduce dependencies

3.1.5

  • Fix HTML validity in Accordion component to match accessibility guidlines

3.1.4

  • Disable body scroll when overlay is open

3.1.3

  • Fix dark theme support for Cards

3.1.2

  • Correct upper/lower case typo in SH-Bree-Headline folder name

3.1.1

  • Fix automated tests

3.1.0

Added
  • Add Covered Stage component
  • Add Covered Card component
  • Add Eye Catcher component
  • Add new icon set
  • Developers guide for migrating from 2.x to 3.x
  • Explain integration of Javascript and SCSS components
  • Technical documentation of the interfaces of all web components
  • Make all Lit Elements extendable through export-statements
  • Include international web font subsets of SH-Bree-Headline V1.4
Changed
  • Update Date Time Picker web component
  • Add useful hooks for callback functions
Fixed
  • Eliminate compiling error regarding the installed package
  • Solve Search Field and auto suggest issues
  • Fix Filtered Select for Country and Language Selector
  • Solve Application Footer issues
  • Fix some found minor incidents
  • Fix elevation shadow on hovered cards

3.0.0

Added
  • All components available as Web Components
  • Country and Language Selector arrives
  • More than 250 round shaped country flags are now included

2.4.4

Fixed
  • Hotfix Selectbox issue with native options apearing additionally
Security
  • Update all dependencies to counteract future vulnerabilities

2.4.3

Changed
  • Downgrade flatpickr third party plugin to v4.5.7 to fix issues
Fixed
  • Date Picker gets rid of the unintended month select
  • Time input will open timepicker again
Security
  • Update vulnerable dependencies

2.4.2

Changed
  • include dist files into npm package
Security
  • Update dependencies

2.4.1

Security
  • Update vulnerable dependencies

2.4.0

Added
  • The new Text Button reveals background on hover
Changed
  • Font update to SH-Bree-Headline V1.4
  • Introduce a new default Link style
  • Apply new link styles on Footer Sitemap and Legal links
  • Apply proper hover state to Collection with link items
  • Apply proper hover state to Menu link items
Fixed
  • Date-Time-Picker shows selected date now correctly
  • Put Hero Block title on black background on small viewports
  • Steps Bar items can now reflect states independently

2.0.0 - 2.3.0

  • Colors have been updated per the brand design update for background colors, additional colors and functional colors. There is also a new accessible Orange, Petrol, Red, and Green for when needed to meet AA level contrast requirements.

  • Typography has been updated to now include Siemens Sans with a larger base font size for easier reading of longer articles.

  • Spacing system is now defined and available to ensure consistent spacing between elements and simplify understanding for user.

  • States concept for common interactive elements like hover, focus, active, disabled is now available.

  • Component status for an overview of all the components where you may find what is new or has been updated in latest release

  • Cards is now an official component that can be reused for various applications. We have added a new hover state and elevation to this component.

  • There has been alignment with our product team for common elements such as Date-Time-Picker, Textfield, and Tabs so that we have a consistent experience for our users across touchpoints.

  • Buttons and Textfield components now show various versions for the three main background colors: white, gray, black.

  • Navigation Bar and Footer now have a “Dark theme” version available in addition to the light theme version. See “Code” tab for details.