@carbon/web-components 2.0.0-rc.5 → 2.0.0-rc.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -112
- package/es/components/icon-button/icon-button.css.js +1 -1
- package/es/components/icon-button/icon-button.rtl.css.js +1 -1
- package/es/components/popover/popover.css.js +1 -1
- package/es/components/popover/popover.rtl.css.js +1 -1
- package/es/components/tooltip/tooltip.css.js +1 -1
- package/es/components/tooltip/tooltip.rtl.css.js +1 -1
- package/es/globals/internal/storybook-cdn.d.ts.map +1 -1
- package/es/globals/internal/storybook-cdn.js +2 -2
- package/es/globals/internal/storybook-cdn.js.map +1 -1
- package/package.json +1 -1
- package/scss/components/popover/popover.scss +147 -12
package/README.md
CHANGED
|
@@ -80,12 +80,12 @@ version `v1.16.0`):
|
|
|
80
80
|
<!-- By `latest` tag -->
|
|
81
81
|
<script
|
|
82
82
|
type="module"
|
|
83
|
-
src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/accordion.min.js"></script>
|
|
83
|
+
src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/accordion.min.js"></script>
|
|
84
84
|
|
|
85
85
|
<!-- By specific version -->
|
|
86
86
|
<script
|
|
87
87
|
type="module"
|
|
88
|
-
src="https://1.www.s81c.com/common/carbon/web-components/version/
|
|
88
|
+
src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.0/accordion.min.js"></script>
|
|
89
89
|
```
|
|
90
90
|
|
|
91
91
|
These are the list of available components via CDN:
|
|
@@ -139,12 +139,12 @@ extention from `.min.js` to `.rtl.min.js`. For example:
|
|
|
139
139
|
<!-- By `latest` tag (RTL) -->
|
|
140
140
|
<script
|
|
141
141
|
type="module"
|
|
142
|
-
src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/accordion.rtl.min.js"></script>
|
|
142
|
+
src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/accordion.rtl.min.js"></script>
|
|
143
143
|
|
|
144
144
|
<!-- By specific version (RTL) -->
|
|
145
145
|
<script
|
|
146
146
|
type="module"
|
|
147
|
-
src="https://1.www.s81c.com/common/carbon/web-components/version/
|
|
147
|
+
src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.0/accordion.rtl.min.js"></script>
|
|
148
148
|
```
|
|
149
149
|
|
|
150
150
|
#### Basic usage
|
|
@@ -158,7 +158,7 @@ directly used once the script tag has been added to the page. For example:
|
|
|
158
158
|
<head>
|
|
159
159
|
<script
|
|
160
160
|
type="module"
|
|
161
|
-
src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/dropdown.min.js"></script>
|
|
161
|
+
src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/dropdown.min.js"></script>
|
|
162
162
|
<style type="text/css">
|
|
163
163
|
// Suppresses the custom element until it has been defined
|
|
164
164
|
cds-dropdown:not(:defined),
|
|
@@ -184,7 +184,7 @@ directly used once the script tag has been added to the page. For example:
|
|
|
184
184
|
Our example at [CodeSandbox](https://codesandbox.io) shows usage with only CDN
|
|
185
185
|
artifacts:
|
|
186
186
|
|
|
187
|
-
[](https://codesandbox.io/s/github/carbon-design-system/carbon-
|
|
187
|
+
[](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/cdn)
|
|
188
188
|
|
|
189
189
|
### Using ES imports
|
|
190
190
|
|
|
@@ -224,7 +224,7 @@ yarn add @carbon/web-components
|
|
|
224
224
|
|
|
225
225
|
Our example at [CodeSandbox](https://codesandbox.io) shows the most basic usage:
|
|
226
226
|
|
|
227
|
-
[](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/
|
|
227
|
+
[](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic)
|
|
228
228
|
|
|
229
229
|
The first thing you need is **setting up a module bundler** to resolve
|
|
230
230
|
ECMAScript `import`s. The above example uses [Webpack](https://webpack.js.org),
|
|
@@ -272,8 +272,6 @@ turn, this also comes with the benefits of encapsulation within the Shadow DOM:
|
|
|
272
272
|
|
|
273
273
|
### Angular
|
|
274
274
|
|
|
275
|
-
[](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/angular)
|
|
276
|
-
|
|
277
275
|
Angular users can use our components in the same manner as native HTML tags,
|
|
278
276
|
too, once you add
|
|
279
277
|
[`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA)
|
|
@@ -309,7 +307,7 @@ application can use those `.d.ts` files:
|
|
|
309
307
|
|
|
310
308
|
### React
|
|
311
309
|
|
|
312
|
-
[](https://codesandbox.io/s/github/carbon-design-system/carbon-
|
|
310
|
+
[](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/react)
|
|
313
311
|
|
|
314
312
|
You can use wrapper React components in
|
|
315
313
|
`@carbon/web-components/es/components-react` generated
|
|
@@ -343,15 +341,15 @@ To run the wrapper React components in SSR environment requires Node `12.16.3`
|
|
|
343
341
|
or above that supports
|
|
344
342
|
["conditional mapping" feature](https://github.com/jkrems/proposal-pkg-exports#2-conditional-mapping):
|
|
345
343
|
|
|
346
|
-
[](https://codesandbox.io/s/github/carbon-design-system/carbon-
|
|
344
|
+
[](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/react-ssr)
|
|
347
345
|
|
|
348
346
|
Same Node version requirement applies to Next.js:
|
|
349
347
|
|
|
350
|
-
[](https://codesandbox.io/s/github/carbon-design-system/carbon-
|
|
348
|
+
[](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/next)
|
|
351
349
|
|
|
352
350
|
### Vue
|
|
353
351
|
|
|
354
|
-
[](https://codesandbox.io/s/github/carbon-design-system/carbon-
|
|
352
|
+
[](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/vue)
|
|
355
353
|
|
|
356
354
|
Vue users can use our components in the same manner as native HTML tags, without
|
|
357
355
|
any additional steps!
|
|
@@ -360,16 +358,8 @@ any additional steps!
|
|
|
360
358
|
|
|
361
359
|
1. Fork this repository and clone it
|
|
362
360
|
2. `yarn install`
|
|
363
|
-
3. `
|
|
364
|
-
|
|
365
|
-
## Running React/Angular/Vue Storybook demo
|
|
366
|
-
|
|
367
|
-
- React: `yarn storybook:react` (Live demo:
|
|
368
|
-
https://web-components.carbondesignsystem.com/react/index.html)
|
|
369
|
-
- Angular: `yarn storybook:angular` (Live demo:
|
|
370
|
-
https://web-components.carbondesignsystem.com/angular/index.html)
|
|
371
|
-
- Vue: `yarn storybook:vue` (Live demo:
|
|
372
|
-
https://web-components.carbondesignsystem.com/vue/index.html)
|
|
361
|
+
3. `cd packages/carbon-web-components`
|
|
362
|
+
4. `yarn wca && yarn storybook`
|
|
373
363
|
|
|
374
364
|
## List of available components
|
|
375
365
|
|
|
@@ -403,7 +393,7 @@ To support IE, you need a couple additional setups:
|
|
|
403
393
|
|
|
404
394
|
Here's an example code that shows such setup:
|
|
405
395
|
|
|
406
|
-
[](https://codesandbox.io/s/github/carbon-design-system/carbon-
|
|
396
|
+
[](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/ie)
|
|
407
397
|
|
|
408
398
|
## Coding conventions
|
|
409
399
|
|
|
@@ -417,91 +407,3 @@ Can be found at [here](./src/coding-conventions.md).
|
|
|
417
407
|
```
|
|
418
408
|
|
|
419
409
|
You'll see the build artifacts in `/path/to/carbon-web-components/es` directory.
|
|
420
|
-
|
|
421
|
-
## Running unit test
|
|
422
|
-
|
|
423
|
-
You can run unit test by:
|
|
424
|
-
|
|
425
|
-
```
|
|
426
|
-
> gulp test:unit
|
|
427
|
-
```
|
|
428
|
-
|
|
429
|
-
You can run specific test spec by:
|
|
430
|
-
|
|
431
|
-
```
|
|
432
|
-
> gulp test:unit -s tests/spec/dropdown_spec.ts
|
|
433
|
-
```
|
|
434
|
-
|
|
435
|
-
You can choose a browser (instead of Headless Chrome) by:
|
|
436
|
-
|
|
437
|
-
```
|
|
438
|
-
> gulp test:unit -b Firefox
|
|
439
|
-
```
|
|
440
|
-
|
|
441
|
-
You can keep the browser after the test (and re-run the test when files change)
|
|
442
|
-
by:
|
|
443
|
-
|
|
444
|
-
```
|
|
445
|
-
> gulp test:unit -b Chrome -k
|
|
446
|
-
```
|
|
447
|
-
|
|
448
|
-
You can prevent code coverate instrumentation code from being generated by:
|
|
449
|
-
|
|
450
|
-
```
|
|
451
|
-
> gulp test:unit -d
|
|
452
|
-
```
|
|
453
|
-
|
|
454
|
-
You can update snapshots by:
|
|
455
|
-
|
|
456
|
-
```
|
|
457
|
-
> gulp test:unit --update-snapshot
|
|
458
|
-
```
|
|
459
|
-
|
|
460
|
-
Above options can be used together. This is useful to debug your code as you
|
|
461
|
-
test:
|
|
462
|
-
|
|
463
|
-
```
|
|
464
|
-
> gulp test:unit -s tests/spec/dropdown_spec.ts -b Chrome -d -k
|
|
465
|
-
```
|
|
466
|
-
|
|
467
|
-
## Running build integration test
|
|
468
|
-
|
|
469
|
-
You can run build integration test by:
|
|
470
|
-
|
|
471
|
-
```
|
|
472
|
-
> yarn test:integration:build
|
|
473
|
-
```
|
|
474
|
-
|
|
475
|
-
You can run a specific set of UI test steps (e.g. running
|
|
476
|
-
`tests/integration/build/form-angular_steps.js` only) by:
|
|
477
|
-
|
|
478
|
-
```
|
|
479
|
-
> yarn test:integration:build form-angular_steps
|
|
480
|
-
```
|
|
481
|
-
|
|
482
|
-
By default Chrome runs in headless mode. You can show Chrome UI by:
|
|
483
|
-
|
|
484
|
-
```
|
|
485
|
-
> CI=false yarn test:integration:build
|
|
486
|
-
```
|
|
487
|
-
|
|
488
|
-
## Running UI integration test
|
|
489
|
-
|
|
490
|
-
You can run UI integration test by:
|
|
491
|
-
|
|
492
|
-
```
|
|
493
|
-
> yarn test:integration:ui
|
|
494
|
-
```
|
|
495
|
-
|
|
496
|
-
You can run a specific set of UI test steps (e.g. running
|
|
497
|
-
`tests/integration/ui/dropdown_steps.js` only) by:
|
|
498
|
-
|
|
499
|
-
```
|
|
500
|
-
> yarn test:integration:ui dropdown_steps
|
|
501
|
-
```
|
|
502
|
-
|
|
503
|
-
By default Chrome runs in headless mode. You can show Chrome UI by:
|
|
504
|
-
|
|
505
|
-
```
|
|
506
|
-
> CI=false yarn test:integration:ui
|
|
507
|
-
```
|