From 21714d0e3a150cad9d0b516b862c12a6606b21f3 Mon Sep 17 00:00:00 2001 From: metonym Date: Sun, 27 Mar 2022 08:21:58 -0700 Subject: [PATCH 001/864] breaking: remove deprecated props and components (#1191) --- COMPONENT_INDEX.md | 187 +------- docs/src/COMPONENT_API.json | 418 +----------------- docs/src/pages/_layout.svelte | 2 +- docs/src/pages/components/Icon.svx | 28 -- docs/src/pages/components/ToggleSmall.svx | 34 -- .../CodeSnippet/DynamicCodeSnippet.svelte | 9 +- preprocess/api.json | 18 - src/Button/Button.svelte | 10 +- src/Button/ButtonSkeleton.svelte | 10 +- src/ContentSwitcher/ContentSwitcher.svelte | 7 - src/DataTable/Table.svelte | 8 - src/Icon/Icon.svelte | 41 -- src/Icon/IconSkeleton.svelte | 19 - src/Icon/index.js | 2 - .../NotificationTextDetails.svelte | 37 -- src/Notification/index.js | 1 - src/NumberInput/NumberInput.svelte | 236 ++++------ src/Pagination/Pagination.svelte | 2 - src/PaginationNav/PaginationNav.svelte | 2 - src/Search/Search.svelte | 9 +- src/Search/SearchSkeleton.svelte | 8 +- src/StructuredList/StructuredList.svelte | 7 - .../StructuredListSkeleton.svelte | 4 - src/TimePicker/TimePickerSelect.svelte | 9 +- src/ToggleSmall/ToggleSmall.svelte | 86 ---- src/ToggleSmall/ToggleSmallSkeleton.svelte | 54 --- src/ToggleSmall/index.js | 2 - .../GlobalHeader/HeaderActionSearch.svelte | 220 --------- src/UIShell/GlobalHeader/HeaderNav.svelte | 9 +- src/UIShell/index.js | 1 - src/UIShell/searchStore.js | 58 --- src/index.js | 4 - tests/Button.test.svelte | 1 - tests/ContentSwitcher.test.svelte | 44 +- tests/DataTable.test.svelte | 2 +- tests/NumberInput.test.svelte | 37 +- types/Button/Button.svelte.d.ts | 10 +- types/Button/ButtonSkeleton.svelte.d.ts | 5 - .../ContentSwitcher.svelte.d.ts | 6 - types/Copy/Copy.svelte.d.ts | 32 -- types/DataTable/Table.svelte.d.ts | 6 - types/Icon/Icon.svelte.d.ts | 34 -- types/Icon/IconSkeleton.svelte.d.ts | 25 -- .../NotificationTextDetails.svelte.d.ts | 37 -- types/NumberInput/NumberInput.svelte.d.ts | 6 - types/Search/Search.svelte.d.ts | 5 - types/Search/SearchSkeleton.svelte.d.ts | 5 - .../StructuredList/StructuredList.svelte.d.ts | 6 - .../StructuredListSkeleton.svelte.d.ts | 6 - types/TimePicker/TimePickerSelect.svelte.d.ts | 5 - types/ToggleSmall/ToggleSmall.svelte.d.ts | 66 --- .../ToggleSmallSkeleton.svelte.d.ts | 32 -- .../HeaderActionSearch.svelte.d.ts | 24 - .../GlobalHeader/HeaderNav.svelte.d.ts | 8 +- types/index.d.ts | 6 - 55 files changed, 127 insertions(+), 1823 deletions(-) delete mode 100644 docs/src/pages/components/Icon.svx delete mode 100644 docs/src/pages/components/ToggleSmall.svx delete mode 100644 src/Icon/Icon.svelte delete mode 100644 src/Icon/IconSkeleton.svelte delete mode 100644 src/Icon/index.js delete mode 100644 src/Notification/NotificationTextDetails.svelte delete mode 100644 src/ToggleSmall/ToggleSmall.svelte delete mode 100644 src/ToggleSmall/ToggleSmallSkeleton.svelte delete mode 100644 src/ToggleSmall/index.js delete mode 100644 src/UIShell/GlobalHeader/HeaderActionSearch.svelte delete mode 100644 src/UIShell/searchStore.js delete mode 100644 types/Copy/Copy.svelte.d.ts delete mode 100644 types/Icon/Icon.svelte.d.ts delete mode 100644 types/Icon/IconSkeleton.svelte.d.ts delete mode 100644 types/Notification/NotificationTextDetails.svelte.d.ts delete mode 100644 types/ToggleSmall/ToggleSmall.svelte.d.ts delete mode 100644 types/ToggleSmall/ToggleSmallSkeleton.svelte.d.ts delete mode 100644 types/UIShell/GlobalHeader/HeaderActionSearch.svelte.d.ts 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 @@ diff --git a/docs/src/components/TileCard.svelte b/docs/src/components/TileCard.svelte index 1e938b1c..bfdbf3eb 100644 --- a/docs/src/components/TileCard.svelte +++ b/docs/src/components/TileCard.svelte @@ -6,8 +6,8 @@ export let borderBottom = false; import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte"; - import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32"; - import Launch20 from "carbon-icons-svelte/lib/Launch20"; + import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte"; + import Launch from "carbon-icons-svelte/lib/Launch.svelte"; $: tileComponent = href ? ClickableTile : Tile; @@ -29,10 +29,11 @@
- +
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte index 1efd7692..3ffae9e5 100644 --- a/docs/src/layouts/ComponentLayout.svelte +++ b/docs/src/layouts/ComponentLayout.svelte @@ -13,7 +13,7 @@ Tab, TabContent, } from "carbon-components-svelte"; - import Code16 from "carbon-icons-svelte/lib/Code16"; + import Code from "carbon-icons-svelte/lib/Code.svelte"; import { page, metatags } from "@sveltech/routify"; import { onMount } from "svelte"; import { theme } from "../store"; @@ -71,7 +71,7 @@ target="_blank" size="field" href="{sourceCode}" - icon="{Code16}" + icon="{Code}" > Source code diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte index d5eb9632..672f44a3 100644 --- a/docs/src/pages/_layout.svelte +++ b/docs/src/pages/_layout.svelte @@ -15,7 +15,7 @@ SideNavMenuItem, Tag, } from "carbon-components-svelte"; - import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20"; + import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte"; import Theme from "../components/Theme.svelte"; const deprecated = []; @@ -58,7 +58,7 @@ diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx index 7edd934f..772dd77f 100644 --- a/docs/src/pages/components/Button.svx +++ b/docs/src/pages/components/Button.svx @@ -1,11 +1,11 @@ @@ -22,6 +22,6 @@ Buttons in a button set are juxtaposed by default. Set `stacked` to `true` to use the stacked variant. - + \ No newline at end of file diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx index fbd14f31..08632dcc 100644 --- a/docs/src/pages/components/ContentSwitcher.svx +++ b/docs/src/pages/components/ContentSwitcher.svx @@ -4,8 +4,8 @@ components: ["ContentSwitcher", "Switch"] @@ -33,12 +33,12 @@ components: ["ContentSwitcher", "Switch"]
- Latest news + Latest news
- Trending + Trending
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index 0df89167..495e3cfe 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -4,7 +4,7 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear @@ -39,7 +39,7 @@ Note that `inline` must be `false` when rendering a link with an icon.
Visit the - Carbon Design System. + Carbon Design System.
### Large size diff --git a/docs/src/pages/components/OverflowMenu.svx b/docs/src/pages/components/OverflowMenu.svx index 3b46d470..0dbe743c 100644 --- a/docs/src/pages/components/OverflowMenu.svx +++ b/docs/src/pages/components/OverflowMenu.svx @@ -4,7 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"] @@ -68,7 +68,7 @@ By default, the first overflow menu item is focused when opening the dropdown. ### Custom trigger icon - + diff --git a/docs/src/pages/components/Search.svx b/docs/src/pages/components/Search.svx index 631c992a..f03d10a0 100644 --- a/docs/src/pages/components/Search.svx +++ b/docs/src/pages/components/Search.svx @@ -1,5 +1,5 @@ diff --git a/docs/src/pages/components/StructuredList.svx b/docs/src/pages/components/StructuredList.svx index 56a8c2df..7ee6308a 100644 --- a/docs/src/pages/components/StructuredList.svx +++ b/docs/src/pages/components/StructuredList.svx @@ -4,7 +4,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", " diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx index 19008caf..23f0a41e 100644 --- a/docs/src/pages/components/Tag.svx +++ b/docs/src/pages/components/Tag.svx @@ -1,6 +1,6 @@ @@ -43,7 +43,7 @@ Note: rendering a custom icon cannnot be used with the filterable variant. -IBM Cloud +IBM Cloud ### Interactive variant diff --git a/docs/src/pages/components/TimePicker.svx b/docs/src/pages/components/TimePicker.svx index 822abd82..6bb9cb4a 100644 --- a/docs/src/pages/components/TimePicker.svx +++ b/docs/src/pages/components/TimePicker.svx @@ -10,11 +10,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"] ### Default - + - + @@ -23,11 +23,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"] ### Light variant - + - + @@ -36,11 +36,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"] ### Extra-large size - + - + @@ -49,11 +49,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"] ### Small size - + - + @@ -62,11 +62,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"] ### Invalid state - + - + @@ -76,11 +76,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"] ### Disabled state - + - + diff --git a/docs/src/pages/components/Tooltip.svx b/docs/src/pages/components/Tooltip.svx index 9b543861..c2905e6e 100644 --- a/docs/src/pages/components/Tooltip.svx +++ b/docs/src/pages/components/Tooltip.svx @@ -4,7 +4,7 @@ components: ["Tooltip", "TooltipFooter"] @@ -57,7 +57,7 @@ By default, the tooltip is triggered by an information icon. ### Custom icon (component) - +

Resources are provisioned based on your account's organization.

diff --git a/docs/src/pages/components/TooltipIcon.svx b/docs/src/pages/components/TooltipIcon.svx index 96500eac..6f545f60 100644 --- a/docs/src/pages/components/TooltipIcon.svx +++ b/docs/src/pages/components/TooltipIcon.svx @@ -1,29 +1,29 @@ ### Default ("bottom" direction, "center" aligned) - + ### Directions - - - - + + + + ### Custom tooltip text Use the "text" slot to customize the tooltip text. - + Carbon is an open source design system by IBM. ### Disabled - \ No newline at end of file + \ No newline at end of file diff --git a/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte b/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte index ca23da37..6ff0f983 100644 --- a/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte +++ b/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte @@ -1,8 +1,8 @@ @@ -11,20 +11,20 @@ isSelected="{index === 0}" kind="ghost" iconDescription="Bold" - icon="{TextBold16}" + icon="{TextBold}" on:click="{() => (index = 0)}" /> + diff --git a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte index 060384f9..e096c3aa 100644 --- a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte +++ b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte @@ -1,13 +1,13 @@

Do you really want to invite someone?

diff --git a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte index 04de81c3..465735a0 100644 --- a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte +++ b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte @@ -1,76 +1,74 @@ @@ -39,16 +39,16 @@ - - - - + + + + - + diff --git a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte index 439a95ce..3b6d5029 100644 --- a/docs/src/pages/framed/UIShell/HeaderUtilities.svelte +++ b/docs/src/pages/framed/UIShell/HeaderUtilities.svelte @@ -18,8 +18,8 @@ Row, Column, } from "carbon-components-svelte"; - import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20"; - import UserAvatarFilledAlt20 from "carbon-icons-svelte/lib/UserAvatarFilledAlt20"; + import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte"; + import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte"; let isSideNavOpen = false; let isOpen1 = false; @@ -31,11 +31,11 @@ - + Switcher subject 1 diff --git a/docs/src/pages/framed/_reset.svelte b/docs/src/pages/framed/_reset.svelte index 8695b114..01f1f834 100644 --- a/docs/src/pages/framed/_reset.svelte +++ b/docs/src/pages/framed/_reset.svelte @@ -22,7 +22,11 @@ padding: var(--cds-spacing-06) var(--cds-spacing-05); } - :global(.framed [class^="bx--col"]) { + :global(.framed :not(.bx--content) [class^="bx--col"]) { outline: 1px solid var(--cds-interactive-04); } + + :global(.framed .bx--content [class^="bx--col"]) { + outline: 0; + } diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte index 9a972512..5dc4726b 100644 --- a/docs/src/pages/index.svelte +++ b/docs/src/pages/index.svelte @@ -268,7 +268,7 @@ diff --git a/docs/yarn.lock b/docs/yarn.lock index 1e17a55d..b4f20dd1 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -185,10 +185,10 @@ carbon-components-svelte@../: dependencies: flatpickr "4.6.9" -carbon-icons-svelte@^10.45.1: - version "10.45.1" - resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.45.1.tgz#210b8d8906bbdc4611dbc06f1030bca26169c2d9" - integrity sha512-Uz3byPkSBzjpvLmjt/ZWYJkQG1omfqKh1vzF1FeFYOYqbGOCwc4sHbyF8oet2CseT2cECn1BbEyY4yWvlWYd/w== +carbon-icons-svelte@^11.0.1: + version "11.0.1" + resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-11.0.1.tgz#65b09832e9e0fa899d631564323e92e6ab878930" + integrity sha512-0CCJLmHW3yJ8T9DM2HNGQx304b2VLGY13Xeg6T1cJWeU2oTPIvBbTfveChIULBBI9FIFGLB9m8ZZgeYWEjAAew== caseless@~0.12.0: version "0.12.0" diff --git a/package.json b/package.json index 9d46ab94..46340300 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "autoprefixer": "^10.4.4", "carbon-components": "10.56.0", "carbon-components-10.47": "npm:carbon-components@10.47", - "carbon-icons-svelte": "^10.45.1", + "carbon-icons-svelte": "^11.0.1", "husky": "^4.3.8", "lint-staged": "^10.5.3", "postcss": "^8.4.12", diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte index da532cfb..e2f96cd2 100644 --- a/src/Accordion/AccordionItem.svelte +++ b/src/Accordion/AccordionItem.svelte @@ -15,7 +15,7 @@ export let iconDescription = "Expand/Collapse"; import { onMount, getContext } from "svelte"; - import ChevronRight16 from "../icons/ChevronRight16.svelte"; + import ChevronRight from "../icons/ChevronRight.svelte"; let initialDisabled = disabled; @@ -68,10 +68,7 @@ } }}" > - +
{title}
diff --git a/src/Accordion/AccordionSkeleton.svelte b/src/Accordion/AccordionSkeleton.svelte index bd798afc..770f0f44 100644 --- a/src/Accordion/AccordionSkeleton.svelte +++ b/src/Accordion/AccordionSkeleton.svelte @@ -17,7 +17,7 @@ /** Set to `false` to close the first accordion item */ export let open = true; - import ChevronRight16 from "../icons/ChevronRight16.svelte"; + import ChevronRight from "../icons/ChevronRight.svelte"; import SkeletonText from "../SkeletonText/SkeletonText.svelte"; @@ -41,7 +41,7 @@ class:bx--accordion__item--active="{true}" > - +
@@ -54,7 +54,7 @@ {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
  • - +
    • diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte index 1ab20730..23b569e8 100644 --- a/src/CodeSnippet/CodeSnippet.svelte +++ b/src/CodeSnippet/CodeSnippet.svelte @@ -89,7 +89,7 @@ export let ref = null; import { createEventDispatcher, tick, onMount } from "svelte"; - import ChevronDown16 from "../icons/ChevronDown16.svelte"; + import ChevronDown from "../icons/ChevronDown.svelte"; import Button from "../Button/Button.svelte"; import CopyButton from "../CopyButton/CopyButton.svelte"; import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte"; @@ -243,7 +243,7 @@ }}" > {expandText} - diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index ae0967f8..8c56ef8b 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -100,9 +100,9 @@ export let listRef = null; import { createEventDispatcher, afterUpdate, tick } from "svelte"; - import Checkmark16 from "../icons/Checkmark16.svelte"; - import WarningFilled16 from "../icons/WarningFilled16.svelte"; - import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte"; + import Checkmark from "../icons/Checkmark.svelte"; + import WarningFilled from "../icons/WarningFilled.svelte"; + import WarningAltFilled from "../icons/WarningAltFilled.svelte"; import ListBox from "../ListBox/ListBox.svelte"; import ListBoxField from "../ListBox/ListBoxField.svelte"; import ListBoxMenu from "../ListBox/ListBoxMenu.svelte"; @@ -314,10 +314,10 @@ }}" /> {#if invalid} - + {/if} {#if !invalid && warn} - {/if} @@ -368,7 +368,7 @@ {itemToString(item)} {#if selectedItem && selectedItem.id === item.id} - + {/if} {/each} diff --git a/src/ComposedModal/ModalHeader.svelte b/src/ComposedModal/ModalHeader.svelte index e2370bef..67d346ae 100644 --- a/src/ComposedModal/ModalHeader.svelte +++ b/src/ComposedModal/ModalHeader.svelte @@ -21,7 +21,7 @@ export let iconDescription = "Close"; import { getContext } from "svelte"; - import Close20 from "../icons/Close20.svelte"; + import Close from "../icons/Close.svelte"; const { closeModal, updateLabel } = getContext("ComposedModal"); @@ -57,6 +57,6 @@ on:click on:click="{closeModal}" > - +
    diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte index d67caa80..4a5f9800 100644 --- a/src/ContextMenu/ContextMenuOption.svelte +++ b/src/ContextMenu/ContextMenuOption.svelte @@ -50,8 +50,8 @@ import { onMount, getContext, createEventDispatcher, tick } from "svelte"; import ContextMenu from "./ContextMenu.svelte"; - import Checkmark16 from "../icons/Checkmark16.svelte"; - import CaretRight16 from "../icons/CaretRight16.svelte"; + import Checkmark from "../icons/Checkmark.svelte"; + import CaretRight from "../icons/CaretRight.svelte"; const dispatch = createEventDispatcher(); const ctx = getContext("ContextMenu"); @@ -145,7 +145,7 @@ if (selected) { if (ctxGroup) ctxGroup.addOption({ id }); - icon = Checkmark16; + icon = Checkmark; } else { icon = undefined; } @@ -158,7 +158,7 @@ if (selected) { if (ctxRadioGroup) ctxRadioGroup.setOption({ id }); - icon = Checkmark16; + icon = Checkmark; } else { icon = undefined; } @@ -253,7 +253,7 @@ {labelText} -
    +
    - +