diff --git a/.prettierrc b/.prettierrc index 5821671a..b330d149 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1 +1 @@ -{ "svelteStrictMode": true } \ No newline at end of file +{ "svelteStrictMode": true, "svelteBracketNewLine": true } \ No newline at end of file diff --git a/docs/src/components/CopyableCodeSnippet.svelte b/docs/src/components/CopyableCodeSnippet.svelte index 09909b90..7aa37554 100644 --- a/docs/src/components/CopyableCodeSnippet.svelte +++ b/docs/src/components/CopyableCodeSnippet.svelte @@ -10,4 +10,5 @@ code="{code}" on:click="{() => { copy(code); - }}" /> + }}" +/> diff --git a/docs/src/components/GlobalHeader.svelte b/docs/src/components/GlobalHeader.svelte index e253e768..b2d7d7df 100644 --- a/docs/src/components/GlobalHeader.svelte +++ b/docs/src/components/GlobalHeader.svelte @@ -17,7 +17,8 @@ platformName="Components Svelte" href="." rel="prefetch" - aria-current="{segment === undefined ? 'page' : undefined}"> + aria-current="{segment === undefined ? 'page' : undefined}" +> @@ -53,13 +55,15 @@ class:bx--loading__background="{true}" cx="0" cy="0" - r="{spinnerRadius}"> + r="{spinnerRadius}" + > {/if} + r="{spinnerRadius}" + > @@ -71,7 +75,8 @@ class:bx--loading="{true}" class:bx--loading--small="{small}" class:bx--loading--stop="{!active}" - {...$$restProps}> + {...$$restProps} + > @@ -81,13 +86,15 @@ class:bx--loading__background="{true}" cx="0" cy="0" - r="{spinnerRadius}"> + r="{spinnerRadius}" + > {/if} + r="{spinnerRadius}" + > {/if} diff --git a/src/Modal/Modal.Story.svelte b/src/Modal/Modal.Story.svelte index ecb6acb3..c18c8548 100644 --- a/src/Modal/Modal.Story.svelte +++ b/src/Modal/Modal.Story.svelte @@ -11,7 +11,8 @@ @@ -33,7 +34,8 @@ }}" on:submit="{() => { console.log('submit'); - }}"> + }}" +>
diff --git a/src/Modal/Modal.stories.js b/src/Modal/Modal.stories.js index c89b772e..e0e7f469 100644 --- a/src/Modal/Modal.stories.js +++ b/src/Modal/Modal.stories.js @@ -16,7 +16,7 @@ export const Default = () => ({ open: boolean("Open (open)", true), passiveModal: boolean("Without footer (passiveModal)", false), danger: boolean("Danger mode (danger)", false), - alert: boolean('Alert mode (alert)', false), + alert: boolean("Alert mode (alert)", false), shouldSubmitOnEnter: boolean( "Enter key to submit (shouldSubmitOnEnter)", false diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte index 0bb7cc3b..3f12276f 100644 --- a/src/Modal/Modal.svelte +++ b/src/Modal/Modal.svelte @@ -196,7 +196,8 @@ }}" on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> {#if hasScrollingContent} @@ -268,7 +275,8 @@ kind="secondary" on:click="{() => { dispatch('click:button--secondary'); - }}"> + }}" + > {secondaryButtonText} diff --git a/src/MultiSelect/MultiSelect.Story.svelte b/src/MultiSelect/MultiSelect.Story.svelte index ee179c63..6cf6e5b7 100644 --- a/src/MultiSelect/MultiSelect.Story.svelte +++ b/src/MultiSelect/MultiSelect.Story.svelte @@ -22,7 +22,8 @@ size="small" on:click="{() => { selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id]; - }}"> + }}" + > {selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items @@ -34,5 +35,6 @@ placeholder="Filter..." bind:selectedIds bind:items - bind:value /> + bind:value + /> diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index a22f7e7e..75cd3e59 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -259,12 +259,14 @@ class:bx--multi-select__wrapper--inline="{inline}" class:bx--list-box__wrapper--inline="{inline}" class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}" - {...$$restProps}> + {...$$restProps} +> {#if titleText} {/if} @@ -281,7 +283,8 @@ {filterable && 'bx--multi-select--filterable'} {invalid && 'bx--multi-select--invalid'} {inline && 'bx--multi-select--inline'} - {checked.length > 0 && 'bx--multi-select--selected'}"> + {checked.length > 0 && 'bx--multi-select--selected'}" + > {#if invalid} {/if} @@ -327,7 +330,8 @@ }}" id="{id}" disabled="{disabled}" - translateWithId="{translateWithId}"> + translateWithId="{translateWithId}" + > {#if checked.length > 0} + disabled="{disabled}" + /> {/if} {#if filterable} + value="{inputValue}" + /> {#if invalid} {/if} @@ -395,7 +401,8 @@ }}" translateWithId="{translateWithId}" disabled="{disabled}" - open="{open}" /> + open="{open}" + /> {/if} + open="{open}" + /> {/if} {#if !filterable} {label} @@ -425,7 +433,8 @@ }}" on:mouseenter="{() => { highlightedIndex = i; - }}"> + }}" + > + disabled="{disabled}" + /> {/each} @@ -443,7 +453,8 @@ {#if !inline && !invalid && helperText}
+ class:bx--form__helper-text--disabled="{disabled}" + > {helperText}
{/if} diff --git a/src/Notification/InlineNotification.svelte b/src/Notification/InlineNotification.svelte index 284c054f..d4960230 100644 --- a/src/Notification/InlineNotification.svelte +++ b/src/Notification/InlineNotification.svelte @@ -91,16 +91,19 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave + >
+ iconDescription="{iconDescription}" + /> + notificationType="{notificationType}" + >
@@ -109,7 +112,8 @@ + on:click="{close}" + /> {/if} {/if} diff --git a/src/Notification/Notification.Story.svelte b/src/Notification/Notification.Story.svelte index 25d459e4..379e017d 100644 --- a/src/Notification/Notification.Story.svelte +++ b/src/Notification/Notification.Story.svelte @@ -11,7 +11,8 @@ {...$$props} on:close="{() => { console.log('on:close'); - }}"> + }}" + >
{$$props.action}
@@ -22,5 +23,6 @@ on:close="{() => { console.log('on:close'); }}" - style="min-width: 30rem; margin-bottom: .5rem" /> + style="min-width: 30rem; margin-bottom: .5rem" + /> {/if} diff --git a/src/Notification/NotificationActionButton.svelte b/src/Notification/NotificationActionButton.svelte index 63e9452f..26cf5811 100644 --- a/src/Notification/NotificationActionButton.svelte +++ b/src/Notification/NotificationActionButton.svelte @@ -10,6 +10,7 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte index 811e25df..ce077e0c 100644 --- a/src/Notification/NotificationButton.svelte +++ b/src/Notification/NotificationButton.svelte @@ -36,10 +36,12 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> + {notificationType === 'inline' && 'bx--inline-notification__close-icon'}" + /> diff --git a/src/Notification/NotificationIcon.svelte b/src/Notification/NotificationIcon.svelte index e22fecb2..51bb88b9 100644 --- a/src/Notification/NotificationIcon.svelte +++ b/src/Notification/NotificationIcon.svelte @@ -37,4 +37,5 @@ + class="bx--{notificationType}-notification__icon" +/> diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte index b7cc9200..2eebb2a2 100644 --- a/src/Notification/ToastNotification.svelte +++ b/src/Notification/ToastNotification.svelte @@ -96,23 +96,27 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave + > + iconDescription="{iconDescription}" + /> + notificationType="{notificationType}" + > {#if !hideCloseButton} + on:click="{close}" + /> {/if} {/if} diff --git a/src/NumberInput/NumberInput.Skeleton.svelte b/src/NumberInput/NumberInput.Skeleton.svelte index 1060676a..438a9936 100644 --- a/src/NumberInput/NumberInput.Skeleton.svelte +++ b/src/NumberInput/NumberInput.Skeleton.svelte @@ -12,7 +12,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> {#if !hideLabel} {/if} diff --git a/src/NumberInput/NumberInput.Story.svelte b/src/NumberInput/NumberInput.Story.svelte index a7f6fee2..577524c3 100644 --- a/src/NumberInput/NumberInput.Story.svelte +++ b/src/NumberInput/NumberInput.Story.svelte @@ -17,5 +17,6 @@ bind:value on:change="{({ detail }) => { console.log('on:change', detail); - }}" /> + }}" + /> {/if} diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index 6454d438..49593856 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -178,7 +178,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>
+ class="{size && `bx--number--${size}`}" + > {#if mobile} {#if label} {/if} @@ -210,7 +213,8 @@ on:click="{() => { updateValue(-1); }}" - disabled="{disabled}"> + disabled="{disabled}" + > + readonly="{readonly}" + />
@@ -251,7 +257,8 @@ for="{id}" class:bx--label="{true}" class:bx--label--disabled="{disabled}" - class:bx--visually-hidden="{hideLabel}"> + class:bx--visually-hidden="{hideLabel}" + > {label} {/if} @@ -274,7 +281,8 @@ min="{min}" step="{step}" value="{value}" - readonly="{readonly}" /> + readonly="{readonly}" + /> {#if invalid} {/if} @@ -290,7 +298,8 @@ on:click="{() => { updateValue(1); }}" - disabled="{disabled}"> + disabled="{disabled}" + > @@ -313,7 +323,8 @@ {#if !error && helperText}
+ class:bx--form__helper-text--disabled="{disabled}" + > {helperText}
{/if} diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte index 95dc1bf4..8c40d1a9 100644 --- a/src/OrderedList/OrderedList.svelte +++ b/src/OrderedList/OrderedList.svelte @@ -13,6 +13,7 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> diff --git a/src/OverflowMenu/OverflowMenu.Story.svelte b/src/OverflowMenu/OverflowMenu.Story.svelte index 361a8cb2..26f070f1 100644 --- a/src/OverflowMenu/OverflowMenu.Story.svelte +++ b/src/OverflowMenu/OverflowMenu.Story.svelte @@ -13,32 +13,38 @@ {...$$props.menu} on:close="{({ detail }) => { console.log('close', detail); - }}"> + }}" + > + bind:primaryFocus + /> + requireTitle + /> + disabled + /> + text="Option 4" + /> + danger + /> {:else if story === 'trigger'} + style="width: auto" + >
Menu
+ bind:primaryFocus + /> + requireTitle + /> @@ -66,16 +75,19 @@ {...$$props.menu} on:close="{({ detail }) => { console.log('close', detail); - }}"> + }}" + > + bind:primaryFocus + /> + requireTitle + /> diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index 2549fe32..99cbeebc 100644 --- a/src/OverflowMenu/OverflowMenu.svelte +++ b/src/OverflowMenu/OverflowMenu.svelte @@ -188,13 +188,15 @@ buttonRef.focus(); } } - }}"> + }}" +> + class="bx--overflow-menu__icon {iconClass}" + /> {#if open}
    + class:menuOptionsClass + >
{/if} diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte index e5b5d001..b08ab329 100644 --- a/src/OverflowMenu/OverflowMenuItem.svelte +++ b/src/OverflowMenu/OverflowMenuItem.svelte @@ -83,7 +83,8 @@ class:bx--overflow-menu--divider="{hasDivider}" class:bx--overflow-menu-options__option--danger="{danger}" class:bx--overflow-menu-options__option--disabled="{disabled}" - {...$$restProps}> + {...$$restProps} +> {#if href} + }}" + >
{text} @@ -122,7 +124,8 @@ } else if (key === 'ArrowUp') { change(-1); } - }}"> + }}" + >
{text} diff --git a/src/Pagination/Pagination.Skeleton.svelte b/src/Pagination/Pagination.Skeleton.svelte index d6d26418..1fd08bcd 100644 --- a/src/Pagination/Pagination.Skeleton.svelte +++ b/src/Pagination/Pagination.Skeleton.svelte @@ -9,7 +9,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>
@@ -17,7 +18,8 @@
+ class:bx--pagination--inline="{true}" + >
diff --git a/src/Pagination/Pagination.Story.svelte b/src/Pagination/Pagination.Story.svelte index acbf7fb5..3f25bc9e 100644 --- a/src/Pagination/Pagination.Story.svelte +++ b/src/Pagination/Pagination.Story.svelte @@ -16,7 +16,8 @@ {...$$props} on:update="{({ detail }) => { console.log(detail); - }}"> + }}" + > Pagination {/if} diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte index 36270087..c18c949d 100644 --- a/src/Pagination/Pagination.svelte +++ b/src/Pagination/Pagination.svelte @@ -121,7 +121,8 @@ + }}" + />
diff --git a/src/Search/Search.Skeleton.svelte b/src/Search/Search.Skeleton.svelte index e8641ea8..31bffad1 100644 --- a/src/Search/Search.Skeleton.svelte +++ b/src/Search/Search.Skeleton.svelte @@ -14,7 +14,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte index 1704475c..7450d01f 100644 --- a/src/Search/Search.svelte +++ b/src/Search/Search.svelte @@ -90,13 +90,15 @@ on:click on:mouseover on:mouseenter - on:mouseleave /> + on:mouseleave + /> {:else}
+ class="bx--search--{size} {$$restProps.class}" + > @@ -114,7 +116,8 @@ on:input on:input="{({ target }) => { value = target.value; - }}" /> + }}" + />
diff --git a/src/Select/Select.Skeleton.svelte b/src/Select/Select.Skeleton.svelte index 77a0b4a9..df67e270 100644 --- a/src/Select/Select.Skeleton.svelte +++ b/src/Select/Select.Skeleton.svelte @@ -12,7 +12,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> {#if !hideLabel} {/if} diff --git a/src/Select/Select.Story.svelte b/src/Select/Select.Story.svelte index 6897832f..e9daf3a8 100644 --- a/src/Select/Select.Story.svelte +++ b/src/Select/Select.Story.svelte @@ -19,7 +19,8 @@ value="placeholder-item" text="Choose an option" disabled - hidden /> + hidden + /> diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte index 26c3d404..b6884aac 100644 --- a/src/Select/Select.svelte +++ b/src/Select/Select.svelte @@ -108,13 +108,15 @@ class:bx--select--inline="{inline}" class:bx--select--light="{light}" class:bx--select--invalid="{invalid}" - class:bx--select--disabled="{disabled}"> + class:bx--select--disabled="{disabled}" + > {#if !noLabel} {/if} @@ -122,7 +124,8 @@
+ data-invalid="{invalid || undefined}" + > @@ -152,7 +156,8 @@ {#if helperText}
+ class:bx--form__helper-text--disabled="{disabled}" + > {helperText}
{/if} @@ -160,7 +165,8 @@ {#if !inline}
+ data-invalid="{invalid || undefined}" + > @@ -184,7 +191,8 @@ {#if !invalid && helperText}
+ class:bx--form__helper-text--disabled="{disabled}" + > {helperText}
{/if} diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte index 65f90108..f3caf766 100644 --- a/src/Select/SelectItem.svelte +++ b/src/Select/SelectItem.svelte @@ -45,6 +45,7 @@ selected="{selected}" class:bx--select-option="{true}" class="{$$restProps.class}" - style="{$$restProps.style}"> + style="{$$restProps.style}" +> {text || value} diff --git a/src/Select/SelectItemGroup.svelte b/src/Select/SelectItemGroup.svelte index 4265e220..41baee13 100644 --- a/src/Select/SelectItemGroup.svelte +++ b/src/Select/SelectItemGroup.svelte @@ -16,6 +16,7 @@ label="{label}" disabled="{disabled}" class:bx--select-optgroup="{true}" - {...$$restProps}> + {...$$restProps} +> diff --git a/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte b/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte index 689360d4..5eaa1a79 100644 --- a/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte +++ b/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte @@ -4,4 +4,5 @@ on:click on:mouseover on:mouseenter - on:mouseleave>
+ on:mouseleave +>
diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte index d349049e..4237a9f2 100644 --- a/src/SkeletonText/SkeletonText.svelte +++ b/src/SkeletonText/SkeletonText.svelte @@ -49,7 +49,8 @@

+ style="width: {width}" + >

{/each}
{:else} @@ -61,5 +62,6 @@ on:click on:mouseover on:mouseenter - on:mouseleave>

+ on:mouseleave + >

{/if} diff --git a/src/Slider/Slider.Skeleton.svelte b/src/Slider/Slider.Skeleton.svelte index 5ff5c4f0..6716f311 100644 --- a/src/Slider/Slider.Skeleton.svelte +++ b/src/Slider/Slider.Skeleton.svelte @@ -12,7 +12,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> {#if !hideLabel} {/if} diff --git a/src/Slider/Slider.Story.svelte b/src/Slider/Slider.Story.svelte index 3558c23b..ecb00a0b 100644 --- a/src/Slider/Slider.Story.svelte +++ b/src/Slider/Slider.Story.svelte @@ -16,5 +16,6 @@ bind:value on:change="{({ detail }) => { console.log('on:change', detail); - }}" /> + }}" + /> {/if} diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte index b5df4678..47242b1a 100644 --- a/src/Slider/Slider.svelte +++ b/src/Slider/Slider.svelte @@ -165,11 +165,13 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>
@@ -194,7 +196,8 @@ on:mouseup="{stopHolding}" on:touchup="{stopHolding}" on:touchend="{stopHolding}" - on:touchcancel="{stopHolding}"> + on:touchcancel="{stopHolding}" + >
+ id="{id}" + >
+ style="transform: translate(0, -50%) scaleX({left / 100})" + > + step="{step}" + /> {maxLabel || max} {#if !hideTextInput} @@ -240,7 +246,8 @@ value = Number(target.value); }}" disabled="{disabled}" - value="{value}" /> + value="{value}" + /> {/if} diff --git a/src/StructuredList/StructuredList.Skeleton.svelte b/src/StructuredList/StructuredList.Skeleton.svelte index 8a36160e..0b04ccdd 100644 --- a/src/StructuredList/StructuredList.Skeleton.svelte +++ b/src/StructuredList/StructuredList.Skeleton.svelte @@ -20,11 +20,13 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>
+ class:bx--structured-list-row--header-row="{true}" + >
diff --git a/src/StructuredList/StructuredList.Story.svelte b/src/StructuredList/StructuredList.Story.svelte index 6bf3983a..a3ceacd7 100644 --- a/src/StructuredList/StructuredList.Story.svelte +++ b/src/StructuredList/StructuredList.Story.svelte @@ -44,12 +44,14 @@ id="row-{i}" value="row-{i}-value" title="row-{i}-title" - name="row-{i}-name" /> + name="row-{i}-name" + /> + title="select an option" + /> {/each} diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte index 05ae3263..7e4ab923 100644 --- a/src/StructuredList/StructuredList.svelte +++ b/src/StructuredList/StructuredList.svelte @@ -43,6 +43,7 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>
diff --git a/src/StructuredList/StructuredListBody.svelte b/src/StructuredList/StructuredListBody.svelte index ddaf09f7..ada53bc7 100644 --- a/src/StructuredList/StructuredListBody.svelte +++ b/src/StructuredList/StructuredListBody.svelte @@ -4,6 +4,7 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>
diff --git a/src/StructuredList/StructuredListCell.svelte b/src/StructuredList/StructuredListCell.svelte index 20624f10..a9020dcf 100644 --- a/src/StructuredList/StructuredListCell.svelte +++ b/src/StructuredList/StructuredListCell.svelte @@ -20,6 +20,7 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> diff --git a/src/StructuredList/StructuredListHead.svelte b/src/StructuredList/StructuredListHead.svelte index a5386a08..a68afb1d 100644 --- a/src/StructuredList/StructuredListHead.svelte +++ b/src/StructuredList/StructuredListHead.svelte @@ -4,6 +4,7 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> diff --git a/src/StructuredList/StructuredListInput.svelte b/src/StructuredList/StructuredListInput.svelte index f3ea067d..d1314b5f 100644 --- a/src/StructuredList/StructuredListInput.svelte +++ b/src/StructuredList/StructuredListInput.svelte @@ -59,4 +59,5 @@ {...$$restProps} on:change="{() => { update(value); - }}" /> + }}" +/> diff --git a/src/StructuredList/StructuredListRow.svelte b/src/StructuredList/StructuredListRow.svelte index 63e94b6e..609f58d0 100644 --- a/src/StructuredList/StructuredListRow.svelte +++ b/src/StructuredList/StructuredListRow.svelte @@ -30,7 +30,8 @@ on:mouseover on:mouseenter on:mouseleave - on:keydown> + on:keydown + > {:else} @@ -41,7 +42,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave + > {/if} diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte index 6adc25cf..b8d53cca 100644 --- a/src/Tabs/Tab.svelte +++ b/src/Tabs/Tab.svelte @@ -73,7 +73,8 @@ update(id); } } - }}"> + }}" +> + class:bx--tabs__nav-link="{true}" + > {label} diff --git a/src/Tabs/TabContent.svelte b/src/Tabs/TabContent.svelte index 89bbc54e..fcaa2dff 100644 --- a/src/Tabs/TabContent.svelte +++ b/src/Tabs/TabContent.svelte @@ -23,6 +23,7 @@ hidden="{selected ? undefined : ''}" id="{id}" class:bx--tab-content="{true}" - {...$$restProps}> + {...$$restProps} +> diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte index df257669..8e42eda6 100644 --- a/src/Tabs/Tabs.svelte +++ b/src/Tabs/Tabs.svelte @@ -111,7 +111,8 @@ role="navigation" class:bx--tabs="{true}" class:bx--tabs--container="{type === 'container'}" - {...$$restProps}> + {...$$restProps} +>
+ }}" + > + }}" + > {#if currentTab}{currentTab.label}{/if}
diff --git a/src/Tabs/TabsSkeleton.svelte b/src/Tabs/TabsSkeleton.svelte index 763660a3..b194a83a 100644 --- a/src/Tabs/TabsSkeleton.svelte +++ b/src/Tabs/TabsSkeleton.svelte @@ -13,7 +13,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>
 
diff --git a/src/Tag/Tag.Skeleton.svelte b/src/Tag/Tag.Skeleton.svelte index 8071cd53..5b8248b2 100644 --- a/src/Tag/Tag.Skeleton.svelte +++ b/src/Tag/Tag.Skeleton.svelte @@ -5,4 +5,5 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> diff --git a/src/Tag/Tag.Story.svelte b/src/Tag/Tag.Story.svelte index 16070174..85ec83c9 100644 --- a/src/Tag/Tag.Story.svelte +++ b/src/Tag/Tag.Story.svelte @@ -12,7 +12,8 @@ {...$$restProps} on:click="{() => { console.log('click'); - }}"> + }}" + > {slot} {:else if story === 'skeleton'} diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte index 7cb2bc69..eca4b4f5 100644 --- a/src/Tag/Tag.svelte +++ b/src/Tag/Tag.svelte @@ -45,7 +45,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave /> + on:mouseleave + /> {:else} {#if filter}
+ class="{type && `bx--tag--${type}`} {$$restProps.class}" + > {type} @@ -67,7 +69,8 @@ on:click|stopPropagation on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave + >
@@ -80,7 +83,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave + > {/if} diff --git a/src/TextArea/TextArea.Skeleton.svelte b/src/TextArea/TextArea.Skeleton.svelte index bc18e9a6..49da2557 100644 --- a/src/TextArea/TextArea.Skeleton.svelte +++ b/src/TextArea/TextArea.Skeleton.svelte @@ -12,7 +12,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> {#if !hideLabel} {/if} diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte index f14ab7d6..edecf626 100644 --- a/src/TextArea/TextArea.svelte +++ b/src/TextArea/TextArea.svelte @@ -93,19 +93,22 @@ on:mouseover on:mouseenter on:mouseleave - class:bx--form-item="{true}"> + class:bx--form-item="{true}" +> {#if labelText && !hideLabel} {/if}
+ data-invalid="{invalid || undefined}" + > {#if invalid} {/if} @@ -130,12 +133,14 @@ value = target.value; }}" on:focus - on:blur> + on:blur + >
{#if !invalid && helperText}
+ class:bx--form__helper-text--disabled="{disabled}" + > {helperText}
{/if} diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte index af2ef136..f0f517f3 100644 --- a/src/TextInput/PasswordInput.svelte +++ b/src/TextInput/PasswordInput.svelte @@ -122,19 +122,22 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> {#if labelText} {/if}
+ data-invalid="{invalid || undefined}" + > {#if invalid} {/if} @@ -161,7 +164,8 @@ }}" on:keydown on:focus - on:blur /> + on:blur + />
@@ -59,5 +64,6 @@ }}" on:change="{() => { console.log('change'); - }}" /> + }}" + /> {/if} diff --git a/src/TextInput/TextInput.stories.js b/src/TextInput/TextInput.stories.js index c3892a73..e5deb6a6 100644 --- a/src/TextInput/TextInput.stories.js +++ b/src/TextInput/TextInput.stories.js @@ -23,13 +23,13 @@ export const Default = () => ({ "Content of form validation UI (invalidText)", "A valid value is required" ), - warn: boolean('Show warning state (warn)', false), + warn: boolean("Show warning state (warn)", false), warnText: text( - 'Warning state text (warnText)', - 'This will overwrite your current settings' + "Warning state text (warnText)", + "This will overwrite your current settings" ), placeholder: text("Placeholder text (placeholder)", "Placeholder text."), - inline: boolean('Inline variant (inline)', false), + inline: boolean("Inline variant (inline)", false), id: text("TextInput id", "text-input-id"), name: text("TextInput name", "text-input-name"), }, diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte index 6ac0e74e..ae0625f1 100644 --- a/src/TextInput/TextInput.svelte +++ b/src/TextInput/TextInput.svelte @@ -122,7 +122,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> {#if inline}
{#if labelText} @@ -132,7 +133,8 @@ class:bx--visually-hidden="{hideLabel}" class:bx--label--disabled="{disabled}" class:bx--label--inline="{inline}" - class="{inline && !!size && `bx--label--inline--${size}`}"> + class="{inline && !!size && `bx--label--inline--${size}`}" + > {labelText} {/if} @@ -140,7 +142,8 @@
+ class:bx--form__helper-text--inline="{inline}" + > {helperText}
{/if} @@ -153,24 +156,28 @@ class:bx--visually-hidden="{hideLabel}" class:bx--label--disabled="{disabled}" class:bx--label--inline="{inline}" - class="{inline && !!size && `bx--label--inline--${size}`}"> + class="{inline && !!size && `bx--label--inline--${size}`}" + > {labelText} {/if}
+ class:bx--text-input__field-outer-wrapper--inline="{inline}" + >
+ class:bx--text-input__field-wrapper="{true}" + > {#if invalid} {/if} {#if !invalid && warn} + bx--text-input__invalid-icon--warning" + /> {/if} + on:blur + />
{#if !invalid && !warn && !inline && helperText}
+ class:bx--form__helper-text--inline="{inline}" + > {helperText}
{/if} diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte index 07713391..e5fca1e3 100644 --- a/src/Tile/ClickableTile.svelte +++ b/src/Tile/ClickableTile.svelte @@ -38,6 +38,7 @@ }}" on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte index 53df6ac2..f47c933c 100644 --- a/src/Tile/ExpandableTile.svelte +++ b/src/Tile/ExpandableTile.svelte @@ -95,7 +95,8 @@ }}" on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>
+ on:mouseleave + >
@@ -119,7 +122,8 @@ on:mouseover on:mouseenter on:mouseleave - class:bx--tile-content__below-the-fold="{true}"> + class:bx--tile-content__below-the-fold="{true}" + >
diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte index e2438b32..632cafcf 100644 --- a/src/Tile/RadioTile.svelte +++ b/src/Tile/RadioTile.svelte @@ -69,7 +69,8 @@ e.preventDefault(); update(value); } - }}" /> + }}" +/>
diff --git a/src/TimePicker/TimePicker.Story.svelte b/src/TimePicker/TimePicker.Story.svelte index 6fdb3e3f..13fefdba 100644 --- a/src/TimePicker/TimePicker.Story.svelte +++ b/src/TimePicker/TimePicker.Story.svelte @@ -13,14 +13,16 @@ + bind:value="{select1}" + > + bind:value="{select2}" + > diff --git a/src/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte index bcc33ec3..2e69aa3f 100644 --- a/src/TimePicker/TimePicker.svelte +++ b/src/TimePicker/TimePicker.svelte @@ -90,18 +90,21 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>
+ class:bx--select--light="{light}" + >
{#if labelText} {/if} @@ -126,7 +129,8 @@ value = target.value; }}" on:focus - on:blur /> + on:blur + />
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte index bb926625..7cae55ad 100644 --- a/src/TimePicker/TimePickerSelect.svelte +++ b/src/TimePicker/TimePickerSelect.svelte @@ -67,12 +67,14 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> {#if labelText} @@ -87,11 +89,13 @@ class:bx--select-input="{true}" on:change="{({ target }) => { selectedValue.set(target.value); - }}"> + }}" + > + class="bx--select__arrow" + />
diff --git a/src/Toggle/Toggle.Skeleton.svelte b/src/Toggle/Toggle.Skeleton.svelte index 0a60f2b5..a063e6ae 100644 --- a/src/Toggle/Toggle.Skeleton.svelte +++ b/src/Toggle/Toggle.Skeleton.svelte @@ -18,17 +18,20 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> + class:bx--skeleton="{true}" + />
diff --git a/src/ToggleSmall/ToggleSmall.Skeleton.svelte b/src/ToggleSmall/ToggleSmall.Skeleton.svelte index cdfa7041..d55c6a1e 100644 --- a/src/ToggleSmall/ToggleSmall.Skeleton.svelte +++ b/src/ToggleSmall/ToggleSmall.Skeleton.svelte @@ -18,18 +18,21 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> + class:bx--skeleton="{true}" + /> diff --git a/src/ToggleSmall/ToggleSmall.Story.svelte b/src/ToggleSmall/ToggleSmall.Story.svelte index b53e9456..ede22b58 100644 --- a/src/ToggleSmall/ToggleSmall.Story.svelte +++ b/src/ToggleSmall/ToggleSmall.Story.svelte @@ -13,7 +13,8 @@ {...$$props} id="toggle-small-id" name="toggle-small-name" - bind:toggled /> + bind:toggled + /> {:else if story === 'skeleton'} {:else} diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte index d4e82654..dbba1bd5 100644 --- a/src/ToggleSmall/ToggleSmall.svelte +++ b/src/ToggleSmall/ToggleSmall.svelte @@ -48,7 +48,8 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +> + on:blur + />
diff --git a/src/Tooltip/Tooltip.Story.svelte b/src/Tooltip/Tooltip.Story.svelte index 2c9b1dce..42a934e8 100644 --- a/src/Tooltip/Tooltip.Story.svelte +++ b/src/Tooltip/Tooltip.Story.svelte @@ -32,7 +32,8 @@ }}" on:close="{() => { console.log('on:close'); - }}"> + }}" + >

This is some tooltip text. This box shows the maximum amount of text @@ -49,14 +50,16 @@ style="padding: 15px 20px; margin: 4px 20px" on:click="{() => { open = false; - }}"> + }}" + > Hide

@@ -76,7 +79,8 @@ on:close="{() => { console.log('on:close'); }}" - icon="{story === 'custom icon only' ? OverflowMenuVertical16 : undefined}"> + icon="{story === 'custom icon only' ? OverflowMenuVertical16 : undefined}" + >

This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte index 763023c9..2eb7ee7a 100644 --- a/src/Tooltip/Tooltip.svelte +++ b/src/Tooltip/Tooltip.svelte @@ -198,7 +198,8 @@ on:click|preventDefault|stopPropagation="{openMenu}" on:focus="{openMenu}" on:blur="{onBlur}" - on:keydown="{onKeydown}"> + on:keydown="{onKeydown}" + > @@ -211,7 +212,8 @@ on:click|preventDefault|stopPropagation="{openMenu}" on:focus="{openMenu}" on:blur="{onBlur}" - on:keydown="{onKeydown}"> + on:keydown="{onKeydown}" + > {triggerText}

{/if} @@ -224,7 +226,8 @@ data-floating-menu-direction="{direction}" class:bx--tooltip="{true}" class:bx--tooltip--shown="{open}" - on:blur="{closeMenu}"> + on:blur="{closeMenu}" + > diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte index 99f06c60..b2486ec3 100644 --- a/src/TooltipDefinition/TooltipDefinition.svelte +++ b/src/TooltipDefinition/TooltipDefinition.svelte @@ -50,7 +50,8 @@ }}" on:mouseleave="{() => { visible = false; - }}"> + }}" +> {/if} diff --git a/src/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/UIShell/GlobalHeader/HeaderActionLink.svelte index d6a8b582..a06f38c9 100644 --- a/src/UIShell/GlobalHeader/HeaderActionLink.svelte +++ b/src/UIShell/GlobalHeader/HeaderActionLink.svelte @@ -35,6 +35,7 @@ class:bx--header__action--active="{linkIsActive}" class:action-link="{true}" {...$$restProps} - href="{href}"> + href="{href}" +> diff --git a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte index d1baa2b3..ae877fea 100644 --- a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte +++ b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte @@ -141,19 +141,22 @@ isSearchFocus = false; } } - }}" /> + }}" +/> + class:bx--side-nav__overlay-active="{isOpen}" + > {/if} diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte index 41ef7409..00e0042d 100644 --- a/src/UIShell/SideNav/SideNavLink.svelte +++ b/src/UIShell/SideNav/SideNavLink.svelte @@ -33,11 +33,13 @@ class:bx--side-nav__link="{true}" class:bx--side-nav__link--current="{isSelected}" {...$$restProps} - on:click> + on:click + > {#if icon}
+ class:bx--side-nav__icon--small="{true}" + >
{/if} diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte index dc239ca6..2591d089 100644 --- a/src/UIShell/SideNav/SideNavMenu.svelte +++ b/src/UIShell/SideNav/SideNavMenu.svelte @@ -30,7 +30,8 @@ on:click on:click="{() => { expanded = !expanded; - }}"> + }}" + > {#if icon}
@@ -40,7 +41,8 @@
+ class:bx--side-nav__submenu-chevron="{true}" + >
diff --git a/src/UIShell/SideNav/SideNavMenuItem.svelte b/src/UIShell/SideNav/SideNavMenuItem.svelte index 8f6ebcfa..b871a4f0 100644 --- a/src/UIShell/SideNav/SideNavMenuItem.svelte +++ b/src/UIShell/SideNav/SideNavMenuItem.svelte @@ -24,7 +24,8 @@ href="{href}" class:bx--side-nav__link="{true}" {...$$restProps} - on:click> + on:click + > {text} diff --git a/src/UIShell/SkipToContent.svelte b/src/UIShell/SkipToContent.svelte index 0702000c..6fc15809 100644 --- a/src/UIShell/SkipToContent.svelte +++ b/src/UIShell/SkipToContent.svelte @@ -17,6 +17,7 @@ tabindex="{tabindex}" class:bx--skip-to-content="{true}" {...$$restProps} - on:click> + on:click +> Skip to main content diff --git a/src/UIShell/UIShell.Story.svelte b/src/UIShell/UIShell.Story.svelte index f5837b03..6c0deae6 100644 --- a/src/UIShell/UIShell.Story.svelte +++ b/src/UIShell/UIShell.Story.svelte @@ -181,7 +181,8 @@ + isOpen="{true}" + > Notifications @@ -209,7 +210,8 @@ }}" on:close="{() => { console.log('on:close'); - }}"> + }}" + > Switcher subject 1 Switcher item 1 diff --git a/src/UnorderedList/UnorderedList.svelte b/src/UnorderedList/UnorderedList.svelte index 9ed9b2bc..7ab560ae 100644 --- a/src/UnorderedList/UnorderedList.svelte +++ b/src/UnorderedList/UnorderedList.svelte @@ -13,6 +13,7 @@ on:click on:mouseover on:mouseenter - on:mouseleave> + on:mouseleave +>