The Siemens Sans web-font is not included in the zip files anymore.
Without included Siemens web-font, the MDSP-CSS Framework will fallback on a web-safe font.
A zip file containing the font files, CSS and SCSS code snippets is available to download here (Siemens internal only!).
Added
- Add new chapter “Container” (pattern and CSS).
- Add new chapter “Key value” (pattern and CSS).
- Add new icon “serviceCredentials” to MindSphere iconfont.
- Added new iconfonts for ‘bold’ and ‘black’ System icons.
- Harmonize modifier classes for sizes across all existences: see detailed overview of renamed class names, please refer to the table below.
- Streamlined ‘fieldset’ element so that it complies with new graphical specs of new ‘container’ (no markup change needed).
- Add “no-margin” class for headline elements (only).
Changed
- Update hover styles on secondary button.
- Rename all SVG icon files according to latest naming guideline: detailed changelog.
- Improved font fallback handling for external (non Siemens) users.
Removed
- Remove Siemens web-fonts from mdsp-css for legal reasons (Siemens internal use only).
Internal
- Update sonarCSS rules in MDSP.cqm quality profile.
- Add “aria-hidden” attribute to iconMdsp elements in markup examples for best practice.
- Add missing “alt” attributes in sample markup for best practice.
Overview of renamed modifier classes
| Component | Old size-class | New size-class |
|---|
| Form group | .inputGroup–xxs | .inputGroup–xxsmall |
| Form group | .inputGroup–xs | .inputGroup–xsmall |
| Form group | .inputGroup–s | .inputGroup–small |
| Form group | .inputGroup–sm | .inputGroup–smallmedium |
| Form group | .inputGroup–m | .inputGroup–medium |
| Form group | .inputGroup–ml | .inputGroup–mediumlarge |
| Form group | .inputGroup–l | .inputGroup–large |
| Message | .message–s | .message–small |
| Switch | .switch–s | .switch–small |
| Switch | .switch–l | .switch–large |
| Tabs | .sm | .tabs–small |
| Tabs | .md | .tabs–medium |
| Tabs | .lg | .tabs–large |
| Table | .table–s | .table–small |
| Typography - Paragraph | .p–s | .p–small |
Overview of renamed / changed / added icons
| New class name | Old class name | Status |
|---|
| analysis | | Added |
| analysis black | | Added |
| analysis bold | | Added |
| assetNetwork black | | Added |
| buildingBlock bold | | Added |
| cancel bold | | Added |
| certificate | | Added |
| certificate bold | | Added |
| certificate black | | Added |
| chartPie black | | Added |
| cogBox black | | Added |
| comment bold | | Added |
| comment black | | Added |
| control | | Added |
| control black | | Added |
| dashboardSmall | | Added |
| delete black | | Added |
| devices | | Added |
| devices bold | | Added |
| devices black | | Added |
| download bold | | Added |
| draw | | Added |
| edit bold | | Added |
| editDocument black | | Added |
| element | | Added |
| email black | | Added |
| export | | Added |
| export bold | | Added |
| factoryMagnifier | | Added |
| factoryMagnifier black | | Added |
| fileTree bold | | Added |
| fileTree black | | Added |
| filetypeDefault black | | Added |
| filter bold | | Added |
| filterAlternative | | Added |
| filterAlternative bold | | Added |
| filterAlternative black | | Added |
| folder black | | Added |
| fullscreen | | Added |
| fullscreen bold | | Added |
| hierarchy black | | Added |
| iconMissing | | Added |
| image | | Added |
| import | | Added |
| import bold | | Added |
| listBulletMinus | | Added |
| locationMarker black | | Added |
| machineA | | Added |
| machineB | | Added |
| machineC | | Added |
| maintenance | | Added |
| map black | | Added |
| more black | | Added |
| movie | | Added |
| navigateLeftSmall | | Added |
| navigateRightSmall | | Added |
| note | | Added |
| notification black | | Added |
| notificationSquare | | Added |
| notificationSquare bold | | Added |
| notificationSquare black | | Added |
| outgoingExtSmall | | Added |
| outgoingSmall | | Added |
| outgoingSmall bold | | Added |
| outgoingSmall black | | Added |
| person bold | | Added |
| person black | | Added |
| phone black | | Added |
| plant | | Added |
| plant black | | Added |
| question black | | Added |
| redo | | Added |
| rules | | Added |
| search bold | | Added |
| serviceCredential black | | Added |
| share black | | Added |
| shift | | Added |
| shoppingCart black | | Added |
| sort bold | | Added |
| sort black | | Added |
| star | | Added |
| star black | | Added |
| subtenant | | Added |
| subtenant2 | | Added |
| subtenant4 | | Added |
| subTenantSmall | | Added |
| tag black | | Added |
| ticket black | | Added |
| tile | | Added |
| undo | | Added |
| update bold | | Added |
| update black | | Added |
| updateCog | | Added |
| updateCog bold | | Added |
| updateCog black | | Added |
| upload | | Added |
| upload bold | | Added |
| calendarWeek | | Added |
| paperPlay | | Added |
| | arrowCircleDown | Removed |
| | arrowCircleLeft | Removed |
| | arrowCircleRight | Removed |
| | arrowCircleUp | Removed |
| | assetArrow | Removed |
| | bell | Removed |
| | drilldownAction | Removed |
| | extension | Removed |
| | link | Removed |
| | navigateRightInverted | Removed |
| | settings | Removed |
| addCircle | plusCircle | Renamed |
| addCircle black | plusInverted | Renamed |
| add | plus | Renamed |
| announcement | megaphone | Renamed |
| apps | grid | Renamed |
| apps black | gridInverted | Renamed |
| archive | box | Renamed |
| arrowDownExtraSmall black | caretDown | Renamed |
| arrowFirstLeft | arrowFirst | Renamed |
| arrowLastRight | arrowLast | Renamed |
| arrowLeftExtraSmall black | caretLeft | Renamed |
| arrowRightExtraSmall black | caretRight | Renamed |
| arrowStemSingleDown | stemDown | Renamed |
| arrowStemSingleLeft | stemLeft | Renamed |
| arrowStemSingleRight | stemRight | Renamed |
| arrowStemSingleUp | stemUp | Renamed |
| arrowUpExtraSmall | caretUp | Renamed |
| aspects | aspect | Renamed |
| asset black | assetInverted | Renamed |
| attachment | paperclip | Renamed |
| attention | exclamationmarkCircle | Renamed |
| attention black | exclamationmarkCircleInverted | Renamed |
| buildingBlock | block | Renamed |
| buildingBlock black | blockInverted | Renamed |
| cancel | clear | Renamed |
| cancelCircle | clearCircle | Renamed |
| cancelCircle black | clearInverted | Renamed |
| chartPie | pie | Renamed |
| chartTrend | graph | Renamed |
| chartTrend black | graphInverted | Renamed |
| clipboardCheck | clipboardOk | Renamed |
| cog black | cogInverted | Renamed |
| cogBox | cogbox | Renamed |
| comment | comment, speechbubble | Renamed |
| createWorkbook | addBook | Renamed |
| dashboard | speedoAlternative | Renamed |
| dashboard black | speedo2Inverted | Renamed |
| duplicate | rectanglesStacked | Renamed |
| edit black | editInverted | Renamed |
| editDocument | editSquare | Renamed |
| email | letter | Renamed |
| errorAlert | exclamationmark | Renamed |
| errorAlert black | exclamationmarkInverted | Renamed |
| exclamationDiamond | exclamationmarkDiamond | Renamed |
| exclamationDiamond black | exclamationmarkDiamondInverted | Renamed |
| fileTree | filetree | Renamed |
| filter | funnel | Renamed |
| filter black | funnelInverted | Renamed |
| filterList | funnelList | Renamed |
| flagSmall | flag | Renamed |
| flagSmall black | flagFilled | Renamed |
| globalSettings | globe | Renamed |
| goTo bold | arrowGoTo | Renamed |
| hatMan | incognito | Renamed |
| hierarchy | connect | Renamed |
| home | house | Renamed |
| home black | houseInverted | Renamed |
| information | infoCircle | Renamed |
| information black | infoCircleInverted | Renamed |
| legal black | legalInverted | Renamed |
| link | variableLink | Renamed |
| linkDissolve | variableUnlink | Renamed |
| listBullet | listBulleted | Renamed |
| listBulletPlus | listBulletedPlus | Renamed |
| lockClosed | lock | Renamed |
| lockOpened | lockOpen | Renamed |
| more | dotsh | Renamed |
| moreAlternative | dotsv | Renamed |
| move | circleToCircle | Renamed |
| moveToTop | move | Renamed |
| moveToTop black | moveInverted | Renamed |
| navigateLeftSmall bold | navigateArrowBack | Renamed |
| navigateRightSmall bold | navigateArrow | Renamed |
| notification | bellAlternative | Renamed |
| ok | checkCircle | Renamed |
| ok black | checkInverted | Renamed |
| outgoingInApp | outgoingApp | Renamed |
| outgoingInMdsp | outgoingAppCircle | Renamed |
| person | user | Renamed |
| personMultiple | userMultiple | Renamed |
| question | questionmarkCircle | Renamed |
| reload | arrowCircleccw | Renamed |
| remove | minus | Renamed |
| removeCircle | minusCircle | Renamed |
| reorder | sort | Renamed |
| scope | scopeA | Renamed |
| scopeAlternative | scopeB | Renamed |
| search | loupe | Renamed |
| search black | loupeInverted | Renamed |
| selectNone | deselectAll | Renamed |
| serviceCredential | serviceCredentials | Renamed |
| shareAlternative | arrowSquare | Renamed |
| sidebar | sidebarWindow | Renamed |
| sort | sortFilled | Renamed |
| subtenant3 | subtenant | Renamed |
| types | types | Renamed |
| types black | typesInverted | Renamed |
| updateAvailable | arrowExclamationMark | Renamed |
| updateNotification | arrowCirclecw | Renamed |
| updateNotification black | arrowCircleInverted | Renamed |
| virtualHidden | cursorSquarestrikethrough | Renamed |
| virtualShown | cursorSquare | Renamed |
| visibilityHidden | eyeStrikethrough | Renamed |
| visibilityShown | eye | Renamed |
| widget | puzzle | Renamed |
| widget black | puzzleInverted | Renamed |
| calendar | calendar | Renamed |
| calendarDay | calendarAlternative | Renamed |