From 151252b5ee8c77ba8d6246cc40cd26f746c87cae Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 30 Jul 2020 16:52:30 -0700 Subject: [PATCH] chore: update component docs, types --- README.md | 97 +++++++++++++++++++++++++++--------------------- types/index.d.ts | 19 ++++++++-- 2 files changed, 71 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 7181fdb7..4c8dfbe3 100644 --- a/README.md +++ b/README.md @@ -30,9 +30,9 @@ yarn add -D carbon-components-svelte ``` -## Available Components +## Components -> 147 components in "carbon-components-svelte" +> 147 components exported from "carbon-components-svelte" - Accordion - [AccordionSkeleton](#accordionskeleton) @@ -1591,14 +1591,14 @@ import { ListBoxField } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------------- | :------------------------------------------------------ | :------------- | -| disabled | boolean | false | -| role | string | "combobox" | -| tabindex | string | "-1" | -| translateWithId | (id: ListBoxFieldTranslationId) => string; | (id) => string | -| id | string | - | -| ref | null | HTMLElement | null | +| Prop name | Type | Default | +| :-------------- | :----------------------------------------------------- | :------------- | +| disabled | boolean | false | +| role | string | "combobox" | +| tabindex | string | "-1" | +| translateWithId | (id: ListBoxFieldTranslationId) => string | (id) => string | +| id | string | - | +| ref | null | HTMLElement | null | @@ -1688,7 +1688,7 @@ import { ListBoxSelection } from "carbon-components-svelte"; | Prop name | Type | Default | | :-------------- | :--------------------------------------------------------- | :------------- | -| selectionCount | \* | - | +| selectionCount | any | - | | disabled | boolean | false | | translateWithId | (id: ListBoxSelectionTranslationId) => string | (id) => string | | ref | null | HTMLElement | null | @@ -1795,32 +1795,32 @@ import { MultiSelect } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :---------------- | :------------------------------------------------------------------------ | :---------------------------------------------------------- | -| items | MultiSelectItem[] | [] | -| itemToString | (item: MultiSelectItem) => string | (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId | -| selectedIds | MultiSelectItemId[] | [] | -| value | string | "" | -| size | "sm" | "lg" | "xl" | - | -| type | "default" | "inline" | "default" | -| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | -| disabled | boolean | false | -| filterable | boolean | false | -| filterItem | (item: MultiSelectItem, value: string) => string; | ((item: MultiSelectItem, value: string) => string;) | -| open | boolean | false | -| light | boolean | false | -| locale | string | "en" | -| placeholder | string | "" | -| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -| translateWithId | (id: any) => string | - | -| titleText | string | "" | -| useTitleInItem | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| helperText | string | "" | -| label | string | - | -| id | string | - | -| name | string | - | +| Prop name | Type | Default | +| :---------------- | :----------------------------------------------------------------------- | :---------------------------------------------------------- | +| items | MultiSelectItem[] | [] | +| itemToString | (item: MultiSelectItem) => string | (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId | +| selectedIds | MultiSelectItemId[] | [] | +| value | string | "" | +| size | "sm" | "lg" | "xl" | - | +| type | "default" | "inline" | "default" | +| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | +| disabled | boolean | false | +| filterable | boolean | false | +| filterItem | (item: MultiSelectItem, value: string) => string | (item: MultiSelectItem, value: string) => string | +| open | boolean | false | +| light | boolean | false | +| locale | string | "en" | +| placeholder | string | "" | +| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | +| translateWithId | (id: any) => string | - | +| titleText | string | "" | +| useTitleInItem | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| helperText | string | "" | +| label | string | - | +| id | string | - | +| name | string | - | @@ -2824,9 +2824,14 @@ import { Tab } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :------------------ | :------ | -| id | string | - | +| Prop name | Type | Default | +| :-------- | :----------------------------------------- | :------ | +| label | string | "" | +| href | string | "#" | +| disabled | boolean | false | +| tabindex | string | "0" | +| id | string | - | +| ref | null | HTMLAnchorElement | null | @@ -2868,7 +2873,12 @@ import { Tabs } from "carbon-components-svelte"; **API** -No exported props. +| Prop name | Type | Default | +| :-------------- | :---------------------------------------- | :---------------- | +| selected | number | 0 | +| type | "default" | "container" | "default" | +| iconDescription | string | "Expand/Collapse" | +| triggerHref | string | "#" | @@ -2888,7 +2898,9 @@ import { TabsSkeleton } from "carbon-components-svelte"; **API** -No exported props. +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| count | number | 4 | @@ -3613,6 +3625,7 @@ import { HeaderAction } from "carbon-components-svelte"; | isOpen | boolean | false | | icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - | | text | string | - | +| ref | null | HTMLButtonElement | null | diff --git a/types/index.d.ts b/types/index.d.ts index 6a16fcf0..20cfdec6 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for carbon-components-svelte 0.8 +// Type definitions for carbon-components-svelte 0.9 // https://github.com/IBM/carbon-components-svelte // Carbon Icon type from carbon-icons-svelte 10.14 @@ -1059,7 +1059,12 @@ export class StructuredListRow { export class Tab { $$prop_def: { + label?: string; // default: "" + href?: string; // default: "#" + disabled?: boolean; // default: false + tabindex?: string; // default: "0" id?: string; + ref?: null | HTMLAnchorElement; // default: null }; } @@ -1070,11 +1075,18 @@ export class TabContent { } export class Tabs { - $$prop_def: {}; + $$prop_def: { + selected?: number; // default: 0 + type?: "default" | "container"; // default: "default" + iconDescription?: string; // default: "Expand/Collapse" + triggerHref?: string; // default: "#" + }; } export class TabsSkeleton { - $$prop_def: {}; + $$prop_def: { + count?: number; // default: 4 + }; } export class TagSkeleton { @@ -1377,6 +1389,7 @@ export class HeaderAction { isOpen?: boolean; // default: false icon?: { render: CarbonIcon; skeleton: boolean }; text?: string; + ref?: null | HTMLButtonElement; // default: null }; }