Features

• DataTable: add Toolbar, ToolbarContent, ToolbarSearch, ToolbarBatchActions
• DataTable: support row selection, batch selection, radio selection
• DataTable: dispatch "mouseenter", "mouseleave" events on table rows
• Search: forward "focus", "blur" events to search input; dispatch "clear" event

Fixes

• DataTable: include sort direction with custom sort method (PR #356)
• fix: allow item ids in ComboBox, Dropdown, MultiSelect to be numbers
• fix(ui-shell): initialize platformName as empty string to prevent rendering as "undefined"

Refactoring

• refactor(ui-shell): remove redundant conditional in HeaderGlobalAction

Documentation

• new DataTable examples:
  • With custom display and sort methods
  • With toolbar
  • With toolbar (small size)
  • Selectable
  • Initial selected rows
  • Selectable with batch actions
  • Selectable (radio)
• fix(docgen): list both default and named slots in COMPONENT_INDEX.md

Contributors

• @albertms10

Features

• DataTable: add optional display and sort methods in header object (PR #352)
• ProgressIndicator: add preventChangeOnClick; default value is false (PR #351)
• TooltipDefinition: make tooltip text slottable through slot="tooltip"

Fixes

• ProgressIndicator: make currentIndex reactive (PR #351)
• ComposedModal: use onDestroy for destroy logic due to async usage of onMount(PR #348)
• Search: forward size prop to Search skeleton

Refactoring

• TooltipDefinition: remove redundant hidden reactive variable

Breaking Changes

• ProgressIndicator: clicking a completed step will update currentIndex; to opt out of this default behavior, set preventChangeOnClick to true

Documentation

• ContentSwitcher: add "Selected index" example
• CodeSnippet: add multi-line skeleton example
• InlineLoading: add UX example showcasing various statuses

Contributors

• @weaseldotro
• @albertms10

Features

• DataTable: support individual, batch row expansion (PR #341, documentation)
• DataTable: make header, row cells slottable (PR #342, documentation)

Fixes

• fix(data-table): fix misaligned tall row table headers (PR #340, documentation)
• Documentation generator: parse ArrayExpression in exported props (PR #341)

Documentation

• add Component API metadata (PR #340)
• DataTable: add expandable, batch expandable examples (PR #341)
• DataTable: add slottable cells example (PR #342)

Breaking Changes

• Remove top-level slot in DataTable in favor of named slots (PR #341)

New Components

• AspectRatio: utility component for constraining fluid content within an aspect ratio. Supported aspect ratios include "2x1", "16x9", "4x3", "1x1", "3x4", "9x16", "1x2".

Features

• set rel="nooopener noreferrer" if target="_blank" for anchor links (PR #321)
• Search: support Search disabled state (PR #330)
• ButtonSkeleton: add size prop consistent with Button (PR #332)
• ProgressIndicatorSkeleton: add count prop (PR #332)
• Accordion: add disabled prop for Accordion and AccordionItem (PR #333)
• Accordion: add "sm", "xl" size variants to Accordion and AccordionSkeleton (PR #333)
• ContentSwitcher: add "sm", "xl" size variants (PR #334)
• CodeSnippet: add wrapText prop for "multi" type CodeSnippet (PR #335)
• AspectRatio: add AspectRatio component (PR #336)
• Dropdown: dispatch "select" event, use window instead of body for click events (PR #339)

Fixes

• ComboBox: disabled combobox should not open (PR #329)
• InlineLoading: add wrapper class "bx--inline-loading" (PR #332)
• Breadcrumb: forward noTrailingSlash to skeleton (PR #332)
• SkeletonText: unkey paragraph rows due to high collision rate (PR #332)
• AccordionSkeleton: forward align prop (PR #333)

Refactoring

• Icon: remove old logic that inferred icon size from function name (PR #332)

Documentation

• AspectRatio (new component): demo all ratios
• Breadcrumb: use noTrailingSlash in skeleton example
• Button: demo skeleton size variants
• CodeSnippet: add example "Wrap text"
• ComboBox: add examples "Light variant," "Filterable"
• ContentSwitcher: add examples "Extra-large size" and "Small size"
• SkeletonText: add example "Paragraph with custom line count"
• Pagination: add example "Hidden page size"
• ProgressIndicator: demo custom step count for skeleton
• Link: add example Target _blank
• MultiSelect: add example "No alphabetical sorting"
• Accordion: add examples for "Extra-large" and "Small" size variants
• Accordion: add examples for "Disabled" and "Disabled (item)"
• AccordionSkeleton: add examples "Skeleton (chevron aligned left)" and size variants

Housekeeping

• chore(deps-dev): bump carbon-components to ^v10.22 (PR #337)
• retire Storybook by removing Storybook-related dependencies, set-up and stories (PR #331)
• use npm-run-all to run build:css and build:lib in parallel (PR #331)

Contributors

• @weaseldotro
• @josefaidt

Features

• Pagination: add pageSizeInputDisabled prop to hide page size buttons (default is false) (PR #292)
• ListBoxMenu: add ref prop (PR #303)
• Pre-compiled CSS: upgrade carbon-components to version 10.21

Fixes

• Link: explicitly define href prop to fix TypeScript errors (PR #301)
• RadioButtonGroup: explicitly define id prop to fix TypeScript errors (PR #303)
• ComboBox: light prop should use the light variant (PR #303)
• ComposedModal: class "bx--body--with-modal-open" should be removed when closing the modal (PR #306)
• Dropdown: remove unused setContext import (PR #308)
• css/all.css: default theme should be "white," not "g10" (PR #322)
• UI Shell: HeaderAction menu should close when clicking in the window, not just the document body (PR #323)

Performance

• DatePicker: remove default i10n locales import to reduce bundle size by ~42 kB (PR #316)

Breaking Changes

• DatePicker: default i10n locales are no longer imported
• if using css/all.css, set the "theme" attribute on the HTML element to "g10" in order to use the Gray 10 theme

Documentation

• Redesign component documentation website (Short link: ibm.biz/carbon-svelte); deployments sponsored by Vercel
• Update development workflow in CONTRIBUTING.md
• Typo fixes in README.md (PR #324, PR #325)

Housekeeping

• Git hooks: only lint staged files in the pre-commit Git hook (PR #319)

Contributors

• @weaseldotro
• @josefaidt
• @albertms10
• @orta
• @mzaini30

Features

• DataTableSkeleton: add size prop to support "compact", "small", "tall" row heights (PR #279, thanks @albertms10)

• HeaderPanelLink: forward click event (PR #286, thanks @weaseldotro)

• FluidForm: add FluidForm component and support fluid variants for TextInput, PasswordInput (PR #293, thanks @josefaidt)

• UI Shell: add ref prop to interactive (i.e. anchor links, buttons) UI Shell elements (PR #297, thanks @josefaidt)

Fixes

Slider:

• attach mousemove/touch events to document body, not slider input (issue #288)
• value prop type should be a number, not a string (issue #289)
• input value should not update if disabled is true
• change event should only be dispatched if the value changes

UI Shell: correctly bind ref prop in HeaderGlobalAction (PR #297, thanks @josefaidt)

Misc: export DatePickerSkeleton, FileUploaderSkeleton components

Breaking Changes

• DataTableSkeleton: compact prop is removed in favor of size="compact"

Dependencies

• upgrade carbon-icons-svelte to version ^10.17.0

Housekeeping

• prettier: enable svelteBracketNewLine rule for improved readability (PR #281, thanks @josefaidt)

• git hooks: add husky, lint-staged to development workflow (PR #295, thanks @josefaidt)

Features

• Modal, ComposedModal: add preventCloseOnClickOutside prop
• Modal: add alert prop to support alertdialog ARIA role (PR #273, thanks @josefaidt)
• TextInput: add warn prop (PR #275, thanks @josefaidt)
• TextInput: add inline prop (PR #277, thanks @josefaidt)

Fixes

• DataTableSkeleton: add showHeader, showToolbar props
• OverflowMenu: focus menu button on escape key only
• DataTable: fix headers JSDoc type annotation (PR #271, thanks @albertms10)

Breaking Changes

• DataTableSkeleton: showHeader and showToolbar are true by default

Thanks @josefaidt for ensuring components are up to spec!

Features

• Move helper text below form inputs in ComboBox, Dropdown, MultiSelect, TextArea, NumberInput, TextInput, Select (PR #256, issue #255)

• ProgressIndicator: add spaceEqual prop and functionality (PR #263, issue #262)

Fixes

• Link: remove visited styles by default (PR #259, issue #258)

• TimePickerSelect: deprecate hideLabel prop to match spec and set default value to true (PR #261, issue #260)

Breaking Changes

• TimePickerSelect: hideLabel prop is true by default

Fixes

• ClickableTile: add missing href (PR #254, issue #253, thanks @josefaidt)

Fixes

• Dropdown: allow event propagation when clicking the chevron icon (73861e2) [PR #252, issue #251]

Fixes

• Pagination: ensure page, pageSize values are numbers (0138910)
• Pagination: dispatch "update" event only when pageSize or page values update (458d1b5)
• Pagination: use correct size carbon icons for buttons (size 16 instead of 24) (192f98d)
• ProgressStep: use button element; set negative tabindex if disabled is true (3202f39)
• ProgressStep: forward click event (6cb877e)
• SideNavMenu, SideNavMenuItem: remove "role", "aria-haspopup" attributes causing a11y warnings
• RadioTile: move keydown, tabindex to input element (17d97d1)

Features

• ship precompiled CSS StyleSheets for each Carbon theme, available in the css folder (70e0875)

  • css/white.css: Default Carbon theme (light)
  • css/g10.css: Gray 10 theme (light)
  • css/g90.css: Gray 90 theme (dark)
  • css/g100.css: Gray 100 theme (dark)
  • css/all.css: All themes (White, Gray 10, Gray 90, Gray 100) using CSS variables

Using precompiled CSS

1. svelte-preprocess

The easiest way to import a StyleSheet is with svelte-preprocess.

const svelteOptions = {
  preprocess: require("svelte-preprocess")(),
};

<!-- App.svelte -->
<style global>
  /** Gray 10 theme **/
  @import "carbon-components-svelte/css/g10";
</style>

2. JavaScript import

Importing a CSS file in a JavaScript file will require the appropriate file loader(s).

import "carbon-components-svelte/css/all.css";
import App from "./App.svelte";

const app = new App({ target: document.body });

export default app;

See webpack.config.js in examples/webpack.

Documentation

• add example set-ups using popular bundlers/frameworks

  • examples/rollup: SPA bundled using Rollup
  • examples/rollup-typescript: SPA bundled using Rollup with TypeScript support
  • examples/routify: SPA + static export using Routify
  • examples/sapper: SSR + static export using Sapper
  • examples/svite: SPA developed with Svite, bundled with Rollup
  • examples/webpack: SPA bundled with webpack

• revamp README guidance on consuming the library

Features

• UI Shell: add HeaderGlobalAction component (7b3c111)

Features

• UI Shell: add Close/AppSwitcher as default icons for HeaderAction component (5f62cde)
• ButtonSet: add stacked prop (c8e0a59)
• Link: set rel attribute to "noopener noreferrer" if target is "_blank" (4b7d254)

Fixes

• TextInput: add missing required prop to input (PR #237, thanks @kamil-murtaza)
• StructuredList: change element semantics from section to div to avoid accessibility error (117dbcf)
• MultiSelect: add light variant to text input (6a955b1)
• NumberInput: disable label, helper text if disabled is set to true (37c7f07)
• Pagination: use singular page range text if total is 1 (3d64fb2)

Housekeeping

• add .prettierrc and enable svelteStrictMode (42b8159)
• remove documentation of non-existent small Button prop (41a533d)
• upgrade TypeScript to version >=4 (e7e67f3)
• bump prettier, prettier-plugin-svelte (322b238)
• bump rollup, rollup plugins (00b9068)
• require node >=12 for development/CI (bf0f11a)

This patch release addresses the InlineNotification and ToastNotification components in PR#235 (thanks @Overbryd!).

Enhancements

• Allow InlineNotification to be closed after a timeout (consistent behavior with ToastNotification)

Bug fixes

• Dispatch "close" event in ToastNotification if closing using timeout (e.g. timeout={2000})

Documentation

• Fix JSDoc comment for timeout prop

Documentation

As part of the Rollup build process, we leverage the Svelte compiler to parse exported components to generate TypeScript definitions and static documentation (PR #228). Previously, some components were incorrectly typed (issue #227).

• TypeScript definitions: types/index.d.ts
• Static documentation in markdown format: Component Index (props/slots/events)

Bug fixes

• fix broken DatePicker: reverts 6d5f1e5 to use default imports (issue #232)

• fix Modal and ComposedModal to prevent modal from closing unexpectedly (Issue #229 , PR #231)

• ignore false positive a11y-label-has-associated-control warnings added in svelte version 3.24.1 (Issue https://github.com/IBM/carbon-components-svelte/issues/226)
• fix DatePicker: use wildcard import to resolve flatpickr "no default" error when using ESM
• allow CodeSnippet button to be optional by using the hideCopyButton prop
• refactor CodeSnippet: replace afterUpdate with reactive statement
• fix CodeSnippet: forward feedback, feedbackTimeout props to Copy component