Alignment with Carbon version 10.27 (#495)

* chore(deps-dev): bump devDependencies

* docs: update number of available carbon icons

* feat(notification): distinguish dispatched close event between click/timeout

* fix(notification): prevent class from being overriden by $$restProps

* docs(notification): improve example body copy

* fix(notification): remove notificationType prop

* refactor(notification): resolve svelte file in imports

* fix(notification): prevent class from being overridden by $$restProps

* feat(notification): update TS signature for dispatched close event

* docs: update contributing

* fix(loading): adjust spinner styles

* feat(tag): support custom icon variant

* feat(tile): add optional expand/collapse icon labels to ExpandableTile

* feat(code-snippet): support disabled state for single and multi-line types

* fix(code-snippet): remove impossible class directive

* fix(code-snippet): showMoreLess button size should be "field", not "small"

* fix(password-input): disable visibility button

- set default values for tooltipAlignment, tooltipPosition

* fix(text-input): add missing warning field wrapper class

* feat(button): infer hasIconOnly using $$slots API

- requires Svelte version >=3.25

* docs(button): add danger tertiary, icon-only example

* feat(button): set default values for tooltip alignment, position

* docs: document dynamic theming

* fix(modal): correctly set class props #482

* fix(form): forward submit event in FluidForm #487

* feat(dropdown): support warning state

* feat(multi-select): support warning state

* fix(multi-select): prevent dropdown from opening if disabled

* feat(number-input): support warning state

* chore(deps-dev): upgrade devDependencies

* docs:  bump @carbon/themes, carbon-components

* refactor(data-table): co-locate DataTableSkeleton with DataTable

* docs: update number of pictograms

* fix(password-input): add missing "bx--btn" class to visibility toggle

* docs: increase z-index for component preview
This commit is contained in:
Eric Liu 2021-01-27 13:29:20 -08:00 committed by GitHub
commit f2a3f8d2e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
63 changed files with 2104 additions and 529 deletions

View file

@ -11,8 +11,8 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes:
- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 5800+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 600+ Carbon pictograms as Svelte components
- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 16 chart types, powered by d3
## [Documentation](http://ibm.biz/carbon-svelte)
@ -130,6 +130,34 @@ export default app;
See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack).
#### Dynamic theming
Use `carbon-components-svelte/css/all.css` for dynamic, client-side styling.
Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
```html
<!DOCTYPE html>
<html lang="en" theme="g10">
<body>
...
</body>
</html>
```
Using JavaScript:
```svelte
<script>
/** @type {"white" | "g10" | "g90" | "g100"} */
let theme = "white";
$: document.documentElement.setAttribute("theme", theme);
</script>
<button on:click="{() => theme = 'g90'}">Update theme</button>
```
### TypeScript support
[TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld).