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

ComponentOld size-classNew 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 nameOld class nameStatus
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
 arrowCircleDownRemoved
 arrowCircleLeftRemoved
 arrowCircleRightRemoved
 arrowCircleUpRemoved
 assetArrowRemoved
 bellRemoved
 drilldownActionRemoved
 extensionRemoved
 linkRemoved
 navigateRightInvertedRemoved
 settingsRemoved
addCircleplusCircleRenamed
addCircle blackplusInvertedRenamed
addplusRenamed
announcementmegaphoneRenamed
appsgridRenamed
apps blackgridInvertedRenamed
archiveboxRenamed
arrowDownExtraSmall blackcaretDownRenamed
arrowFirstLeftarrowFirstRenamed
arrowLastRightarrowLastRenamed
arrowLeftExtraSmall blackcaretLeftRenamed
arrowRightExtraSmall blackcaretRightRenamed
arrowStemSingleDownstemDownRenamed
arrowStemSingleLeftstemLeftRenamed
arrowStemSingleRightstemRightRenamed
arrowStemSingleUpstemUpRenamed
arrowUpExtraSmallcaretUpRenamed
aspectsaspectRenamed
asset blackassetInvertedRenamed
attachmentpaperclipRenamed
attentionexclamationmarkCircleRenamed
attention blackexclamationmarkCircleInvertedRenamed
buildingBlockblockRenamed
buildingBlock blackblockInvertedRenamed
cancelclearRenamed
cancelCircleclearCircleRenamed
cancelCircle blackclearInvertedRenamed
chartPiepieRenamed
chartTrendgraphRenamed
chartTrend blackgraphInvertedRenamed
clipboardCheckclipboardOkRenamed
cog blackcogInvertedRenamed
cogBoxcogboxRenamed
commentcomment, speechbubbleRenamed
createWorkbookaddBookRenamed
dashboardspeedoAlternativeRenamed
dashboard blackspeedo2InvertedRenamed
duplicaterectanglesStackedRenamed
edit blackeditInvertedRenamed
editDocumenteditSquareRenamed
emailletterRenamed
errorAlertexclamationmarkRenamed
errorAlert blackexclamationmarkInvertedRenamed
exclamationDiamondexclamationmarkDiamondRenamed
exclamationDiamond blackexclamationmarkDiamondInvertedRenamed
fileTreefiletreeRenamed
filterfunnelRenamed
filter blackfunnelInvertedRenamed
filterListfunnelListRenamed
flagSmallflagRenamed
flagSmall blackflagFilledRenamed
globalSettingsglobeRenamed
goTo boldarrowGoToRenamed
hatManincognitoRenamed
hierarchyconnectRenamed
homehouseRenamed
home blackhouseInvertedRenamed
informationinfoCircleRenamed
information blackinfoCircleInvertedRenamed
legal blacklegalInvertedRenamed
linkvariableLinkRenamed
linkDissolvevariableUnlinkRenamed
listBulletlistBulletedRenamed
listBulletPluslistBulletedPlusRenamed
lockClosedlockRenamed
lockOpenedlockOpenRenamed
moredotshRenamed
moreAlternativedotsvRenamed
movecircleToCircleRenamed
moveToTopmoveRenamed
moveToTop blackmoveInvertedRenamed
navigateLeftSmall boldnavigateArrowBackRenamed
navigateRightSmall boldnavigateArrowRenamed
notificationbellAlternativeRenamed
okcheckCircleRenamed
ok blackcheckInvertedRenamed
outgoingInAppoutgoingAppRenamed
outgoingInMdspoutgoingAppCircleRenamed
personuserRenamed
personMultipleuserMultipleRenamed
questionquestionmarkCircleRenamed
reloadarrowCircleccwRenamed
removeminusRenamed
removeCircleminusCircleRenamed
reordersortRenamed
scopescopeARenamed
scopeAlternativescopeBRenamed
searchloupeRenamed
search blackloupeInvertedRenamed
selectNonedeselectAllRenamed
serviceCredentialserviceCredentialsRenamed
shareAlternativearrowSquareRenamed
sidebarsidebarWindowRenamed
sortsortFilledRenamed
subtenant3subtenantRenamed
typestypesRenamed
types blacktypesInvertedRenamed
updateAvailablearrowExclamationMarkRenamed
updateNotificationarrowCirclecwRenamed
updateNotification blackarrowCircleInvertedRenamed
virtualHiddencursorSquarestrikethroughRenamed
virtualShowncursorSquareRenamed
visibilityHiddeneyeStrikethroughRenamed
visibilityShowneyeRenamed
widgetpuzzleRenamed
widget blackpuzzleInvertedRenamed
calendarcalendarRenamed
calendarDaycalendarAlternativeRenamed
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top