From 773b18d3149ac70dc2e151211e09a1e7cdcfb3e6 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sat, 25 Jul 2020 06:26:49 -0700 Subject: [PATCH] chore: add more prop annotations --- src/Accordion/Accordion.Skeleton.svelte | 9 ++ src/Accordion/Accordion.svelte | 2 +- src/Accordion/AccordionItem.svelte | 6 +- src/Breadcrumb/BreadcrumbItem.svelte | 2 +- src/Button/Button.Skeleton.svelte | 9 ++ src/Button/Button.svelte | 5 + src/Checkbox/Checkbox.svelte | 64 +++++++++- src/CodeSnippet/CodeSnippet.svelte | 39 ++++++- src/ComboBox/ComboBox.svelte | 13 ++- src/ComposedModal/ComposedModal.svelte | 37 +++++- .../ContentSwitcher.Story.svelte | 4 + src/ContentSwitcher/ContentSwitcher.svelte | 15 ++- src/ContentSwitcher/Switch.svelte | 27 ++++- src/Copy/Copy.svelte | 16 ++- src/CopyButton/CopyButton.svelte | 4 + src/DataTable/DataTable.svelte | 23 ++-- src/DataTable/TableHeader.svelte | 7 ++ src/DatePicker/DatePicker.Skeleton.svelte | 5 + src/DatePicker/DatePicker.svelte | 36 +++--- src/DatePicker/DatePickerInput.svelte | 12 +- src/Dropdown/Dropdown.Skeleton.svelte | 4 + src/Dropdown/Dropdown.svelte | 19 ++- src/FileUploader/FileUploaderButton.svelte | 5 + .../FileUploaderDropContainer.svelte | 5 + src/FileUploader/FileUploaderItem.svelte | 6 + src/FormGroup/FormGroup.svelte | 2 +- src/FormLabel/FormLabel.svelte | 4 + src/Icon/Icon.Skeleton.svelte | 4 + src/Icon/Icon.svelte | 5 + src/InlineLoading/InlineLoading.svelte | 6 +- src/Link/Link.svelte | 14 +++ src/ListBox/ListBox.svelte | 21 +++- src/ListBox/ListBoxField.svelte | 9 +- src/ListBox/ListBoxMenu.svelte | 4 + src/ListBox/ListBoxSelection.svelte | 15 ++- src/Loading/Loading.svelte | 24 ++++ src/Modal/Modal.svelte | 39 ++++++- src/MultiSelect/MultiSelect.svelte | 25 ++-- src/Notification/InlineNotification.svelte | 7 +- src/Notification/NotificationButton.svelte | 6 +- src/Notification/NotificationIcon.svelte | 8 +- src/NumberInput/NumberInput.svelte | 16 ++- src/OrderedList/OrderedList.svelte | 4 + src/OverflowMenu/OverflowMenu.svelte | 17 ++- src/OverflowMenu/OverflowMenuItem.svelte | 8 +- src/Pagination/Pagination.svelte | 7 +- src/ProgressIndicator/ProgressStep.svelte | 8 +- src/RadioButton/RadioButton.svelte | 5 + src/Search/Search.Skeleton.svelte | 4 + src/Search/Search.svelte | 15 +++ src/Select/Select.svelte | 15 +++ src/Slider/Slider.svelte | 11 ++ src/StructuredList/StructuredListInput.svelte | 5 + src/Tabs/Tab.svelte | 6 + src/Tabs/TabContent.svelte | 7 ++ src/Tag/Tag.svelte | 110 ++++++++++++------ src/TextArea/TextArea.svelte | 10 ++ src/TextInput/PasswordInput.svelte | 11 ++ src/TextInput/TextInput.svelte | 11 ++ src/Tile/ClickableTile.svelte | 5 + src/Tile/ExpandableTile.svelte | 12 +- src/Tile/RadioTile.svelte | 12 +- src/Tile/SelectableTile.svelte | 12 +- src/Tile/Tile.svelte | 4 + src/TimePicker/TimePicker.svelte | 10 ++ src/TimePicker/TimePickerSelect.svelte | 5 + src/Toggle/Toggle.Skeleton.svelte | 11 +- src/Toggle/Toggle.svelte | 7 +- src/ToggleSmall/ToggleSmall.Skeleton.svelte | 9 ++ src/ToggleSmall/ToggleSmall.svelte | 5 + src/Tooltip/Tooltip.svelte | 17 ++- .../TooltipDefinition.svelte | 32 ++++- src/TooltipIcon/TooltipIcon.svelte | 28 ++++- src/UIShell/Content.svelte | 4 + src/UnorderedList/UnorderedList.svelte | 4 + 75 files changed, 877 insertions(+), 137 deletions(-) diff --git a/src/Accordion/Accordion.Skeleton.svelte b/src/Accordion/Accordion.Skeleton.svelte index 436d57ea..e9d94803 100644 --- a/src/Accordion/Accordion.Skeleton.svelte +++ b/src/Accordion/Accordion.Skeleton.svelte @@ -1,5 +1,14 @@ diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 01330a2e..212bca1f 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -2,6 +2,11 @@ export let as = undefined; export let skeleton = false; export let disabled = false; + + /** + * Set the `href` to use an anchor link + * @type {string} [href] + */ export let href = undefined; export let icon = undefined; export let iconDescription = undefined; diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte index 27346df6..1ba3f507 100644 --- a/src/Checkbox/Checkbox.svelte +++ b/src/Checkbox/Checkbox.svelte @@ -1,14 +1,68 @@ @@ -91,7 +96,7 @@ sortHeader.set({ id: sortDirection === 'none' ? null : $thKeys[header.key], key: header.key, - sortDirection + sortDirection, }); }}> {header.value} diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte index aa829319..63f9e264 100644 --- a/src/DataTable/TableHeader.svelte +++ b/src/DataTable/TableHeader.svelte @@ -1,6 +1,11 @@ diff --git a/src/DatePicker/DatePicker.svelte b/src/DatePicker/DatePicker.svelte index 3af2ccb2..d2d9dac7 100644 --- a/src/DatePicker/DatePicker.svelte +++ b/src/DatePicker/DatePicker.svelte @@ -2,7 +2,17 @@ export let appendTo = document.body; export let dateFormat = "m/d/Y"; export let datePickerType = "simple"; + + /** + * Set an id for the date picker element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); + + /** + * Set to `true` to enable the light variant + * @type {boolean} [light=false] + */ export let light = false; export let locale = "en"; export let maxDate = null; @@ -14,22 +24,22 @@ createEventDispatcher, setContext, afterUpdate, - onDestroy + onDestroy, } from "svelte"; import { writable, derived } from "svelte/store"; import { createCalendar } from "./createCalendar"; const dispatch = createEventDispatcher(); const inputs = writable([]); - const inputIds = derived(inputs, _ => _.map(({ id }) => id)); + const inputIds = derived(inputs, (_) => _.map(({ id }) => id)); const labelTextEmpty = derived( inputs, - _ => _.filter(({ labelText }) => !!labelText).length === 0 + (_) => _.filter(({ labelText }) => !!labelText).length === 0 ); const inputValue = writable(value); const mode = writable(datePickerType); - const range = derived(mode, _ => _ === "range"); - const hasCalendar = derived(mode, _ => _ === "single" || _ === "range"); + const range = derived(mode, (_) => _ === "range"); + const hasCalendar = derived(mode, (_) => _ === "single" || _ === "range"); let calendar = undefined; let datePickerRef = undefined; @@ -40,8 +50,8 @@ range, inputValue, hasCalendar, - add: data => { - inputs.update(_ => [..._, data]); + add: (data) => { + inputs.update((_) => [..._, data]); }, declareRef: ({ id, ref }) => { if ($inputIds.indexOf(id) === 0) { @@ -59,7 +69,7 @@ dispatch("change", value); } }, - blurInput: relatedTarget => { + blurInput: (relatedTarget) => { if (calendar && !calendar.calendarContainer.contains(relatedTarget)) { calendar.close(); } @@ -74,7 +84,7 @@ calendar.calendarContainer.querySelector(".flatpickr-day[tabindex]") || calendar.calendarContainer ).focus(); - } + }, }); afterUpdate(() => { @@ -87,24 +97,24 @@ locale, maxDate, minDate, - mode: $mode + mode: $mode, }, base: inputRef, input: inputRefTo, - dispatch: event => { + dispatch: (event) => { const detail = { selectedDates: calendar.selectedDates }; if ($range) { detail.dateStr = { from: inputRef.value, - to: inputRefTo.value + to: inputRefTo.value, }; } else { detail.dateStr = inputRef.value; } return dispatch(event, detail); - } + }, }); } diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte index a2b8b6b0..d63b64f0 100644 --- a/src/DatePicker/DatePickerInput.svelte +++ b/src/DatePicker/DatePickerInput.svelte @@ -5,12 +5,22 @@ export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}"; export let disabled = false; export let iconDescription = ""; + + /** + * Set an id for the input element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); export let labelText = ""; export let hideLabel = false; export let invalid = false; export let invalidText = ""; export let name = undefined; + + /** + * Obtain a reference to the input HTML element + * @type {null | HTMLElement} [ref=null] + */ export let ref = null; import { getContext, onMount } from "svelte"; @@ -25,7 +35,7 @@ blurInput, openCalendar, focusCalendar, - inputValue + inputValue, } = getContext("DatePicker"); add({ id, labelText }); diff --git a/src/Dropdown/Dropdown.Skeleton.svelte b/src/Dropdown/Dropdown.Skeleton.svelte index a7202976..b7bd439a 100644 --- a/src/Dropdown/Dropdown.Skeleton.svelte +++ b/src/Dropdown/Dropdown.Skeleton.svelte @@ -1,4 +1,8 @@ diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte index 399e66a6..a7b29a65 100644 --- a/src/Dropdown/Dropdown.svelte +++ b/src/Dropdown/Dropdown.svelte @@ -1,14 +1,29 @@ - export let legendText = ""; export let invalid = false; export let message = false; export let messageText = ""; + export let legendText = "";
+ /** + * Set an id to be used by the label element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); diff --git a/src/Icon/Icon.Skeleton.svelte b/src/Icon/Icon.Skeleton.svelte index 8c221a93..00ba20c8 100644 --- a/src/Icon/Icon.Skeleton.svelte +++ b/src/Icon/Icon.Skeleton.svelte @@ -1,4 +1,8 @@ diff --git a/src/Icon/Icon.svelte b/src/Icon/Icon.svelte index fc724742..af119c96 100644 --- a/src/Icon/Icon.svelte +++ b/src/Icon/Icon.svelte @@ -1,5 +1,10 @@ diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte index 0a8b55b4..105e568a 100644 --- a/src/ListBox/ListBox.svelte +++ b/src/ListBox/ListBox.svelte @@ -1,7 +1,22 @@ diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index 2d512837..fa7a76a9 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -10,6 +10,11 @@ export let allowEmpty = false; export let disabled = false; export let iconDescription = ""; + + /** + * Set an id for the input element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); export let name = undefined; export let invalid = false; @@ -17,11 +22,16 @@ export let helperText = ""; export let label = ""; export let hideLabel = false; + + /** + * Obtain a reference to the input HTML element + * @type {null | HTMLElement} [ref=null] + */ export let ref = null; - export let translateWithId = id => defaultTranslations[id]; + export let translateWithId = (id) => defaultTranslations[id]; export const translationIds = { increment: "increment", - decrement: "decrement" + decrement: "decrement", }; import { createEventDispatcher, afterUpdate } from "svelte"; @@ -31,7 +41,7 @@ const defaultTranslations = { [translationIds.increment]: "Increment number", - [translationIds.decrement]: "Decrement number" + [translationIds.decrement]: "Decrement number", }; const dispatch = createEventDispatcher(); diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte index 023ef81a..f4472260 100644 --- a/src/OrderedList/OrderedList.svelte +++ b/src/OrderedList/OrderedList.svelte @@ -1,4 +1,8 @@ diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index 2072ca06..c9bd9487 100644 --- a/src/OverflowMenu/OverflowMenu.svelte +++ b/src/OverflowMenu/OverflowMenu.svelte @@ -7,6 +7,11 @@ export let icon = OverflowMenuVertical16; export let iconClass = undefined; export let iconDescription = "Open and close list of options"; + + /** + * Set an id for the button element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); export let menuOptionsClass = undefined; @@ -29,7 +34,7 @@ setContext("OverflowMenu", { focusedId, add: ({ id, text, primaryFocus }) => { - items.update(_ => { + items.update((_) => { if (primaryFocus) { currentIndex.set(_.length); } @@ -37,10 +42,10 @@ return [..._, { id, text, primaryFocus, index: _.length }]; }); }, - update: id => { + update: (id) => { currentId.set(id); }, - change: direction => { + change: (direction) => { // TODO: skip disabled let index = $currentIndex + direction; @@ -51,12 +56,12 @@ } currentIndex.set(index); - } + }, }); afterUpdate(() => { if ($currentId) { - const { index, text } = $items.filter(_ => _.id === $currentId)[0]; + const { index, text } = $items.filter((_) => _.id === $currentId)[0]; dispatch("close", { index, text }); open = false; } @@ -136,7 +141,7 @@ on:mouseenter on:mouseleave on:keydown - on:keydown={e => { + on:keydown={(e) => { if (open) { if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(e.key)) { e.preventDefault(); diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte index 56f478df..0b002790 100644 --- a/src/OverflowMenu/OverflowMenuItem.svelte +++ b/src/OverflowMenu/OverflowMenuItem.svelte @@ -6,6 +6,11 @@ export let primaryFocus = false; export let requireTitle = true; export let text = "Provide text"; + + /** + * Set an id for the top-level element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); export let ref = null; @@ -27,12 +32,13 @@ title: requireTitle ? text : undefined, class: "bx--overflow-menu-options__btn", disabled: href ? undefined : disabled, - href: href ? href : undefined + href: href ? href : undefined, };
  • `page ${page}`; + + /** + * Set an id for the top-level element + * @type {string} [id] + */ export let id = "ccs-" + Math.random().toString(36); import CaretLeft24 from "carbon-icons-svelte/lib/CaretLeft24"; @@ -33,7 +38,7 @@ $: forwardButtonDisabled = disabled || page === totalPages; -
    +