UI MarCom 3
3.2.4
Latest 3.2.x 3.1.x 2.4.x 2.3.x 2.2.x
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.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.0

Added
  • Font update to SH-Bree-Headline V1.4
  • Introduce a new default Link style
  • The new Text Button reveals background on hover
  • Apply corporate hover states to
    • Collection with link items
    • Menu with link items
  • Apply new link styles on Footer Sitemap and Legal links
  • Put Hero Block title on black background on small viewports
Fixed
  • Date-Time-Picker shows selected date now correctly
  • 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.