**carbon-components-svelte has unstable styles and interactions during this pre-release phase. See #1872 for details.**
Breaking changes
- Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.
Components
- Button has new prop values for size and kind
- Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
- Tabs has a contained prop instead of type, and a new mobile appearance (scrolling tabs)
- ContentSwitcher size prop no longer supports size="xl"; md is the new default
- MultiSelect no longer supports xl size
- OverflowMenu no longer supports xl size
- Search no longer supports xl size
- TreeView no longer supports compact size
- UIShell has a new light theme
CSS
- Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
- Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
- Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
- The g80 theme no longer exists
General
- Codebase uses npm instead of yarn
--- Commit notes
* chore: depend on @carbon/styles instead of carbon-components
See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop
* chore: use v11 styles for docs
* chore: stick to `bx` instead of `cds` class prefix
* chore: migrate layout spacing to v11
See [@carbon/layout](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#carbonlayout) migration guide:
$layout-01 Removed, use $spacing-05 instead
$layout-02 Removed, use $spacing-06 instead
$layout-03 Removed, use $spacing-07 instead
$layout-04 Removed, use $spacing-09 instead
$layout-05 Removed, use $spacing-10 instead
$layout-06 Removed, use $spacing-12 instead
$layout-07 Removed, use $spacing-13 instead
* chore: migrate type tokens to v11
See https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens
* chore: keep flex-grid instead of css grid for the moment
Upgrading to css-grid should be separate.
* chore: v11 Tabs
In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.
* chore: use @ibm/plex fonts
* chore: v11 Button
* dependency: @carbon/styles update
* chore: v11 ComboBox
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 ContentSwitcher
For better compatibility with existing code bases size `xl` is still supported.
* chore: remove legacy v10 css files
Note that further work is needed here in order to make theming work again.
Also documentation needs updating.
* chore: v11 DatePicker
For better compatibility with existing codebases size xl is still supported.
* chore: v11 Dropdown
For better compatibility with existing codebases size xl is still supported.
* chore: v11 ExpandableTile
Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.
* chore: v11 FileUploader
For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.
* chore: v11 Toggle
This removes legacy `ToggleSkeleton`.
* chore: v11 MultiSelect
Size `xl` changed to `lg`.
* chore: v11 NumberInput
For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 OverflowMenu
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 PasswordInput
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 Search
* chore: v11 Select
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 AspectRatio
The `bx--aspect-ratio--object` class is gone and needs to be replaced manually.
* chore: v11 TextArea
`cols` no longer has a defaults to 50 but remains at 100% width by default.
* chore: v11 TextInput
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 TimePicker
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 TreeView
Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.
* chore: remove Truncate since it does not exist in Carbon v11
* chore: v11 UIShell
* chore: v11 Accordion
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* tmp: v11 PopoverContent
* Revert "chore: remove Truncate since it does not exist in Carbon v11"
This reverts commit 5833536199.
* chore: use truncate mixins
* docs: add truncate mixins
* chore: use `cds` class prefix in v11 styles
* build: switch to npm
* chore: set up all component styles, fonts, and themes
- Adapt documentation to new styles
* chore: add individual theme css
* feat: migrate Theme component to v11
- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places
* chore: use bx css prefixes for now
* chore: resolve peerDependencies
- Leaving out latest prettier for now
- Ignoring Sveld warnings for now
* chore: fix type errors and tests
---------
Co-authored-by: Gregor Wassmann <gregor.wassmann@gmail.com>
Fixes#1222
A non-filterable ComboBox will select the item that matches the typed value when pressing "Enter." An unknown (unmatched) value will select the first item.
Fixes#1405
When using the `shouldFilterItem` prop, the `ComboBox` does not display the custom label set with `itemToString` in the input after a selection.
* fix(combo-box): ListBoxField and ListBoxSelection have different `translateWithId` props
* fix(multi-select): ListBoxField and ListBoxSelection have different `translateWithId` props
* Run "yarn build docs"
* test: assert translateWithIdMenu, translateWIthIdInput props
* chore: update ignore rules, remove unused files
* refactor(icons): use icons from carbon-icons-svelte@11
* docs(time-picker): fix default value
* chore: upgrade carbon-icons-svelte to v11
* docs: update examples to use icons from carbon-icons-svelte@11
* docs: update number of icons [ci skip]
* feat(icons): inline carbon icons used by components
* feat(icons): update svelte components to use inlined carbon icons
* breaking(deps): remove carbon-icons-svelte
* chore(deps-dev): install carbon-icons-svelte as a devDependency
* fix(combo-box): clicking chevron should not open the combo box if disabled
Fixes#776
* fix(toolbar-batch-actions): cancel text should be slottable
Fixes#782
* fix(combo-box): fix reactivity regression #768Fixes#768
* fix(combo-box): if selectedItem is not defined, default selectedIndex to 0
* fix(combo-box): do not reset selectedIndex to 0, fallback to empty string
* fix(combo-box): reset selectedIndex
* chore(deps-dev): upgrade carbon-components to v10.38.0
* feat(text-input): support read-only variant
* docs: use consistent lingo for inline variant examples
* docs(popover): add Popover alignment example
* fix(file-uploader): adjust markup to avoid accessibility errors
Ref: 0dfde60e3
* fix(inline-loading): use error filled icon
* fix(inline-loading): render iconDescription as title in error/warning icons
Ref: 51c53c923
* fix(structured-list): update accessibility attributes
* fix(tooltip-definition): use span instead of div
Ref: cb6de3025
* fix(multi-select): close menu when blurring the last filterable option
* fix(multi-select): open/focus field for filterable multiselect #635
* fix(multi-select): unblock focus when blurring input #635
* fix(combo-box): select correct item with keys, allow input after clearing #195
* fix(combo-box): update input text if item is selected
* feat(combo-box): render checkmark icon for selected item
* fix(ui-shell): toggle SideNav rail when clicking the hamburger menu #699
* fix(context-menu): update context menu classes #684
* docs(context-menu): improve demo instructions #684
* fix(context-menu): close menu when clicking anywhere
* chore(deps-dev): upgrade carbon-components to v10.36.0
* feat(structured-list): add condensed, flush props
* fix(structured-list): deprecate the border prop
* fix(code-snippet): set min/max height for multi-line code snippet #656Fixes#656
* fix(image-loader): make SSR compatible using a window type check guard
* docs(tag): add separate disabled example for filterable/interactive tags
* docs: update number of supported chart types
* feat(side-nav): support rail variant
* feat(ui-shell): add isSelected prop to HeaderNavItem
* fix(ui-shell): default isSelected to false in SideNavMenuItem
* fix(text-area): forward missing keydown event #665Fixes#665
* feat: forward keyup event to components with inputs
* feat(checkbox): make labelText slottable #563Closes#563
* feat: make labelText slottable
Related #563
* docs(component-api): account for undefined type
* docs(ui-shell): link to correct rail source
* fix(ui-shell): default isSelected in HeaderNavItem to false
* feat(toolbar): forward "clear" event in ToolbarSearch
* docs(search): add on:clear example
* fix(ui-shell): set aria-hidden in SideNav
Ref c2b4f1f00
* chore(deps-dev): upgrade carbon-components to v10.30.0
* fix(text-input): use bx--text-input class for TextInputSkeleton
* fix(radio-button): only render span if labelText is truthy
* docs(password-input): add custom tooltip example
* feat(button): add isSelected prop for icon-only, ghost buttons
* feat(radio-button): add legendText prop to RadioButtonGroup
* docs(tag): add filterable (disabled) variant
* feat(tag): add interactive prop
* chore(number-input): deprecate the mobile variant
Mobile variant styles will no longer work.
* feat(button): set aria-pressed attribute if icon-only, ghost button is selected
* fix(multi-select): type dispatched select event
* fix(button): remove redundant "button" role
* feat(icon): deprecate Icon, IconSkeleton
* feat(ui-shell): make SideNavMenuItem text slottable
* fix(list-box): update styles for ListBoxSelection
* fix(list-box): temporarily apply override styles to ListBoxMenuIcon for chevron
* fix(tag): set disabled prop on interactive tag
* docs(button): extract selected, icon-only button example
* feat(tooltip): elevate z-index of tooltip when open
* feat: forward restProps to input element
* fix(types): fix TimePicker test to pass svelte-check
* feat: add ImageLoader component
* test: add ImageLoader
* feat: add LocalStorage component
* test(local-storage): fix invalid file
* chore(docs): use green tag type
* fix(combo-fix): dont re-focus listbox if relatedTarget is input/select/textarea
* fix(combo-box): check if relatedTarget is truthy
* fix(multi-select): dont re-focus listbox if relatedTarget is input/select/textarea
* chore: patch prettier-plugin-svelte
* docs(tag): add filterable small tag example
* feat(ui-shell): add SideNavDivider
* feat(combo-box): support warning state
* docs(combo-box): add invalid state example
* fix(progress-step): add title to warning icon
* docs(progress-indicator): add invalid step example
* docs(progress-indicator): add disabled steps example
* feat(truncate): add text truncation component and action
* docs(radio-tile): fix light variant example
* fix(side-effects): add pre-compiled CSS to library side effects
* refactor(css): use shorthand scss imports, add comments
* refactor(truncate): rename "direction" prop to "clamp"
* chore(deps-dev): bump carbon-components to v10.29.0
* feat(combo-box): add direction prop
* feat(dropdown): add direction prop
* feat(multi-select): add direction prop
* refactor(search): resolve svelte file paths
* docs(Search): add reactive example
* refactor(tag): use class name directive for tag types, resolve svelte icon path
* chore(button-skeleton): deprecate small prop
* fix(breadcrumb-item): type default slot
* refactor(breadcrumb-skeleton): omit unused index
* refactor(aspect-ratio): use class name directive
* refactor(accordion): use the class name directive, resolve svelte icon paths
* refactor(code-snippet): use class name directive, resolve svelte icon paths
* fix(code-snippet-skeleton): CodeSnippetSkeleton can only be single or multi
* refactor(content-switcher): use class name directive
* docs(content-switcher): add reactive example
* docs(content-switcher): remove unused import
* docs(toggle): add reactive example
* refactor(tooltip-definition): use class name directive
* refactor(tooltip-icon): use class name directive
* refactor(tooltip): resolve svelte icon import
* fix(select): type dispatched change event
* refactor(select): resolve svelte icon import
* feat(select-item): spread rest props, avoid $ variable name
* fix(pagination-nav): type dispatched events
* refactor(pagination): resolve svelte imports
* fix(pagination): type dispatched update event
* fix(overflow-menu): type dispatched close event
* fix(number-input): type dispatched change event
* refactor(modal): use class name directive, resolve svelte imports
* refactor(inline-loading): use class name directive, resolve svelte imports
* refactor(composed-modal): resolve svelte icon imports
* refactor(combo-box): resolve svelte imports
* fix(fluid-form): rest props should not override Form class
* refactor(progress-step): resolve svelte icon imports
* fix(combo-box): selecting a different combobox should focus the input
* fix(dropdown): selecting a different dropdown should focus the button
* fix(combo-box): focus input if related target attribute is not "searchbox"
