mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(prettier): add svelteBracketNewLine

Browse source
This commit is contained in:
josefaidt 2020-09-24 10:50:34 -05:00
commit 398887a3d3
182 changed files with 974 additions and 494 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc
View file

@ -1 +1 @@
{ "svelteStrictMode": true }
{ "svelteStrictMode": true, "svelteBracketNewLine": true }

3
docs/src/components/CopyableCodeSnippet.svelte
View file

@ -10,4 +10,5 @@
code="{code}"
on:click="{() => {
copy(code);
}}" />
}}"
/>

3
docs/src/components/GlobalHeader.svelte
View file

@ -17,7 +17,8 @@
platformName="Components Svelte"
href="."
rel="prefetch"
aria-current="{segment === undefined ? 'page' : undefined}">
aria-current="{segment === undefined ? 'page' : undefined}"
>
<SkipToContent />
<!-- <HeaderNav>
<HeaderNavItem

24
docs/src/components/Portfolio.svelte
View file

@ -39,7 +39,8 @@
<Carbon.Accordion
count="{3}"
skeleton="{skeleton}"
open="{accordionItemOpen}">
open="{accordionItemOpen}"
>
<Carbon.AccordionItem title="Title 1" bind:open="{accordionItemOpen}">
Content 1
</Carbon.AccordionItem>
@ -109,7 +110,8 @@
iconDescription="Primary"
tooltipPosition="bottom"
tooltipAlignment="center"
skeleton="{skeleton}" />
skeleton="{skeleton}"
/>
<Carbon.Button
icon="{Add16}"
hasIconOnly
@ -117,7 +119,8 @@
iconDescription="Secondary"
tooltipPosition="bottom"
tooltipAlignment="center"
skeleton="{skeleton}" />
skeleton="{skeleton}"
/>
<Carbon.Button
icon="{Add16}"
hasIconOnly
@ -125,7 +128,8 @@
iconDescription="Tertiary"
tooltipPosition="bottom"
tooltipAlignment="center"
skeleton="{skeleton}" />
skeleton="{skeleton}"
/>
<Carbon.Button
icon="{Add16}"
hasIconOnly
@ -133,7 +137,8 @@
iconDescription="Ghost"
tooltipPosition="bottom"
tooltipAlignment="center"
skeleton="{skeleton}" />
skeleton="{skeleton}"
/>
<Carbon.Button
icon="{Add16}"
hasIconOnly
@ -141,7 +146,8 @@
iconDescription="Danger"
tooltipPosition="bottom"
tooltipAlignment="center"
skeleton="{skeleton}" />
skeleton="{skeleton}"
/>
</TileCard>
</Carbon.Column>
</Carbon.Row>
@ -164,11 +170,13 @@
<Carbon.Checkbox
indeterminate
skeleton="{skeleton}"
labelText="Checkbox label" />
labelText="Checkbox label"
/>
<Carbon.Checkbox
indeterminate
skeleton="{skeleton}"
labelText="Checkbox label" />
labelText="Checkbox label"
/>
</fieldset>
</TileCard>
</Carbon.Column>

6
docs/src/components/TileCard.svelte
View file

@ -47,7 +47,8 @@
icon="{Code16}"
iconDescription="Usage"
tooltipAlignment="center"
tooltipPosition="top" />
tooltipPosition="top"
/>
<Button
hasIconOnly
kind="ghost"
@ -55,7 +56,8 @@
icon="{Code16}"
iconDescription="Usage"
tooltipAlignment="center"
tooltipPosition="top" />
tooltipPosition="top"
/>
</div>
</div>
</Tile>

15
docs/src/routes/_layout.svelte
View file

@ -65,21 +65,25 @@
text="Getting Started"
href="getting-started"
rel="prefetch"
isSelected="{segment === 'getting-started'}" />
isSelected="{segment === 'getting-started'}"
/>
<SideNavMenu
text="Components"
expanded="{segment === 'components'}"
isSelected="{segment === 'components' && !$tail}">
isSelected="{segment === 'components' && !$tail}"
>
<SideNavMenuItem
text="Index"
href="components"
rel="prefetch"
isSelected="{segment === 'components' && $tail && $tail.slug === 'index'}" />
isSelected="{segment === 'components' && $tail && $tail.slug === 'index'}"
/>
<SideNavMenuItem
text="Button"
href="components/button"
rel="prefetch"
isSelected="{segment === 'components' && $tail && $tail.slug === 'button'}" />
isSelected="{segment === 'components' && $tail && $tail.slug === 'button'}"
/>
</SideNavMenu>
</SideNavItems>
</SideNav>
@ -88,7 +92,8 @@
<Row>
<Column
style="display: flex; align-items: center; justify-content:
space-between;">
space-between;"
>
<Breadcrumb>
<BreadcrumbItem href="." isCurrentPage="{!$tail && !segment}">
Home

6
docs/src/routes/components/[slug].svelte
View file

@ -110,7 +110,8 @@
selected="{props[key].default}"
on:change="{({ detail }) => {
defaultProps = { ...defaultProps, [key]: detail };
}}">
}}"
>
{#each props[key].values as value}
<RadioButton value="{value}" id="{value}" labelText="{value}" />
{/each}
@ -125,6 +126,7 @@
code="{data.source}"
on:click="{() => {
copy(data.source);
}}" />
}}"
/>
</Column>
</Row>

18
docs/src/routes/examples/Button.svelte
View file

@ -11,7 +11,8 @@
on:click="{() => console.log('click')}"
on:mouseover="{() => console.log('mouseover')}"
on:mouseenter="{() => console.log('mouseenter')}"
on:mouseleave="{() => console.log('mouseleave')}">
on:mouseleave="{() => console.log('mouseleave')}"
>
Primary button
</Button>
@ -46,7 +47,8 @@
icon="{Add16}"
iconDescription="Primary"
tooltipPosition="bottom"
tooltipAlignment="center" />
tooltipAlignment="center"
/>
<Button
{...$$props}
@ -55,7 +57,8 @@
icon="{Add16}"
iconDescription="Secondary"
tooltipPosition="bottom"
tooltipAlignment="center" />
tooltipAlignment="center"
/>
<Button
{...$$props}
@ -64,7 +67,8 @@
icon="{Add16}"
iconDescription="Tertiary"
tooltipPosition="bottom"
tooltipAlignment="center" />
tooltipAlignment="center"
/>
<Button
{...$$props}
@ -73,7 +77,8 @@
icon="{Add16}"
iconDescription="Ghost"
tooltipPosition="bottom"
tooltipAlignment="center" />
tooltipAlignment="center"
/>
<Button
{...$$props}
@ -82,5 +87,6 @@
icon="{Add16}"
iconDescription="Danger"
tooltipPosition="bottom"
tooltipAlignment="center" />
tooltipAlignment="center"
/>
</div>

6
docs/src/routes/getting-started/index.svelte
View file

@ -27,11 +27,13 @@
<div slot="content" class="content">
<TabContent>
<CopyableCodeSnippet
code="{`yarn add -D carbon-components-svelte`}" />
code="{`yarn add -D carbon-components-svelte`}"
/>
</TabContent>
<TabContent>
<CopyableCodeSnippet
code="{`npm -i -D carbon-components-svelte`}" />
code="{`npm -i -D carbon-components-svelte`}"
/>
</TabContent>
</div>
</Tabs>

3
examples/rollup-typescript/src/App.svelte
View file

@ -49,7 +49,8 @@
<Select
labelText="Carbon theme"
bind:selected="{theme}"
style="margin-bottom: 1rem">
style="margin-bottom: 1rem"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />

3
examples/rollup/src/App.svelte
View file

@ -49,7 +49,8 @@
<Select
labelText="Carbon theme"
bind:selected="{theme}"
style="margin-bottom: 1rem">
style="margin-bottom: 1rem"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />

3
examples/routify/src/pages/index.svelte
View file

@ -40,7 +40,8 @@
<Select
labelText="Carbon theme"
bind:selected="{$carbon_theme}"
style="margin-bottom: 1rem">
style="margin-bottom: 1rem"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />

9
examples/sapper/src/components/Nav.svelte
View file

@ -53,12 +53,14 @@
<li>
<a
aria-current="{segment === undefined ? 'page' : undefined}"
href=".">home</a>
href="."
>home</a>
</li>
<li>
<a
aria-current="{segment === 'about' ? 'page' : undefined}"
href="about">about</a>
href="about"
>about</a>
</li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
@ -67,7 +69,8 @@
<a
rel="prefetch"
aria-current="{segment === 'blog' ? 'page' : undefined}"
href="blog">blog</a>
href="blog"
>blog</a>
</li>
</ul>
</nav>

3
examples/sapper/src/routes/index.svelte
View file

@ -41,7 +41,8 @@
<Select
labelText="Carbon theme"
bind:selected="{$carbon_theme}"
style="margin-bottom: 1rem">
style="margin-bottom: 1rem"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />

3
examples/svite/src/App.svelte
View file

@ -44,7 +44,8 @@
<Select
labelText="Carbon theme"
bind:selected="{theme}"
style="margin-bottom: 1rem">
style="margin-bottom: 1rem"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />

3
examples/webpack/src/App.svelte
View file

@ -45,7 +45,8 @@
<Select
labelText="Carbon theme"
bind:selected="{theme}"
style="margin-bottom: 1rem">
style="margin-bottom: 1rem"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />

6
src/Accordion/Accordion.Skeleton.svelte
View file

@ -22,11 +22,13 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
{#if open}
<li
class:bx--accordion__item="{true}"
class:bx--accordion__item--active="{true}">
class:bx--accordion__item--active="{true}"
>
<span class:bx--accordion__heading="{true}">
<ChevronRight16 class="bx--accordion__arrow" />
<SkeletonText class="bx--accordion__title" />

6
src/Accordion/Accordion.svelte
View file

@ -20,7 +20,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave />
on:mouseleave
/>
{:else}
<ul
class:bx--accordion="{true}"
@ -29,7 +30,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<slot />
</ul>
{/if}

9
src/Accordion/AccordionItem.svelte
View file

@ -31,7 +31,8 @@
on:animationend
on:animationend="{() => {
animation = undefined;
}}">
}}"
>
<button
type="button"
class:bx--accordion__heading="{true}"
@ -50,10 +51,12 @@
if (open && key === 'Escape') {
open = false;
}
}}">
}}"
>
<ChevronRight16
class="bx--accordion__arrow"
aria-label="{iconDescription}" />
aria-label="{iconDescription}"
/>
<div class="bx--accordion__title">
<slot name="title">{title}</slot>
</div>

3
src/Breadcrumb/Breadcrumb.Skeleton.svelte
View file

@ -20,7 +20,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
{#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
<div class:bx--breadcrumb-item="{true}">
<span class:bx--link="{true}">&nbsp;</span>

9
src/Breadcrumb/Breadcrumb.svelte
View file

@ -20,7 +20,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave />
on:mouseleave
/>
{:else}
<nav
aria-label="Breadcrumb"
@ -28,10 +29,12 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<ol
class:bx--breadcrumb="{true}"
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}">
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
>
<slot />
</ol>
</nav>

6
src/Breadcrumb/BreadcrumbItem.svelte
View file

@ -21,13 +21,15 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
{#if href}
<Link href="{href}" aria-current="{$$restProps['aria-current']}">
<slot />
</Link>
{:else}
<slot
props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}" />
props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}"
/>
{/if}
</li>

6
src/Button/Button.Skeleton.svelte
View file

@ -23,7 +23,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
{''}
</a>
{:else}
@ -35,5 +36,6 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave></div>
on:mouseleave
></div>
{/if}

15
src/Button/Button.svelte
View file

@ -129,7 +129,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave />
on:mouseleave
/>
{:else}
{#if as}
<slot props="{buttonProps}" />
@ -141,7 +142,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
{#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if}
@ -151,7 +153,8 @@
this="{icon}"
aria-hidden="true"
class="bx--btn__icon"
aria-label="{iconDescription}" />
aria-label="{iconDescription}"
/>
{/if}
</a>
{:else}
@ -161,7 +164,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
{#if hasIconOnly}
<span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if}
@ -171,7 +175,8 @@
this="{icon}"
aria-hidden="true"
class="bx--btn__icon"
aria-label="{iconDescription}" />
aria-label="{iconDescription}"
/>
{/if}
</button>
{/if}

3
src/Button/ButtonSet.svelte
View file

@ -9,6 +9,7 @@
<div
class:bx--btn-set="{true}"
class:bx--btn-set--stacked="{stacked}"
{...$$restProps}>
{...$$restProps}
>
<slot />
</div>

6
src/Checkbox/Checkbox.Skeleton.svelte
View file

@ -6,8 +6,10 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<span
class:bx--checkbox-label-text="{true}"
class:bx--skeleton="{true}"></span>
class:bx--skeleton="{true}"
></span>
</div>

3
src/Checkbox/Checkbox.Story.svelte
View file

@ -41,7 +41,8 @@
bind:checked
on:check="{({ detail }) => {
console.log('on:check', detail);
}}" />
}}"
/>
<Checkbox {...checkboxProps} id="checkbox-label-2" checked />
</fieldset>
{/if}

12
src/Checkbox/Checkbox.svelte
View file

@ -79,7 +79,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave />
on:mouseleave
/>
{:else}
<div
class:bx--form-item="{true}"
@ -88,7 +89,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<input
bind:this="{ref}"
type="checkbox"
@ -102,11 +104,13 @@
on:change
on:change="{() => {
checked = !checked;
}}" />
}}"
/>
<label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
<span
class:bx--checkbox-label-text="{true}"
class:bx--visually-hidden="{hideLabel}">
class:bx--visually-hidden="{hideLabel}"
>
{labelText}
</span>
</label>

3
src/CodeSnippet/CodeSnippet.Skeleton.svelte
View file

@ -15,7 +15,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<div class:bx--snippet-container="{true}">
{#if type === 'single'}
<span></span>

24
src/CodeSnippet/CodeSnippet.svelte
View file

@ -111,7 +111,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave />
on:mouseleave
/>
{:else}
{#if type === 'inline'}
{#if hideCopyButton}
@ -121,7 +122,8 @@
{expanded && 'bx--snippet--expand'}
{light && 'bx--snippet--light'}
{hideCopyButton && 'bx--snippet--no-copy'}"
{...$$restProps}>
{...$$restProps}
>
<code id="{id}">
<slot>{code}</slot>
</code>
@ -141,7 +143,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<code id="{id}">
<slot>{code}</slot>
</code>
@ -158,12 +161,14 @@
class="{type && `bx--snippet--${type}`} {$$restProps.class}"
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<div
role="{type === 'single' ? 'textbox' : undefined}"
tabindex="{type === 'single' ? '0' : undefined}"
class:bx--snippet-container="{true}"
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}">
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
>
<code>
<pre bind:this="{ref}">
<slot>{code}</slot>
@ -176,7 +181,8 @@
feedbackTimeout="{feedbackTimeout}"
iconDescription="{copyButtonDescription}"
on:click
on:animationend />
on:animationend
/>
{/if}
{#if showMoreLess}
<Button
@ -185,11 +191,13 @@
class="bx--snippet-btn--expand"
on:click="{() => {
expanded = !expanded;
}}">
}}"
>
<span class:bx--snippet-btn--text="{true}">{expandText}</span>
<ChevronDown16
class="bx--icon-chevron--down bx--snippet__icon"
aria-label="{expandText}" />
aria-label="{expandText}"
/>
</Button>
{/if}
</div>

15
src/ComboBox/ComboBox.Story.svelte
View file

@ -33,21 +33,23 @@
<p>
<code>items</code> must be an array of objects; mandatory fields are `id` and `text`.
</p>
<pre
style="margin-top: 1rem;">
<code>{'items = Array<{ id: string; text: string; }>'}</code>
<pre style="margin-top: 1rem;">
<code
>{'items = Array<{ id: string; text: string; }>'}</code>
</pre>
<div style="margin-top: 2rem;">
<ToggleSmall
labelText="Enable filtering"
bind:toggled
style="margin-top: 1rem;" />
style="margin-top: 1rem;"
/>
<Button
size="small"
on:click="{() => {
selectedIndex = 1;
}}"
style="margin-top: 1rem;">
style="margin-top: 1rem;"
>
Set item to "Option 2"
</Button>
</div>
@ -65,5 +67,6 @@
console.log('on:clear');
}}"
items="{items}"
shouldFilterItem="{shouldFilterItem}" />
shouldFilterItem="{shouldFilterItem}"
/>
</div>

24
src/ComboBox/ComboBox.svelte
View file

@ -183,7 +183,8 @@
<label
for="{id}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}">
class:bx--label--disabled="{disabled}"
>
{titleText}
</label>
{/if}
@ -196,7 +197,8 @@
invalidText="{invalidText}"
open="{open}"
light="{light}"
size="{size}">
size="{size}"
>
<ListBoxField
role="button"
aria-expanded="{open}"
@ -206,7 +208,8 @@
id="{id}"
name="{name}"
disabled="{disabled}"
translateWithId="{translateWithId}">
translateWithId="{translateWithId}"
>
<input
bind:this="{ref}"
tabindex="0"
@ -251,7 +254,8 @@
disabled="{disabled}"
placeholder="{placeholder}"
id="{id}"
value="{inputValue}" />
value="{inputValue}"
/>
{#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" />
{/if}
@ -265,7 +269,8 @@
}}"
translateWithId="{translateWithId}"
disabled="{disabled}"
open="{open}" />
open="{open}"
/>
{/if}
<ListBoxMenuIcon
on:click="{(e) => {
@ -273,7 +278,8 @@
open = !open;
}}"
translateWithId="{translateWithId}"
open="{open}" />
open="{open}"
/>
</ListBoxField>
{#if open}
<ListBoxMenu aria-label="{ariaLabel}" id="{id}">
@ -290,7 +296,8 @@
}}"
on:mouseenter="{() => {
highlightedIndex = i;
}}">
}}"
>
{itemToString(item)}
</ListBoxMenuItem>
{/each}
@ -300,7 +307,8 @@
{#if !invalid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}">
class:bx--form__helper-text--disabled="{disabled}"
>
{helperText}
</div>
{/if}

27
src/ComposedModal/ComposedModal.Story.svelte
View file

@ -18,11 +18,13 @@
{...$$props.composedModal}
on:click="{(e) => {
console.log(e.target);
}}">
}}"
>
<ModalHeader {...$$props.modalHeader} />
<ModalBody
{...$$props.modalBody}
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}"
>
<div>
<PasswordInput bind:type placeholder="Password Input" aria-level="" />
<Button
@ -30,7 +32,8 @@
size="field"
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}">
}}"
>
Programmatically toggle password
</Button>
</div>
@ -58,7 +61,8 @@
</ModalHeader>
<ModalBody
{...$$props.modalBody}
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}"
>
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>
@ -86,11 +90,13 @@
{...$$props.composedModal}
open
on:close="{() => {}}"
on:submit="{() => {}}">
on:submit="{() => {}}"
>
<ModalHeader
{...$$props.modalHeader}
title="Passive modal title as the message. Should be direct and 3 lines or
less." />
less."
/>
<ModalBody {...$$props.modalBody} />
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
@ -101,18 +107,21 @@
<Button
on:click="{() => {
open = true;
}}">
}}"
>
Launch composed modal
</Button>
</div>
<ComposedModal
{...$$props.composedModal}
open="{open}"
on:close="{() => (open = false)}">
on:close="{() => (open = false)}"
>
<ModalHeader {...$$props.modalHeader} />
<ModalBody
{...$$props.modalBody}
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}"
>
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>

6
src/ComposedModal/ComposedModal.svelte
View file

@ -122,14 +122,16 @@
focus(currentTarget);
didOpen = false;
}
}}">
}}"
>
<div
bind:this="{innerModal}"
class:bx--modal-container="{true}"
class="{size && `bx--modal-container--${size}`} {containerClass}"
on:click="{() => {
didClickInnerModal = true;
}}">
}}"
>
<slot />
</div>
</div>

3
src/ComposedModal/ModalBody.svelte
View file

@ -17,7 +17,8 @@
role="{hasScrollingContent ? 'region' : undefined}"
class:bx--modal-content="{true}"
class:bx--modal-content--with-form="{hasForm}"
{...$$restProps}>
{...$$restProps}
>
<slot />
</div>
{#if hasScrollingContent}

3
src/ComposedModal/ModalFooter.svelte
View file

@ -52,7 +52,8 @@
kind="{danger ? 'danger' : 'primary'}"
disabled="{primaryButtonDisabled}"
class="{primaryClass}"
on:click="{submit}">
on:click="{submit}"
>
{primaryButtonText}
</Button>
{/if}

9
src/ComposedModal/ModalHeader.svelte
View file

@ -52,7 +52,8 @@
<p
class:bx--modal-header__label="{true}"
class:bx--type-delta="{true}"
class:labelClass>
class:labelClass
>
{label}
</p>
{/if}
@ -60,7 +61,8 @@
<p
class:bx--modal-header__heading="{true}"
class:bx--type-beta="{true}"
class:titleClass>
class:titleClass
>
{title}
</p>
{/if}
@ -72,7 +74,8 @@
class:bx--modal-close="{true}"
class:closeClass
on:click
on:click="{closeModal}">
on:click="{closeModal}"
>
<Close20 class="bx--modal-close__icon {closeIconClass}" />
</button>
</div>

9
src/ContentSwitcher/ContentSwitcher.Story.svelte
View file

@ -19,7 +19,8 @@
light="{light}"
on:change="{({ detail }) => {
console.log('on:change', detail);
}}">
}}"
>
<Switch {...$$props} text="First section" />
<Switch {...$$props} text="Second section" selected />
<Switch {...$$props} text="Third section" />
@ -30,7 +31,8 @@
bind:selectedIndex
on:change="{({ detail }) => {
console.log('on:change', detail);
}}">
}}"
>
<Switch {...$$props} text="First section" />
<Switch {...$$props} text="Second section" />
<Switch {...$$props}>
@ -44,7 +46,8 @@
style="margin-top: 1.5rem"
on:click="{() => {
selectedIndex = 1;
}}">
}}"
>
Programmatically set to second index
</div>
{/if}

3
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -64,6 +64,7 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<slot />
</div>

3
src/ContentSwitcher/Switch.svelte
View file

@ -75,7 +75,8 @@
} else if (key === 'ArrowLeft') {
ctx.change(-1);
}
}}">
}}"
>
<span class:bx--content-switcher__label="{true}">
<slot>{text}</slot>
</span>

6
src/Copy/Copy.svelte
View file

@ -51,14 +51,16 @@
if (animationName === 'hide-feedback') {
animation = undefined;
}
}}">
}}"
>
<slot>
{#if animation}{feedback || $$restProps['aria-label']}{/if}
</slot>
<span
aria-hidden="true"
class:bx--assistive-text="{true}"
class:bx--copy-btn__feedback="{true}">
class:bx--copy-btn__feedback="{true}"
>
{feedback}
</span>
</button>

3
src/CopyButton/CopyButton.Story.svelte
View file

@ -9,4 +9,5 @@
}}"
on:animationend="{(e) => {
console.log('animation end', e.animationName);
}}" />
}}"
/>

3
src/CopyButton/CopyButton.svelte
View file

@ -15,6 +15,7 @@
title="{iconDescription}"
{...$$restProps}
on:click
on:animationend>
on:animationend
>
<Copy16 class="bx--snippet__icon" />
</Copy>

9
src/DataTable/DataTable.Story.svelte
View file

@ -82,7 +82,8 @@
<TableContainer
title="DataTable"
description="With default options"
{...props.getTableContainerProps()}>
{...props.getTableContainerProps()}
>
<Table {...props.getTableProps()}>
<TableHead>
<TableRow>
@ -126,7 +127,8 @@
console.log('on:click:cell', detail);
}}"
rows="{rows}"
headers="{headers}" />
headers="{headers}"
/>
{:else}
<DataTable
title="{$$props.title}"
@ -147,5 +149,6 @@
console.log('on:click:cell', detail);
}}"
rows="{rows}"
headers="{headers}" />
headers="{headers}"
/>
{/if}

12
src/DataTable/DataTable.svelte
View file

@ -121,7 +121,8 @@
zebra="{zebra}"
size="{size}"
stickyHeader="{stickyHeader}"
sortable="{sortable}">
sortable="{sortable}"
>
<TableHead>
<TableRow>
{#each headers as header, i (header.key)}
@ -137,7 +138,8 @@
key: header.key,
sortDirection,
});
}}">
}}"
>
{header.value}
</TableHeader>
{/each}
@ -149,13 +151,15 @@
on:click="{() => {
dispatch('click', { row });
dispatch('click:row', row);
}}">
}}"
>
{#each row.cells as cell, j (cell.key)}
<TableCell
on:click="{() => {
dispatch('click', { row, cell });
dispatch('click:cell', cell);
}}">
}}"
>
{cell.value}
</TableCell>
{/each}

6
src/DataTable/Table.svelte
View file

@ -47,7 +47,8 @@
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--no-border="{!shouldShowBorder}"
class:bx--data-table--sticky-header="{stickyHeader}">
class:bx--data-table--sticky-header="{stickyHeader}"
>
<slot />
</table>
</section>
@ -62,7 +63,8 @@
class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--no-border="{!shouldShowBorder}"
class:bx--data-table--sticky-header="{stickyHeader}"
{...$$restProps}>
{...$$restProps}
>
<slot />
</table>
{/if}

3
src/DataTable/TableContainer.svelte
View file

@ -21,7 +21,8 @@
<div
class:bx--data-table-container="{true}"
class:bx--data-table--max-width="{stickyHeader}"
{...$$restProps}>
{...$$restProps}
>
{#if title}
<div class:bx--data-table-header="{true}">
<h4 class:bx--data-table-header__title="{true}">{title}</h4>

12
src/DataTable/TableHeader.svelte
View file

@ -38,19 +38,22 @@
{...$$restProps}
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<button
class:bx--table-sort="{true}"
class:bx--table-sort--active="{active}"
class:bx--table-sort--ascending="{active && $sortHeader.sortDirection === 'descending'}"
on:click>
on:click
>
<span class:bx--table-header-label="{true}">
<slot />
</span>
<ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" />
<ArrowsVertical20
aria-label="{ariaLabel}"
class="bx--table-sort__icon-unsorted" />
class="bx--table-sort__icon-unsorted"
/>
</button>
</th>
{:else}
@ -61,7 +64,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<span class:bx--table-header-label="{true}">
<slot />
</span>

3
src/DataTable/TableRow.svelte
View file

@ -14,6 +14,7 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<slot />
</tr>

6
src/DataTableSkeleton/DataTableSkeleton.svelte
View file

@ -61,7 +61,8 @@
<span
class:bx--skeleton="{true}"
class:bx--btn="{true}"
class:bx--btn--sm="{true}"></span>
class:bx--btn--sm="{true}"
></span>
</div>
</section>
{/if}
@ -76,7 +77,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<thead>
<tr>
{#each cols as col, i (col)}

9
src/DatePicker/DatePicker.Skeleton.svelte
View file

@ -18,19 +18,22 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<div
class:bx--date-picker="{true}"
class:bx--skeleton="{true}"
class:bx--date-picker--range="{true}"
class:bx--date-picker--short="{!range}"
class:bx--date-picker--simple="{!range}">
class:bx--date-picker--simple="{!range}"
>
{#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
<div class:bx--date-picker-container="{true}">
<label for="{id}" class:bx--label="{true}"></label>
<div
class:bx--date-picker__input="{true}"
class:bx--skeleton="{true}"></div>
class:bx--skeleton="{true}"
></div>
</div>
{/each}
</div>

18
src/DatePicker/DatePicker.Story.svelte
View file

@ -19,7 +19,8 @@
datePickerType="single"
on:change="{({ detail }) => {
console.log('change', detail);
}}">
}}"
>
<DatePickerInput
{...$$props.datePickerInput}
on:close="{() => {
@ -27,13 +28,15 @@
}}"
on:input="{() => {
console.log('on:input');
}}" />
}}"
/>
</DatePicker>
<button
on:click|preventDefault="{() => {
value = '12/12/2020';
}}"
style="margin-top: 1rem">
style="margin-top: 1rem"
>
Set date to 12/12/2020
</button>
</div>
@ -42,11 +45,13 @@
<DatePickerInput
{...$$props.datePickerInput}
id="date-picker-input-id-start"
labelText="Start date" />
labelText="Start date"
/>
<DatePickerInput
{...$$props.datePickerInput}
id="date-picker-input-id-end"
labelText="End date" />
labelText="End date"
/>
</DatePicker>
{:else}
<DatePicker
@ -55,7 +60,8 @@
bind:value
on:change="{({ detail }) => {
console.log('on:change', detail);
}}">
}}"
>
<DatePickerInput {...$$props.datePickerInput} />
</DatePicker>
{/if}

6
src/DatePicker/DatePicker.svelte
View file

@ -191,7 +191,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<div
bind:this="{datePickerRef}"
id="{id}"
@ -199,7 +200,8 @@
class:bx--date-picker--short="{short}"
class:bx--date-picker--light="{light}"
class="{datePickerType && `bx--date-picker--${datePickerType}`}
{datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}">
{datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}"
>
<slot />
</div>
</div>

12
src/DatePicker/DatePickerInput.svelte
View file

@ -102,13 +102,15 @@
<div
class:bx--date-picker-container="{true}"
class:bx--date-picker--nolabel="{!labelText}"
{...$$restProps}>
{...$$restProps}
>
{#if labelText}
<label
for="{id}"
class:bx--label="{true}"
class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled="{disabled}">
class:bx--label--disabled="{disabled}"
>
{labelText}
</label>
{/if}
@ -141,14 +143,16 @@
on:blur
on:blur="{({ relatedTarget }) => {
blurInput(relatedTarget);
}}" />
}}"
/>
{#if $hasCalendar}
<Calendar16
role="img"
class="bx--date-picker__icon"
aria-label="{iconDescription}"
title="{iconDescription}"
on:click="{openCalendar}" />
on:click="{openCalendar}"
/>
{/if}
</div>
{#if invalid}

3
src/Dropdown/Dropdown.Skeleton.svelte
View file

@ -16,7 +16,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<div role="button" class:bx--list-box__field="{true}">
<span class:bx--list-box__label="{true}"></span>
</div>

9
src/Dropdown/Dropdown.Story.svelte
View file

@ -25,16 +25,17 @@
<code>items</code> must be an array of objects; mandatory fields are `id` and
`text`.
</p>
<pre
style="margin-top: 1rem;">
<code>{'items = Array<{ id: string; text: string; }>'}</code>
<pre style="margin-top: 1rem;">
<code
>{'items = Array<{ id: string; text: string; }>'}</code>
</pre>
<div style="margin-top: 2rem; margin-bottom: 2rem;">
<Button
size="small"
on:click="{() => {
selectedIndex = selectedIndex > -1 ? -1 : 1;
}}">
}}"
>
{selectedIndex > -1 ? 'Clear selected item' : 'Set item to "Option 2"'}
</Button>
</div>

18
src/Dropdown/Dropdown.svelte
View file

@ -157,12 +157,14 @@
class:bx--dropdown__wrapper--inline="{inline}"
class:bx--list-box__wrapper--inline="{inline}"
class:bx--dropdown__wrapper--inline--invalid="{inline && invalid}"
{...$$restProps}>
{...$$restProps}
>
{#if titleText}
<label
for="{id}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}">
class:bx--label--disabled="{disabled}"
>
{titleText}
</label>
{/if}
@ -184,7 +186,8 @@
open="{open}"
invalid="{invalid}"
invalidText="{invalidText}"
light="{light}">
light="{light}"
>
{#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" />
{/if}
@ -217,7 +220,8 @@
}}"
disabled="{disabled}"
translateWithId="{translateWithId}"
id="{id}">
id="{id}"
>
<span class="bx--list-box__label">
{#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
</span>
@ -236,7 +240,8 @@
}}"
on:mouseenter="{() => {
highlightedIndex = i;
}}">
}}"
>
{itemToString(item)}
</ListBoxMenuItem>
{/each}
@ -246,7 +251,8 @@
{#if !inline && !invalid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}">
class:bx--form__helper-text--disabled="{disabled}"
>
{helperText}
</div>
{/if}

3
src/FileUploader/FileUploader.Skeleton.svelte
View file

@ -9,7 +9,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<SkeletonText heading width="100px" />
<SkeletonText width="225px" class="bx--label-description" />
<ButtonSkeleton />

12
src/FileUploader/FileUploader.Story.svelte
View file

@ -21,7 +21,8 @@
{...$$props}
on:add="{({ detail }) => {
console.log(detail);
}}" />
}}"
/>
{:else if story === 'item'}
<FileUploaderItem
{...$$props}
@ -30,7 +31,8 @@
}}"
on:click="{() => {
console.log('click');
}}" />
}}"
/>
{:else if story === 'uploader'}
<div class="bx--file__container">
<FileUploader
@ -42,13 +44,15 @@
}}"
on:remove="{({ detail }) => {
console.log('remove', detail);
}}" />
}}"
/>
<Button
kind="secondary"
size="small"
style="margin-top: 1rem"
disabled="{disabled}"
on:click="{fileUploader.clearFiles}">
on:click="{fileUploader.clearFiles}"
>
Clear File{files.length === 1 ? '' : 's'}
</Button>
</div>

9
src/FileUploader/FileUploader.svelte
View file

@ -95,7 +95,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<strong class:bx--file--label="{true}">{labelTitle}</strong>
<p class:bx--label-description="{true}">{labelDescription}</p>
<FileUploaderButton
@ -108,7 +109,8 @@
on:change
on:change="{({ target }) => {
files = [...target.files].map(({ name }) => name);
}}" />
}}"
/>
<div class:bx--file-container="{true}">
{#each files as name, i (name)}
<span class:bx--file__selected-file="{true}">
@ -126,7 +128,8 @@
on:click
on:click="{() => {
files = files.filter((_, index) => index !== i);
}}" />
}}"
/>
</span>
</span>
{/each}

6
src/FileUploader/FileUploaderButton.svelte
View file

@ -79,7 +79,8 @@
if (key === ' ' || key === 'Enter') {
ref.click();
}
}}">
}}"
>
<span role="{role}">{labelText}</span>
</label>
<input
@ -104,4 +105,5 @@
on:click
on:click="{({ target }) => {
target.value = null;
}}" />
}}"
/>

12
src/FileUploader/FileUploaderDropContainer.svelte
View file

@ -94,7 +94,8 @@
over = false;
dispatch('add', validateFiles(dataTransfer.files));
}
}}">
}}"
>
<label
for="{id}"
tabindex="{tabindex}"
@ -105,11 +106,13 @@
if (key === ' ' || key === 'Enter') {
ref.click();
}
}}">
}}"
>
<div
role="{role}"
class:bx--file__drop-container="{true}"
class:bx--file__drop-container--drag-over="{over}">
class:bx--file__drop-container--drag-over="{over}"
>
{labelText}
<input
bind:this="{ref}"
@ -128,7 +131,8 @@
on:click
on:click="{({ target }) => {
target.value = null;
}}" />
}}"
/>
</div>
</label>
</div>

6
src/FileUploader/FileUploaderItem.svelte
View file

@ -54,7 +54,8 @@
{...$$restProps}
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<p class:bx--file-filename="{true}">{name}</p>
<span class:bx--file__state-container="{true}">
<Filename
@ -68,7 +69,8 @@
}}"
iconDescription="{iconDescription}"
status="{status}"
invalid="{invalid}" />
invalid="{invalid}"
/>
</span>
{#if invalid && errorSubject}
<div class:bx--form-requirement="{true}">

9
src/FileUploader/Filename.svelte
View file

@ -28,7 +28,8 @@
description="{iconDescription}"
{...$$restProps}
small
withOverlay="{false}" />
withOverlay="{false}"
/>
{/if}
{#if status === 'edit'}
@ -41,7 +42,8 @@
class="bx--file-close"
{...$$restProps}
on:click
on:keydown />
on:keydown
/>
{/if}
{#if status === 'complete'}
@ -49,5 +51,6 @@
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--file-complete"
{...$$restProps} />
{...$$restProps}
/>
{/if}

36
src/Form/Form.Story.svelte
View file

@ -17,7 +17,8 @@
<Form
on:submit="{(event) => {
console.log('on:submit', event);
}}">
}}"
>
<FormGroup {...$$props}>
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
@ -29,7 +30,8 @@
min="{0}"
max="{100}"
value="{50}"
step="{10}" />
step="{10}"
/>
<FormGroup legendText="Toggle heading">
<Toggle id="toggle-1" />
<Toggle id="toggle-2" disabled />
@ -38,29 +40,35 @@
<FileUploader
id="file-1"
buttonLabel="Add files"
labelDescription="Choose Files..." />
labelDescription="Choose Files..."
/>
</FormGroup>
<FormGroup legendText="Radio Button heading">
<RadioButtonGroup
name="radio-button-group"
defaultSelected="default-selected">
defaultSelected="default-selected"
>
<RadioButton
id="radio-1"
value="standard"
labelText="Standard Radio Button" />
labelText="Standard Radio Button"
/>
<RadioButton
id="radio-2"
value="default-selected"
labelText="Default Selected Radio Button" />
labelText="Default Selected Radio Button"
/>
<RadioButton
id="radio-3"
value="blue"
labelText="Standard Radio Button" />
labelText="Standard Radio Button"
/>
<RadioButton
id="radio-4"
value="disabled"
labelText="Disabled Radio Button"
disabled />
disabled
/>
</RadioButtonGroup>
</FormGroup>
<FormGroup legendText="Search">
@ -71,7 +79,8 @@
disabled
hidden
value="placeholder-item"
text="Choose an option" />
text="Choose an option"
/>
<SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-2" text="Option 2" />
<SelectItem value="option-3" text="Option 3" />
@ -79,7 +88,8 @@
<TextInput
id="text-input-1"
labelText="Text Input label"
placeholder="Placeholder text" />
placeholder="Placeholder text"
/>
<TextInput id="text-input-2" type="password" labelText="Password" required />
<TextInput
id="text-input-3"
@ -88,12 +98,14 @@
invalidText="Your password must be at least 6 characters as well as contain
at least one uppercase, one lowercase, and one number."
required
invalid />
invalid
/>
<TextArea
id="text-area"
labelText="Text Area label"
placeholder="Placeholder text"
rows="{4}"
cols="{50}" />
cols="{50}"
/>
<Button type="submit">Submit</Button>
</Form>

3
src/Form/Form.svelte
View file

@ -5,6 +5,7 @@
on:mouseover
on:mouseenter
on:mouseleave
on:submit|preventDefault>
on:submit|preventDefault
>
<slot />
</form>

3
src/FormGroup/FormGroup.svelte
View file

@ -31,7 +31,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<legend class:bx--label="{true}">{legendText}</legend>
<slot />
{#if message}

3
src/FormItem/FormItem.svelte
View file

@ -4,6 +4,7 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<slot />
</div>

3
src/FormLabel/FormLabel.svelte
View file

@ -13,6 +13,7 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<slot />
</label>

3
src/Icon/Icon.Skeleton.svelte
View file

@ -13,4 +13,5 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave></div>
on:mouseleave
></div>

6
src/Icon/Icon.svelte
View file

@ -25,7 +25,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave />
on:mouseleave
/>
{:else}
<svelte:component
this="{render}"
@ -33,5 +34,6 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave />
on:mouseleave
/>
{/if}

3
src/InlineLoading/InlineLoading.Story.svelte
View file

@ -43,7 +43,8 @@
style="margin-left: 1rem;"
description="{loadingDescription}"
status="{success ? 'finished' : 'active'}"
aria-live="{ariaLive}" />
aria-live="{ariaLive}"
/>
{:else}
<Button on:click="{handleSubmit}">Submit</Button>
{/if}

6
src/InlineLoading/InlineLoading.svelte
View file

@ -53,7 +53,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<div class:bx--inline-loading__animation="{true}">
{#if status === 'error'}
<Error20 class="bx--inline-loading--error" />
@ -64,7 +65,8 @@
small
description="{iconDescription}"
withOverlay="{false}"
active="{status === 'active'}" />
active="{status === 'active'}"
/>
{/if}
</div>
{#if description}

2
src/Link/Link.stories.js
View file

@ -9,6 +9,6 @@ export const Default = () => ({
href: text("The link href (href)", "#"),
inline: boolean("Use the in-line variant (inline)", false),
disabled: boolean("Disabled (disabled)", false),
visited: boolean('Allow visited styles', false),
visited: boolean("Allow visited styles", false),
},
});

6
src/Link/Link.svelte
View file

@ -35,7 +35,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<slot />
</p>
{:else}
@ -51,7 +52,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<slot />
</a>
{/if}

3
src/ListBox/ListBox.svelte
View file

@ -59,7 +59,8 @@
e.stopPropagation();
}
}}"
on:click|preventDefault|stopPropagation>
on:click|preventDefault|stopPropagation
>
<slot />
</div>
{#if invalid}

3
src/ListBox/ListBoxField.svelte
View file

@ -78,6 +78,7 @@
on:mouseenter
on:mouseleave
on:keydown|preventDefault|stopPropagation
on:blur>
on:blur
>
<slot />
</div>

3
src/ListBox/ListBoxMenu.svelte
View file

@ -10,6 +10,7 @@
role="listbox"
id="menu-{id}"
class:bx--list-box__menu="{true}"
{...$$restProps}>
{...$$restProps}
>
<slot />
</div>

3
src/ListBox/ListBoxMenuIcon.svelte
View file

@ -36,6 +36,7 @@
class:bx--list-box__menu-icon="{true}"
class:bx--list-box__menu-icon--open="{open}"
{...$$restProps}
on:click|preventDefault>
on:click|preventDefault
>
<ChevronDown16 aria-label="{description}" title="{description}" />
</div>

3
src/ListBox/ListBoxMenuItem.svelte
View file

@ -19,7 +19,8 @@
{...$$restProps}
on:click
on:mouseenter
on:mouseleave>
on:mouseleave
>
<div class:bx--list-box__menu-item__option="{true}">
<slot />
</div>

3
src/ListBox/ListBoxSelection.svelte
View file

@ -75,7 +75,8 @@
if (!disabled && e.key === 'Enter') {
dispatch('clear', e);
}
}}">
}}"
>
{#if selectionCount}{selectionCount}{/if}
<Close16 />
</div>

3
src/ListItem/ListItem.svelte
View file

@ -4,6 +4,7 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<slot />
</li>

21
src/Loading/Loading.svelte
View file

@ -36,14 +36,16 @@
<div
class:bx--loading-overlay="{true}"
class:bx--loading-overlay--stop="{!active}"
{...$$restProps}>
{...$$restProps}
>
<div
aria-atomic="true"
aria-labelledby="{id}"
aria-live="{active ? 'assertive' : 'off'}"
class:bx--loading="{true}"
class:bx--loading--small="{small}"
class:bx--loading--stop="{!active}">
class:bx--loading--stop="{!active}"
>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
<svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
@ -53,13 +55,15 @@
class:bx--loading__background="{true}"
cx="0"
cy="0"
r="{spinnerRadius}"></circle>
r="{spinnerRadius}"
></circle>
{/if}
<circle
class:bx--loading__stroke="{true}"
cx="0"
cy="0"
r="{spinnerRadius}"></circle>
r="{spinnerRadius}"
></circle>
</svg>
</div>
</div>
@ -71,7 +75,8 @@
class:bx--loading="{true}"
class:bx--loading--small="{small}"
class:bx--loading--stop="{!active}"
{...$$restProps}>
{...$$restProps}
>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
<svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
@ -81,13 +86,15 @@
class:bx--loading__background="{true}"
cx="0"
cy="0"
r="{spinnerRadius}"></circle>
r="{spinnerRadius}"
></circle>
{/if}
<circle
class:bx--loading__stroke="{true}"
cx="0"
cy="0"
r="{spinnerRadius}"></circle>
r="{spinnerRadius}"
></circle>
</svg>
</div>
{/if}

9
src/Modal/Modal.Story.svelte
View file

@ -11,7 +11,8 @@
<Button
on:click="{() => {
open = true;
}}">
}}"
>
Launch modal
</Button>
</div>
@ -33,7 +34,8 @@
}}"
on:submit="{() => {
console.log('submit');
}}">
}}"
>
<div>
<PasswordInput bind:type placeholder="Password Input" aria-level="" />
<Button
@ -41,7 +43,8 @@
size="field"
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}">
}}"
>
Programmatically toggle password
</Button>
</div>

2
src/Modal/Modal.stories.js
View file

@ -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

27
src/Modal/Modal.svelte
View file

@ -196,7 +196,8 @@
}}"
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<div
bind:this="{innerModal}"
role="dialog"
@ -207,7 +208,8 @@
class="{size && `bx--modal-container--${size}`}"
on:click="{() => {
didClickInnerModal = true;
}}">
}}"
>
<div class:bx--modal-header="{true}">
{#if passiveModal}
<button
@ -218,10 +220,12 @@
class="bx--modal-close"
on:click="{() => {
open = false;
}}">
}}"
>
<Close20
aria-label="{iconDescription}"
class="bx--modal-close__icon" />
class="bx--modal-close__icon"
/>
</button>
{/if}
{#if modalLabel}
@ -241,10 +245,12 @@
class:bx--modal-close="{true}"
on:click="{() => {
open = false;
}}">
}}"
>
<Close20
aria-label="{iconDescription}"
class="bx--modal-close__icon" />
class="bx--modal-close__icon"
/>
</button>
{/if}
</div>
@ -256,7 +262,8 @@
tabindex="{hasScrollingContent ? '0' : undefined}"
role="{hasScrollingContent ? 'region' : undefined}"
aria-label="{hasScrollingContent ? ariaLabel : undefined}"
aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}">
aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}"
>
<slot />
</div>
{#if hasScrollingContent}
@ -268,7 +275,8 @@
kind="secondary"
on:click="{() => {
dispatch('click:button--secondary');
}}">
}}"
>
{secondaryButtonText}
</Button>
<Button
@ -276,7 +284,8 @@
disabled="{primaryButtonDisabled}"
on:click="{() => {
dispatch('submit');
}}">
}}"
>
{primaryButtonText}
</Button>
</div>

6
src/MultiSelect/MultiSelect.Story.svelte
View file

@ -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
</Button>
</div>
@ -34,5 +35,6 @@
placeholder="Filter..."
bind:selectedIds
bind:items
bind:value />
bind:value
/>
</div>

33
src/MultiSelect/MultiSelect.svelte
View file

@ -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}
<label
for="{id}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}">
class:bx--label--disabled="{disabled}"
>
{titleText}
</label>
{/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}
<WarningFilled16 class="bx--list-box__invalid-icon" />
{/if}
@ -327,7 +330,8 @@
}}"
id="{id}"
disabled="{disabled}"
translateWithId="{translateWithId}">
translateWithId="{translateWithId}"
>
{#if checked.length > 0}
<ListBoxSelection
selectionCount="{checked.length}"
@ -339,7 +343,8 @@
fieldRef.blur();
}}"
translateWithId="{translateWithId}"
disabled="{disabled}" />
disabled="{disabled}"
/>
{/if}
{#if filterable}
<input
@ -383,7 +388,8 @@
placeholder="{placeholder}"
id="{id}"
name="{name}"
value="{inputValue}" />
value="{inputValue}"
/>
{#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" />
{/if}
@ -395,7 +401,8 @@
}}"
translateWithId="{translateWithId}"
disabled="{disabled}"
open="{open}" />
open="{open}"
/>
{/if}
<ListBoxMenuIcon
on:click="{(e) => {
@ -403,7 +410,8 @@
open = !open;
}}"
translateWithId="{translateWithId}"
open="{open}" />
open="{open}"
/>
{/if}
{#if !filterable}
<span class="bx--list-box__label">{label}</span>
@ -425,7 +433,8 @@
}}"
on:mouseenter="{() => {
highlightedIndex = i;
}}">
}}"
>
<Checkbox
readonly
tabindex="-1"
@ -434,7 +443,8 @@
name="{itemToString(item)}"
labelText="{itemToString(item)}"
checked="{item.checked}"
disabled="{disabled}" />
disabled="{disabled}"
/>
</ListBoxMenuItem>
{/each}
</ListBoxMenu>
@ -443,7 +453,8 @@
{#if !inline && !invalid && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}">
class:bx--form__helper-text--disabled="{disabled}"
>
{helperText}
</div>
{/if}

12
src/Notification/InlineNotification.svelte
View file

@ -91,16 +91,19 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<div class:bx--inline-notification__details="{true}">
<NotificationIcon
notificationType="{notificationType}"
kind="{kind}"
iconDescription="{iconDescription}" />
iconDescription="{iconDescription}"
/>
<NotificationTextDetails
title="{title}"
subtitle="{subtitle}"
notificationType="{notificationType}">
notificationType="{notificationType}"
>
<slot />
</NotificationTextDetails>
</div>
@ -109,7 +112,8 @@
<NotificationButton
iconDescription="{iconDescription}"
notificationType="{notificationType}"
on:click="{close}" />
on:click="{close}"
/>
{/if}
</div>
{/if}

6
src/Notification/Notification.Story.svelte
View file

@ -11,7 +11,8 @@
{...$$props}
on:close="{() => {
console.log('on:close');
}}">
}}"
>
<div slot="actions">
<NotificationActionButton>{$$props.action}</NotificationActionButton>
</div>
@ -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}

3
src/Notification/NotificationActionButton.svelte
View file

@ -10,6 +10,7 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<slot />
</Button>

6
src/Notification/NotificationButton.svelte
View file

@ -36,10 +36,12 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<svelte:component
this="{renderIcon}"
title="{title}"
class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
{notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
{notificationType === 'inline' && 'bx--inline-notification__close-icon'}"
/>
</button>

3
src/Notification/NotificationIcon.svelte
View file

@ -37,4 +37,5 @@
<svelte:component
this="{icons[kind]}"
title="{iconDescription}"
class="bx--{notificationType}-notification__icon" />
class="bx--{notificationType}-notification__icon"
/>

12
src/Notification/ToastNotification.svelte
View file

@ -96,23 +96,27 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<NotificationIcon
notificationType="{notificationType}"
kind="{kind}"
iconDescription="{iconDescription}" />
iconDescription="{iconDescription}"
/>
<NotificationTextDetails
title="{title}"
subtitle="{subtitle}"
caption="{caption}"
notificationType="{notificationType}">
notificationType="{notificationType}"
>
<slot />
</NotificationTextDetails>
{#if !hideCloseButton}
<NotificationButton
iconDescription="{iconDescription}"
notificationType="{notificationType}"
on:click="{close}" />
on:click="{close}"
/>
{/if}
</div>
{/if}

3
src/NumberInput/NumberInput.Skeleton.svelte
View file

@ -12,7 +12,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
{#if !hideLabel}
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
{/if}

3
src/NumberInput/NumberInput.Story.svelte
View file

@ -17,5 +17,6 @@
bind:value
on:change="{({ detail }) => {
console.log('on:change', detail);
}}" />
}}"
/>
{/if}

33
src/NumberInput/NumberInput.svelte
View file

@ -178,7 +178,8 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<div
data-invalid="{error || undefined}"
class:bx--number="{true}"
@ -187,14 +188,16 @@
class:bx--number--light="{light}"
class:bx--number--nolabel="{hideLabel}"
class:bx--number--mobile="{mobile}"
class="{size && `bx--number--${size}`}">
class="{size && `bx--number--${size}`}"
>
{#if mobile}
{#if label}
<label
for="{id}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}">
class:bx--visually-hidden="{hideLabel}"
>
<slot name="label">{label}</slot>
</label>
{/if}
@ -210,7 +213,8 @@
on:click="{() => {
updateValue(-1);
}}"
disabled="{disabled}">
disabled="{disabled}"
>
<CaretDownGlyph class="down-icon" />
</button>
<input
@ -229,7 +233,8 @@
min="{min}"
step="{step}"
value="{value}"
readonly="{readonly}" />
readonly="{readonly}"
/>
<button
type="button"
aria-live="polite"
@ -241,7 +246,8 @@
on:click="{() => {
updateValue(1);
}}"
disabled="{disabled}">
disabled="{disabled}"
>
<CaretUpGlyph class="up-icon" />
</button>
</div>
@ -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}"
>
<slot name="label">{label}</slot>
</label>
{/if}
@ -274,7 +281,8 @@
min="{min}"
step="{step}"
value="{value}"
readonly="{readonly}" />
readonly="{readonly}"
/>
{#if invalid}
<WarningFilled16 class="bx--number__invalid" />
{/if}
@ -290,7 +298,8 @@
on:click="{() => {
updateValue(1);
}}"
disabled="{disabled}">
disabled="{disabled}"
>
<CaretUpGlyph class="up-icon" />
</button>
<button
@ -304,7 +313,8 @@
on:click="{() => {
updateValue(-1);
}}"
disabled="{disabled}">
disabled="{disabled}"
>
<CaretDownGlyph class="down-icon" />
</button>
</div>
@ -313,7 +323,8 @@
{#if !error && helperText}
<div
class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled="{disabled}">
class:bx--form__helper-text--disabled="{disabled}"
>
{helperText}
</div>
{/if}

3
src/OrderedList/OrderedList.svelte
View file

@ -13,6 +13,7 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave>
on:mouseleave
>
<slot />
</ol>

36
src/OverflowMenu/OverflowMenu.Story.svelte
View file

@ -13,32 +13,38 @@
{...$$props.menu}
on:close="{({ detail }) => {
console.log('close', detail);
}}">
}}"
>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 1"
bind:primaryFocus />
bind:primaryFocus
/>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle />
requireTitle
/>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 3"
disabled />
disabled
/>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 4" />
text="Option 4"
/>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Danger option"
danger />
danger
/>
</OverflowMenu>
{:else if story === 'trigger'}
<OverflowMenu
@ -46,17 +52,20 @@
on:close="{({ detail }) => {
console.log('close', detail);
}}"
style="width: auto">
style="width: auto"
>
<div slot="menu" style="padding: 0 1rem">Menu</div>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 1"
bind:primaryFocus />
bind:primaryFocus
/>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle />
requireTitle
/>
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
@ -66,16 +75,19 @@
{...$$props.menu}
on:close="{({ detail }) => {
console.log('close', detail);
}}">
}}"
>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 1"
bind:primaryFocus />
bind:primaryFocus
/>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle />
requireTitle
/>
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />

9
src/OverflowMenu/OverflowMenu.svelte
View file

@ -188,13 +188,15 @@
buttonRef.focus();
}
}
}}">
}}"
>
<slot name="menu">
<svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu__icon {iconClass}" />
class="bx--overflow-menu__icon {iconClass}"
/>
</slot>
{#if open}
<ul
@ -207,7 +209,8 @@
class:bx--overflow-menu--flip="{flipped}"
class:bx--overflow-menu-options--open="{open}"
class:bx--overflow-menu-options--light="{light}"
class:menuOptionsClass>
class:menuOptionsClass
>
<slot />
</ul>
{/if}

Some files were not shown because too many files have changed in this diff Show more