pf4-webcomponents-poc is a variant of PatternFly 4 Design System with Custom Elements v1 and Shadow DOM v1 specs.
Experimental at this moment, with enthusiasm.
- Getting started with development
- Running React/Angular demo
- List of available components
- Browser support
- Coding conventions
- Iteration plans
- Creating build
- Running unit test
- Fork this repository and clone it
yarn installyarn buildyarn storybook
- React:
yarn storybook:react - Angular:
yarn storybook:angular
View available web components at: http://pf4-webcomponents-poc.surge.sh/. You can see usage information in several ways:
- Clicking the KNOBS tab at the bottom and changing values there. Most knobs are shown as something like
Button kind (kind), wherekindis the attribute name - Clicking the ACTION LOGGER tab at the bottom and interacting with the selected component. You may see something like
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
- Latest Chrome/Safari/FF ESR
- IE/Edge support is bast-effort basis
- Some components may not be supported
Can be found at here.
> gulp clean
> gulp build
You'll see the build artifacts in /path/to/carbon-custom-elements/es (ESM build) and /path/to/carbon-custom-elements/public (bundled build) directories.
- Fork this repo
- Run
yarn install - Run
gulp build:bundle - Create a directory somewhere
- Copy
/path/to/carbon-custom-elements/public/carbon-custom-elements-with-polyfills.jsthe created directory - Create a HTML like below and put it to the same directory, open it in browser, and you'll see the Carbon button! 🎉
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./carbon-custom-elements-with-polyfills.js"></script>
<style type="text/css">
body {
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}
</style>
</head>
<body>
<bx-btn>Foo</bx-btn>
</body>
</html>- Fork this repo
- Run
yarn install - Run
gulp build:modules - Go to https://codesandbox.io/s/
- Select Vanilla
- Add dependencies (with Add Dependency button) to add the following
lit-html(Latest)lit-element(Latest)classnames(Latest)carbon-components(10.3.x)
- Add the following to the CodeSandbox (e.g. to
srcdirectory)/path/to/carbon-custom-elements/es/components/button/button.js/path/to/carbon-custom-elements/es/components/button/button.css.js
- Go to
src/index.jsin the CodeSandbox and add something likeimport "./button.js" - Go to
index.htmlin the CodeSandbox and add<bx-btn>Foo</bx-btn> - Reload the demo and you'll see the Carbon button! 🎉
You can run unit test by:
> gulp test:unit
You can run specific test spec by:
> gulp test:unit -s tests/spec/button_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
Above options can be used together. This is useful to debug your code as you test:
> gulp test:unit -s tests/spec/button_spec.ts -b Chrome -d -k