mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
**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>
168 lines
12 KiB
TypeScript
168 lines
12 KiB
TypeScript
export { default as Accordion } from "./Accordion/Accordion.svelte";
|
|
export { default as AccordionItem } from "./Accordion/AccordionItem.svelte";
|
|
export { default as AccordionSkeleton } from "./Accordion/AccordionSkeleton.svelte";
|
|
export { default as AspectRatio } from "./AspectRatio/AspectRatio.svelte";
|
|
export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb.svelte";
|
|
export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem.svelte";
|
|
export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton.svelte";
|
|
export { default as Breakpoint } from "./Breakpoint/Breakpoint.svelte";
|
|
export { default as breakpointObserver } from "./Breakpoint/breakpointObserver";
|
|
export { default as breakpoints } from "./Breakpoint/breakpoints";
|
|
export { default as Button } from "./Button/Button.svelte";
|
|
export { default as ButtonSkeleton } from "./Button/ButtonSkeleton.svelte";
|
|
export { default as ButtonSet } from "./Button/ButtonSet.svelte";
|
|
export { default as Checkbox } from "./Checkbox/Checkbox.svelte";
|
|
export { default as CheckboxSkeleton } from "./Checkbox/CheckboxSkeleton.svelte";
|
|
export { default as ContentSwitcher } from "./ContentSwitcher/ContentSwitcher.svelte";
|
|
export { default as Switch } from "./ContentSwitcher/Switch.svelte";
|
|
export { default as ContextMenu } from "./ContextMenu/ContextMenu.svelte";
|
|
export { default as ContextMenuDivider } from "./ContextMenu/ContextMenuDivider.svelte";
|
|
export { default as ContextMenuGroup } from "./ContextMenu/ContextMenuGroup.svelte";
|
|
export { default as ContextMenuOption } from "./ContextMenu/ContextMenuOption.svelte";
|
|
export { default as ContextMenuRadioGroup } from "./ContextMenu/ContextMenuRadioGroup.svelte";
|
|
export { default as CopyButton } from "./CopyButton/CopyButton.svelte";
|
|
export { default as ComboBox } from "./ComboBox/ComboBox.svelte";
|
|
export { default as ComposedModal } from "./ComposedModal/ComposedModal.svelte";
|
|
export { default as ModalHeader } from "./ComposedModal/ModalHeader.svelte";
|
|
export { default as ModalBody } from "./ComposedModal/ModalBody.svelte";
|
|
export { default as ModalFooter } from "./ComposedModal/ModalFooter.svelte";
|
|
export { default as CodeSnippet } from "./CodeSnippet/CodeSnippet.svelte";
|
|
export { default as CodeSnippetSkeleton } from "./CodeSnippet/CodeSnippetSkeleton.svelte";
|
|
export { default as DataTable } from "./DataTable/DataTable.svelte";
|
|
export { default as DataTableSkeleton } from "./DataTable/DataTableSkeleton.svelte";
|
|
export { default as Table } from "./DataTable/Table.svelte";
|
|
export { default as TableBody } from "./DataTable/TableBody.svelte";
|
|
export { default as TableCell } from "./DataTable/TableCell.svelte";
|
|
export { default as TableContainer } from "./DataTable/TableContainer.svelte";
|
|
export { default as TableHead } from "./DataTable/TableHead.svelte";
|
|
export { default as TableHeader } from "./DataTable/TableHeader.svelte";
|
|
export { default as TableRow } from "./DataTable/TableRow.svelte";
|
|
export { default as Toolbar } from "./DataTable/Toolbar.svelte";
|
|
export { default as ToolbarContent } from "./DataTable/ToolbarContent.svelte";
|
|
export { default as ToolbarSearch } from "./DataTable/ToolbarSearch.svelte";
|
|
export { default as ToolbarBatchActions } from "./DataTable/ToolbarBatchActions.svelte";
|
|
export { default as ToolbarMenu } from "./DataTable/ToolbarMenu.svelte";
|
|
export { default as ToolbarMenuItem } from "./DataTable/ToolbarMenuItem.svelte";
|
|
export { default as DatePicker } from "./DatePicker/DatePicker.svelte";
|
|
export { default as DatePickerInput } from "./DatePicker/DatePickerInput.svelte";
|
|
export { default as DatePickerSkeleton } from "./DatePicker/DatePickerSkeleton.svelte";
|
|
export { default as Dropdown } from "./Dropdown/Dropdown.svelte";
|
|
export { default as DropdownSkeleton } from "./Dropdown/DropdownSkeleton.svelte";
|
|
export { default as FileUploader } from "./FileUploader/FileUploader.svelte";
|
|
export { default as FileUploaderButton } from "./FileUploader/FileUploaderButton.svelte";
|
|
export { default as FileUploaderItem } from "./FileUploader/FileUploaderItem.svelte";
|
|
export { default as FileUploaderDropContainer } from "./FileUploader/FileUploaderDropContainer.svelte";
|
|
export { default as Filename } from "./FileUploader/Filename.svelte";
|
|
export { default as FileUploaderSkeleton } from "./FileUploader/FileUploaderSkeleton.svelte";
|
|
export { default as Form } from "./Form/Form.svelte";
|
|
export { default as FluidForm } from "./FluidForm/FluidForm.svelte";
|
|
export { default as FormGroup } from "./FormGroup/FormGroup.svelte";
|
|
export { default as FormItem } from "./FormItem/FormItem.svelte";
|
|
export { default as FormLabel } from "./FormLabel/FormLabel.svelte";
|
|
export { default as Grid } from "./Grid/Grid.svelte";
|
|
export { default as Row } from "./Grid/Row.svelte";
|
|
export { default as Column } from "./Grid/Column.svelte";
|
|
export { default as ImageLoader } from "./ImageLoader/ImageLoader.svelte";
|
|
export { default as InlineLoading } from "./InlineLoading/InlineLoading.svelte";
|
|
export { default as Link } from "./Link/Link.svelte";
|
|
export { default as OutboundLink } from "./Link/OutboundLink.svelte";
|
|
export { default as ListBox } from "./ListBox/ListBox.svelte";
|
|
export { default as ListBoxField } from "./ListBox/ListBoxField.svelte";
|
|
export { default as ListBoxMenu } from "./ListBox/ListBoxMenu.svelte";
|
|
export { default as ListBoxMenuIcon } from "./ListBox/ListBoxMenuIcon.svelte";
|
|
export { default as ListBoxMenuItem } from "./ListBox/ListBoxMenuItem.svelte";
|
|
export { default as ListBoxSelection } from "./ListBox/ListBoxSelection.svelte";
|
|
export { default as ListItem } from "./ListItem/ListItem.svelte";
|
|
export { default as Loading } from "./Loading/Loading.svelte";
|
|
export { default as LocalStorage } from "./LocalStorage/LocalStorage.svelte";
|
|
export { default as MultiSelect } from "./MultiSelect/MultiSelect.svelte";
|
|
export { default as Modal } from "./Modal/Modal.svelte";
|
|
export { default as ToastNotification } from "./Notification/ToastNotification.svelte";
|
|
export { default as InlineNotification } from "./Notification/InlineNotification.svelte";
|
|
export { default as NotificationActionButton } from "./Notification/NotificationActionButton.svelte";
|
|
export { default as NotificationButton } from "./Notification/NotificationButton.svelte";
|
|
export { default as NotificationIcon } from "./Notification/NotificationIcon.svelte";
|
|
export { default as NumberInput } from "./NumberInput/NumberInput.svelte";
|
|
export { default as NumberInputSkeleton } from "./NumberInput/NumberInputSkeleton.svelte";
|
|
export { default as OrderedList } from "./OrderedList/OrderedList.svelte";
|
|
export { default as OverflowMenu } from "./OverflowMenu/OverflowMenu.svelte";
|
|
export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem.svelte";
|
|
export { default as Pagination } from "./Pagination/Pagination.svelte";
|
|
export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton.svelte";
|
|
export { default as PaginationNav } from "./PaginationNav/PaginationNav.svelte";
|
|
export { default as Popover } from "./Popover/Popover.svelte";
|
|
export { default as PopoverContent } from "./Popover/PopoverContent.svelte";
|
|
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
|
|
export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator.svelte";
|
|
export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton.svelte";
|
|
export { default as ProgressStep } from "./ProgressIndicator/ProgressStep.svelte";
|
|
export { default as RadioButton } from "./RadioButton/RadioButton.svelte";
|
|
export { default as RadioButtonSkeleton } from "./RadioButton/RadioButtonSkeleton.svelte";
|
|
export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup.svelte";
|
|
export { default as RecursiveList } from "./RecursiveList/RecursiveList.svelte";
|
|
export { default as Search } from "./Search/Search.svelte";
|
|
export { default as SearchSkeleton } from "./Search/SearchSkeleton.svelte";
|
|
export { default as Select } from "./Select/Select.svelte";
|
|
export { default as SelectSkeleton } from "./Select/SelectSkeleton.svelte";
|
|
export { default as SelectItem } from "./Select/SelectItem.svelte";
|
|
export { default as SelectItemGroup } from "./Select/SelectItemGroup.svelte";
|
|
export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPlaceholder.svelte";
|
|
export { default as SkeletonText } from "./SkeletonText/SkeletonText.svelte";
|
|
export { default as Slider } from "./Slider/Slider.svelte";
|
|
export { default as SliderSkeleton } from "./Slider/SliderSkeleton.svelte";
|
|
export { default as StructuredList } from "./StructuredList/StructuredList.svelte";
|
|
export { default as StructuredListSkeleton } from "./StructuredList/StructuredListSkeleton.svelte";
|
|
export { default as StructuredListBody } from "./StructuredList/StructuredListBody.svelte";
|
|
export { default as StructuredListHead } from "./StructuredList/StructuredListHead.svelte";
|
|
export { default as StructuredListCell } from "./StructuredList/StructuredListCell.svelte";
|
|
export { default as StructuredListRow } from "./StructuredList/StructuredListRow.svelte";
|
|
export { default as StructuredListInput } from "./StructuredList/StructuredListInput.svelte";
|
|
export { default as Tabs } from "./Tabs/Tabs.svelte";
|
|
export { default as Tab } from "./Tabs/Tab.svelte";
|
|
export { default as TabContent } from "./Tabs/TabContent.svelte";
|
|
export { default as TabsSkeleton } from "./Tabs/TabsSkeleton.svelte";
|
|
export { default as Tag } from "./Tag/Tag.svelte";
|
|
export { default as TagSkeleton } from "./Tag/TagSkeleton.svelte";
|
|
export { default as TextArea } from "./TextArea/TextArea.svelte";
|
|
export { default as TextAreaSkeleton } from "./TextArea/TextAreaSkeleton.svelte";
|
|
export { default as TextInput } from "./TextInput/TextInput.svelte";
|
|
export { default as TextInputSkeleton } from "./TextInput/TextInputSkeleton.svelte";
|
|
export { default as PasswordInput } from "./TextInput/PasswordInput.svelte";
|
|
export { default as Theme } from "./Theme/Theme.svelte";
|
|
export { default as Tile } from "./Tile/Tile.svelte";
|
|
export { default as ClickableTile } from "./Tile/ClickableTile.svelte";
|
|
export { default as ExpandableTile } from "./Tile/ExpandableTile.svelte";
|
|
export { default as SelectableTile } from "./Tile/SelectableTile.svelte";
|
|
export { default as RadioTile } from "./Tile/RadioTile.svelte";
|
|
export { default as TileGroup } from "./Tile/TileGroup.svelte";
|
|
export { default as TimePicker } from "./TimePicker/TimePicker.svelte";
|
|
export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect.svelte";
|
|
export { default as Toggle } from "./Toggle/Toggle.svelte";
|
|
export { default as Tooltip } from "./Tooltip/Tooltip.svelte";
|
|
export { default as TooltipFooter } from "./Tooltip/TooltipFooter.svelte";
|
|
export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte";
|
|
export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon.svelte";
|
|
export { default as TreeView } from "./TreeView/TreeView.svelte";
|
|
export { default as Truncate } from "./Truncate/Truncate.svelte";
|
|
export { default as truncate } from "./Truncate/truncate";
|
|
export { default as Header } from "./UIShell/Header.svelte";
|
|
export { default as HeaderAction } from "./UIShell/HeaderAction.svelte";
|
|
export { default as HeaderActionLink } from "./UIShell/HeaderActionLink.svelte";
|
|
export { default as HeaderNav } from "./UIShell/HeaderNav.svelte";
|
|
export { default as HeaderNavItem } from "./UIShell/HeaderNavItem.svelte";
|
|
export { default as HeaderNavMenu } from "./UIShell/HeaderNavMenu.svelte";
|
|
export { default as HeaderPanelDivider } from "./UIShell/HeaderPanelDivider.svelte";
|
|
export { default as HeaderPanelLink } from "./UIShell/HeaderPanelLink.svelte";
|
|
export { default as HeaderPanelLinks } from "./UIShell/HeaderPanelLinks.svelte";
|
|
export { default as HeaderUtilities } from "./UIShell/HeaderUtilities.svelte";
|
|
export { default as SideNav } from "./UIShell/SideNav.svelte";
|
|
export { default as SideNavItems } from "./UIShell/SideNavItems.svelte";
|
|
export { default as SideNavLink } from "./UIShell/SideNavLink.svelte";
|
|
export { default as SideNavMenu } from "./UIShell/SideNavMenu.svelte";
|
|
export { default as SideNavMenuItem } from "./UIShell/SideNavMenuItem.svelte";
|
|
export { default as SideNavDivider } from "./UIShell/SideNavDivider.svelte";
|
|
export { default as Content } from "./UIShell/Content.svelte";
|
|
export { default as SkipToContent } from "./UIShell/SkipToContent.svelte";
|
|
export { default as HeaderGlobalAction } from "./UIShell/HeaderGlobalAction.svelte";
|
|
export { default as HeaderSearch } from "./UIShell/HeaderSearch.svelte";
|
|
export { default as UnorderedList } from "./UnorderedList/UnorderedList.svelte";
|