v0.30.0

Breaking Changes

• forward $$restProps to the input element in Search, MultiSelect, ComboBox, TimePicker, DatePickerInput, NumberInput

Features

• add ImageLoader component
• add LocalStorage component
• forward "clear" event in ToolbarSearch
• add isSelected prop for icon-only, ghost buttons
• add legendText prop/slot to RadioButtonGroup
• add interactive prop to Tag
• make UI Shell SideNavMenuItem text slottable
• deprecate Icon, IconSkeleton

Fixes

• set aria-hidden attribute in UI Shell SideNav
• only show overlay for non-fixed UI Shell SideNav
• correctly render skeleton styles for TextInputSkeleton
• only render RadioButton label if labelText is truthy
• deprecate the NumberInput mobile variant
• add missing type annotation for dispatched MultiSelect select event
• remove redundant "button" role in Button
• update styles for ListBoxSelection to fix filterable MultiSelect
• temporarily apply override styles to ListBoxMenuIcon to correctly render Dropdown chevron icon
• apply z-index: 1 on tooltip when open; style can be overridden through $$restProps.style

Documentation

• add "on:clear" example for Search
• add custom tooltip example for PasswordInput
• add legend text examples for RadioButtonGroup
• add filterable (disabled) variant for Tag
• remove the mobile variant example for NumberInput

Housekeeping

• upgrade carbon-components to v10.30.0

v0.29.2

Fixes

• remove blank line after slot to correctly render button with icon in Safari 13

v0.29.1

Fixes

• fix blur logic in ComboBox, MultiSelect based on relatedTarget tag name
• fix truncate action to preserve existing class names on node
• use new component tokens to correctly render CSS for tags, low contrast notifications

v0.29.0

Breaking Changes

• The default placeholder text for TimePicker is changed from "hh=mm" to "hh:mm"

Features

• Add UI Shell SideNavDivider component
• Add a direction prop to ComboBox, Dropdown, MultiSelect to render the dropdown menu above or below the input
• Support the ComboBox warning state
• Add a text truncation component (Truncate) and action (use:truncate)
• Use shorthand SCSS imports in css/*.scss files
• Use the official SvelteComponentTyped interface in the component TypeScript definitions

Fixes

• Use description as warning icon title in ProgressStep
• Include pre-compiled CSS to library side effects to prevent inadvertent tree-shaking
• Fix DataTable type definition to include $$restProps

Documentation

• Add filterable small Tag example
• Add ComboBox invalid state example
• Add "Top direction" examples for ComboBox, Dropdown, MultiSelect
• Demo ProgressIndicator invalid/disabled steps
• Fix RadioTile light variant example

Housekeeping

• Upgrade carbon-components to version 10.29.0

v0.28.0

Breaking Changes

• The transitionend event in ComposedModal is dispatched, not forwarded; it will only trigger when the modal has finished animating

Features

• Support small size variant for Tag (size="sm")
• Dispatch close event in a filterable Tag (an alias for click)
• Dispatch toggle event in Toggle
• Make tooltipText slottable in TooltipIcon (slot name="tooltipText")
• Add hideLabel prop to Dropdown
• Dispatch transitionend event in Modal, ComposedModal to fire after the modal has finished animating
• Add warn state to DatePickerInput

Fixes

• Forward the click event to Tab
• Do not trigger initial Tab focus when mounting

Documentation

• Add a "Hidden label" example for the Select component
• Add a light variant example for OverflowMenu
• Add a reactive example for Tabs

Housekeeping

• Upgrade carbon-components to version 10.28.0
• Remove unused @carbon/themes development dependency; themes are pulled from carbon-components

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