diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 3a14760e..1d5478a7 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 171 components exported from carbon-components-svelte@0.62.3. +> 165 components exported from carbon-components-svelte@0.62.3. ## Components @@ -54,7 +54,6 @@ - [`Header`](#header) - [`HeaderAction`](#headeraction) - [`HeaderActionLink`](#headeractionlink) -- [`HeaderActionSearch`](#headeractionsearch) - [`HeaderGlobalAction`](#headerglobalaction) - [`HeaderNav`](#headernav) - [`HeaderNavItem`](#headernavitem) @@ -64,8 +63,6 @@ - [`HeaderPanelLinks`](#headerpanellinks) - [`HeaderSearch`](#headersearch) - [`HeaderUtilities`](#headerutilities) -- [`Icon`](#icon) -- [`IconSkeleton`](#iconskeleton) - [`ImageLoader`](#imageloader) - [`InlineLoading`](#inlineloading) - [`InlineNotification`](#inlinenotification) @@ -87,7 +84,6 @@ - [`NotificationActionButton`](#notificationactionbutton) - [`NotificationButton`](#notificationbutton) - [`NotificationIcon`](#notificationicon) -- [`NotificationTextDetails`](#notificationtextdetails) - [`NumberInput`](#numberinput) - [`NumberInputSkeleton`](#numberinputskeleton) - [`OrderedList`](#orderedlist) @@ -160,8 +156,6 @@ - [`ToastNotification`](#toastnotification) - [`Toggle`](#toggle) - [`ToggleSkeleton`](#toggleskeleton) -- [`ToggleSmall`](#togglesmall) -- [`ToggleSmallSkeleton`](#togglesmallskeleton) - [`Toolbar`](#toolbar) - [`ToolbarBatchActions`](#toolbarbatchactions) - [`ToolbarContent`](#toolbarcontent) @@ -381,14 +375,13 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; | Prop name | Kind | Reactive | Type | Default value | Description | | :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | -| hasIconOnly | let | Yes | boolean | false | Set to `true` for the icon-only variant | | kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | | size | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button | | expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | | isSelected | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | | icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | | iconDescription | let | No | string | undefined | Specify the ARIA label for the button icon | -| tooltipAlignment | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` | +| tooltipAlignment | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
Only applies to icon-only buttons | | tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | | as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | @@ -438,7 +431,6 @@ None. | :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ | | href | let | No | string | undefined | Set the `href` to use an anchor link | | size | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button skeleton | -| small | let | No | boolean | false | -- | ### Slots @@ -761,7 +753,6 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------ | :--------------- | :------- | :---------------------------- | ---------------------- | ----------------------------------------- | | selectedIndex | let | Yes | number | 0 | Set the selected index of the switch item | -| light | let | No | boolean | false | Set to `true` to enable the light variant | | size | let | No | "sm" | "xl" | undefined | Specify the size of the content switcher | ### Slots @@ -1640,26 +1631,6 @@ None. None. -## `HeaderActionSearch` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- | -| searchIsActive | let | Yes | boolean | false | Set to `true` to focus the search | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :------------------ | :--------- | :---------------------------------------------------- | -| inputSearch | dispatched | { action: "search"; textInput: string; } | -| focusInputSearch | dispatched | -- | -| focusOutInputSearch | dispatched | -- | - ## `HeaderGlobalAction` ### Props @@ -1686,9 +1657,7 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ---------------------- | ---------------------------------- | -| ariaLabel | let | No | string | undefined | Specify the ARIA label for the nav | +None. ### Slots @@ -1869,49 +1838,6 @@ None. None. -## `Icon` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------------- | -| render | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `IconSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | --------------- | ------------------------ | -| size | let | No | number | 16 | Set the size of the icon | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - ## `ImageLoader` ### Props @@ -2516,27 +2442,6 @@ None. None. -## `NotificationTextDetails` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :----------------------------------- | ---------------------- | ---------------------------- | -| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | -| title | let | No | string | "Title" | Specify the title text | -| subtitle | let | No | string | "" | Specify the subtitle text | -| caption | let | No | string | "Caption" | Specify the caption text | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - ## `NumberInput` ### Types @@ -2557,7 +2462,6 @@ export type NumberInputTranslationId = "increment" | "decrement"; | min | let | No | number | undefined | Specify the minimum value | | light | let | No | boolean | false | Set to `true` to enable the light variant | | readonly | let | No | boolean | false | Set to `true` for the input to be read-only | -| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant | | allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value | | disabled | let | No | boolean | false | Set to `true` to disable the input | | hideSteppers | let | No | boolean | false | Set to `true` to hide the input stepper buttons | @@ -3155,7 +3059,6 @@ None. | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | expanded | let | Yes | boolean | false | Set to `true to expand the search input | | value | let | Yes | any | "" | Specify the value of the search input | -| small | let | No | boolean | false | -- | | size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | | searchClass | let | No | string | "" | Specify the class name passed to the outer div element | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | @@ -3198,10 +3101,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | ------------------------------------ | -| small | let | No | boolean | false | -- | -| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :---------------------------------------- | ----------------- | ------------------------------------ | +| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | ### Slots @@ -3608,7 +3510,6 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------- | | selected | let | Yes | string | undefined | Specify the selected structured list row value | -| border | let | No | boolean | false | Set to `true` to use the bordered variant | | condensed | let | No | boolean | false | Set to `true` to use the condensed variant | | flush | let | No | boolean | false | Set to `true` to flush the list | | selection | let | No | boolean | false | Set to `true` to use the selection variant | @@ -3746,10 +3647,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | -| rows | let | No | number | 5 | Specify the number of rows | -| border | let | No | boolean | false | Set to `true` to use the bordered variant | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | -------------- | -------------------------- | +| rows | let | No | number | 5 | Specify the number of rows | ### Slots @@ -3842,14 +3742,13 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- | -| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table | -| zebra | let | No | boolean | false | Set to `true` to use zebra styles | -| useStaticWidth | let | No | boolean | false | Set to `true` to use static width | -| shouldShowBorder | let | No | boolean | false | Set to `true` for the bordered variant | -| sortable | let | No | boolean | false | Set to `true` for the sortable variant | -| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- | +| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table | +| zebra | let | No | boolean | false | Set to `true` to use zebra styles | +| useStaticWidth | let | No | boolean | false | Set to `true` to use static width | +| sortable | let | No | boolean | false | Set to `true` for the sortable variant | +| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | ### Slots @@ -4354,7 +4253,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; | disabled | let | No | boolean | false | Set to `true` to disable the select | | iconDescription | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon | | labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | true | -- | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | | name | let | No | string | undefined | Specify a name attribute for the select element | @@ -4471,59 +4369,6 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -## `ToggleSmall` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- | -| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | -| disabled | let | No | boolean | false | Set to `true` to disable checkbox input | -| labelA | let | No | string | "Off" | Specify the label for the untoggled state | -| labelB | let | No | string | "On" | Specify the label for the toggled state | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | undefined | Specify a name attribute for the checkbox input | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `ToggleSmallSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - ## `Toolbar` ### Props diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 9167e4bb..64b49dd2 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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`` 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`` instead." - }, { "moduleName": "Toolbar", "filePath": "src/DataTable/Toolbar.svelte", diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte index 6b624263..f2e27ef1 100644 --- a/docs/src/pages/_layout.svelte +++ b/docs/src/pages/_layout.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; diff --git a/docs/src/pages/components/Icon.svx b/docs/src/pages/components/Icon.svx deleted file mode 100644 index c034ce0e..00000000 --- a/docs/src/pages/components/Icon.svx +++ /dev/null @@ -1,28 +0,0 @@ - - - -
- This component will be removed in the next major release. Use icons from carbon-icons-svelte instead. -
- - -### Default - - - - - - -### Skeleton - - - - - \ No newline at end of file diff --git a/docs/src/pages/components/ToggleSmall.svx b/docs/src/pages/components/ToggleSmall.svx deleted file mode 100644 index dfa8cbde..00000000 --- a/docs/src/pages/components/ToggleSmall.svx +++ /dev/null @@ -1,34 +0,0 @@ ---- -components: ["ToggleSmall", "ToggleSmallSkeleton"] ---- - - - - -
- This component will be removed in the next major release. Use the Toggle small variant instead. -
- - -### Default (untoggled) - - - -### Toggled - - - -### Custom labels - - - -### Disabled - - - -### Skeleton - - \ No newline at end of file diff --git a/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte index 30332096..ca658505 100644 --- a/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte +++ b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte @@ -1,5 +1,5 @@ - diff --git a/preprocess/api.json b/preprocess/api.json index e8c7faf0..99b806ce 100644 --- a/preprocess/api.json +++ b/preprocess/api.json @@ -190,12 +190,6 @@ "Row": { "path": "carbon-components-svelte/src/Grid/Row.svelte" }, - "Icon": { - "path": "carbon-components-svelte/src/Icon/Icon.svelte" - }, - "IconSkeleton": { - "path": "carbon-components-svelte/src/Icon/IconSkeleton.svelte" - }, "Add16": { "path": "carbon-components-svelte/src/icons/Add16.svelte" }, @@ -376,9 +370,6 @@ "NotificationIcon": { "path": "carbon-components-svelte/src/Notification/NotificationIcon.svelte" }, - "NotificationTextDetails": { - "path": "carbon-components-svelte/src/Notification/NotificationTextDetails.svelte" - }, "ToastNotification": { "path": "carbon-components-svelte/src/Notification/ToastNotification.svelte" }, @@ -559,12 +550,6 @@ "ToggleSkeleton": { "path": "carbon-components-svelte/src/Toggle/ToggleSkeleton.svelte" }, - "ToggleSmall": { - "path": "carbon-components-svelte/src/ToggleSmall/ToggleSmall.svelte" - }, - "ToggleSmallSkeleton": { - "path": "carbon-components-svelte/src/ToggleSmall/ToggleSmallSkeleton.svelte" - }, "Tooltip": { "path": "carbon-components-svelte/src/Tooltip/Tooltip.svelte" }, @@ -601,9 +586,6 @@ "HeaderActionLink": { "path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderActionLink.svelte" }, - "HeaderActionSearch": { - "path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderActionSearch.svelte" - }, "HeaderNav": { "path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderNav.svelte" }, diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 00f58160..d6375178 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -25,12 +25,6 @@ */ export let isSelected = false; - /** - * Set to `true` for the icon-only variant - * @deprecated inferred using the $$slots API - */ - export let hasIconOnly = false; - /** * Specify the icon to render * @type {typeof import("svelte").SvelteComponent} @@ -44,8 +38,8 @@ export let iconDescription = undefined; /** - * Set the alignment of the tooltip relative to the icon - * `hasIconOnly` must be set to `true` + * Set the alignment of the tooltip relative to the icon. + * Only applies to icon-only buttons * @type {"start" | "center" | "end"} */ export let tooltipAlignment = "center"; diff --git a/src/Button/ButtonSkeleton.svelte b/src/Button/ButtonSkeleton.svelte index c0ec0639..5f7f8c3f 100644 --- a/src/Button/ButtonSkeleton.svelte +++ b/src/Button/ButtonSkeleton.svelte @@ -10,12 +10,6 @@ * @type {"default" | "field" | "small" | "lg" | "xl"} */ export let size = "default"; - - /** - * @deprecated this prop will be removed in the next major release - * Use size="small" instead - */ - export let small = false; @@ -27,7 +21,7 @@ class:bx--skeleton="{true}" class:bx--btn="{true}" class:bx--btn--field="{size === 'field'}" - class:bx--btn--sm="{size === 'small' || small}" + class:bx--btn--sm="{size === 'small'}" class:bx--btn--lg="{size === 'lg'}" class:bx--btn--xl="{size === 'xl'}" {...$$restProps} @@ -43,7 +37,7 @@ class:bx--skeleton="{true}" class:bx--btn="{true}" class:bx--btn--field="{size === 'field'}" - class:bx--btn--sm="{size === 'small' || small}" + class:bx--btn--sm="{size === 'small'}" class:bx--btn--lg="{size === 'lg'}" class:bx--btn--xl="{size === 'xl'}" {...$$restProps} diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte index 81f8d32e..ce7ef662 100644 --- a/src/ContentSwitcher/ContentSwitcher.svelte +++ b/src/ContentSwitcher/ContentSwitcher.svelte @@ -6,12 +6,6 @@ /** Set the selected index of the switch item */ export let selectedIndex = 0; - /** - * Set to `true` to enable the light variant - * @deprecated - */ - export let light = false; - /** * Specify the size of the content switcher * @type {"sm" | "xl"} @@ -67,7 +61,6 @@
@@ -51,7 +44,6 @@ class:bx--data-table--sort="{sortable}" class:bx--data-table--zebra="{zebra}" class:bx--data-table--static="{useStaticWidth}" - class:bx--data-table--no-border="{!shouldShowBorder}" class:bx--data-table--sticky-header="{stickyHeader}" {...$$restProps} > diff --git a/src/Icon/Icon.svelte b/src/Icon/Icon.svelte deleted file mode 100644 index 0726a79a..00000000 --- a/src/Icon/Icon.svelte +++ /dev/null @@ -1,41 +0,0 @@ - - - - -{#if skeleton} - -{:else} - -{/if} diff --git a/src/Icon/IconSkeleton.svelte b/src/Icon/IconSkeleton.svelte deleted file mode 100644 index bb65630a..00000000 --- a/src/Icon/IconSkeleton.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - - - - -
diff --git a/src/Icon/index.js b/src/Icon/index.js deleted file mode 100644 index 551efcd3..00000000 --- a/src/Icon/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as Icon } from "./Icon.svelte"; -export { default as IconSkeleton } from "./IconSkeleton.svelte"; diff --git a/src/Notification/NotificationTextDetails.svelte b/src/Notification/NotificationTextDetails.svelte deleted file mode 100644 index a2d96980..00000000 --- a/src/Notification/NotificationTextDetails.svelte +++ /dev/null @@ -1,37 +0,0 @@ - - - - -{#if notificationType === "toast"} -
-

{title}

-
{subtitle}
-
{caption}
- -
-{/if} - -{#if notificationType === "inline"} -
-

{title}

-
{subtitle}
- -
-{/if} diff --git a/src/Notification/index.js b/src/Notification/index.js index ad3c5e5b..61874384 100644 --- a/src/Notification/index.js +++ b/src/Notification/index.js @@ -3,4 +3,3 @@ export { default as InlineNotification } from "./InlineNotification.svelte"; export { default as NotificationActionButton } from "./NotificationActionButton.svelte"; export { default as NotificationButton } from "./NotificationButton.svelte"; export { default as NotificationIcon } from "./NotificationIcon.svelte"; -export { default as NotificationTextDetails } from "./NotificationTextDetails.svelte"; diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index 84add072..2695b2b6 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -39,12 +39,6 @@ /** Set to `true` for the input to be read-only */ export let readonly = false; - /** - * Set to `true` to enable the mobile variant - * @deprecated - */ - export let mobile = false; - /** Set to `true` to allow for an empty value */ export let allowEmpty = false; @@ -174,158 +168,90 @@ class:bx--number--light="{light}" class:bx--number--nolabel="{hideLabel}" class:bx--number--nosteppers="{hideSteppers}" - class:bx--number--mobile="{mobile}" class="{size && `bx--number--${size}`}" > - {#if mobile} - {#if $$slots.label || label} - - {/if} -
- - - -
- {:else} - {#if $$slots.label || label} - - {/if} -
- - {#if invalid} - - {/if} - {#if !invalid && warn} - - {/if} - {#if readonly} - - {/if} - {#if !hideSteppers} -
- -
- -
-
- {/if} -
+ {label} + {/if} +
+ + {#if invalid} + + {/if} + {#if !invalid && warn} + + {/if} + {#if readonly} + + {/if} + {#if !hideSteppers} +
+ +
+ +
+
+ {/if} +
{#if !error && !warn && helperText}
{warnText}
{/if}
- + \ No newline at end of file diff --git a/src/Pagination/Pagination.svelte b/src/Pagination/Pagination.svelte index 9587f5e4..d0d31795 100644 --- a/src/Pagination/Pagination.svelte +++ b/src/Pagination/Pagination.svelte @@ -158,7 +158,6 @@ {/if} - - - - - - diff --git a/src/UIShell/GlobalHeader/HeaderNav.svelte b/src/UIShell/GlobalHeader/HeaderNav.svelte index 33b68399..91142f4a 100644 --- a/src/UIShell/GlobalHeader/HeaderNav.svelte +++ b/src/UIShell/GlobalHeader/HeaderNav.svelte @@ -1,13 +1,6 @@ diff --git a/src/UIShell/index.js b/src/UIShell/index.js index b91bd2d3..ed9d3773 100644 --- a/src/UIShell/index.js +++ b/src/UIShell/index.js @@ -1,7 +1,6 @@ export { default as Header } from "./GlobalHeader/Header.svelte"; export { default as HeaderAction } from "./GlobalHeader/HeaderAction.svelte"; export { default as HeaderActionLink } from "./GlobalHeader/HeaderActionLink.svelte"; -export { default as HeaderActionSearch } from "./GlobalHeader/HeaderActionSearch.svelte"; export { default as HeaderNav } from "./GlobalHeader/HeaderNav.svelte"; export { default as HeaderNavItem } from "./GlobalHeader/HeaderNavItem.svelte"; export { default as HeaderNavMenu } from "./GlobalHeader/HeaderNavMenu.svelte"; diff --git a/src/UIShell/searchStore.js b/src/UIShell/searchStore.js deleted file mode 100644 index c013bbfa..00000000 --- a/src/UIShell/searchStore.js +++ /dev/null @@ -1,58 +0,0 @@ -import { writable } from "svelte/store"; - -const data = [ - { - href: "#", - title: "Test title search 1", - menu: "Test menu 1", - description: "This is a description for seach #1", - }, - { - href: "#", - title: "Changing text to simulate search", - menu: "Test menu 2", - description: "This is a description for seach #2", - }, - { - href: "#", - title: "More testing texts", - menu: "Test menu 3", - description: "This is a description for seach #3", - }, - { - href: "#", - title: "We can find here another test text", - menu: "Test menu 4", - description: "This is a description for seach #4", - }, -]; - -const globalStore = writable(undefined); - -const store = { - subscribe: globalStore.subscribe, - search: (searchString) => { - if (searchString.length > 1) { - let resultSearch = []; - - data.forEach((item) => { - if (item.title.toLowerCase().includes(searchString.toLowerCase())) { - resultSearch.push(item); - } - }); - - if (resultSearch.length > 0) { - globalStore.set(resultSearch); - } else { - globalStore.set(undefined); - } - } else { - globalStore.set(undefined); - } - }, - clear: () => { - globalStore.set(undefined); - }, -}; - -export default store; diff --git a/src/index.js b/src/index.js index d6f040b3..29a42b44 100644 --- a/src/index.js +++ b/src/index.js @@ -54,7 +54,6 @@ export { FormGroup } from "./FormGroup"; export { FormItem } from "./FormItem"; export { FormLabel } from "./FormLabel"; export { Grid, Row, Column } from "./Grid"; -export { Icon, IconSkeleton } from "./Icon"; export { ImageLoader } from "./ImageLoader"; export { InlineLoading } from "./InlineLoading"; export { Link, OutboundLink } from "./Link"; @@ -77,7 +76,6 @@ export { NotificationActionButton, NotificationButton, NotificationIcon, - NotificationTextDetails, } from "./Notification"; export { NumberInput, NumberInputSkeleton } from "./NumberInput"; export { OrderedList } from "./OrderedList"; @@ -123,7 +121,6 @@ export { } from "./Tile"; export { TimePicker, TimePickerSelect } from "./TimePicker"; export { Toggle, ToggleSkeleton } from "./Toggle"; -export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall"; export { Tooltip, TooltipFooter } from "./Tooltip"; export { TooltipDefinition } from "./TooltipDefinition"; export { TooltipIcon } from "./TooltipIcon"; @@ -133,7 +130,6 @@ export { Header, HeaderAction, HeaderActionLink, - HeaderActionSearch, HeaderNav, HeaderNavItem, HeaderNavMenu, diff --git a/tests/Button.test.svelte b/tests/Button.test.svelte index 5778fcb2..a2bc6ed9 100644 --- a/tests/Button.test.svelte +++ b/tests/Button.test.svelte @@ -21,7 +21,6 @@