sharepoint-frameworkDesign language refresh for the SharePoint Framework

If you’ve been following the SharePoint framework for a while now, you may have noticed some recent changes to the visual styling; primarily in the form of new icons with some updates to spacing and a few components getting a complete overhaul. This brings the visual language of Microsoft products such as Windows 10 and XBox to SharePoint and Office UI Fabric so your web parts and apps can look modern too.

What changed?

The update is primarily to the icons, although some of the Fabric React components such as Toggle, Checkbox, and ChoiceGroup (radio button) have also been given a complete refresh. This includes a new icon set as a part of Fabric Core and updates to Fabric React – both of which are still bundled with the SharePoint framework so they’re easy to use and access.

Some specifics:

  • The SharePoint Framework now has a dependency on office-ui-fabric-react 0.50.0+ instead of office-ui-fabric 2.6.0
  • Line-height of an icon has been removed from .ms-Icon class; now it defaults to inherit
  • Removed $ms-color-neutralPrimary from base font mixins and classes. Now, the root .ms-Fabric contains the default color (see this PR in Fabric Core for more info)
  • Removed ms-font-family-* mixins and variables

Within Fabric React:

  • Contract / Props changes to MessageBar, Pivot and Persona
  • Style and Icon updates to Breadcrumb, Button, Callout, Checkbox, ChoiceGroup, CommandBar, ContextualMenu, DatePicker, DetailsList, Dialog, DocumentCard, Dropdown, GroupedList, Label, Link, MessageBar, Nav, Overlay, Panel, PeoplePicker, Persona, Pivot, SearchBox, ProgressIndicator, Slider, Spinner, TextField and Toggle
  • Check out this PR for more info

How can I use it?

Although a new, completely revamped Fabric site is coming on September 22nd, you can see the new icons by building the Fabric Core localhost site and the revamped components by building theFabric React localhost site. Each of the respective sites allows you to see the code needed to use them. All of this will be available for easy viewing (wihtout building each project locally) soon on the new site.

This broke my web part / app πŸ™

That’s no good! Luckily, we’ve got a good idea of what might be going wrong:

  • Build errors as $ms-font-family-* mixin or variable was not found? You can replace font-family: $ms-font-family-semibold; with font-weight: $ms-font-weight-semibold; as base font family will be Segoe UI by default.
  • Still fully or partially using Office365 icon set, therefore icons not showing up? Swap Office365 icon with FabricMDL2 ones by using the mapping chart at the bottom of the page. For example, if you’re using ms-Icon--mail, you’ll want to change the friendly name in the class to ms-Icon--Mail.
  • Text color not themed or not ms-color-neutralPrimary? Set color: $ms-color-neutralPrimary where you’re using base-font mixins/classes (base-font look like: ms-font-m,ms-font-xxl)
  • Icons not vertically centered? You might have to adjust or remove previous styling. This might occur as line-height is not set to β€˜1’ in .ms-Icon now.

If you’re still having issues, please feel free to file an issue on Fabric Core’s issue tracker and we can help or redirect you to someone who can.

Icon mapping:

Old (Office365) friendly names New (MDL2) friendly names
circleEmpty CircleRing
circleFill FullCircleMask
plus Add
person Contact
mail Mail
alert IncidentTriangle
bell Ringer
people People
calendar Calendar
event Event
folder Folder
onedrive OneDrive
chat Message
refresh Sync
gear Settings
search Search
x Cancel
arrowLeft Back
arrowRight Right
officeThreshold OfficeLogo
outlook OutlookLogo
upload Upload
share Share
chevronDown ChevronDown
chevronLeft ChevronLeft
chevronRight ChevronRight
chevronsDown DoubleChevronDown
chevronsUp DoubleChevronUp
chevronsLeft DoubleChevronLeft
link Link
excel ExcelLogo
onenote OneNoteLogo
powerpoint PowerPointLogo
word WordLogo
sway SwayLogo
waffle Waffle
document Page
ellipsis More
info Info2
menu GlobalNavButton
listBullets BulletedList
tile Tiles
toggle GripperTool
check CheckMark
download Download
group Group
folderMove MoveToFolder
trash Delete
editBox Edit
onedriveAdd OneDriveAdd
picture Picture
circleUnfilled CircleRing
sortLines SortLines
listGroup2 listGroup2
reactivate RevToggleKey
caretRight FlickLeft
copy Copy
pencil Edit
peopleAdd PeopleAdd
infoCircle Info
xCircle ErrorBadge
clock Clock
lock Lock
rotate Rotate
pictureAdd Photo2Add
pictureRemove Photo2Remove
circlePlus CirclePlus
circleInfo Info
arrowUp2 Up
arrowDown2 Down
print Print
noteEdit EditNote
boards Boards
embed Embed
play Play
pause Pause
drm DRM
move Move
bundle AppIconDefault
checkBox CheckboxComposite
alertCircle ErrorStatusFull
tag Tag
popout StackIndicator
save Save
tasks Tasks
conflict BackToWindow
fullscreen FullScreen
globe Globe
officeVideo OfficeVideoLogo
volumeHi Volume3
volumeMed Volume2
volumeLo Volume1
volumeOff VolumeDisabled
sharePoint SharepointLogo
caretDown CaretDownSolid8
phone Phone
org Org
linkRemove RemoveLink
glimmer Glimmer
music MusicInCollection
filterClear RemoveFilter
filter Filter
documents Documentation
attachment Attach
star FavoriteStarFill
starEmpty FavoriteStar
arrowUpRight ArrowUpRight8
arrowDownRight ArrowDownRight8
heart HeartFill
heartEmpty Heart
groupingAscending GroupedAscending
groupingDescending GroupedDescending
eye View
chart Chart
folderAdd NewFolder
pinDown Pinned
pinLeft Pin
unpin Unpin
lightBulb Lightbulb
note QuickNote
alertOutline Warning
lightning LightningBolt
textBox TextBox
chevronThinUp ChevronUp
chevronThinDown ChevronDown
chevronThinLeft ChevronLeft
chevronThinRight ChevronRight
undo Undo
largeGrid LargeGrid
documentSet DocumentSet
powerApps PowerApps
zoomIn ZoomIn
workflows WorkFlow
flows Org
breadcrumb Breadcrumb
flow2 Flow
powerApps2 StackIndicator

Source: Release Notes Drop 4 and MDL2 Β· SharePoint/sp-dev-docs Wiki

SharePoint Framework Developer Preview Drop 4 now available

Leave a Reply

Your email address will not be published. Required fields are marked *