Microsoft 365 Community Community Demos, 31 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with Microsoft Teams UI Library

Description

In this 7-minute developer-focused demo – specifically learn about capabilities in the Microsoft Teams UI Kit v2.2 that includes core components, scenario-based templates, and best practices for designing Teams apps that deliver consistent user and developer experiences. This tour of the Microsoft UI Library is delivered by Will Shown. Open source React components implement the Teams UI kit. See the fluent UI libraries on GitHub and npm. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 31, 2021.

Demo Presenter: Will Shown (Microsoft)

Supporting materials:
• Community - Microsoft Teams UI Kit | https://www.figma.com/community/file/916836509871353159
• NPM Library - @fluentui/react-teams | https://www.npmjs.com/package/@fluentui/react-teams
• GitHub Library - @fluentui/react-teams | https://github.com/OfficeDev/microsoft-teams-ui-component-library#readme

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Some of y'all might be familiar with the microsoft teams. Ui kit. um This is a figma community file that folks are more than welcome to duplicate. uh Your firm might have already done this, and it contains a set of designs that we encourage folks to use as part of their app, because it helps create consistent experiences that look and feel like teams, experiences and they're ones.

A

We hope the community will share and build more experiences that look and feel native to teams and are familiar to users uh and consistent and as part of that effort, we built out a set of react components that are also open source and ready to use so fluent ui react teams.

A

It's part of the fluent ui family is a set of open source, react components that implement the team's ui kit, so anything that you see in figma, under ui templates, such as the wizard are available in this library, and all you have to do is basically add it to your project and pull it in I'll start getting into the details for a moment.

A

Basically, it guarantees that it will match with the design system that it will be accessible.

A

It works in all of the different themes in teams, so if users have high contrast, dark or light set, the components will work out of the box with that and it's going to continue to grow and become more useful, with basically your input and I'll describe how you can offer that in a moment.

A

What's included are basically like, I said all of the ui templates from the team's ui kit, so that includes wizard task boards forms lists and they can be lists that are managed by the kit itself or you can use individual tables and then also dashboards, which include data visualizations, and these visualizations again work in all themes, including high contrast or users, with different visibility.

A

That's what's included so basically part of, what's included, is described in getting started. This also includes a provider which will also give you the color palette for teams in fluent ui, and so, if your app is already using fluent ui, the provider from react, teams will also give you access to all the correct colors, the correct and most up-to-date colors for the team's light, themed, dark theme and high contrast themes and keep that up to date, basically to get started.

A

All you have to do is pull in the provider and the component that you want and when you render it basically put the component you want in the provider and go from there. The idea is each component is basically all you have to do is give it a big json object.

A

So if you're unfamiliar with react, this library could be really good for your case, because you don't end up having to interact with react so much. You basically build out all the props here. It can look a bit complicated, but for some of these it's it's quite readable, for instance, for the form you can specify different languages or the okay and cancel buttons.

A

You fill out each of the input blocks and which type of input they are and whenever the user interacts with one of these components, you'll get an interaction payload, which is also just json, and so in this way you can basically interact with these interactive and usable react components without having to deal with react. So much want to point out. Folks should be careful to use the correct types.

A

This comes with also all of the documentation on each of the types. So, if there's ever a moment where you're, not so sure, what's going on, all of the types are are documented here, definitely recommend using typescript. If you choose to dig in, let's see yeah, and it also includes the storybook, so you can always access and play around with the storybook here. The knobs contain the way that this is configured and will stay up to date as you play with it.

A

So you can play with the payload here and then copy it over if you choose and then yeah right, so uh this project is supported mainly through github. You can find the github link in from its npm page, like I did just now in the repository section here. It's going to be released in semantic versioning, so any major versions are going to have a difference in api, and so, if you're already using this, it's always safe to do a minor and patch upgrades.

A

But any major upgrades will involve an api change. I'm just we're going to start documenting migrations from one major api change to another. Usually they're, not super significant, but uh we we're we always lean on the you know. If any api is broken, we make a major release and if there's any questions or feature requests, uh you're always welcome to file an issue. We do accept, pull requests.

A

So if there's anything about the components that you think could be better by all means, submit an issue or and uh maybe even create a fork of this project and make a pull request when it meets your criteria. uh We'd love to hear your feedback and I think that's actually it for me.

B

Excellent thanks well really really cool stuff, and it's it's great to see that we have those controls available and, like I said, we will keep on evolving them. We will keep on supporting them, so there will be new controls available. The key objective here is to make it super easy, also to create microsoft, teams, uh look and feel which is aligned to microsoft teams to sign guidance. So that's that's what we want to do and more and more in the future.

B

You will see the design guidance is getting more and more merged across the different products as well, so, first of all flying the fluent uh and then more and more from a control perspective as well, but thanks will on that one.