@teamleader/ui

Teamleader UI

Teamleader UI is a set of React components that implement the Teamleader design specification.

Installation

Teamleader UI can be installed as an npm package:

$ npm install --save @teamleader/ui

or

$ yarn install @teamleader/ui

Basic usage

In this minimal example, we import a Button with styles already bundled:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@teamleader/ui';

ReactDOM.render(<Button label="Hello World!" />, document.getElementById('app'));

Import the CSS into your project via JS or CSS.

JS

import '@teamleader/ui/es/index.css';

or CSS

@import url('@teamleader/ui/es/index.css');

Browser support

This library officially supports the last two versions of the major browsers. This is mainly because of dependencies and ease of mind.

• Luxon browser support

Contributing

To work in the project you will need a node version supporting ES6 syntax. Although the project is built using the Babel compiler, we use some ES6 features on the development server. Consider using n or nvm to handle different node versions!

To start the spec site locally, follow these simple steps:

$ git clone https://github.com/teamleadercrm/ui
$ cd ui/
$ yarn install
$ yarn start

Open up a browser and the local spec will be available at http://localhost:3000/.

To start the project on another port, set the PORT variable when running the start command. As in this example for port 3001:

$ PORT=3001 yarn start

New component checklist

• component is written in Typescript
• [component].stories.tsx file is present
• component is exported in index.ts

How we do a release

• Create PR with your desired changes

• Bump the version in package.json and commit with message Version bump. Semantic Versioning

• Update CHANGELOG.md

  • Place ## [new.version.number] - yyy-mm-dd above last release

  • Add heading that best fits your change:

    ### Added
    
    ### Changed
    
    ### Deprecated
    
    ### Removed
    
    ### Fixed
    
    ### Dependency updates
    

  • Add you change in format Component: short-description ([github-username](link-to-github-user)) in [#PR-ID](link-to-PR)

  • Commit with message Update changelog and push.

  • EXAMPLE:

    ## [16.4.3] - 2022-10-31
    ### Fixed
    - `Select`: Allow multiple selects being rendered at once ([@stefaandevylder](https://github.com/stefaandevylder)) in [#2422](https://github.com/teamleadercrm/ui/pull/2422)
    

• Once the pull request has the needed amount of approvals, merge it into the next-release branch.

• Github Actions will create a tag + release based on the version property in package.json

• In your console, pull the next-release branch.

• Publish to npm using the npm publish --access=public command.

• Merge the next-release branch into master and push to Github

License

This project is licensed under the terms of the MIT license.

Changelog

[25.0.4]

Fixed

• Popover and Menu: Fixed positioning in Safari when zoomed in by pinching (@lowiebenoot) in #2837