mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
breaking: remove deprecated props and components (#1191)
This commit is contained in:
metonym
GitHub
parent
ea7c0d446e
commit
21714d0e3a
55 changed files with 127 additions and 1823 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 171,
|
||||
"total": 165,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -472,17 +472,6 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "hasIconOnly",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` for the icon-only variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"kind": "let",
|
||||
|
|
@ -506,7 +495,7 @@
|
|||
{
|
||||
"name": "tooltipAlignment",
|
||||
"kind": "let",
|
||||
"description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`",
|
||||
"description": "Set the alignment of the tooltip relative to the icon.\nOnly applies to icon-only buttons",
|
||||
"type": "\"start\" | \"center\" | \"end\"",
|
||||
"value": "\"center\"",
|
||||
"isFunction": false,
|
||||
|
|
@ -681,16 +670,6 @@
|
|||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "small",
|
||||
"kind": "let",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
|
|
@ -1813,17 +1792,6 @@
|
|||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "light",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to enable the light variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
|
|
@ -4659,36 +4627,6 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "a" }
|
||||
},
|
||||
{
|
||||
"moduleName": "HeaderActionSearch",
|
||||
"filePath": "src/UIShell/GlobalHeader/HeaderActionSearch.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "searchIsActive",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to focus the search",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "inputSearch",
|
||||
"detail": "{ action: \"search\"; textInput: string; }"
|
||||
},
|
||||
{ "type": "dispatched", "name": "focusInputSearch" },
|
||||
{ "type": "dispatched", "name": "focusOutInputSearch" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"componentComment": "\n@deprecated\nThis component is deprecated. Use `HeaderSearch` instead."
|
||||
},
|
||||
{
|
||||
"moduleName": "HeaderGlobalAction",
|
||||
"filePath": "src/UIShell/HeaderGlobalAction.svelte",
|
||||
|
|
@ -4742,18 +4680,7 @@
|
|||
{
|
||||
"moduleName": "HeaderNav",
|
||||
"filePath": "src/UIShell/GlobalHeader/HeaderNav.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "ariaLabel",
|
||||
"kind": "let",
|
||||
"description": "Specify the ARIA label for the nav",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"props": [],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
|
|
@ -5037,80 +4964,6 @@
|
|||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "Icon",
|
||||
"filePath": "src/Icon/Icon.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "render",
|
||||
"kind": "let",
|
||||
"description": "Specify the icon to render",
|
||||
"type": "typeof import(\"svelte\").SvelteComponent",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "skeleton",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to display the skeleton state",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "IconSkeleton" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "IconSkeleton" },
|
||||
{
|
||||
"type": "forwarded",
|
||||
"name": "mouseenter",
|
||||
"element": "IconSkeleton"
|
||||
},
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "IconSkeleton" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "svg" },
|
||||
"extends": {
|
||||
"interface": "IconSkeletonProps",
|
||||
"import": "\"./IconSkeleton.svelte\""
|
||||
},
|
||||
"componentComment": "\n@deprecated This component is deprecated.\nUse icons from \"carbon-icons-svelte\" instead."
|
||||
},
|
||||
{
|
||||
"moduleName": "IconSkeleton",
|
||||
"filePath": "src/Icon/IconSkeleton.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
"description": "Set the size of the icon",
|
||||
"type": "number",
|
||||
"value": "16",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"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" },
|
||||
"componentComment": "\n@deprecated This component is deprecated."
|
||||
},
|
||||
{
|
||||
"moduleName": "ImageLoader",
|
||||
"filePath": "src/ImageLoader/ImageLoader.svelte",
|
||||
|
|
@ -7073,61 +6926,6 @@
|
|||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "NotificationTextDetails",
|
||||
"filePath": "src/Notification/NotificationTextDetails.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "notificationType",
|
||||
"kind": "let",
|
||||
"description": "Set the type of notification",
|
||||
"type": "\"toast\" | \"inline\"",
|
||||
"value": "\"toast\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
"kind": "let",
|
||||
"description": "Specify the title text",
|
||||
"type": "string",
|
||||
"value": "\"Title\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "subtitle",
|
||||
"kind": "let",
|
||||
"description": "Specify the subtitle text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "caption",
|
||||
"kind": "let",
|
||||
"description": "Specify the caption text",
|
||||
"type": "string",
|
||||
"value": "\"Caption\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": [],
|
||||
"componentComment": "\n@deprecated This component is deprecated."
|
||||
},
|
||||
{
|
||||
"moduleName": "NumberInput",
|
||||
"filePath": "src/NumberInput/NumberInput.svelte",
|
||||
|
|
@ -7206,17 +7004,6 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "mobile",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to enable the mobile variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "allowEmpty",
|
||||
"kind": "let",
|
||||
|
|
@ -9250,16 +9037,6 @@
|
|||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "small",
|
||||
"kind": "let",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
|
|
@ -9468,16 +9245,6 @@
|
|||
"moduleName": "SearchSkeleton",
|
||||
"filePath": "src/Search/SearchSkeleton.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "small",
|
||||
"kind": "let",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"kind": "let",
|
||||
|
|
@ -10602,17 +10369,6 @@
|
|||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "border",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use the bordered variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "condensed",
|
||||
"kind": "let",
|
||||
|
|
@ -10868,17 +10624,6 @@
|
|||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "border",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use the bordered variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
|
|
@ -11118,17 +10863,6 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "shouldShowBorder",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` for the bordered variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "sortable",
|
||||
"kind": "let",
|
||||
|
|
@ -12495,16 +12229,6 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "hideLabel",
|
||||
"kind": "let",
|
||||
"type": "boolean",
|
||||
"value": "true",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"kind": "let",
|
||||
|
|
@ -12884,142 +12608,6 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
{
|
||||
"moduleName": "ToggleSmall",
|
||||
"filePath": "src/ToggleSmall/ToggleSmall.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "toggled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to toggle the checkbox input",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable checkbox input",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "labelA",
|
||||
"kind": "let",
|
||||
"description": "Specify the label for the untoggled state",
|
||||
"type": "string",
|
||||
"value": "\"Off\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "labelB",
|
||||
"kind": "let",
|
||||
"description": "Specify the label for the toggled state",
|
||||
"type": "string",
|
||||
"value": "\"On\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "labelText",
|
||||
"kind": "let",
|
||||
"description": "Specify the label text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": 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,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "name",
|
||||
"kind": "let",
|
||||
"description": "Specify a name attribute for the checkbox input",
|
||||
"type": "string",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"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" },
|
||||
{ "type": "forwarded", "name": "change", "element": "input" },
|
||||
{ "type": "forwarded", "name": "keyup", "element": "input" },
|
||||
{ "type": "forwarded", "name": "focus", "element": "input" },
|
||||
{ "type": "forwarded", "name": "blur", "element": "input" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" },
|
||||
"componentComment": "\n@deprecated This component is deprecated.\nUse`<Toggle size=\"sm\" />` instead."
|
||||
},
|
||||
{
|
||||
"moduleName": "ToggleSmallSkeleton",
|
||||
"filePath": "src/ToggleSmall/ToggleSmallSkeleton.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "labelText",
|
||||
"kind": "let",
|
||||
"description": "Specify the label text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": 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,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"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" },
|
||||
"componentComment": "\n@deprecated This component is deprecated.\nUse`<ToggleSkeleton size=\"sm\" />` instead."
|
||||
},
|
||||
{
|
||||
"moduleName": "Toolbar",
|
||||
"filePath": "src/DataTable/Toolbar.svelte",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
|
||||
import Theme from "../components/Theme.svelte";
|
||||
|
||||
const deprecated = ["ToggleSmall", "Icon"];
|
||||
const deprecated = [];
|
||||
const new_components = [];
|
||||
|
||||
let isOpen = false;
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
<script>
|
||||
import { Icon, InlineNotification, OutboundLink } from "carbon-components-svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
import Add20 from "carbon-icons-svelte/lib/Add20";
|
||||
import Add24 from "carbon-icons-svelte/lib/Add24";
|
||||
import Add32 from "carbon-icons-svelte/lib/Add32";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
|
||||
<div>
|
||||
This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/carbon-design-system/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
|
||||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Default
|
||||
|
||||
<Icon render={Add16} />
|
||||
<Icon render={Add20} />
|
||||
<Icon render={Add24} />
|
||||
<Icon render={Add32} />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<Icon skeleton render={Add16} />
|
||||
<Icon skeleton size={20} render={Add20} />
|
||||
<Icon skeleton size={24} render={Add24} />
|
||||
<Icon skeleton size={32} render={Add32} />
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
---
|
||||
components: ["ToggleSmall", "ToggleSmallSkeleton"]
|
||||
---
|
||||
|
||||
<script>
|
||||
import { ToggleSmall, ToggleSmallSkeleton, InlineNotification, Link } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
|
||||
<div>
|
||||
This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
|
||||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
### Default (untoggled)
|
||||
|
||||
<ToggleSmall labelText="Push notifications" />
|
||||
|
||||
### Toggled
|
||||
|
||||
<ToggleSmall labelText="Push notifications" toggled />
|
||||
|
||||
### Custom labels
|
||||
|
||||
<ToggleSmall labelText="Push notifications" labelA="No" labelB="Yes" />
|
||||
|
||||
### Disabled
|
||||
|
||||
<ToggleSmall labelText="Push notifications" disabled />
|
||||
|
||||
### Skeleton
|
||||
|
||||
<ToggleSmallSkeleton />
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { ToggleSmall, CodeSnippet } from "carbon-components-svelte";
|
||||
import { Toggle, CodeSnippet } from "carbon-components-svelte";
|
||||
|
||||
let toggled = false;
|
||||
|
||||
|
|
@ -7,9 +7,10 @@
|
|||
$: code = Array.from({ length }, (_, i) => i + 1).join("\n");
|
||||
</script>
|
||||
|
||||
<ToggleSmall
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
labelText="Trigger snippet overflow"
|
||||
<Toggle
|
||||
bind:toggled
|
||||
size="sm"
|
||||
labelText="Trigger snippet overflow"
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
/>
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue