v0.15.0

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)

v0.14.0

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

v0.13.0

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

v0.12.3

Fixes

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

v0.12.2

Fixes

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

v0.12.1

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)

v0.12.0

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

v0.11.0

Features

• UI Shell: add HeaderGlobalAction component (7b3c111)

v0.10.0

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)

v0.9.7

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