-
Notifications
You must be signed in to change notification settings - Fork 1k
Release Notes Drop 4 and MDL2
With the Ignite conference coming up, there's not a lot of visible code changes in the SPFx framework. That's not to say we haven't been making changes, just that they haven't been rolled out. We'll try something different with the next drop, releasing the change notes before the changes roll, then update the npm packages when the code starts to hit the live servers.
However, what has shipped quite recently is what the Fabric folks are calling MDL2 - Modern Design Language 2. Eric - one of the Design Developer Leads, has written up the following notes regarding it, and how to migrate your code. Note that this will be a one-time migration. Once we are out of preview, we will maintain backwards compatibility.
#Getting the new bits
Make sure that your @microsoft/generator-sharepoint npm package is version 0.2.0. To get the latest version, run npm i -g @microsoft/generator-sharepoint@latest
#Updating your existing projects
1 - Open package.json and set the versions of the following packages:
-
"@microsoft/sp-client-base": "~0.3.0" -
"@microsoft/sp-client-preview": "~0.4.0" -
"@microsoft/sp-build-web": "~0.6.0" -
"@microsoft/sp-module-interfaces": "~0.3.0" -
"@microsoft/sp-webpart-workbench": "~0.4.0"
2 - Run npm update then npm prune then npm dedupe
This will update all the packages then optimize the node_modules folder size.
3 - Run gulp nuke to clean up any old build artifacts
4 - Run gulp to build your updated project
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.
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-Iconclass; now it defaults toinherit - Removed
$ms-color-neutralPrimaryfrom base font mixins and classes. Now, the root.ms-Fabriccontains 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
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 the Fabric 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.
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 replacefont-family: $ms-font-family-semibold;withfont-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 toms-Icon--Mail. -
Text color not themed or not ms-color-neutralPrimary? Set
color: $ms-color-neutralPrimarywhere 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-Iconnow.
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 |
| 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 |
| 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 |
| filePDF | |
| zoomIn | ZoomIn |
| workflows | WorkFlow |
| flows | Org |
| breadcrumb | Breadcrumb |
| flow2 | Flow |
| powerApps2 | StackIndicator |
-
Getting Started