carbon-components-svelte

Compare v0.32.1...v0.32.2

Fixes

• prevent multiple Dropdown items from being selected by updating the selectedId (https://github.com/IBM/carbon-components-svelte/pull/611, contributed by @DavidEspinosa42)
• prevent the default keydown behavior so that pressing "Enter" should open the Dropdown menu (https://github.com/IBM/carbon-components-svelte/pull/610, contributed by @jasonlyu123)
• resolve Carbon icon imports to Svelte files in DataTable, HamburgerMenu components (https://github.com/IBM/carbon-components-svelte/pull/594, contributed by @vegardlarsen)

Housekeeping

• patch carbon-components to version 10.32.1

Compare v0.32.0...v0.32.1

Fixes

• hotfix compiled CSS to correctly render default background color for inputs

Compare v0.31.1...v0.32.0

Breaking Changes

• copy text by default in CodeSnippet and CopyButton using clipboard-copy
• deprecate light prop in ContentSwitcher

Features

• support disabled state for SelectableTile, RadioTile
• add TooltipFooter component
• support OverflowMenu in Breadcrumbs
• support danger kind for ContextMenuOption
• allow sorting to be disabled for a specific header in DataTable

<DataTable
  sortable
  headers={[
   { key: 'name', value: 'Name' }, 
   { key: 'protocol', value: 'Protocol', sort: false }
  ]}
  />

• render an empty header column in DataTableSkeleton if a value is { "empty": true }
• export inputRef prop in MultiSelect
• add searchClass prop to Search, which is passed to the outermost element
• add noMargin prop to FormGroup to remove default bottom margin (default value is false)

Fixes

• render initial ContextMenu position based on viewport constraints
• correctly display invalid text in TimePicker
• remove outer div in ToolbarSearch
• set hasScrollingContent class on ModalBody

Documentation

• add disabled state examples for SelectableTile, RadioTile
• add expandable DataTable size examples, empty header column DataTableSkeleton example
• remove the light ContentSwitcher example

Housekeeping

• upgrade carbon-components to version 10.32.0
• add clipboard-copy to direct dependencies

Fixes

• add missing "name" attribute to non-mobile NumberInput
• forward missing "keydown" event to Form
• forward click/keydown/mouse events in FluidForm to Form

Breaking Changes

• remove default title value in InlineNotification
• remove default title, caption values in ToastNotification
• remove iconDescription prop from HeaderNavMenu

Features

• add Popover component
• add ContextMenu component
• add "container" type for TabsSkeleton
• add warning state to Select
• dispatch "on:click:button--next" and "on:click:button--previous" in Pagination

Fixes

• replace chevron icons with "Add" and "Subtract" icons in NumberInput
• fix Slider markup to use CSS to hide input if hideTextInput is true
• remove hotfix inline style to center dropdown chevron
• add "rowgroup" role to StructuredListBody
• fix type definition for MultiSelect: "clear" should be typed as a custom event
• remove line breaks in anchor element in Link
• only set autofocus attribute if the value is true

Documentation

• add Slider hidden text input, invalid, disabled examples
• add Select warning, invalid, helper text, skeleton (hidden label) examples
• add RadioButton disabled buttons example
• update sample copy in ToastNotification, InlineNotification
• update Select item groups example to use the hidden default option

Housekeeping

• upgrade carbon-components to version 10.31.0
• upgrade carbon-icons-svelte to version 10.27.0 (icons are correctly typed using SvelteComponentTyped)

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

Fixes

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

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

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

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

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

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

Fixes

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

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

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

Fixes

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

Contributors

• @weaseldotro

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

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.

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 (095173a574b38786ae6d54e3c0759b1d5682c5a4)
• MultiSelect: forward "clear" event (PR #380, a016bf897ca2004f1f288c103a8ebdd89b12a8b9)
• MultiSelect: dispatch "select" event to be consistent with ComboBox, Dropdown (PR #380, 2140eebb33dde3108d95e220ffc4ab17283db826)

Fixes

• OverflowMenu: menu width should be scoped to component instance (b4caea5f62f552893d3531d9f614388cc682eee5)
• OverflowMenu: remove tabindex attribute from trigger button (87b8de1159d1e1dabfbfa75b478060047e42b70f)
• 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

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