React components for the Carbon Design System
asudoh and joshblack fix(dependencies): upgrade @carbon/icons-react (#1656)
* fix(dependencies): upgrade @carbon/icons-react

The latest version contains IE11/Edge fix.

Fixes #1624.

* chore: update snapshot
Latest commit dfb31f4 Dec 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci ci: switch from Travis to CircleCI (#1551) Nov 12, 2018
.github Updated codesandbox example (#1609) Dec 5, 2018
.storybook chore: Update webpack and swap out minifier (#1560) Nov 14, 2018
.yarn-offline-mirror fix(dependencies): upgrade @carbon/icons-react (#1656) Dec 14, 2018
config Update babel to v7 (#1309) Sep 13, 2018
docs docs(styles): example of alternate CSS prefix (#1627) Dec 12, 2018
examples docs(styles): example of alternate CSS prefix (#1627) Dec 12, 2018
scripts feat(build): support UMD bundle (#520) Jan 31, 2018
src fix(dependencies): upgrade @carbon/icons-react (#1656) Dec 14, 2018
ssr-tests [RFC] Update folder structure (#303) Nov 6, 2017
.aat.yml a11y testing for all components Jan 16, 2017
.all-contributorsrc fix(data-table): update skeleton for IE11 compatibility (#1531) Nov 9, 2018
.cfignore chore: add staticfile and cfignore for deploys (#387) Dec 1, 2017
.editorconfig Search (#38) Aug 3, 2016
.gitignore chore(gitignore): ignore storybook cache (#1541) Nov 8, 2018
.prettierignore docs: move docs to github folder, update instructions (#651) Mar 1, 2018
.yarnrc chore: add prune config for Yarn in the offline mirror (#1190) Aug 15, 2018
LICENSE chore(license): add LICENSE file and update field in package.json (#269) Oct 11, 2017
README.md Updated codesandbox example (#1609) Dec 5, 2018
Staticfile chore: add staticfile and cfignore for deploys (#387) Dec 1, 2017
package.json fix(dependencies): upgrade @carbon/icons-react (#1656) Dec 14, 2018
yarn.lock fix(dependencies): upgrade @carbon/icons-react (#1656) Dec 14, 2018

README.md

Carbon Components React

CircleCI All Contributors Greenkeeper badge

A collection of Carbon Components implemented using React.

Usage

List of Available Components

View available React Components here. Usage information is available when you click the blue ? icon in the top right corner of the selected component.

Getting Started

Run the following command using npm:

npm install -S carbon-components-react carbon-components carbon-icons

If you prefer Yarn, use the following command instead:

yarn add carbon-components-react carbon-components carbon-icons
  1. These components require the use of Webpack in your project. See our webpack.config.js for an example configuration.

  2. Components do not import any of the styles themselves, use the scss or css from carbon-components to bring in styling. You can also use the unpkg cdn to bring in the styles wholesale - unpkg.com/carbon-components/css/carbon-components.css aliases the latest css file.

  3. For older browsers (e.g. IE11), polyfills listed in carbon-components-react/.storybook/polyfills.js file is required.

If you just want to try out carbon-components-react, you can also use CodeSandbox.

Edit carbon-components-react

Development

Please refer to the Contribution Guidelines before starting any work.

Using the server

We recommend the use of React Storybook for developing components.

  1. (Optional) Set environment variables:

    • true to CARBON_USE_EXPERIMENTAL_FEATURES environment variable to test some of the experimental features:

      $ export CARBON_USE_EXPERIMENTAL_FEATURES=true
      
    • true to CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS environment variable to use external CSS, making style source link usable in DOM inspector:

      $ export CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS=true
      
    • true to CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP environment variable to use Sass source map, making style source link point to the original Sass code:

      $ export CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP=true
      

Caveats:

  • CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS=true and CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP=true make WebPack builds slightly slower.
  • With CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP=true, the source map (hitting style source link in DOM inspector) sometimes leads you to a mix-in, instead of a style rule calling the mix-in, which may get you lost.
  1. Start the server:

    $ yarn storybook
    
  2. Open browser to http://localhost:9000/.

  3. Develop components in their respective folders (/components or /internal).

  4. Write stories for your components in /.storybook.

Contributing

Please check out our Contribution Guidelines for detailed information on how you can lend a hand.

To update the Contributors section, follow these instructions

Contributors

Thanks goes to these wonderful people:


Brian Han

💻

Chris Dhanaraj

💻

Nick Sandonato

💻

TJ Egan

💻

Mari Johannessen

💻

Sam Doyle

💻

alex weidner

💻

Ciaran Hannigan

💻

Ian Fleming

💻

Eddie Monge

💻

Reinaldo Cruz

💻

Yu Cao

💻

Megan Becvarik

💻

Astha

💻

Jason Lengstorf

💻

Nathan Friedly

💻

Matt Hamann

💻

Greg

💻

Anthony Oliveri

💻

Jorge Padilla

💻

German Attanasio

💻

Ritchie Martori

💻

Akira Sudoh

💻

holmansze

💻

Josh Black

💻 📖 💡 🚇

Tayler Aitken

🎨 📖

Bethany Sonefeld

🎨

Dmitri Wolf

💻

James

💻

Kade Keith

💻

Mira Murali

💻

alisonemiller

💻

bjones526

💻

sandhya-r-reddy

💻

Alison Joseph

💻

Dogukan

💻

Erika Dsouza

💻

Jeroen Schaftenaar

💻

Joseph Meis

💻

Paul Sachs

💻

Ryan Mackey

💻

Toni

💻

shyfruan

💻

Joseph Gordon

💻

Logan McCaul

💻

Matt Chapman

💻

Scott Dickerson

💻

Darío Hereñú

💻

James Zhang

💻

Simone Riccardelli

💻

Tom

💻

Zeus Courtois

💻

Andrew Daniel

🐛 💻

Andy

🐛 💻

Nicholas Lee

💻

David Menendez

💻

Prashant Farkya

💻

Tibor Cz

📖

Xixiang Chen

💻

s100

💻

Becca Ellsworth

💻

Zack Grossbart

💻

Yohanna Gadelrab

💻 🐛 ⚠️ 📖

Carlos Eduardo Monti

💻 📖