diff --git a/CHANGELOG.md b/CHANGELOG.md index b4bf1c5c..780c1dde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 +## [0.25.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.25.0) - 2020-11-27 + +**Features** + +- Add `padding` prop to Grid, Row, Column components ([PR #420](https://github.com/IBM/carbon-components-svelte/pull/420), [issue #410](https://github.com/IBM/carbon-components-svelte/issues/410)) +- Add `transition` prop to UI Shell `HeaderAction` to customize panel slide transition; by default, the slide duration is `200`ms ([PR #419](https://github.com/IBM/carbon-components-svelte/pull/419), [issue #384](https://github.com/IBM/carbon-components-svelte/issues/384)) + +**Fixes** + +- fix `Files` type for FileUploader ([PR #422](https://github.com/IBM/carbon-components-svelte/pull/422), [issue #421](https://github.com/IBM/carbon-components-svelte/issues/421)) +- remove the fly transition from HamburgerMenu ([PR #419](https://github.com/IBM/carbon-components-svelte/pull/419), [issue #384](https://github.com/IBM/carbon-components-svelte/issues/384)) + +**Documentation** + +- add ["Padded columns"](https://carbon-svelte.vercel.app/components/Grid#padded-columns) example to Grid docs +- demo different transitions in ["Header with app switcher"](https://carbon-svelte.vercel.app/components/UIShell#header-with-app-switcher) example in UI Shell +- describe use case for [using native styles in OrderedList](https://carbon-svelte.vercel.app/components/OrderedList#native-list-styles) + +**Housekeeping** + +- pin development dependency `sveld` to version 0.3.0 + +--- + +**Contributors** + +- [@ispyinternet](https://github.com/ispyinternet) +- [@miedzikd](https://github.com/miedzikd) + ## [0.24.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.24.0) - 2020-11-26 **Features** diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index c65b9d72..45400296 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 155 components exported from carbon-components-svelte@0.24.0. +> 155 components exported from carbon-components-svelte@0.25.0. ## Components @@ -1054,19 +1054,13 @@ None. ## `FileUploader` -### Types - -```ts -export type Files = string[]; -``` - ### Props | Prop name | Kind | Reactive | Type | Default value | Description | | :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- | -| files | let | Yes | Files | [] | Obtain the uploaded file names | +| files | let | Yes | FileList | [] | Obtain the uploaded file names | | status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | -| accept | let | No | Files | [] | Specify the accepted file types | +| accept | let | No | string[] | [] | Specify the accepted file types | | multiple | let | No | boolean | false | Set to `true` to allow multiple files | | clearFiles | const | No | () => void | () => { files = []; } | Override the default behavior of clearing the array of uploaded files | | labelDescription | let | No | string | "" | Specify the label description | @@ -1082,32 +1076,26 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----------------- | -| add | dispatched | Files | -| remove | dispatched | Files | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| keydown | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :-------------------- | +| add | dispatched | FileList | +| remove | dispatched | FileList | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| keydown | forwarded | -- | ## `FileUploaderButton` -### Types - -```ts -export type Files = string[]; -``` - ### Props | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- | | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | labelText | let | Yes | string | "Add file" | Specify the label text | -| accept | let | No | Files | [] | Specify the accepted file types | +| accept | let | No | string[] | [] | Specify the accepted file types | | multiple | let | No | boolean | false | Set to `true` to allow multiple files | | disabled | let | No | boolean | false | Set to `true` to disable the input | | disableLabelChanges | let | No | boolean | false | Set to `true` to disable label changes | @@ -1131,26 +1119,20 @@ None. ## `FileUploaderDropContainer` -### Types - -```ts -export type Files = string[]; -``` - ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| accept | let | No | Files | [] | Specify the accepted file types | -| multiple | let | No | boolean | false | Set to `true` to allow multiple files | -| validateFiles | let | No | (files: Files) => Files | (files) => files | Override the default behavior of validating uploaded files
The default behavior does not validate files | -| labelText | let | No | string | "Add file" | Specify the label text | -| role | let | No | string | "button" | Specify the `role` attribute of the drop container | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| tabindex | let | No | string | "0" | Specify `tabindex` attribute | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| accept | let | No | string[] | [] | Specify the accepted file types | +| multiple | let | No | boolean | false | Set to `true` to allow multiple files | +| validateFiles | let | No | (files: FileList) => FileList | (files) => files | Override the default behavior of validating uploaded files
The default behavior does not validate files | +| labelText | let | No | string | "Add file" | Specify the label text | +| role | let | No | string | "button" | Specify the `role` attribute of the drop container | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| tabindex | let | No | string | "0" | Specify `tabindex` attribute | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | "" | Specify a name attribute for the input | ### Slots @@ -1158,15 +1140,15 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----------------- | -| add | dispatched | Files | -| dragover | forwarded | -- | -| dragleave | forwarded | -- | -| drop | forwarded | -- | -| keydown | forwarded | -- | -| change | forwarded | -- | -| click | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :-------------------- | +| add | dispatched | FileList | +| dragover | forwarded | -- | +| dragleave | forwarded | -- | +| drop | forwarded | -- | +| keydown | forwarded | -- | +| change | forwarded | -- | +| click | forwarded | -- | ## `FileUploaderItem` diff --git a/README.md b/README.md index a830cdfd..b84646aa 100644 --- a/README.md +++ b/README.md @@ -5,13 +5,25 @@ ![npm downloads to date](https://img.shields.io/npm/dt/carbon-components-svelte?color=262626&style=for-the-badge) [![Build][build]][build-badge] -carbon-components-svelte is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM. +Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM. -A design system can facilitate frontend development and prototyping because it encourages reuse, consistency, and extensibility. +Design systems facilitate design and development through reuse, consistency, and extensibility. + +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 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) -Deploys by Vercel +Deploys by Vercel + +The [documentation website](http://ibm.biz/carbon-svelte) contains live demos and examples. Other forms of documentation are auto-generated: + +- **[Component Index](COMPONENT_INDEX.md)**: Markdown file documenting component props, slots, and events +- **[TypeScript definitions](types)**: Component TypeScript definitions +- **[Component API](docs/src/COMPONENT_API.json)**: Component API metadata in JSON format ## Getting started diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index fbc7e4a0..3297232e 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -3998,7 +3998,7 @@ "name": "accept", "kind": "let", "description": "Specify the accepted file types", - "type": "Files", + "type": "string[]", "value": "[]", "isFunction": false, "constant": false, @@ -4111,9 +4111,7 @@ { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "click", "element": "input" } ], - "typedefs": [ - { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } - ], + "typedefs": [], "rest_props": { "type": "Element", "name": "input" } }, { @@ -4134,7 +4132,7 @@ "name": "accept", "kind": "let", "description": "Specify the accepted file types", - "type": "Files", + "type": "string[]", "value": "[]", "isFunction": false, "constant": false, @@ -4144,7 +4142,7 @@ "name": "files", "kind": "let", "description": "Obtain the uploaded file names", - "type": "Files", + "type": "FileList", "value": "[]", "isFunction": false, "constant": false, @@ -4233,8 +4231,8 @@ ], "slots": [], "events": [ - { "type": "dispatched", "name": "add", "detail": "Files" }, - { "type": "dispatched", "name": "remove", "detail": "Files" }, + { "type": "dispatched", "name": "add", "detail": "FileList" }, + { "type": "dispatched", "name": "remove", "detail": "FileList" }, { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, @@ -4246,9 +4244,7 @@ }, { "type": "forwarded", "name": "keydown", "element": "Filename" } ], - "typedefs": [ - { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } - ], + "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, { @@ -4344,7 +4340,7 @@ "name": "accept", "kind": "let", "description": "Specify the accepted file types", - "type": "Files", + "type": "string[]", "value": "[]", "isFunction": false, "constant": false, @@ -4364,7 +4360,7 @@ "name": "validateFiles", "kind": "let", "description": "Override the default behavior of validating uploaded files\nThe default behavior does not validate files", - "type": "(files: Files) => Files", + "type": "(files: FileList) => FileList", "value": "(files) => files", "isFunction": true, "constant": false, @@ -4443,7 +4439,7 @@ ], "slots": [], "events": [ - { "type": "dispatched", "name": "add", "detail": "Files" }, + { "type": "dispatched", "name": "add", "detail": "FileList" }, { "type": "forwarded", "name": "dragover", "element": "div" }, { "type": "forwarded", "name": "dragleave", "element": "div" }, { "type": "forwarded", "name": "drop", "element": "div" }, @@ -4451,9 +4447,7 @@ { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "click", "element": "input" } ], - "typedefs": [ - { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } - ], + "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, { diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte index d3b3376a..75356c97 100644 --- a/docs/src/components/ComponentApi.svelte +++ b/docs/src/components/ComponentApi.svelte @@ -138,7 +138,10 @@ {#if prop.description} {#each prop.description.split('\n') as line}
- {@html line.replace(/`(.*?)`/g, '$1')}. + {@html line + .replace(/\/g, '>') + .replace(/`(.*?)`/g, '$1')}.
{/each} {:else} diff --git a/docs/src/pages/components/OrderedList.svx b/docs/src/pages/components/OrderedList.svx index e8275202..58b5bfb6 100644 --- a/docs/src/pages/components/OrderedList.svx +++ b/docs/src/pages/components/OrderedList.svx @@ -51,6 +51,8 @@ components: ["OrderedList", "ListItem"] ### Native list styles +Use the `native` attribute to enable default browser list styles. This is useful for large lists (i.e., 1000 or more items) where the list number may overlap with the list item text. + Ordered list level 1 diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte index db977621..395a59ed 100644 --- a/docs/src/pages/index.svelte +++ b/docs/src/pages/index.svelte @@ -25,7 +25,7 @@

Carbon Components Svelte

- carbon-components-svelte is a + Carbon Components Svelte is a

- A design system can facilitate frontend development and prototyping - because it encourages reuse, consistency, and extensibility. + Design systems facilitate design and development through reuse, + consistency, and extensibility.

@@ -74,8 +74,8 @@

Portfolio

- The broader Carbon Svelte effort extends to the icons, pictograms, and - data visualization libraries. + The broader Carbon Svelte effort includes libraries for icons, + pictograms, and data visualization.

@@ -94,7 +94,7 @@ @@ -113,7 +113,7 @@ diff --git a/package.json b/package.json index 69742996..92376ad7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-components-svelte", - "version": "0.24.0", + "version": "0.25.0", "license": "Apache-2.0", "author": "IBM", "description": "Svelte implementation of the Carbon Design System", @@ -39,7 +39,7 @@ "rollup": "^2.33.3", "rollup-plugin-svelte": "^6.1.1", "rollup-plugin-terser": "^7.0.2", - "sveld": "^0.3.0", + "sveld": "0.3.0", "svelte": "^3.29.7", "svelte-check": "^1.1.15", "svelte-loader": "^2.13.6", diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte index 52fcc340..2e7e3aa6 100644 --- a/src/FileUploader/FileUploader.svelte +++ b/src/FileUploader/FileUploader.svelte @@ -1,8 +1,7 @@