v0.27.0

Features

• Ship scss files used to pre-compile CSS
• Add optimizeCarbonImports preprocessor to rewrite base Carbon imports to the source Svelte file
• Support warning state in Dropdown, MultiSelect, NumberInput
• Set default values for Button tooltipAlignment ("center") and tooltipPosition ("bottom") in Button
• Infer icon-only Button variant using $$slots API
• Support disabled state for CodeSnippet (single or multi type only)
• Add optional expand/collapse icon labels to ExpandableTile
• Support custom icon variant for Tag
• Add timeout to dispatched on:close event detail in InlineNotification and ToastNotification
• Upgrade flatpickr to version 4.6.9 for ES module (ESM) imports

Fixes

• Co-locate DataTableSkeleton with DataTable components
• Prevent MultiSelect dropdown from opening if disabled
• Forward submit event to FluidForm
• Correctly apply class props in ModalHeader
• Add missing warning class to TextInput
• Disable visibility toggle if PasswordInput is disabled
• "Show more" button in CodeSnippet should be "field" sized, not small
• Remove extraneous "bx--btn--copy" class from CodeSnippet
• Adjust Loading spinner styles to remove excess padding
• Prevent class from being overridden by $$restProps in InlineNotification, ToastNotification, NotificationActionButton
• Remove extraneous focus ring in Modal
• Remove aria-hidden prop from ToolbarSearch
• Add label id to Slider
• Remove menubar role from HeaderNav; deprecate ariaLabel prop in HeaderNav in favor of real HTML attributes "aria-label" and "aria-labelledby"
• Remove notificationType prop from InlineNotification and ToastNotification
• Focus the first item when opening an OverflowMenu for the first time
• Close the OverflowMenu on the focusout event
• Forward $$restProps to the input element for TextInput, PasswordInput

Breaking Changes

• DataTableSkeleton.svelte is moved to src/DataTable
• notificationType is removed from InlineNotification and ToastNotification
• Svelte version 3.25 or greater is required due to use of the $$slots API
• $$restProps are forwarded to the input element for TextInput, PasswordInput
• renderIcon prop renamed to icon in NotificationButton
• icon prop type changed to "typeof import("carbon-icons-svelte").CarbonIcon" in HeaderAction, HeaderActionLink, SideNavLink, SideNavMenu
• Pre-compiled CSS StyleSheets use the "compressed" sass.outputStyle instead of "compact"

Documentation

• Add documentation for dynamic, client-side theming
• Add icon-only example for the "danger-tertiary" Button
• Update number of supported Carbon icons and pictograms
• Use more realistic body copy in Notification usage examples
• Update development workflow in the contributing guidelines

Housekeeping

• Replace node-sass with sass
• Upgrade carbon-components to version 10.27.0
• Upgrade @carbon/themes to version 10.26.0
• Upgrade autoprefixer, postcss, prettier-plugin-svelte

v0.26.0

Features

• Render the UI Shell hamburger menu only if the SideNav component is present (PR #457, issue #434)

• Clear the Search input value if the "Escape" key is pressed (PR #448)

• Customize the Tooltip alignment using the align prop (PR #446, issue #398)

  <!-- default alignment is "center" -->
  <Tooltip align="center">...</Tooltip>
  <Tooltip align="start">...</Tooltip>
  <Tooltip align="end">...</Tooltip>

Fixes

• Fix files prop type FileUploader to be a list of Files instead of file names (PR #437)
• Allow binding decimal values in NumberInput (PR #444)
• Spread $$restProps in DataTableSkeleton to the top-level element to be consistent with DataTable (PR #441, issue #423)
• Close the Tooltip on the mousedown event; re-focus the tooltip icon after closing and forward click, mousedown events
• Focus the Dropdown button correctly for multiple dropdowns (PR #447)
• Focus the ComboBox input correctly for multiple combo boxes (PR #447)
• Blur an opened ComboBox when clicking a search input (PR #447, issue #436)
• Prevent cursor shift in UI Shell HeaderSearch when using the up/down arrow keys to navigate results (PR #432, issue #431)
• Deprecate small prop in ButtonSkeleton
• Fix CodeSnippetSkeleton type to only be "single" or "multi"

Breaking Changes

• files in FileUploader components is a list of Files, not just file names
• $$restProps is spread to the top-level element in DataTableSkeleton

Documentation

• Add reactive, hidden, custom alignment examples for Tooltip
• Add reactive examples for Search, ContentSwitcher, Toggle components
• Add plain Header (no SideNav) UI Shell example

Housekeeping

• Upgrade carbon-components to version 10.25 for the pre-compiled CSS StyleSheets

v0.25.1

Fixes

• set selectedResultIndex in HeaderSearch when clicking a result (PR #430, issue #429)

v0.25.0

Features

• Add padding prop to Grid, Row, Column components (PR #420, issue #410)

  <!-- applies vertical padding to all child columns -->
  <Grid padding>...</Grid>
  
  <!-- applies vertical padding to child columns in a specific row -->
  <Grid><Row padding>...</Row></Grid>
  
  <!-- applies vertical padding to a specific column -->
  <Grid><Row><Column padding>...</Column></Row></Grid>

• Add transition prop to UI Shell HeaderAction to customize panel slide transition; by default, the slide duration is 200ms (PR #419, issue #384)

  Custom slide transition parameters:

  <script>
    import { quintOut } from "svelte/easing";
  </script>
  
  <HeaderAction transition="{{ duration: 1200, delay: 200, easing: quintOut }}">...</HeaderAction>

  Disabled:

  <HeaderAction transition="{false}">...</HeaderAction>

Fixes

• fix Files type for FileUploader (PR #422, issue #421)
• remove the fly transition from HamburgerMenu (PR #419, issue #384)

Documentation

• add "Padded columns" example to Grid docs
• demo different transitions in "Header with app switcher" example in UI Shell
• describe use case for using native styles in OrderedList

Housekeeping

• pin development dependency sveld to version 0.3.0

---

Contributors

• @ispyinternet
• @miedzikd

v0.24.0

Features

• Add a HeaderSearch component for the UI Shell that can render user-provided search results (PR #417, issue #395); HeaderActionSearch is deprecated in favor of HeaderSearch

  Demo

   <HeaderSearch
      bind:ref
      bind:active
      bind:value
      bind:selectedResultIndex
      placeholder="Search services"
      results="{results}"
      on:active
      on:inactive
      on:clear
      on:select="{(e) => {
        console.log(e.detail); // { value: string; selectedResultIndex: number; result: HeaderSearchReseult }
      }}"
    />

• Expand headers prop type in DataTableSkeleton to be consistent with that of the DataTable (PR #415, issue #413)

  Before, you had to map the header value when using the DataTableSkeleton:

  <DataTableSkeleton headers={headers.map(header => header.value)} />

  Now, you can simply reuse the headers supplied to the DataTable component:

  {#if loading}
    <DataTableSkeleton {headers} />
  {:else}
    <DataTable {headers} {rows} />
  {/if}

Fixes

• Update DataTableRow prop type in DataTable to require an "id" key and value (PR #415, issue #414)

Documentation

• Add example "Skeleton with object headers" to the DataTable docs
• Add example "Header with global search" to the UI Shell docs

v0.23.2

Fixes

• Fix dispatched "change" event in RadioButtonGroup (PR #408)
• Export component types and interfaces (PR #411, issue #409)

---

Contributors

• @weaseldotro

v0.23.1

Fixes

• Fix selected prop reactivity in RadioButtonGroup so that it can be programmatically updated (PR #407, issue #406)
• Allow click propagation in ListBox so that list box menus can close correctly; this fixes behavior in the ComboBox, Dropdown, and MultiSelect components (PR #405, issue #388)

Documentation

• Add programmatic RadioButton example
• Add multiple ComboBox example
• Add multiple Dropdown example
• Add multiple MultiSelect example
• Add ExpandableAccordion recipe

---

Contributors

• @weaseldotro

v0.23.0

Features

• Persist UI Shell Header hamburger menu if persistentHamburgerMenu is true (PR #396, issue #374, rendered example)
• Disable auto focus in ComposedModal if selectorPrimaryFocus is null (PR #393)
• Use small size Toggle variant if size is "sm"; deprecate ToggleSmall which will be removed in the next major release (PR #401)

Fixes

• Fix currentIndex reactivity in ProgressIndicator so that it can be programmatically updated (PR #404, issue #399)

Refactoring

• Rewrite TypeScript definitions with better type signatures for slots, dispatched events; fix IntrinsicAttributes errors (PR #385, issue #304)
• Remove useless if statement that wraps svelte:component in Button; by design, svelte:component will not render falsy values (PR #402)

Documentation

• Update auto-generated Component API documentation with output from sveld
• Label reactive component props and list them first
• Replace back ticks in Component API prop descriptions with a code tag (PR #392, issue #390)
• Simplify date sort method in "Sortable with custom display and sort methods" DataTable example (PR #382)
• Add programmatic ProgressIndicator example
• Add vertical ProgressIndicatorSkeleton example
• Add deprecation warning to the ToggleSmall component

Housekeeping

• Upgrade carbon-icons-svelte from version ^10.17 to ^10.21

Breaking Changes

• Internal component TypeScript interfaces are no longer exported to avoid polluting library exports

---

Contributors

• @josefaidt
• @weaseldotro
• @albertms10

Special thanks to @albertms10 for reviewing pull requests.

v0.22.0

Features

• Button: add "danger-tertiary", "danger-ghost" kinds
• OverflowMenu: support "sm", "xl" size variants (PR #376)
• TimePicker: support "sm", "xl" size variants (PR #376)
• Link: support "sm", "lg" size variants (PR #376)
• OrderedList: support native list styles (095173a)
• MultiSelect: forward "clear" event (PR #380, a016bf8)
• MultiSelect: dispatch "select" event to be consistent with ComboBox, Dropdown (PR #380, 2140eeb)

Fixes

• OverflowMenu: menu width should be scoped to component instance (b4caea5)
• OverflowMenu: remove tabindex attribute from trigger button (87b8de1)
• CodeSnippet: showMoreLess should be re-computed if code is dynamically updated (PR #381)

Documentation

• Document itemToString prop for Dropdown, MultiSelect
• MultiSelect: add example for "Initial selected items"
• CodeSnippet: add example for dynamically updating code
• CodeSnippet: add example for "Hidden code snippet" edge case (issue #373)
• OverflowMenu: add example for "Custom trigger icon"

Housekeeping

• upgrade carbon-components to v10.23.1, @carbon/themes to v10.22.1
• bump/patch development dependencies

v0.21.0

Features

• ListBoxMenu: forward "scroll" event (PR #366)
• ComboBox: export reference to list box menu (PR #366)
• DataTable: add ToolbarMenu, ToolbarMenuItem (PR #369)
• DataTable: support empty table body columns by adding optional empty key to headers prop (PR #370)
• Dropdown: support "sm", "xl" field sizes

Fixes

• DataTable: cancelling batch selection should deselect "select all rows" checkbox
• Toolbar: remove duplicate "bx--toolbar-content" element

Documentation

• DataTable: add example "Empty column with overflow menu"
• hand off current theme for examples opened in a new tab
• add field size examples for Dropdown, MultiSelect, Select

---

Contributors

• @weaseldotro