mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat!: initial pre-release - Carbon v11 styles (#1881)

Browse source 
**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>
This commit is contained in:
Enrico Sacchetti 2024-01-12 11:33:59 -05:00
commit c0d037dfca
188 changed files with 7815 additions and 5523 deletions
Download patch file Download diff file Expand all files Collapse all files

197
docs/src/COMPONENT_API.json
View file

@ -21,7 +21,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the accordion",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -453,7 +453,7 @@
"name": "kind",
"kind": "let",
"description": "Specify the kind of button",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger--tertiary\" | \"danger--ghost\"",
"value": "\"primary\"",
"isFunction": false,
"isFunctionDeclaration": false,
@ -465,8 +465,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of button",
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
"value": "\"default\"",
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
"value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -1519,7 +1519,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the combobox",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -1939,7 +1939,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the content switcher",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -3009,7 +3009,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -3322,7 +3322,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the dropdown field",
"type": "\"sm\" | \"lg\" | \"xl\"",
"type": "\"sm\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -4291,8 +4291,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of button skeleton",
"type": "\"default\" | \"field\" | \"small\"",
"value": "\"default\"",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -5867,7 +5867,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the list box",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -7047,7 +7047,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the combobox",
"type": "\"sm\" | \"lg\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -7584,7 +7584,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -7988,7 +7988,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the overflow menu",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -8639,7 +8639,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -9012,6 +9012,27 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "PopoverContent",
"filePath": "src/Popover/PopoverContent.svelte",
"props": [
{
"name": "className",
"kind": "let",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": [],
"rest_props": { "type": "Element", "name": "span" }
},
{
"moduleName": "ProgressBar",
"filePath": "src/ProgressBar/ProgressBar.svelte",
@ -9930,8 +9951,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the search input",
"type": "\"sm\" | \"lg\" | \"xl\"",
"value": "\"xl\"",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -10154,8 +10175,8 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the search input",
"type": "\"sm\" | \"lg\" | \"xl\"",
"value": "\"xl\"",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -10193,7 +10214,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the select input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -11860,13 +11881,13 @@
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "li" },
{ "type": "forwarded", "name": "mouseover", "element": "li" },
{ "type": "forwarded", "name": "mouseenter", "element": "li" },
{ "type": "forwarded", "name": "mouseleave", "element": "li" }
{ "type": "forwarded", "name": "click", "element": "a" },
{ "type": "forwarded", "name": "mouseover", "element": "a" },
{ "type": "forwarded", "name": "mouseenter", "element": "a" },
{ "type": "forwarded", "name": "mouseleave", "element": "a" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "li" }
"rest_props": { "type": "Element", "name": "a" }
},
{
"moduleName": "TabContent",
@ -12191,11 +12212,11 @@
"reactive": true
},
{
"name": "type",
"name": "contained",
"kind": "let",
"description": "Specify the type of tabs",
"type": "\"default\" | \"container\"",
"value": "\"default\"",
"description": "Set to `true` for tabs to be contained",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12213,30 +12234,6 @@
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "iconDescription",
"kind": "let",
"description": "Specify the ARIA label for the chevron icon",
"type": "string",
"value": "\"Show menu options\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "triggerHref",
"kind": "let",
"description": "Specify the tab trigger href attribute",
"type": "string",
"value": "\"#\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
@ -12244,11 +12241,7 @@
{ "name": "__default__", "default": true, "slot_props": "{}" },
{ "name": "content", "default": false, "slot_props": "{}" }
],
"events": [
{ "type": "forwarded", "name": "keypress", "element": "div" },
{ "type": "forwarded", "name": "click", "element": "a" },
{ "type": "dispatched", "name": "change" }
],
"events": [{ "type": "dispatched", "name": "change" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
@ -12486,7 +12479,6 @@
"kind": "let",
"description": "Specify the number of cols",
"type": "number",
"value": "50",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12709,7 +12701,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -13086,9 +13078,9 @@
],
"typedefs": [
{
"type": "\"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"",
"type": "\"white\" | \"g10\" | \"g90\" | \"g100\"",
"name": "CarbonTheme",
"ts": "type CarbonTheme = \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\""
"ts": "type CarbonTheme = \"white\" | \"g10\" | \"g90\" | \"g100\""
}
]
},
@ -13198,7 +13190,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the input",
"type": "\"sm\" | \"xl\"",
"type": "\"sm\" | \"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -13675,8 +13667,8 @@
"name": "size",
"kind": "let",
"description": "Specify the toggle size",
"type": "\"default\" | \"sm\"",
"value": "\"default\"",
"type": "\"md\" | \"sm\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -13781,18 +13773,6 @@
],
"moduleExports": [],
"slots": [
{
"name": "labelA",
"default": false,
"fallback": "{labelA}",
"slot_props": "{}"
},
{
"name": "labelB",
"default": false,
"fallback": "{labelB}",
"slot_props": "{}"
},
{
"name": "labelText",
"default": false,
@ -13818,65 +13798,6 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "ToggleSkeleton",
"filePath": "src/Toggle/ToggleSkeleton.svelte",
"props": [
{
"name": "size",
"kind": "let",
"description": "Specify the toggle size",
"type": "\"default\" | \"sm\"",
"value": "\"default\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "labelText",
"kind": "let",
"description": "Specify the label text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
"description": "Set an id for the input element",
"type": "string",
"value": "\"ccs-\" + Math.random().toString(36)",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [
{
"name": "labelText",
"default": false,
"fallback": "{labelText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "Toolbar",
"filePath": "src/DataTable/Toolbar.svelte",
@ -14589,8 +14510,8 @@
"name": "size",
"kind": "let",
"description": "Specify the TreeView size",
"type": "\"default\" | \"compact\"",
"value": "\"default\"",
"type": "\"xs\" | \"sm\"",
"value": "\"sm\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,