mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
c0d037dfca
**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
|
||
|---|---|---|
| .. | ||
| Accordion.test.svelte | ||
| AspectRatio.test.svelte | ||
| AspectRatioColumns.test.svelte | ||
| Breadcrumb.test.svelte | ||
| Breadcrumbs.test.svelte | ||
| Breakpoint.test.svelte | ||
| Button.test.svelte | ||
| ButtonSet.test.svelte | ||
| Checkbox.test.svelte | ||
| ClickableTile.test.svelte | ||
| CodeSnippet.test.svelte | ||
| ComboBox.test.svelte | ||
| ComposedModal.test.svelte | ||
| CondensedGrid.test.svelte | ||
| ContentSwitcher.test.svelte | ||
| ContextMenu.test.svelte | ||
| CopyableCodeSnippet.test.svelte | ||
| CopyButton.test.svelte | ||
| DangerModal.test.svelte | ||
| DataTable.test.svelte | ||
| DataTableAppendColumns.test.svelte | ||
| DataTableBatchSelection.test.svelte | ||
| DataTableBatchSelectionToolbar.test.svelte | ||
| DatePicker.test.svelte | ||
| Dropdown.test.svelte | ||
| DynamicCodeSnippet.test.svelte | ||
| ExpandableTile.test.svelte | ||
| FileUploader.test.svelte | ||
| FilterableComboBox.test.svelte | ||
| FluidForm.test.svelte | ||
| Form.test.svelte | ||
| FullWidthGrid.test.svelte | ||
| Grid.test.svelte | ||
| HeaderNav.test.svelte | ||
| HeaderSearch.svelte | ||
| HeaderSwitcher.test.svelte | ||
| HeaderUtilities.test.svelte | ||
| HiddenCodeSnippet.test.svelte | ||
| ImageLoader.test.svelte | ||
| InlineLoading.test.svelte | ||
| InlineLoadingUx.test.svelte | ||
| InlineNotification.test.svelte | ||
| Link.test.svelte | ||
| Loading.test.svelte | ||
| LocalStorage.test.svelte | ||
| Modal.test.svelte | ||
| ModalExtraSmall.test.svelte | ||
| ModalLarge.test.svelte | ||
| ModalPreventOutsideClick.test.svelte | ||
| ModalSmall.test.svelte | ||
| MultiSelect.test.svelte | ||
| NarrowGrid.test.svelte | ||
| NumberInput.test.svelte | ||
| OffsetColumns.test.svelte | ||
| OrderedList.test.svelte | ||
| OverflowMenu.test.svelte | ||
| PaddedGrid.test.svelte | ||
| Pagination.test.svelte | ||
| PaginationNav.test.svelte | ||
| PassiveModal.test.svelte | ||
| PasswordInput.test.svelte | ||
| PersistedHamburgerMenu.test.svelte | ||
| Popover.test.svelte | ||
| ProgressBar.test.svelte | ||
| ProgressIndicator.test.svelte | ||
| RadioButton.test.svelte | ||
| RadioSelectableDataTable.test.svelte | ||
| RadioTile.test.svelte | ||
| RecursiveList.test.svelte | ||
| ResponsiveGrid.test.svelte | ||
| Search.test.svelte | ||
| Select.test.svelte | ||
| SelectableDataTable.test.svelte | ||
| SelectableTile.test.svelte | ||
| SkeletonPlaceholder.test.svelte | ||
| SkeletonText.test.svelte | ||
| Slider.test.svelte | ||
| StructuredList.test.svelte | ||
| Tabs.test.svelte | ||
| Tag.test.svelte | ||
| TextArea.test.svelte | ||
| TextInput.test.svelte | ||
| Theme.test.svelte | ||
| Tile.test.svelte | ||
| TimePicker.test.svelte | ||
| ToastNotification.test.svelte | ||
| Toggle.test.svelte | ||
| Tooltip.test.svelte | ||
| TooltipDefinition.test.svelte | ||
| TooltipIcon.test.svelte | ||
| TreeView.test.svelte | ||
| Truncate.test.svelte | ||
| UnorderedList.test.svelte | ||