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

v0.9.6

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)

v0.9.5

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