[![npm](https://img.shields.io/npm/v/oojs-ui.svg?style=flat)](https://www.npmjs.com/package/oojs-ui) [![Packagist](https://img.shields.io/packagist/v/oojs/oojs-ui.svg?style=flat)](https://packagist.org/packages/oojs/oojs-ui) [![David](https://img.shields.io/david/dev/wikimedia/oojs-ui.svg?style=flat)](https://david-dm.org/wikimedia/oojs-ui#info=devDependencies) OOUI ================= OOUI is a component-based JavaScript UI library. Key features: * Common widgets, layouts, and dialogs * Classes, elements, and mixins to create custom interfaces * Internationalization and localization, like right-to-left (RTL) languages support * Theme-ability * Built-in icons * Accessibility features It is the standard library for Web products at the Wikimedia Foundation, having been originally created for use by [VisualEditor](https://www.mediawiki.org/wiki/VisualEditor). Quick start ---------- The library is available on [npm](https://www.npmjs.com/package/oojs-ui). To install:
$ npm install oojs-ui
Once installed, include the following scripts and styles to get started:
Loading the library
-------------------
While the distribution directory is chock-full of files, you will normally load only the following three:
* `oojs-ui.js`, containing the full library;
* One of `oojs-ui-wikimediaui.css` or `oojs-ui-apex.css`, containing theme-specific styles; and
* One of `oojs-ui-wikimediaui.js` or `oojs-ui-apex.js`, containing theme-specific code
You can load additional icon packs from files named `oojs-ui-wikimediaui-icons-*.css` or `oojs-ui-apex-icons-*.css`.
The remaining files make it possible to load only parts of the whole library.
Furthermore, every CSS file has a right-to-left (RTL) version available, to be used on pages using right-to-left languages if your environment doesn't automatically flip them as needed.
Issue tracker
-------------
Found a bug or missing feature? Please report it in our [issue tracker Phabricator](https://phabricator.wikimedia.org/maniphest/task/edit/form/1/?projects=PHID-PROJ-dgmoevjqeqlerleqzzx5)!
Contributing
------------
We are always delighted when people contribute patches. To setup your development environment:
1. Clone the repo: `$ git clone https://phabricator.wikimedia.org/diffusion/GOJU/oojs-ui.git oojs-ui`
2. Move into the library directory:
$ cd path/to/oojs-ui/
$ git remote update
$ git checkout -B release -t origin/master
# Ensure tests pass
$ npm install && composer update && npm test && composer test
# Avoid using "npm version patch" because that creates
# both a commit and a tag, and we shouldn't tag until after
# the commit is merged.
# Update release notes
# Copy the resulting list into a new section at the top of History.md and edit
# into five sub-sections, in order:
# * Breaking changes
# * Deprecations
# * Features
# * Styles
# * Code
$ git log --format='* %s (%aN)' --no-merges --reverse v$(node -e 'console.log(require("./package.json").version);')...HEAD | grep -v "Localisation updates from" | sort
$ edit History.md
# Update the version number
$ edit package.json
$ git add -p
$ git commit -m "Tag vX.X.X"
$ git review
# After merging:
$ git remote update
$ git checkout origin/master
$ git tag "vX.X.X"
$ npm run publish-build && git push --tags && npm publish