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

feat!: initial pre-release - Carbon v11 styles (#1881)

Browse source 
**carbon-components-svelte has unstable styles and interactions during this pre-release phase. See #1872 for details.**

Breaking changes

- Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.

Components

- Button has new prop values for size and kind
- Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
- Tabs has a contained prop instead of type, and a new mobile appearance (scrolling tabs)
- ContentSwitcher size prop no longer supports size="xl"; md is the new default
- MultiSelect no longer supports xl size
- OverflowMenu no longer supports xl size
- Search no longer supports xl size
- TreeView no longer supports compact size
- UIShell has a new light theme

CSS

- Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
- Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
- Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
- The g80 theme no longer exists

General

- Codebase uses npm instead of yarn

--- Commit notes

* chore: depend on @carbon/styles instead of carbon-components

See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop

* chore: use v11 styles for docs

* chore: stick to `bx` instead of `cds` class prefix

* chore: migrate layout spacing to v11

See [@carbon/layout](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#carbonlayout) migration guide:

    $layout-01 	Removed, use $spacing-05 instead
    $layout-02 	Removed, use $spacing-06 instead
    $layout-03 	Removed, use $spacing-07 instead
    $layout-04 	Removed, use $spacing-09 instead
    $layout-05 	Removed, use $spacing-10 instead
    $layout-06 	Removed, use $spacing-12 instead
    $layout-07 	Removed, use $spacing-13 instead

* chore: migrate type tokens to v11

See https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens

* chore: keep flex-grid instead of css grid for the moment

Upgrading to css-grid should be separate.

* chore: v11 Tabs

In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.

* chore: use @ibm/plex fonts

* chore: v11 Button

* dependency: @carbon/styles update

* chore: v11 ComboBox

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 ContentSwitcher

For better compatibility with existing code bases size `xl` is still supported.

* chore: remove legacy v10 css files

Note that further work is needed here in order to make theming work again.
Also documentation needs updating.

* chore: v11 DatePicker

For better compatibility with existing codebases size xl is still supported.

* chore: v11 Dropdown

For better compatibility with existing codebases size xl is still supported.

* chore: v11 ExpandableTile

Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.

* chore: v11 FileUploader

For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.

* chore: v11 Toggle

This removes legacy `ToggleSkeleton`.

* chore: v11 MultiSelect

Size `xl` changed to `lg`.

* chore: v11 NumberInput

For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 OverflowMenu

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 PasswordInput

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 Search

* chore: v11 Select

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 AspectRatio

The `bx--aspect-ratio--object` class is gone and needs to be replaced manually.

* chore: v11 TextArea

`cols` no longer has a defaults to 50 but remains at 100% width by default.

* chore: v11 TextInput

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 TimePicker

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* chore: v11 TreeView

Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.

* chore: remove Truncate since it does not exist in Carbon v11

* chore: v11 UIShell

* chore: v11 Accordion

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.

* tmp: v11 PopoverContent

* Revert "chore: remove Truncate since it does not exist in Carbon v11"

This reverts commit 5833536199.

* chore: use truncate mixins

* docs: add truncate mixins

* chore: use `cds` class prefix in v11 styles

* build: switch to npm

* chore: set up all component styles, fonts, and themes

- Adapt documentation to new styles

* chore: add individual theme css

* feat: migrate Theme component to v11

- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places

* chore: use bx css prefixes for now

* chore: resolve peerDependencies

- Leaving out latest prettier for now
- Ignoring Sveld warnings for now

* chore: fix type errors and tests

---------

Co-authored-by: Gregor Wassmann <gregor.wassmann@gmail.com>
This commit is contained in:
Enrico Sacchetti 2024-01-12 11:33:59 -05:00
commit c0d037dfca
188 changed files with 7815 additions and 5523 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Accordion/Accordion.svelte
View file

@ -9,7 +9,7 @@
/**
* Specify the size of the accordion
* @type {"sm" | "xl"}
* @type {"sm" | "lg"}
*/
export let size = undefined;
@ -48,7 +48,7 @@
class:bx--accordion--start="{align === 'start'}"
class:bx--accordion--end="{align === 'end'}"
class:bx--accordion--sm="{size === 'sm'}"
class:bx--accordion--xl="{size === 'xl'}"
class:bx--accordion--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps}
on:click
on:mouseover

4
src/AspectRatio/AspectRatio.svelte
View file

@ -19,7 +19,5 @@
class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
{...$$restProps}
>
<div class:bx--aspect-ratio--object="{true}">
<slot />
</div>
<slot />
</div>

13
src/Button/Button.svelte
View file

@ -7,15 +7,15 @@
/**
* Specify the kind of button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"}
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--tertiary" | "danger--ghost"}
*/
export let kind = "primary";
/**
* Specify the size of button
* @type {"default" | "field" | "small" | "lg" | "xl"}
* @type {"sm" | "md" | "lg" | "xl" | "2xl"}
*/
export let size = "default";
export let size = "lg";
/** Set to `true` to use Carbon's expressive typesetting */
export let expressive = false;
@ -101,12 +101,11 @@
(size === "sm" && !expressive) ||
(size === "small" && !expressive)) &&
"bx--btn--sm",
(size === "field" && !expressive) ||
(size === "md" && !expressive && "bx--btn--md"),
size === "field" && "bx--btn--field",
((size === "field" && !expressive) || (size === "md" && !expressive)) &&
"bx--btn--md",
size === "small" && "bx--btn--sm",
size === "lg" && "bx--btn--lg",
size === "xl" && "bx--btn--xl",
size === "2xl" && "bx--btn--2xl",
kind && `bx--btn--${kind}`,
disabled && "bx--btn--disabled",
hasIconOnly && "bx--btn--icon-only",

2
src/ComboBox/ComboBox.svelte
View file

@ -35,7 +35,7 @@
/**
* Set the size of the combobox
* @type {"sm" | "xl"}
* @type {"sm" | "lg" }
*/
export let size = undefined;

4
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -8,7 +8,7 @@
/**
* Specify the size of the content switcher
* @type {"sm" | "xl"}
* @type {"sm" | "lg" }
*/
export let size = undefined;
@ -63,7 +63,7 @@
role="tablist"
class:bx--content-switcher="{true}"
class:bx--content-switcher--sm="{size === 'sm'}"
class:bx--content-switcher--xl="{size === 'xl'}"
class:bx--content-switcher--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps}
on:click
on:mouseover

4
src/DatePicker/DatePickerInput.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Set the size of the input
* @type {"sm" | "xl"}
* @type {"sm" | "lg"}
*/
export let size = undefined;
@ -117,7 +117,7 @@
class:bx--date-picker__input="{true}"
class:bx--date-picker__input--invalid="{invalid}"
class:bx--date-picker__input--sm="{size === 'sm'}"
class:bx--date-picker__input--xl="{size === 'xl'}"
class:bx--date-picker__input--lg="{size === 'lg' || size === 'xl'}"
on:input
on:input="{({ target }) => {
updateValue({ type: 'input', value: target.value });

12
src/Dropdown/Dropdown.svelte
View file

@ -39,7 +39,7 @@
/**
* Specify the size of the dropdown field
* @type {"sm" | "lg" | "xl"}
* @type {"sm" | "lg" }
*/
export let size = undefined;
@ -197,13 +197,13 @@
size="{size}"
name="{name}"
aria-label="{$$props['aria-label']}"
class="bx--dropdown
{direction === 'top' && 'bx--list-box--up'}
{invalid && 'bx--dropdown--invalid'}
{!invalid && warn && 'bx--dropdown--warning'}
class="bx--dropdown
{direction === 'top' && 'bx--list-box--up'}
{invalid && 'bx--dropdown--invalid'}
{!invalid && warn && 'bx--dropdown--warning'}
{open && 'bx--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'}
{(size === 'lg' || size === 'xl') && 'bx--dropdown--lg'}
{inline && 'bx--dropdown--inline'}
{disabled && 'bx--dropdown--disabled'}
{light && 'bx--dropdown--light'}"

8
src/FileUploader/FileUploaderItem.svelte
View file

@ -11,9 +11,9 @@
/**
* Specify the size of button skeleton
* @type {"default" | "field" | "small"}
* @type {"sm" | "md" | "lg"}
*/
export let size = "default";
export let size = "lg";
/** Specify the ARIA label used for the status icons */
export let iconDescription = "";
@ -45,8 +45,8 @@
id="{id}"
class:bx--file__selected-file="{true}"
class:bx--file__selected-file--invalid="{invalid}"
class:bx--file__selected-file--md="{size === 'field'}"
class:bx--file__selected-file--sm="{size === 'small'}"
class:bx--file__selected-file--md="{size === 'md' || size === 'field'}"
class:bx--file__selected-file--sm="{size === 'sm' || size === 'small'}"
{...$$restProps}
on:mouseover
on:mouseenter

4
src/ListBox/ListBox.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Set the size of the list box
* @type {"sm" | "xl"}
* @type {"sm" | "lg" }
*/
export let size = undefined;
@ -39,7 +39,7 @@
data-invalid="{invalid || undefined}"
class:bx--list-box="{true}"
class:bx--list-box--sm="{size === 'sm'}"
class:bx--list-box--xl="{size === 'xl'}"
class:bx--list-box--lg="{size === 'lg' || size === 'xl'}"
class:bx--list-box--inline="{type === 'inline'}"
class:bx--list-box--disabled="{disabled}"
class:bx--list-box--expanded="{open}"

2
src/MultiSelect/MultiSelect.svelte
View file

@ -38,7 +38,7 @@
/**
* Set the size of the combobox
* @type {"sm" | "lg" | "xl"}
* @type {"sm" | "lg"}
*/
export let size = undefined;

8
src/NumberInput/NumberInput.svelte
View file

@ -7,7 +7,7 @@
/**
* Set the size of the input
* @type {"sm" | "xl"}
* @type {"sm" | "lg"}
*/
export let size = undefined;
@ -171,7 +171,7 @@
class:bx--number--nolabel="{hideLabel}"
class:bx--number--nosteppers="{hideSteppers}"
class:bx--number--sm="{size === 'sm'}"
class:bx--number--xl="{size === 'xl'}"
class:bx--number--lg="{size === 'lg' || size === 'xl'}"
>
{#if $$slots.label || label}
<label
@ -212,9 +212,7 @@
on:blur
on:paste
/>
{#if readonly}
<EditOff class="bx--text-input__readonly-icon" />
{:else}
{#if !readonly}
{#if invalid}
<WarningFilled class="bx--number__invalid" />
{/if}

6
src/OverflowMenu/OverflowMenu.svelte
View file

@ -5,7 +5,7 @@
/**
* Specify the size of the overflow menu
* @type {"sm" | "xl"}
* @type {"sm" | "lg"}
*/
export let size = undefined;
@ -199,7 +199,7 @@
class:bx--overflow-menu--open="{open}"
class:bx--overflow-menu--light="{light}"
class:bx--overflow-menu--sm="{size === 'sm'}"
class:bx--overflow-menu--xl="{size === 'xl'}"
class:bx--overflow-menu--lg="{size === 'lg'}"
{...$$restProps}
on:click
on:click="{({ target }) => {
@ -254,7 +254,7 @@
class:bx--overflow-menu-options--open="{open}"
class:bx--overflow-menu-options--light="{light}"
class:bx--overflow-menu-options--sm="{size === 'sm'}"
class:bx--overflow-menu-options--xl="{size === 'xl'}"
class:bx--overflow-menu-options--lg="{size === 'lg'}"
class:bx--breadcrumb-menu-options="{!!ctxBreadcrumbItem}"
class="{menuOptionsClass}"
>

6
src/Popover/Popover.svelte
View file

@ -46,7 +46,7 @@
<div
bind:this="{ref}"
class:bx--popover="{true}"
class:bx--popover-container="{true}"
class:bx--popover--caret="{caret}"
class:bx--popover--light="{light}"
class:bx--popover--high-contrast="{highContrast}"
@ -67,7 +67,5 @@
style:position="{relative ? "relative" : undefined}"
{...$$restProps}
>
<div class:bx--popover-contents="{true}">
<slot />
</div>
<slot />
</div>

10
src/Popover/PopoverContent.svelte Normal file
View file

@ -0,0 +1,10 @@
<script>
export let className = null;
</script>
<span class:bx--popover="{true}" {...$$restProps}>
<span class:bx--popover-content="{true}" class="{className}">
<slot />
</span>
<span class:bx--popover-caret="{true}"></span>
</span>

1
src/Popover/index.js
View file

@ -1 +1,2 @@
export { default as Popover } from "./Popover.svelte";
export { default as PopoverContent } from "./PopoverContent.svelte";

8
src/Search/Search.svelte
View file

@ -13,9 +13,9 @@
/**
* Specify the size of the search input
* @type {"sm" | "lg" | "xl"}
* @type {"sm" | "md" | "lg"}
*/
export let size = "xl";
export let size = "md";
/** Specify the class name passed to the outer div element */
export let searchClass = "";
@ -96,8 +96,8 @@
class:bx--search--light="{light}"
class:bx--search--disabled="{disabled}"
class:bx--search--sm="{size === 'sm'}"
class:bx--search--md="{size === 'md'}"
class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}"
class:bx--search--expandable="{expandable}"
class:bx--search--expanded="{expanded}"
class="{searchClass}"
@ -166,7 +166,7 @@
dispatch('clear');
}}"
>
<svelte:component this="{Close}" size="{size === 'xl' ? 20 : 16}" />
<Close />
</button>
</div>
{/if}

6
src/Search/SearchSkeleton.svelte
View file

@ -1,9 +1,9 @@
<script>
/**
* Specify the size of the search input
* @type {"sm" | "lg" | "xl"}
* @type {"sm" | "md" | "lg"}
*/
export let size = "xl";
export let size = "md";
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -11,8 +11,8 @@
<div
class:bx--skeleton="{true}"
class:bx--search--sm="{size === 'sm'}"
class:bx--search--md="{size === 'md'}"
class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}"
{...$$restProps}
on:click
on:mouseover

6
src/Select/Select.svelte
View file

@ -11,7 +11,7 @@
/**
* Set the size of the select input
* @type {"sm" | "xl"}
* @type {"sm" | "lg"}
*/
export let size = undefined;
@ -161,7 +161,7 @@
name="{name}"
class:bx--select-input="{true}"
class:bx--select-input--sm="{size === 'sm'}"
class:bx--select-input--xl="{size === 'xl'}"
class:bx--select-input--lg="{size === 'lg' || size === 'xl'}"
on:change="{handleChange}"
on:change
on:input
@ -205,7 +205,7 @@
aria-invalid="{invalid || undefined}"
class:bx--select-input="{true}"
class:bx--select-input--sm="{size === 'sm'}"
class:bx--select-input--xl="{size === 'xl'}"
class:bx--select-input--lg="{size === 'lg' || size === 'xl'}"
on:change="{handleChange}"
on:change
on:input

29
src/Tabs/Tab.svelte
View file

@ -30,12 +30,19 @@
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<li
tabindex="-1"
role="presentation"
<a
bind:this="{ref}"
tabindex="{disabled ? '-1' : tabindex}"
role="tab"
class:bx--tabs__nav-item="{true}"
class:bx--tabs__nav-link="{true}"
class:bx--tabs__nav-item--disabled="{disabled}"
class:bx--tabs__nav-item--selected="{selected}"
aria-selected="{selected}"
aria-disabled="{disabled}"
id="{id}"
href="{href}"
style="{$useAutoWidth ? 'width: auto' : undefined}"
{...$$restProps}
on:click|preventDefault
on:click|preventDefault="{() => {
@ -58,17 +65,5 @@
}
}}"
>
<a
bind:this="{ref}"
role="tab"
tabindex="{disabled ? '-1' : tabindex}"
aria-selected="{selected}"
aria-disabled="{disabled}"
id="{id}"
href="{href}"
class:bx--tabs__nav-link="{true}"
style:width="{$useAutoWidth ? "auto" : undefined}"
>
<slot>{label}</slot>
</a>
</li>
<slot>{label}</slot>
</a>

53
src/Tabs/Tabs.svelte
View file

@ -3,26 +3,15 @@
export let selected = 0;
/**
* Specify the type of tabs
* @type {"default" | "container"}
* Set to `true` for tabs to be contained
*/
export let type = "default";
export let contained = false;
/** Set to `true` for tabs to have an auto-width */
export let autoWidth = false;
/**
* Specify the ARIA label for the chevron icon
* @type {string}
*/
export let iconDescription = "Show menu options";
/** Specify the tab trigger href attribute */
export let triggerHref = "#";
import { createEventDispatcher, afterUpdate, setContext, tick } from "svelte";
import { writable, derived } from "svelte/store";
import ChevronDown from "../icons/ChevronDown.svelte";
const dispatch = createEventDispatcher();
@ -122,43 +111,11 @@
<div
role="navigation"
class:bx--tabs="{true}"
class:bx--tabs--container="{type === 'container'}"
class:bx--tabs--contained="{contained}"
{...$$restProps}
>
<div
role="listbox"
tabindex="0"
class:bx--tabs-trigger="{true}"
aria-label="{$$props['aria-label'] || 'listbox'}"
on:click="{() => {
dropdownHidden = !dropdownHidden;
}}"
on:keypress
on:keypress="{() => {
dropdownHidden = !dropdownHidden;
}}"
>
<a
tabindex="-1"
class:bx--tabs-trigger-text="{true}"
href="{triggerHref}"
on:click|preventDefault
on:click|preventDefault|stopPropagation="{() => {
dropdownHidden = !dropdownHidden;
}}"
>
{#if currentTab}{currentTab.label}{/if}
</a>
<ChevronDown aria-hidden="true" title="{iconDescription}" />
</div>
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
<ul
bind:this="{refTabList}"
role="tablist"
class:bx--tabs__nav="{true}"
class:bx--tabs__nav--hidden="{dropdownHidden}"
>
<div bind:this="{refTabList}" role="tablist" class:bx--tab--list="{true}">
<slot />
</ul>
</div>
</div>
<slot name="content" />

15
src/Tabs/TabsSkeleton.svelte
View file

@ -14,21 +14,18 @@
<div
class:bx--tabs="{true}"
class:bx--skeleton="{true}"
class:bx--tabs--scrollable="{true}"
class:bx--tabs--scrollable--container="{type === 'container'}"
class:bx--tabs--contained="{type === 'container'}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<ul class:bx--tabs--scrollable__nav="{true}">
<div class:bx--tab--list="{true}">
{#each Array.from({ length: count }, (_, i) => i) as item}
<li class:bx--tabs--scrollable__nav-item="{true}">
<div class:bx--tabs__nav-link="{true}">
<span></span>
</div>
</li>
<span class:bx--tabs__nav-item="{true}" class:bx--tabs__nav-link="{true}">
<span></span>
</span>
{/each}
</ul>
</div>
</div>

8
src/TextArea/TextArea.svelte
View file

@ -5,8 +5,11 @@
/** Specify the placeholder text */
export let placeholder = "";
/** Specify the number of cols */
export let cols = 50;
/**
* Specify the number of cols
* @type {number}
* */
export let cols = undefined;
/** Specify the number of rows */
export let rows = 4;
@ -110,6 +113,7 @@
class:bx--text-area--light="{light}"
class:bx--text-area--invalid="{invalid}"
maxlength="{maxCount ?? undefined}"
style="{cols ? '' : 'width: 100%;'}"
{...$$restProps}
on:change
on:input

8
src/TextInput/PasswordInput.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Set the size of the input
* @type {"sm" | "xl"}
* @type {"sm" | "lg"}
*/
export let size = undefined;
@ -116,7 +116,7 @@
class:bx--label--disabled="{disabled}"
class:bx--label--inline="{inline}"
class:bx--label--inline--sm="{inline && size === 'sm'}"
class:bx--label--inline--xl="{inline && size === 'xl'}"
class:bx--label--inline--lg="{inline && (size === 'lg' || size === 'xl')}"
>
<slot name="labelText">
{labelText}
@ -141,7 +141,7 @@
class:bx--label--disabled="{disabled}"
class:bx--label--inline="{inline}"
class:bx--label--inline--sm="{inline && size === 'sm'}"
class:bx--label--inline--xl="{inline && size === 'xl'}"
class:bx--label--inline--lg="{inline && (size === 'lg' || size === 'xl')}"
>
<slot name="labelText">
{labelText}
@ -189,7 +189,7 @@
class:bx--text-input--invalid="{invalid}"
class:bx--text-input--warning="{warn}"
class:bx--text-input--sm="{size === 'sm'}"
class:bx--text-input--xl="{size === 'xl'}"
class:bx--text-input--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps}
on:change
on:input

10
src/TextInput/TextInput.svelte
View file

@ -6,7 +6,7 @@
/**
* Set the size of the input
* @type {"sm" | "xl"}
* @type {"sm" | "lg"}
*/
export let size = undefined;
@ -125,7 +125,7 @@
class:bx--label--disabled="{disabled}"
class:bx--label--inline="{inline}"
class:bx--label--inline--sm="{size === 'sm'}"
class:bx--label--inline--xl="{size === 'xl'}"
class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}"
>
<slot name="labelText">
{labelText}
@ -168,9 +168,7 @@
class:bx--text-input__field-wrapper="{true}"
class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
>
{#if readonly}
<EditOff class="bx--text-input__readonly-icon" />
{:else}
{#if !readonly}
{#if invalid}
<WarningFilled class="bx--text-input__invalid-icon" />
{/if}
@ -205,7 +203,7 @@
class:bx--text-input--invalid="{error}"
class:bx--text-input--warning="{warn}"
class:bx--text-input--sm="{size === 'sm'}"
class:bx--text-input--xl="{size === 'xl'}"
class:bx--text-input--lg="{size === 'lg' || size === 'xl'}"
{...$$restProps}
on:change="{onChange}"
on:input="{onInput}"

7
src/Theme/Theme.svelte
View file

@ -5,7 +5,7 @@
*/
/**
* @typedef {"white" | "g10" | "g80" | "g90" | "g100"} CarbonTheme
* @typedef {"white" | "g10" | "g90" | "g100"} CarbonTheme
* @event {{ theme: CarbonTheme; }} update
* @slot {{ theme: CarbonTheme; }}
*/
@ -51,7 +51,6 @@
const themes = {
white: "White",
g10: "Gray 10",
g80: "Gray 80",
g90: "Gray 90",
g100: "Gray 100",
};
@ -79,11 +78,11 @@
$: if (typeof window !== "undefined") {
Object.entries(tokens).forEach(([token, value]) => {
document.documentElement.style.setProperty(`--cds-${token}`, value);
document.documentElement.style.setProperty(`--bx-${token}`, value);
});
if (theme in themes) {
document.documentElement.setAttribute("theme", theme);
document.documentElement.setAttribute("data-carbon-theme", theme);
dispatch("update", { theme });
} else {
console.warn(

4
src/TimePicker/TimePicker.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Specify the size of the input
* @type {"sm" | "xl"}
* @type {"sm" | "lg"}
*/
export let size = undefined;
@ -66,7 +66,7 @@
class:bx--time-picker--light="{light}"
class:bx--time-picker--invalid="{invalid}"
class:bx--time-picker--sm="{size === 'sm'}"
class:bx--time-picker--xl="{size === 'xl'}"
class:bx--time-picker--lg="{size === 'lg' || size === 'xl'}"
class:bx--select--light="{light}"
>
<div class:bx--time-picker__input="{true}">

56
src/Toggle/Toggle.svelte
View file

@ -5,9 +5,9 @@
/**
* Specify the toggle size
* @type {"default" | "sm"}
* @type {"md" | "sm"}
*/
export let size = "default";
export let size = "md";
/** Set to `true` to toggle the checkbox input */
export let toggled = false;
@ -41,6 +41,8 @@
const dispatch = createEventDispatcher();
$: dispatch("toggle", { toggled });
$: sideLabel = toggled ? labelB : labelA;
$: isSm = size === "sm";
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -48,6 +50,8 @@
<div
class:bx--form-item="{true}"
style:user-select="none"
class:bx--toggle="{true}"
class:bx--toggle--disabled="{disabled}"
{...$$restProps}
on:click
on:mouseover
@ -58,8 +62,7 @@
<input
role="switch"
type="checkbox"
class:bx--toggle-input="{true}"
class:bx--toggle-input--small="{size === 'sm'}"
class:bx--toggle__button="{true}"
checked="{toggled}"
on:change="{() => {
toggled = !toggled;
@ -81,27 +84,40 @@
<label
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
for="{id}"
class:bx--toggle-input__label="{true}"
class:bx--toggle__label="{true}"
>
<span class:bx--visually-hidden="{hideLabel}">
<span
class:bx--toggle__label-text="{true}"
class:bx--visually-hidden="{hideLabel}"
>
<slot name="labelText">
{labelText}
</slot>
</span>
<span
class:bx--toggle__switch="{true}"
style:margin-top="{hideLabel ? 0 : undefined}"
<div
class:bx--toggle__appearance="{true}"
class:bx--toggle__appearance--sm="{isSm}"
style="{hideLabel && 'margin-top: 0'}"
>
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
<slot name="labelA">
{labelA}
</slot>
</span>
<span aria-hidden="true" class:bx--toggle__text--on="{true}">
<slot name="labelB">
{labelB}
</slot>
</span>
</span>
<div
aria-hidden="true"
class:bx--toggle__switch="{true}"
class:bx--toggle__switch--checked="{toggled}"
>
{#if isSm}
<svg
class:bx--toggle__check="{true}"
width="6px"
height="5px"
viewBox="0 0 6 5"
>
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
</svg>
{/if}
</div>
<span class:bx--toggle__text="{true}" aria-hidden="{true}"
>{sideLabel}</span
>
</div>
</label>
</div>

1
src/Toggle/index.js
View file

@ -1,2 +1 @@
export { default as Toggle } from "./Toggle.svelte";
export { default as ToggleSkeleton } from "./ToggleSkeleton.svelte";

8
src/TreeView/TreeView.svelte
View file

@ -63,9 +63,9 @@
/**
* Specify the TreeView size
* @type {"default" | "compact"}
* @type {"xs" | "sm"}
*/
export let size = "default";
export let size = "sm";
/** Specify the label text */
export let labelText = "";
@ -253,8 +253,8 @@
role="tree"
bind:this="{ref}"
class:bx--tree="{true}"
class:bx--tree--default="{size === 'default'}"
class:bx--tree--compact="{size === 'compact'}"
class:bx--tree--xs="{size === 'xs'}"
class:bx--tree--sm="{size === 'sm'}"
aria-label="{hideLabel ? labelText : undefined}"
aria-labelledby="{!hideLabel ? labelId : undefined}"
aria-multiselectable="{selectedIds.length > 1 || undefined}"

4
src/Truncate/Truncate.svelte
View file

@ -4,8 +4,8 @@
</script>
<p
class:bx--text-truncate--end="{clamp === 'end'}"
class:bx--text-truncate--front="{clamp === 'front'}"
class:bx--text-truncate-end="{clamp === 'end'}"
class:bx--text-truncate-front="{clamp === 'front'}"
{...$$restProps}
>
<slot />

2
src/Truncate/truncate.js
View file

@ -7,7 +7,7 @@
* <h1 use:truncate={{ clamp: "front" }}>...</h1>
*/
export function truncate(node, options = {}) {
const prefix = "bx--text-truncate--";
const prefix = "bx--text-truncate-";
function toggleClass(front = false) {
const classes = [...node.classList]

1
src/UIShell/HeaderAction.svelte
View file

@ -70,6 +70,7 @@
type="button"
class:bx--header__action="{true}"
class:bx--header__action--active="{isOpen}"
class:bx--btn--icon-only="{!text}"
class:action-text="{text}"
{...$$restProps}
on:click

7
src/UIShell/HeaderActionLink.svelte
View file

@ -22,6 +22,7 @@
bind:this="{ref}"
class:bx--header__action="{true}"
class:bx--header__action--active="{linkIsActive}"
class:bx--btn--icon-only="{true}"
href="{href}"
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
{...$$restProps}
@ -34,10 +35,6 @@
<style>
.bx--header__action {
display: flex;
align-items: center;
justify-content: center;
/** Hot fix to align icon with `HeaderAction` */
padding-bottom: 2px;
color: var(--bx-text-primary);
}
</style>

1
src/UIShell/HeaderGlobalAction.svelte
View file

@ -17,6 +17,7 @@
bind:this="{ref}"
class:bx--header__action="{true}"
class:bx--header__action--active="{isActive}"
class:bx--btn--icon-only="{true}"
{...$$restProps}
on:click
>

4
src/index.js
View file

@ -84,7 +84,7 @@ export { OrderedList } from "./OrderedList";
export { OverflowMenu, OverflowMenuItem } from "./OverflowMenu";
export { Pagination, PaginationSkeleton } from "./Pagination";
export { PaginationNav } from "./PaginationNav";
export { Popover } from "./Popover";
export { Popover, PopoverContent } from "./Popover";
export { ProgressBar } from "./ProgressBar";
export {
ProgressIndicator,
@ -122,7 +122,7 @@ export {
TileGroup,
} from "./Tile";
export { TimePicker, TimePickerSelect } from "./TimePicker";
export { Toggle, ToggleSkeleton } from "./Toggle";
export { Toggle } from "./Toggle";
export { Tooltip, TooltipFooter } from "./Tooltip";
export { TooltipDefinition } from "./TooltipDefinition";
export { TooltipIcon } from "./TooltipIcon";