diff --git a/.gitignore b/.gitignore index c1cc781f..b2ffe612 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,5 @@ -/coverage -/lib -/node_modules +lib +node_modules .DS_Store -yarn-debug.log* -yarn-error.log* -*.tgz .vscode -.idea +.idea \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index 89e9c684..1c6fcf28 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,9 +1,9 @@ -/coverage /lib /css -/**/__sapper__ -/**/.routify -/**/dist -/**/client -/**/build +__sapper__ +.svelte-kit +.routify +dist +client +build *.svx \ No newline at end of file diff --git a/CODEOWNERS b/CODEOWNERS deleted file mode 100644 index e69de29b..00000000 diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 989b3da3..184beca6 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1564,8 +1564,8 @@ None. | platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | | persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu | | expansionBreakpoint | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 | -| iconMenu | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state
Defaults to `Menu20` | -| iconClose | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state
Defaults to `Close20` | +| iconMenu | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.
Defaults to `<Menu size={20} />` | +| iconClose | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.
Defaults to `<Close size={20} />` | ### Slots @@ -1589,19 +1589,19 @@ None. | :--------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | | ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | isOpen | let | Yes | boolean | false | Set to `true` to open the panel | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| closeIcon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open | +| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.
Defaults to `<Switcher size={20} />` | +| closeIcon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.
Defaults to `<Close size={20} />` | | text | let | No | string | undefined | Specify the text
Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) | | transition | let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).
Set to `false` to disable the transition | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :---------------------------------------------------------- | -| -- | Yes | -- | -- | -| closeIcon | No | -- | <svelte:component this="{closeIcon}" /> | -| icon | No | -- | <svelte:component this="{icon}" /> | -| text | No | -- | {#if text}<span>{text}</span>{/if} | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :--------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| closeIcon | No | -- | <svelte:component this="{closeIcon}" size="{20}" /> | +| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> | +| text | No | -- | {#if text}<span>{text}</span>{/if} | ### Events @@ -1623,9 +1623,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :---------------------------------------------------- | -| icon | No | -- | <svelte:component this="{icon}" /> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :---------------------------------------------------------------- | +| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> | ### Events @@ -2568,20 +2568,20 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | -| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | -| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | -| icon | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| open | let | Yes | boolean | false | Set to `true` to open the menu | -| size | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu | -| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| flipped | let | No | boolean | false | Set to `true` to flip the menu relative to the button | -| menuOptionsClass | let | No | string | undefined | Specify the menu options class | -| iconClass | let | No | string | undefined | Specify the icon class | -| iconDescription | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- | +| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | +| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | +| icon | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<OverflowMenuVertical />` | +| open | let | Yes | boolean | false | Set to `true` to open the menu | +| size | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu | +| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| flipped | let | No | boolean | false | Set to `true` to flip the menu relative to the button | +| menuOptionsClass | let | No | string | undefined | Specify the menu options class | +| iconClass | let | No | string | undefined | Specify the icon class | +| iconDescription | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots @@ -3055,24 +3055,24 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | -| 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 | -| 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 | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the search input | -| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | -| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | -| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | -| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | -| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | -| labelText | let | No | string | "" | Specify the label text | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- | +| 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 | +| 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 | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the search input | +| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | +| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | +| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | +| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | +| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | +| labelText | let | No | string | "" | Specify the label text | +| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<Search />` | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots @@ -4490,22 +4490,22 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | -| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | -| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the tooltip | -| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | -| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | -| hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button
Icon size must be 16px (e.g., `Add16`, `Task16`) | -| iconDescription | let | No | string | "" | Specify the ARIA label for the tooltip button | -| iconName | let | No | string | "" | Specify the icon name attribute | -| tabindex | let | No | string | "0" | Set the button tabindex | -| tooltipId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | -| triggerId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | -| triggerText | let | No | string | "" | Set the tooltip button text | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | +| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | +| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the tooltip | +| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | +| hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon | +| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to `<Information />` | +| iconDescription | let | No | string | "" | Specify the ARIA label for the tooltip button | +| iconName | let | No | string | "" | Specify the icon name attribute | +| tabindex | let | No | string | "0" | Set the button tabindex | +| tooltipId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | +| triggerId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | +| triggerText | let | No | string | "" | Set the tooltip button text | ### Slots diff --git a/MAINTAINERS.md b/MAINTAINERS.md deleted file mode 100644 index c4690777..00000000 --- a/MAINTAINERS.md +++ /dev/null @@ -1 +0,0 @@ -# Maintainers diff --git a/README.md b/README.md index 7f54c1ff..d99c084e 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Design systems facilitate design and development through reuse, consistency, and The Carbon Svelte portfolio also includes: -- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 7000+ Carbon icons as Svelte components +- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 1900+ Carbon icons as Svelte components - **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon @@ -219,8 +219,8 @@ The preprocessor optimizes imports from the following packages: - import { Add16 } from "carbon-icons-svelte"; - import { Airplane } from "carbon-pictograms-svelte"; + import Button from "carbon-components-svelte/src/Button/Button.svelte"; -+ import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte"; -+ import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte"; ++ import Add16 from "carbon-icons-svelte/lib/Add16.svelte"; ++ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte"; ``` #### Usage diff --git a/docs/package.json b/docs/package.json index 5bdae259..7e3ecc42 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,7 +12,7 @@ "@sveltech/routify": "^1.9.10", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.40", "carbon-components-svelte": "../", - "carbon-icons-svelte": "^10.45.1", + "carbon-icons-svelte": "^11.0.1", "clipboard-copy": "^4.0.1", "cross-env": "^7.0.3", "mdsvex": "^0.9.8", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 6628b170..57d3a1e4 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -4053,8 +4053,8 @@ "moduleExports": [], "slots": [], "events": [ - { "type": "forwarded", "name": "click", "element": "Close16" }, - { "type": "forwarded", "name": "keydown", "element": "Close16" } + { "type": "forwarded", "name": "click", "element": "Close" }, + { "type": "forwarded", "name": "keydown", "element": "Close" } ], "typedefs": [], "rest_props": { "type": "InlineComponent", "name": "Loading" } @@ -4437,7 +4437,7 @@ { "name": "iconMenu", "kind": "let", - "description": "Specify the icon to render for the closed state\nDefaults to `Menu20`", + "description": "Specify the icon to render for the closed state.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -4447,7 +4447,7 @@ { "name": "iconClose", "kind": "let", - "description": "Specify the icon to render for the opened state\nDefaults to `Close20`", + "description": "Specify the icon to render for the opened state.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -4488,7 +4488,7 @@ { "name": "icon", "kind": "let", - "description": "Specify the icon to render", + "description": "Specify the icon to render when the action panel is closed.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -4498,7 +4498,7 @@ { "name": "closeIcon", "kind": "let", - "description": "Specify the icon to render when the action panel is open", + "description": "Specify the icon to render when the action panel is open.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -4544,13 +4544,13 @@ { "name": "closeIcon", "default": false, - "fallback": "", + "fallback": "", "slot_props": "{}" }, { "name": "icon", "default": false, - "fallback": "", + "fallback": "", "slot_props": "{}" }, { @@ -4619,7 +4619,7 @@ { "name": "icon", "default": false, - "fallback": "", + "fallback": "", "slot_props": "{}" } ], @@ -7371,7 +7371,7 @@ { "name": "icon", "kind": "let", - "description": "Specify the icon to render", + "description": "Specify the icon to render.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -9183,7 +9183,7 @@ { "name": "icon", "kind": "let", - "description": "Specify the icon to render", + "description": "Specify the icon to render.\nDefaults to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, @@ -12860,7 +12860,7 @@ { "name": "icon", "kind": "let", - "description": "Specify the icon to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)", + "description": "Specify the icon to render for the tooltip button.\nDefault to ``", "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte index f8d7d4f4..e4f19608 100644 --- a/docs/src/components/Preview.svelte +++ b/docs/src/components/Preview.svelte @@ -6,7 +6,7 @@ import copy from "clipboard-copy"; import { CodeSnippet, Button } from "carbon-components-svelte"; - import Launch16 from "carbon-icons-svelte/lib/Launch16"; + import Launch from "carbon-icons-svelte/lib/Launch.svelte"; import { url } from "@sveltech/routify"; import { theme } from "../store"; @@ -27,7 +27,7 @@ target="_blank" size="field" href="{themedSrcUrl}" - icon="{Launch16}" + icon="{Launch}" > Open in new tab 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} -
    +
    - +