Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# Changelog v0.12.0

##### Release date: 2019/10/09

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

Download version

#### 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

- Get started
- Download
- Releases
- Container
- Key value

Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top