From 5f4864755f20a77c562e7e05cd1363ca141edf14 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 3 Apr 2022 11:51:07 -0700 Subject: [PATCH] docs: update examples to use icons from carbon-icons-svelte@11 --- README.md | 4 +- docs/package.json | 2 +- docs/src/components/Preview.svelte | 4 +- docs/src/components/TileCard.svelte | 9 ++-- docs/src/layouts/ComponentLayout.svelte | 4 +- docs/src/pages/_layout.svelte | 4 +- docs/src/pages/components/Button.svx | 22 +++++----- docs/src/pages/components/ButtonSet.svx | 4 +- docs/src/pages/components/ContentSwitcher.svx | 8 ++-- docs/src/pages/components/DataTable.svx | 4 +- docs/src/pages/components/Link.svx | 4 +- docs/src/pages/components/OverflowMenu.svx | 4 +- docs/src/pages/components/Search.svx | 2 +- docs/src/pages/components/StructuredList.svx | 2 +- docs/src/pages/components/Tag.svx | 4 +- docs/src/pages/components/Tooltip.svx | 4 +- docs/src/pages/components/TooltipIcon.svx | 18 ++++---- .../Button/SelectedIconOnlyButton.svelte | 12 ++--- .../framed/ContextMenu/ContextMenu.svelte | 13 ++---- .../ContextMenu/ContextMenuTarget.svelte | 13 ++---- .../ContextMenu/ContextMenuTargets.svelte | 13 ++---- .../DataTableBatchSelectionToolbar.svelte | 4 +- .../framed/Modal/ModalButtonWithIcon.svelte | 4 +- .../framed/TreeView/TreeViewIcons.svelte | 44 +++++++++---------- .../pages/framed/UIShell/HeaderNavRail.svelte | 12 ++--- .../framed/UIShell/HeaderUtilities.svelte | 10 ++--- docs/src/pages/framed/_reset.svelte | 6 ++- docs/yarn.lock | 8 ++-- src/UIShell/HeaderActionLink.svelte | 2 +- 29 files changed, 116 insertions(+), 128 deletions(-) diff --git a/README.md b/README.md index 7f54c1ff..b221d1fb 100644 --- a/README.md +++ b/README.md @@ -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/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/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/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/src/UIShell/HeaderActionLink.svelte b/src/UIShell/HeaderActionLink.svelte index 3283b398..6993ac6e 100644 --- a/src/UIShell/HeaderActionLink.svelte +++ b/src/UIShell/HeaderActionLink.svelte @@ -27,7 +27,7 @@ {...$$restProps} > - +