Carbon Design System variant on top of Web Components
:exclamation: This repository has moved!
Carbon Web Components is now part of the Carbon for IBM.com monorepo and will continue to have full official support by that team. In addition, plans for Q4 2022 will include:
- Upgrade to Carbon v11
- Upgrade to Lit v2
- Upgrade to Typescript v4
With these upgrades, this will be a major version release to
Carbon Web Components v2
. Plans to bring Carbon Web Components v2 to feature parity with Carbon React will occur throughout 2023.If there are any questions, you can open an issue, reach out to us on Discord, or for IBMers can reach us at
#carbon-for-ibm-dotcom
on Slack!
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-components
is 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!
All components are available via CDN. This means that they can be added to your application without the need of any
bundler configuration. Each component is available by the latest
tag, or referencing a specific version (starting at
version v1.16.0
):
<!-- By `latest` tag -->
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/accordion.min.js"></script>
<!-- By specific version -->
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v1.16.0/accordion.min.js"></script>
These are the list of available components via CDN:
To use the right-to-left (RTL) version of the artifacts, change the file extention from .min.js
to .rtl.min.js
. For
example:
<!-- By `latest` tag (RTL) -->
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/accordion.rtl.min.js"></script>
<!-- By specific version (RTL) -->
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v1.16.0/accordion.rtl.min.js"></script>
The CDN artifacts define the custom elements for the browser, so they can be directly used once the script tag has been added to the page. For example:
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/dropdown.min.js"></script>
<style type="text/css">
// Suppresses the custom element until it has been defined
bx-dropdown:not(:defined),
bx-dropdown-item:not(:defined) {
visibility: hidden;
}
</style>
</head>
<body>
<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>
</body>
</html>
Our example at CodeSandbox shows usage with only CDN artifacts:
To install carbon-web-components
in your project, you will need to run the
following command using npm:
npm install --save carbon-web-components
If you prefer Yarn, use the following command instead:
yarn add carbon-web-components
NOTE: Carbon and Lit dependencies will be managed by Carbon Web Components starting in
v1.19.0
. For earlier versions, these dependencies will have to be installed separately:npm:
npm install --save carbon-components lit-html lit-element
Yarn:
yarn add 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 import
s. The above example uses Webpack, but you can use other bundlers like Rollup too.
Once you set up a module bundler, you can start importing our component modules, for example:
import 'carbon-web-components/es/components/dropdown/dropdown.js';
import 'carbon-web-components/es/components/dropdown/dropdown-item.js';
Once you've imported the component modules, you can use our components in the same manner as native HTML tags, for example:
<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>
carbon-web-components
with old build toolchain
In addition to the available Web Component versions of Carbon components, this library also supports usage with JavaScript frameworks like Angular, React, and Vue if the desire is to use instead of the pure framework versions of Carbon components. Specifically for React, this library comes with a wrapper implementation around the Carbon Web Components for more seamless integration with your React application.
This is achievable since Web Components is the modern browser standard, and works well with other front-end frameworks that exist in the application. In turn, this also comes with the benefits of encapsulation within the Shadow DOM:
Angular users can use our components in the same manner as native HTML tags, too, once you add CUSTOM_ELEMENTS_SCHEMA
schema to your Angular module, for example:
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.ts
files in carbon-web-components
package are compiled with TypeScript 3.7. You can use TypeScript 3.7 in your Angular application with upcoming Angular 9.0
release, or with the following instructions, so your application can use those .d.ts
files:
true
to angularCompilerOptions.disableTypeScriptVersionCheck
in tsconfig.json
polyfills.ts
, change __importDefault
TypeScript helper as follows: window.__importDefault = mod => (mod?.__esModule ? mod : { default: mod })
You can use wrapper React components in carbon-web-components/es/components-react
generated 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 = () => (
<BXDropdown triggerContent="Select an item">
<BXDropdownItem value="all">Option 1</BXDropdownItem>
<BXDropdownItem value="cloudFoundry">Option 2</BXDropdownItem>
<BXDropdownItem value="staging">Option 3</BXDropdownItem>
<BXDropdownItem value="dea">Option 4</BXDropdownItem>
<BXDropdownItem value="router">Option 5</BXDropdownItem>
</BXDropdown>
);
render(<App />, 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.3
or 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!
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 kind
is the attribute namebx-modal-closed
which typically indicates that an event with such event type is fired. You can also expand the twistie to see the details of the eventTo support IE, you need a couple additional setups:
@babel/preset-env
configuration)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/es
directory.
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.js
only) 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.js
only) 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