Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat!: initial pre-release - Carbon v11 styles (#1881)
**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 5833536. * 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>
- Loading branch information
