Carbon Design System variant on top of Web Components
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
carbon-web-components
carbon-web-componentsis a variant of Carbon Design System with Custom Elements v1 and Shadow DOM v1 specs.
The effort stems from https://github.com/carbon-design-system/issue-tracking/issues/121. If you are interested in this project, adding 👍 to the description of that GH issue, or even contributing, will be greatly appreciated!
To install
carbon-web-componentsin your project, you will need to run the following command using npm:
npm install -S carbon-web-components carbon-components lit-html lit-element
If you prefer Yarn, use the following command instead:
yarn add carbon-web-components carbon-components lit-html lit-element
Our example at CodeSandbox shows the most basic usage:
The first thing you need is setting up a module bundler to resolve ECMAScript
imports. Above example uses Webpack. You can use other bundlers like Rollup, too.
Once you set up a module bundler, you can start importing our component modules, like:
import 'carbon-web-components/es/components/dropdown/dropdown.js'; import 'carbon-web-components/es/components/dropdown/dropdown-item.js';
Once you do that, you can use our components in the same manner as native HTML tags, like:
Option 1 Option 2 Option 3 Option 4 Option 5
If you just want to try our components for demonstrations, etc., you can use CDNs that support module mapping (e.g. JSPM). With it, you can just import our modules in
:<script type="module"> import 'https://jspm.dev/carbon-web-components/es/components/dropdown/dropdown.js'; import 'https://jspm.dev/carbon-web-components/es/components/dropdown/dropdown-item.js'; </script> <style type="text/css"> #app { font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; width: 300px; margin: 2rem; } bx-dropdown:not(:defined), bx-dropdown-item:not(:defined) { visibility: hidden; } </style> <div id="app"> <bx-dropdown trigger-content="Select an item"> <bx-dropdown-item value="all">Option 1</bx-dropdown-item> <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item> <bx-dropdown-item value="staging">Option 3</bx-dropdown-item> <bx-dropdown-item value="dea">Option 4</bx-dropdown-item> <bx-dropdown-item value="router">Option 5</bx-dropdown-item> </bx-dropdown> </div>
Angular users can use our components in the same manner as native HTML tags, too, once you add
CUSTOM_ELEMENTS_SCHEMAschema to your Angular module, like:
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';
@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA], declarations: [AppComponent], imports: [BrowserModule], bootstrap: [AppComponent], }) export class AppModule {}
The
.d.tsfiles in
carbon-web-componentspackage are compiled with TypeScript 3.7. You can use TypeScript 3.7 in your Angular application with upcoming Angular
9.0release, or with the following instructions, so your application can use those
.d.tsfiles:
trueto
angularCompilerOptions.disableTypeScriptVersionCheckin
tsconfig.json
polyfills.ts, change
__importDefaultTypeScript helper as follows:
window.__importDefault = mod => (mod?.__esModule ? mod : { default: mod })
You can use wrapper React components in
carbon-web-components/es/components-reactgenerated automatically from the custom elements which allows you to use our components seamlessly in your React code. Here's an example:
import React from 'react'; import { render } from 'react-dom'; import BXDropdown from 'carbon-web-components/es/components-react/dropdown/dropdown.js'; import BXDropdownItem from 'carbon-web-components/es/components-react/dropdown/dropdown-item.js';const App = () => ( Option 1 Option 2 Option 3 Option 4 Option 5 );
render(, document.getElementById('root'));
Note: Using the React wrapper requires an additional dependency,
prop-types.
To run the wrapper React components in SSR environment requires Node
12.16.3or above that supports "conditional mapping" feature:
Same Node version requirement applies to Next.js:
Vue users can use our components in the same manner as native HTML tags, without any additional steps!
carbon-web-componentswith old build toolchain
yarn install
yarn wca && yarn storybook
yarn storybook:react(Live demo: https://web-components.carbondesignsystem.com/react/index.html)
yarn storybook:angular(Live demo: https://web-components.carbondesignsystem.com/angular/index.html)
yarn storybook:vue(Live demo: https://web-components.carbondesignsystem.com/vue/index.html)
View available web components at: https://web-components.carbondesignsystem.com/. You can see usage information in several ways:
Button kind (kind), where
kindis the attribute name
bx-modal-closedwhich typically indicates that an event with such event type is fired. You can also expand the twistie to see the details of the event
To support IE, you need a couple additional setups:
@babel/preset-envconfiguration)
Here's an example code that shows such setup:
Can be found at here.
> yarn clean > yarn build
You'll see the build artifacts in
/path/to/carbon-web-components/esdirectory.
You can run unit test by:
> gulp test:unit
You can run specific test spec by:
> gulp test:unit -s tests/spec/dropdown_spec.ts
You can choose a browser (instead of Headless Chrome) by:
> gulp test:unit -b Firefox
You can keep the browser after the test (and re-run the test when files change) by:
> gulp test:unit -b Chrome -k
You can prevent code coverate instrumentation code from being generated by:
> gulp test:unit -d
You can update snapshots by:
> gulp test:unit --update-snapshot
Above options can be used together. This is useful to debug your code as you test:
> gulp test:unit -s tests/spec/dropdown_spec.ts -b Chrome -d -k
You can run build integration test by:
> yarn test:integration:build
You can run a specific set of UI test steps (e.g. running
tests/integration/build/form-angular_steps.jsonly) by:
> yarn test:integration:build form-angular_steps
By default Chrome runs in headless mode. You can show Chrome UI by:
> CI=false yarn test:integration:build
You can run UI integration test by:
> yarn test:integration:ui
You can run a specific set of UI test steps (e.g. running
tests/integration/ui/dropdown_steps.jsonly) by:
> yarn test:integration:ui dropdown_steps
By default Chrome runs in headless mode. You can show Chrome UI by:
> CI=false yarn test:integration:ui