carbon-design-system/carbon-components-svelte v0.104.0

on GitHub

Tooltips inside modals

Components with tooltips (CodeSnippet, CopyButton, Tooltip, TooltipDefinition, TooltipIcon, PasswordInput) now automatically portal the tooltip when used inside modals to avoid clipping.

Set portalTooltip to true to opt-in, and portalTooltip to false to opt-out if used inside modals.

TooltipIcon and TooltipDefinition behavior

Similar to Tooltip, both TooltipIcon and TooltipDefinition implement a hover-trigger delay to avoid accidental triggers.

The default enterDelayMs is 100 and leaveDelayMs is 300.

<script>
  import { TooltipIcon } from "carbon-components-svelte";
  import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
</script>

<TooltipIcon
  tooltipText="Slow to appear"
  icon={Carbon}
  enterDelayMs={500}
  leaveDelayMs={500}
/>

FileUploader upgrades

FileUploader implements many quality-of-life improvements:

• orderFiles: control ordering
• preventDuplicates: automatically filter out duplicate files
• Stable file IDs: improve file IDs for performance and correctness
• Dispatch clear / change when clearing
• Dispatch rejected when a file exceeds maxFileSize
• iconDescription: better defaults and file metadata passed through for per-file labels.

See the FileUploader docs.

<FileUploader
  multiple
  orderFiles={(existing, added) => {
    return [...existing, ...added].sort(
      (a, b) => b.lastModified - a.lastModified,
    );
  }}
  labelTitle="Upload files"
  buttonLabel="Add files"
  labelDescription="Files are sorted by last modified (newest first)."
  status="edit"
  on:clear
  on:change
  on:rejected
/>

SelectableTag

New SelectableTag for selectable tag patterns (closes #2763).

See the SelectableTag docs.

<script>
  import { SelectableTag } from "carbon-components-svelte";

  let selected = false;
</script>

<SelectableTag bind:selected on:change>
  {selected ? "Selected" : "Unselected"}
</SelectableTag>

FloatingPortal layout

Lower-level positioning improvements: intrinsicWidth, intrinsicAlign, left/right placement, and gap props for fine-tuned floating UI.

See the FloatingPortal docs.

Theming and loading states

• Theme: sets color-scheme on the root element so native controls follow light/dark appropriately.
• SkeletonPlaceholder: new size / width / height props
• SkeletonIcon: new component

<script>
  import { SkeletonIcon, SkeletonPlaceholder } from "carbon-components-svelte";
</script>

<SkeletonIcon />
<SkeletonPlaceholder size="8rem" />

MultiSelect: isSelectAll item option

Any item in items can set isSelectAll: true so it behaves as a select all / clear all row: it toggles every other enabled option, shows checked or indeterminate state from the rest of the list, and is excluded from normal selection payloads.

Use it for a first-row "All …" pattern in filterable or standard multi-selects.

See the MultiSelect docs.

<script>
  import { MultiSelect } from "carbon-components-svelte";
</script>

<MultiSelect
  filterable
  labelText="Roles"
  placeholder="Filter roles..."
  items={[
    { id: "select-all", text: "All roles", isSelectAll: true },
    { id: "editor", text: "Editor" },
    { id: "owner", text: "Owner" },
    { id: "uploader", text: "Uploader" },
    { id: "reader", text: "Reader", disabled: true },
  ]}
/>

ComboBox: selectTextOnFocus

Set selectTextOnFocus to true so the entire input value is selected when the field gains focus (tab or click). Users can replace the current selection by typing immediately, without first dragging to select. This complements patterns like clearing the filter on open when you want a different behavior.

See the ComboBox docs.

<script>
  import { ComboBox } from "carbon-components-svelte";
</script>

<ComboBox
  selectTextOnFocus
  labelText="Contact"
  placeholder="Select contact method"
  selectedId="1"
  value="Email"
  items={[
    { id: "0", text: "Slack" },
    { id: "1", text: "Email" },
    { id: "2", text: "Fax" },
  ]}
/>

Forms and menus

• ContentSwitcher: selectionMode for manual vs automatic selection. #2766
• ContextMenu: calling e.preventDefault() on an item keeps the menu open; auto-indent fix when an option has an icon. #2768 · #2771

What's changed

• feat(combo-box): add selectTextOnFocus prop by @metonym in #2755
• feat(content-switcher): add selectionMode prop by @metonym in #2766
• feat(context-menu): e.preventDefault() prevents menu from closing by @metonym in #2768
• feat(file-uploader): add orderFiles prop by @metonym in #2776
• feat(file-uploader): improvements by @metonym in #2774
• feat(multi-select): support isSelectAll item option by @metonym in #2756
• feat(skeleton-icon): add SkeletonIcon component by @metonym in #2779
• feat(skeleton-placeholder): add size/width/height props by @metonym in #2778
• feat(tag): add SelectableTag by @metonym in #2769
• feat(theme): set color-scheme on root element by @metonym in #2786
• feat(tooltip): add enter/leave delay for TooltipIcon and TooltipDefinition by @metonym in #2783
• feat(tooltip): portal TooltipDefinition and TooltipIcon inside modals by @metonym in #2780
• feat(tooltip): portal tooltip inside modal context by @metonym in #2753
• feat(tooltip-definition): add clickToOpen prop by @metonym in #2767
• feat(tooltip-icon): add open prop and open/close events by @metonym in #2782
• feat: portal CodeSnippet and CopyButton tooltip inside modal context by @metonym in #2752
• fix(context-menu): auto-indent option with icon by @metonym in #2771
• fix(data-table): custom sort accounts for sort direction by @GaboUCR in #2797
• fix(inline-notification): title uses strong element for emphasis by @b-r-i-a-n-w-e-s-t in #2750
• fix(password-input): portal tooltip inside modal context by @metonym in #2751
• fix(side-nav-menu): button should not nest div elements by @b-r-i-a-n-w-e-s-t in #2796
• fix(toolbar-search): remove redundant <any> from Row generics by @metonym in #2798
• fix(tooltip-icon): only one tooltip is visible at a time by @metonym in #2777
• fix(ui-shell): header action button style fixes by @metonym in #2787

New contributors

• @GaboUCR made their first contribution in #2797

Full changelog: v0.103.0...v0.104.0