• Stars
    star
    510
  • Rank 86,627 (Top 2 %)
  • Language
    TypeScript
  • License
    Apache License 2.0
  • Created over 6 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An Angular implementation of the Carbon Design System for IBM.

Carbon Components Angular

An Angular implementation of the Carbon Design System

semantic-release Chat with us on Discord

Getting started

Assuming we're starting with a new @angular/cli project:

$ npx @angular/cli new my-project --style=scss
$ cd my-project
$ npm i --save carbon-components-angular carbon-components

Then we need to include carbon-components in src/styles.scss:

@import "~carbon-components/scss/globals/scss/styles.scss";

Note: For offline usage we'll need to set $font-path: '~carbon-components/src/globals/fonts'; at the very top of our src/styles.scss. This will copy the fonts to our dist folder upon successful build. If you like the fonts to be a part of your assets folder and not pollute the dist folder then copy the fonts from node_modules/carbon-components/src/globals/fonts into our app's src/assets/fonts folder and add $font-path: '/assets/fonts/'; at the very top of our src/styles.scss.

That's it! Now we can run npm start and start building out our application!

Note: This isn't the only way to bootstrap a carbon-components-angular application, but the combination of @angular/cli and the carbon-components scss is our recommended setup.

Edit Carbon Components Angular

Support

Angular version support matrix:

Angular v3 v4 v5 (future release)
6
7
8
9
10
11
12
13
14

Carbon Components Angular version support matrix:

Carbon Components Angular version Community support Active support
v1
v2
v3
v4

Not supported versions: Out of support. We plan to support our latest, and previous release. Beyond that we make no guarantees of continued support - these include v1, v2

How to read this table:

  • Community support: We depend primarily on community issue reports, and contributions to help maintain our components. A version with only community support is especially reliant on contributions, though we will backport small fixes when applicable.
  • Active support: We will actively maintain and update these versions with new features, new components, bug fixes, and ensure it's compatible with the Carbon Design System and latest Angular versions

Contributing

IBMers contributing

If you are an IBMer, you must complete the steps at W3 Developer before contributing to any open source projects. See our contributing guidelines for more details.

Quickstart

  • fork carbon-design-system/carbon-components-angular and clone it locally
  • run npm install to grab all the dependencies, then npm run storybook to start storybook
  • if you are adding a component:
    • add a folder with your component code, styles, tests and story under src
    • export your module from index.ts
  • if you are contributing a fix:
    • add your fix, update the documentation as needed
    • consider adding or modifying a test case to cover the fix
  • follow the Angular style guide
  • be sure to run npm test and npm run lint to make sure the tests and linter pass
  • submit a PR

Pull request guidelines

  • Keep changes small and focused.
  • If you create a pull request and then realize it is not ready to be merged, prepend "WIP: " (For example, WIP: Fixed text overflow in accordion headers.) and assign a WIP label.
  • Include a description of changes
    • attach a screenshot (or a gif!) for design reference if needed
    • reference the related issue
      • "closes #123" or "fixes #123" will close issue #123 once the PR is merged
      • "issue #123" just references the issue. Only use this if you definitely need the issue to remain open.
    • @mention any specific other developers that need to be aware of the changes
  • add the "needs review" label along with any other relevant labels
  • link to code review checklist goes here

Issues submission guidelines

  • One issue per defect - do not open an issue that spans multiple defects
  • provide a descriptive title that mentions the component and version the issue covers
  • provide
    • version(s) affected
    • a description of the issue
    • steps taken to produce the issue
    • expected behaviour
    • current behaviour
    • screenshots if needed
    • relevant code snippets
    • links to application source code or running demo (Codesandbox is awesome for this!) (including connection/authentication information)
  • add relevant labels (bug, accessibility, design, discussion, feature, etc)
  • if you have a fix to contribute, assign yourself, otherwise leave unassigned

npm commands

To keep our build dependencies local we use npm scripts to run our webpack, gulp, and general build tasks. You should never install webpack or gulp globally as that will likely conflict with our version. You should never need to modify the build process to add a component or story.

  • npm run storybook to run storybook (port 6006)
  • npm run build to generate the dist
  • docs:build to build documentation
  • docs:server to build and run the documentation server
  • npm run lint to run tslint
  • npm test to run tests

Resources

Philosophy

  • Components should be the smallest unit of computation
    • Think in terms of pages and applications composed from a multitude of components rather than pages or applications as a single unit of computation
  • Components should delegate to the consumer whenever possible
    • The individual applications should be the single source of truth, and be able to create any UI from our building blocks
  • Components should do one thing, and do it well
    • This does not mean they should be over specialized, but rather focus on providing a single, core experience
  • Components should NOT maintain more state than absolutely necessary
    • Likewise, stateless components should be favored whenever possible
  • Components should NOT necessarily implement the style guide point-for-point, the guide simply provides guidance on overarching functionality, components should enable that and product specific designs without baking in extra functionality

Code of Conduct

Read our code of conduct here

More Repositories

1

carbon

A design system built by IBM
JavaScript
7,718
star
2

carbon-components-svelte

Svelte implementation of the Carbon Design System
Svelte
2,665
star
3

carbon-components-react

React components for the Carbon Design System
JavaScript
1,080
star
4

carbon-design-kit

A versioned, comprehensive kit of the Carbon Design System visual assets (components, icons, pictograms, text styles, color styles, grid templates).
1,072
star
5

carbon-charts

📊 📈⠀Robust dataviz framework implemented using D3 & typescript
HTML
904
star
6

carbon-components-vue

Vue implementation of the Carbon Design System
JavaScript
607
star
7

carbon-web-components

Carbon Design System variant on top of Web Components
TypeScript
477
star
8

sveld

Generate TypeScript definitions for your Svelte components
Svelte
402
star
9

carbon-icons-svelte

Carbon Design System SVG icons as Svelte components
TypeScript
394
star
10

gatsby-theme-carbon

A Carbon inspired Gatsby theme
MDX
351
star
11

carbon-website

The website for the Carbon Design System.
MDX
261
star
12

carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
TypeScript
258
star
13

carbon-website-archive

The old website for the Carbon Design System. This repo is archived.
JavaScript
238
star
14

carbon-tutorial

An app for the Carbon Design System tutorial
JavaScript
157
star
15

carbon-pictograms-svelte

Carbon Design System SVG pictograms as Svelte components
TypeScript
119
star
16

carbon-addons-iot-react

A collection of React components shared between IBM Watson IoT products.
JavaScript
96
star
17

carbon-icons

SVG icon library for the Carbon Design System
HTML
85
star
18

ibm-products

A Carbon-powered React component library for IBM Products
JavaScript
81
star
19

design-language-website

IBM Design Language website
CSS
76
star
20

carbon-angular-starter

A simple starter app for bootstrapping applications with Carbon
TypeScript
76
star
21

ibm-security

A Carbon-powered React component library built by IBM Security
JavaScript
76
star
22

carbon-elements

Project moved to carbon-design-system/carbon
71
star
23

carbon-preprocess-svelte

Svelte preprocessors for the Carbon Design System
TypeScript
68
star
24

design-system-website

This repo has been archived, the new repo can can be found at
JavaScript
46
star
25

devtools

A simple set of tools for teams building live Carbon pages.
JavaScript
43
star
26

carbon-boilerplate

A simple boilerplate for rapid UI prototyping with Carbon components
JavaScript
42
star
27

carbon-for-ibm-dotcom-website

This is the Carbon for IBM.com website, which includes documentation and guidelines around design and development for IBM.com
MDX
39
star
28

carbon-for-ibm-dotcom-nextjs-template

This is a NextJS template utilizing Carbon for IBM.com React
JavaScript
33
star
29

carbon-tutorial-vue

JavaScript
31
star
30

carbon-react-native

The React Native implementation of the Carbon Design System
TypeScript
28
star
31

carbon-themes

A collection of themes for use with Carbon Components
28
star
32

carbon-addons-data-viz-react

DEPRECATED. Please use Carbon Charts instead
JavaScript
26
star
33

carbon-platform

The "next" version of the Carbon Design System website, as a platform.
JavaScript
22
star
34

carbon-tutorial-angular

An Angular app for the Carbon Design System tutorial
20
star
35

carbon-addons-ics

Carbon Add-on for IBM Collaboration Solutions
JavaScript
19
star
36

carbon-icons-angular

Carbon icons, in Angular!
JavaScript
19
star
37

gatsby-starter-carbon-theme

A Gatsby starter demonstrating the Gatsby Carbon theme
JavaScript
18
star
38

carbon-tutorial-svelte

An app for the Carbon Svelte tutorial
Svelte
18
star
39

tailwind-preset-carbon

JavaScript
17
star
40

icons-motion

A library of animated Carbon icons
JavaScript
17
star
41

carbon-addons-cloud

[DEPRECATED] Carbon Design System add-on for IBM Cloud
CSS
15
star
42

carbon-tutorial-nextjs

CSS
14
star
43

carbon-for-ibm-dotcom-nextjs-test

This is a sample NextJS application utilizing Carbon for IBM.com
JavaScript
14
star
44

carbon-sandbox

A theme playground for Carbon Components
CSS
13
star
45

carbon-addons-cloud-react

[DEPRECATED] React components for the Cloud Add-on
JavaScript
13
star
46

issue-tracking

For tracking issues that can't be put in the relevant open source repositories. Using to deprecate issue tracking in GHE.
11
star
47

carbon-design-system.framerfx

CSS
11
star
48

carbon-for-ibm-dotcom-web-components-template

This is an HTML Template utilizing Carbon for IBM.com Web Components. It contains a basic WebPack setup using Handlebars for page management, which includes the dds-dotcom-shell, along with other various patterns and components available in Carbon for IBM.com.
Handlebars
11
star
49

toolkit

[Experimental] A UI Toolkit for the Carbon Design System
JavaScript
10
star
50

stylelint-plugin-carbon-tokens

JavaScript
9
star
51

developer-essentials

For creation of Developer Essentials course for Carbon / Front-end Skills
9
star
52

uptime

Uptime monitoring for Carbon
Markdown
9
star
53

carbon-nextjs-template

Template for Next.js and Carbon
JavaScript
8
star
54

carbon-contribution

Documentation on how to contribute back to Carbon
7
star
55

carbon-spec

[WIP] Specification for the Carbon Design System
7
star
56

carbon-addons-beta-react

Beta React components. May be elevated into the main library.
JavaScript
7
star
57

carbonated

Internal services for building the Carbon Design System
JavaScript
6
star
58

carbon-addons-infrastructure

Carbon Add-on for IBM Cloud Infrastructure
JavaScript
6
star
59

carbon-utils-position

Position elements anywhere
TypeScript
6
star
60

carbon-addons-boilerplate-react

JavaScript
5
star
61

roadmap

Carbon Design System's roadmap.
5
star
62

sync

Internal tool for keeping project repositories in sync
JavaScript
5
star
63

carbon-addons-cloud-vanilla

JavaScript
4
star
64

carbon-addons-website

Carbon Design System add-on for design system website
CSS
4
star
65

carbon-for-ibm-dotcom-tutorial

JavaScript
4
star
66

carbon-badges

A site to apply for Carbon badges.
JavaScript
4
star
67

carbon-upgrade

[Experimental] A tool for upgrading Carbon versions (to v10): `npx carbon-upgrade`
4
star
68

carbon-for-ibm-dotcom-design-kit

A versioned, comprehensive kit of the Carbon for IBM.com visual assets.
4
star
69

carbon-addons-catalog-react

Bluemix Catalog components in React
JavaScript
3
star
70

carbon-labs

A collection of components and patterns implemented using Carbon Web Components for the IBM AI experience.
TypeScript
3
star
71

okrs

Objectives and key results for the Carbon team.
3
star
72

digital-design-ideation

3
star
73

carbon-shared-tests

Carbon Shared Tests are re-usable UI unit tests aligned to the Carbon Design System
TypeScript
3
star
74

carb

[Experimental] Tooling for managing design systems
Rust
2
star
75

ibm-cloud

Carbon for IBM Cloud
JavaScript
2
star
76

sandboxes

JavaScript
2
star
77

action-ibmcloud-cf

Common GitHub actions used in various repositories in carbon-design-system org, for deploying a IBM Cloud CF app.
JavaScript
2
star
78

rfcs

RFCs for changes to the Carbon Design System
2
star
79

carbon-sketch-assistant

Carbon Design System design validation directly in Sketch
TypeScript
2
star
80

incubator

[Experimental] Explore, build, and try-out new work with Carbon
JavaScript
2
star
81

remote-learning-enablement

https://remote-learning-enablement.vercel.app/remotelearning/
JavaScript
2
star
82

platform

[Internal] Tools and services for managing a design system
JavaScript
2
star
83

carbon-dco

Signed Developer Certificate of Origins for the Carbon Design System.
JavaScript
2
star
84

carbon-for-ibm-dotcom-web-components-test

Environment for testing Carbon for IBM.com web components as a mock application
Handlebars
2
star
85

repo-transfer-test

a repo to test the transferring from account to organization
JavaScript
1
star
86

Contentful-for-IBM.com

JavaScript
1
star
87

gatsby-theme-presentation

JavaScript
1
star
88

.github

1
star
89

pattern-contributions

This repository is a single place to triage, manage, and maintain pattern contributions to the Carbon Design System.
1
star
90

archived-v10-release-issues

The default for issues and epics is public. There may be rare occasions when an issue needs to remain confidential. If so, put that issue in this repo.
1
star
91

content-planning

This is a place to plan, organize, and communicate about Carbon content
1
star
92

ibm-cdai

IBM CDAI
1
star
93

carbon-job-stories

1
star
94

carbon-v11

1
star
95

carbon-style-stats

Dashboard for analyzing various Carbon stylesheet statistics
JavaScript
1
star
96

carbon-triage

Tools for helping with issue triage
JavaScript
1
star
97

carbon-tutorial-test1

Build an app with the Carbon Design System and Next.js
1
star
98

carbon-vega-theme

The official 4 Carbon themes offered for Vega users
SCSS
1
star