atlassian/atlaskit-mk-2


Atlassian's official UI library, built according to the Atlassian Design Guidelines.

http://atlaskit.atlassian.com

Language: JavaScript


Atlaskit

node v8.4.0+ bolt v0.20.6+ contributions welcome

Atlaskit is the technical implementation of the Atlassian Design Guidelines. It is a collection of reusable components that can be downloaded independently into your projects. Each component is also independently versioned and published to npm.

The full list of components can be found in the Atlaskit Registry.

This project is bound by a Code of Conduct.

Installation and usage

Atlaskit components and utilities are available as discrete npm packages.

Pre-requisites

It's strongly advised to use the Atlaskit CSS reset in your whole project, or some Atlaskit components may diverge in appearance:

import '@atlaskit/css-reset';

In general, you should avoid directly styling base elements (ex. p, h1, h2) and uses classes instead.

Example for React projects

Atlaskit components are built for React. Here's an example of using the Avatar component:

  1. First, you specify a component into your project as a dependency using npm: npm install @atlaskit/avatar
  2. Then you can use it in your React projects like this:
import React from 'react';
import Avatar from '@atlaskit/avatar';

export default (
  <Avatar
    src="https://design.atlassian.com/images/avatars/project-128.png"
    presence="online"
    size="large"
  />
);

Check out the Atlaskit Registry to learn more.

Example for non-React projects

There is a subset of components available as styles called the Reduced UI pack. To use:

  1. You include these into your the HTML projects.
<link rel="stylesheet" href="//unpkg.com/@atlaskit/css-reset@latest" />
<link rel="stylesheet" href="//unpkg.com/@atlaskit/reduced-ui-pack@latest" />
  1. Then you can style HTML with

<button class="ak-button ak-button__appearance-primary">Submit</button>

Check out the Reduced UI pack for more examples and details.

Upgrading components

When upgrading an Atlaskit component, all changelogs can be found in the Atlaskit Registry.

Documentation

A comprehensive list of components and detailed usage of each can be found in the Atlaskit Registry, which contains both guides on contributing to atlaskit, as well as documentation for each package.

You can also find how each component is meant to be used from a design perspective on the Atlassian Design Guidelines website.

Contributing

We believe in open contributions and the power of a strong development community. Pull requests, bug reports, and comments are welcomed!

Read the contribution guide on our website to get started, and our CONTRIBUTING.md for more details.

Here are some quick tips for various contributions:

Reporting issues

Our CONTRIBUTING.md includes links for where to raise issues to Atlaskit.

Contributing code

Atlassian requires contributors to sign a Contributor License Agreement, known as a CLA. This serves as a record stating that the contributor is entitled to contribute the code/documentation/translation to the project and is willing to have it used in distributions and derivative works (or is willing to transfer ownership).

Please read our CONTRIBUTING.md for details on how to become a contributor and for our guidelines around contributions.

Some quick tips for making successful contributions to Atlaskit:

  • Do not raise pull requests from forks because our CI builds do not run on forks. Create a pull request from a branch instead.
  • Add tests for new features and bug fixes.
  • Follow the existing style.
  • Separate unrelated changes into multiple pull requests.

License

This is a mono-repo, which means that different parts of this repository can have different licenses.

The base level of the repository is licensed under Apache 2.0. There are separate license files (LICENSE) for each component under /packages that specify the license restrictions for each component. While most components are licensed under the Apache 2.0 license, please note packages containing styles, assets & icons are most likely licensed under the Atlassian Design Guidelines license.

If you fork this repository you can continue to use those Atlassian Design Guidelines licensed components only under the given license restrictions. If you want to redistribute this repository, you will need to replace these Atlassian Design Guidelines licensed components with your own implementation.

Copyright (c) 2018 Atlassian and others.

Project Statistics

Sourcerank 11
Repository Size 151 MB
Forks 45
Watchers 72
Dependencies 7,313
Tags 3
Created
Last updated

Packages Referencing this Repo

@atlaskit/navigation-next
The Atlassian navigation component.
Latest release 7.2.1 - Updated
@atlaskit/renderer
Renderer component
Latest release 53.2.0 - Updated
@atlaskit/editor-core
A package contains Atlassian editor core functionality
Latest release 115.0.0 - Updated
@atlaskit/media-viewer
MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and...
Latest release 44.0.3 - Updated
@atlaskit/icon
A React package that contains icons
Latest release 19.0.11 - Updated
@atlaskit/drawer
React component the renders a Drawer from the left of the screen
Latest release 5.1.0 - Updated
@atlaskit/theme
The Atlaskit theme framework
Latest release 9.3.0 - Updated
@atlaskit/comment
Comments enable discussions on an entity such as a page, blog post, issue or pull request
Latest release 9.2.1 - Updated
@atlaskit/editor-common
A package that contains common classes and components for editor and renderer
Latest release 43.0.0 - Updated
@atlaskit/empty-state
A React component used for presenting various empty states (no items, empty search, broken link, ...
Latest release 6.0.6 - Updated
@atlaskit/portal
Atlaskit wrapper for rendering components in React portals
Latest release 3.1.3 - Updated
@atlaskit/profilecard
A React component to display a card with user information.
Latest release 12.3.5 - Updated
@atlaskit/mention
A React component used to display user profiles in a list for 'Mention' functionality
Latest release 18.16.0 - Updated
@atlaskit/adf-schema
Shared package that contains the ADF-schema (json) and ProseMirror node/mark specs
Latest release 4.3.1 - Updated
@atlaskit/editor-bitbucket-transformer
Editor Bitbucket transformer
Latest release 6.2.10 - Updated
@atlaskit/emoji
Fabric emoji React components
Latest release 62.6.0 - Updated
@atlaskit/editor-markdown-transformer
Editor Markdown transformer
Latest release 3.1.12 - Updated
@atlaskit/smart-card
Smart card component
Latest release 12.6.1 - Updated
@atlaskit/editor-json-transformer
JSON transformer
Latest release 7.0.1 - Updated
@atlaskit/media-picker
Library for handling file uploads
Latest release 50.0.2 - Updated

Recent Tags See all

@atlaskit/editor-core@58.1.8-hotfix November 28, 2017
foo November 02, 2017
bar November 02, 2017

Something wrong with this page? Make a suggestion

Last synced: 2019-04-13 19:54:23 UTC

Login to resync this repository