Home

Awesome

YamUI Travis

Please note that YamUI is now in maintenance mode and only minor changes will be made to support existing Yammer applications. If you are using YamUI in your own projects we'd recommend locking your version to 9.4.1, or forking the project from this commit before we rolled back some features in the 10.0.0 release. Thanks!

This is the UI component framework for Yammer.com.

It is built with React on top of Office UI Fabric components. Unit tests are run through Jest, isolated development environment and documentation is provided by Styleguidist, and visual diff regression is done with Puppeteer and pixelmatch. Visual diff tasks run within a Docker container to ensure consistency between local development environments and CI.

Using YamUI in your own app

If necessary, add YamUI to your project.

npm install --save yamui

Importing the baseline CSS

Import yamui/dist/yamui-base.css into your app. You could link to it directly before your own CSS, or import it through JS/CSS and include it at the top of your CSS bundle. This file is currently about 4kb minified+gzipped. This is a requirement as YamUI expects to own the baseline styles of the page.

Using components

You can read all documentation for our components in our living styleguide.

Each component is compiled from its TypeScript source into yamui/dist/components. This allows you to import the individual components you need and keep your bundle size smaller. Note that each component may import its own CSS and other JS dependencies so you may need to adjust your build process to accommodate.

Example importing a Button component:

import Button, { ButtonSize, ButtonColor } from 'yamui/dist/components/Button';

Example using a Button component:

<Button size={ButtonSize.SMALL} color={ButtonColor.SECONDARY} text="Click me!" />

Installation

git clone https://github.com/Microsoft/YamUI.git
cd YamUI
npm install

To run visual diff regression tests:

It's best to have at least 30GB of free space for Docker containers and images. If you find that Docker is taking up too much space, try the following:

Development

Starting up the dev server

Building some components

Writing unit tests

Running visual diff regression tests

Testing all the things

Adding icons

Releasing a new version

If you want to release a new version of YamUI, do the following to create a release branch. Replace version_type with major, minor or patch as appropriate, based on SemVer:-

git checkout -b awesome-release-branch
npm version version_type -m "Release version %s"
git push
git push --tags

This will add a commit that updates package.json and package-lock.json with the updated version number.

Once this branch's PR is merged to master, do the following to publish the release so it can be consumed from npm:-

# requires an npm user with permissions to release
git checkout master
git pull
npm install
npm publish

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Licenses

All files on the YamUI GitHub repository are subject to the MIT license. Please read the LICENSE file at the root of the project.

Note that we depend on Fabric for fonts. Usage of the fonts and icons referenced in YamUI is subject to the terms of the assets license agreement.