, ,



news image

This is the UI ingredient framework for Yammer.com.

It is built with React on high of Residing of job UI Fabric ingredients. Unit assessments are saunter thru Jest, isolated constructing atmosphere and documentation is equipped by Styleguidist, and visual diff regression is done with Puppeteer and pixelmatch. Visual diff duties saunter internal a Docker container to make certain consistency between local constructing environments and CI.

The use of YamUI in your have app

If critical, add YamUI to your venture.

Importing the baseline CSS

Import yamui/dist/yamui-imperfect.css into your app. That you just must well well perchance link to it straight earlier than your have CSS, or import it thru JS/CSS and consist of it on the end of your CSS bundle. This file is currently about 4kb minified+gzipped. This is mostly a requirement as YamUI expects to have the baseline forms of the page.

The use of ingredients

That you just must well well perchance read all documentation for our ingredients in our living styleguide.

Every ingredient is compiled from its TypeScript source into yamui/dist/ingredients. Which implies that you can import the particular person ingredients you will need and preserve your bundle dimension smaller. Describe that every ingredient could well well perchance import its have CSS and other JS dependencies so it’s possible you’ll well well perchance want to adjust your cling path of to accommodate.

Example importing a Button ingredient:

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

Example utilizing a Button ingredient:

<Button dimension={ButtonSize.SMALL} color={ButtonColor.SECONDARY} textual roar material="Click me!" />

Set up

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

To saunter visible diff regression assessments:

  • Install Docker (Docker for macOS / Docker for Windows).
  • Develop an alias y in your ~/.zshrc or ~/.bashrc file for the yamui-docker executable that looks address alias y="./yamui-docker". Visual diff duties want to saunter in Docker by assignment of the y alias, e.g. y saunter test and y saunter test:visible.

It is simplest to have a minimum of 30GB of free dwelling for Docker containers and photos. If you obtain that Docker is taking on too unparalleled dwelling, are attempting the following:

  • Gape your Docker container dimension (on macOS): ls -lha ~/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/Docker.qcow2
  • Effective dwelling:
    • Employ all photos: docker rmi $(docker photos -a -q)
    • Employ all exited containers: docker rm $(docker ps -a -f web page=exited -q)
    • Employ the whole lot from disk, straight (on macOS): rm ~/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/Docker.qcow2


Starting off the dev server

Building some ingredients

  • Construct ingredients in the /src/ingredients directory.
  • Embody a .md file in your ingredient’s directory with utilization examples. These examples are crucial because they doc how ingredients ought to be long-established and what suggestions/configurations they settle for. These examples will even be long-established in visible diff regression assessments to make certain contemporary changes are deliberate and authorized earlier than PRs are merged.
  • The dev server will engage up any changes you cling to ingredients, and automatically update the app in your browser utilizing Sizzling Module Replace.

Writing unit assessments

  • npm saunter originate:test will originate Jest in explore mode, displaying passing web page and a protection file. The CLI activity stays appealing and could well well perchance re-test automatically as you cling changes.

Runing visible diff regression assessments

  • y saunter test:visible will bring collectively the ingredients, cling+export a static version of the styleguide, originate a dev server, recount screenshots of every example, and fail if there are visible changes from the final authorized screenshots. Unless you are increasing on a Linux computer, this activity must saunter internal the Docker container by assignment of the y shortcut. Operating by assignment of npm saunter on Mac or Windows will use your OS version of PhantomJS Webkit and could well well perchance fail with refined visible differences. Operating in the Docker Linux container ensures constant screenshots between all constructing environments and CI.
  • npm saunter test:visible:approve will approve your most up-to-date test photos and overwrite the previous reference photos. Employ this can must you are intentionally altering a ingredient or its examples and likewise you have manually verified that the contemporary visible changes are true.

Attempting out the total things

  • y saunter test will saunter all validations – linting, unit assessments and visual diff regression assessments. If this passes are attempting and be all steady to creep.

Adding icons

  • Put collectively source SVG and React SVG following these instructions.
  • Export contemporary React SVG from src/ingredients/Icon/icons/index.ts utilizing the filename as the designate.
  • Employ the icon by assignment of its designate .

Releasing a contemporary version

Travis is setup to automatically publish tagged releases to the npm registry. So will must you’d want to liberate a contemporary version of YamUI, true raise out the following:

git checkout -b awesome-liberate-branch
npm version patch -m "Release version %s"
git push

Then create a pull ask, and once that gets reviewed and merged into master, Travis will publish your contemporary version to npm! This is an different to increasing releases manually or thru GitHub’s instruments. Be taught more about npm versioning here.


The YamUI venture is currently in a pre-liberate voice. We’re constructing out the ingredients and aspects we want for Yammer.com to meet our explicit UX Construct pointers.


This venture welcomes contributions and suggestions. Most contributions require you to conform to a Contributor License Agreement (CLA) declaring that you have got the true to, and essentially raise out, grant us the rights to utilize your contribution. For info, focus on over with https://cla.microsoft.com.

If you put up a pull ask, a CLA-bot will automatically resolve whether or now no longer or now no longer it’s a ways a must to present a CLA and decorate the PR precisely (e.g., designate, observation). Simply observe the instructions offered by the bot. That you just must well well ideal want to preserve out this once all over all repos utilizing our CLA.

This venture has adopted the Microsoft Originate Provide Code of Habits. For more data ogle the Code of Habits FAQ or contact opencode@microsoft.com with any extra questions or feedback.


All files on the YamUI GitHub repository are field to the MIT license. Please read the LICENSE file on the root of the venture.

Describe that we depend on Fabric for fonts. Usage of the fonts and icons referenced in YamUI is field to the terms of the belongings license agreement.

Be taught Extra

What do you think?

0 points
Upvote Downvote

Total votes: 0

Upvotes: 0

Upvotes percentage: 0.000000%

Downvotes: 0

Downvotes percentage: 0.000000%