mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 20:33:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: update examples to use icons from carbon-icons-svelte@11

Browse source
This commit is contained in:
Eric Liu 2022-04-03 11:51:07 -07:00
commit 5f4864755f
29 changed files with 116 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -219,8 +219,8 @@ The preprocessor optimizes imports from the following packages:
- import { Add16 } from "carbon-icons-svelte"; - import { Add16 } from "carbon-icons-svelte";
- import { Airplane } from "carbon-pictograms-svelte"; - import { Airplane } from "carbon-pictograms-svelte";
+ import Button from "carbon-components-svelte/src/Button/Button.svelte"; + import Button from "carbon-components-svelte/src/Button/Button.svelte";
+ import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte"; + import Add16 from "carbon-icons-svelte/lib/Add16.svelte";
+ import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte"; + import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
``` ```
#### Usage #### Usage

2
docs/package.json
View file

@ -12,7 +12,7 @@
"@sveltech/routify": "^1.9.10", "@sveltech/routify": "^1.9.10",
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.40", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.40",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"carbon-icons-svelte": "^10.45.1", "carbon-icons-svelte": "^11.0.1",
"clipboard-copy": "^4.0.1", "clipboard-copy": "^4.0.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"mdsvex": "^0.9.8", "mdsvex": "^0.9.8",

4
docs/src/components/Preview.svelte
View file

@ -6,7 +6,7 @@
import copy from "clipboard-copy"; import copy from "clipboard-copy";
import { CodeSnippet, Button } from "carbon-components-svelte"; 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 { url } from "@sveltech/routify";
import { theme } from "../store"; import { theme } from "../store";
@ -27,7 +27,7 @@
target="_blank" target="_blank"
size="field" size="field"
href="{themedSrcUrl}" href="{themedSrcUrl}"
icon="{Launch16}" icon="{Launch}"
> >
Open in new tab Open in new tab
</Button> </Button>

9
docs/src/components/TileCard.svelte
View file

@ -6,8 +6,8 @@
export let borderBottom = false; export let borderBottom = false;
import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte"; import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32"; import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
import Launch20 from "carbon-icons-svelte/lib/Launch20"; import Launch from "carbon-icons-svelte/lib/Launch.svelte";
$: tileComponent = href ? ClickableTile : Tile; $: tileComponent = href ? ClickableTile : Tile;
</script> </script>
@ -29,10 +29,11 @@
</div> </div>
<div class="card-footer"> <div class="card-footer">
<svelte:component <svelte:component
this="{LogoGithub32}" this="{LogoGithub}"
size="{32}"
style="fill: var(--cds-icon-01)" style="fill: var(--cds-icon-01)"
/> />
<Launch20 style="fill: var(--cds-icon-01)" /> <Launch size="{20}" style="fill: var(--cds-icon-01)" />
</div> </div>
</div> </div>
</svelte:component> </svelte:component>

4
docs/src/layouts/ComponentLayout.svelte
View file

@ -13,7 +13,7 @@
Tab, Tab,
TabContent, TabContent,
} from "carbon-components-svelte"; } 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 { page, metatags } from "@sveltech/routify";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { theme } from "../store"; import { theme } from "../store";
@ -71,7 +71,7 @@
target="_blank" target="_blank"
size="field" size="field"
href="{sourceCode}" href="{sourceCode}"
icon="{Code16}" icon="{Code}"
> >
Source code Source code
</Button> </Button>

4
docs/src/pages/_layout.svelte
View file

@ -15,7 +15,7 @@
SideNavMenuItem, SideNavMenuItem,
Tag, Tag,
} from "carbon-components-svelte"; } 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"; import Theme from "../components/Theme.svelte";
const deprecated = []; const deprecated = [];
@ -58,7 +58,7 @@
<HeaderUtilities> <HeaderUtilities>
<HeaderActionLink <HeaderActionLink
icon="{LogoGithub20}" icon="{LogoGithub}"
href="https://github.com/carbon-design-system/carbon-components-svelte" href="https://github.com/carbon-design-system/carbon-components-svelte"
target="_blank" target="_blank"
/> />

22
docs/src/pages/components/Button.svx
View file

@ -1,11 +1,11 @@
<script> <script>
import { InlineNotification, Button } from "carbon-components-svelte"; import { InlineNotification, Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16"; import Add from "carbon-icons-svelte/lib/Add.svelte";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16"; import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16"; import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16"; import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16"; import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
import Login16 from "carbon-icons-svelte/lib/Login16"; import Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
let index = 1; let index = 1;
@ -43,7 +43,7 @@
</div> </div>
</InlineNotification> </InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} /> <Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
### Danger ghost button ### Danger ghost button
@ -51,7 +51,7 @@
### Button with icon ### Button with icon
<Button icon={Add16}>With icon</Button> <Button icon={Add}>With icon</Button>
### Icon-only button ### Icon-only button
@ -61,17 +61,17 @@
</div> </div>
</InlineNotification> </InlineNotification>
<Button iconDescription="Tooltip text" icon={Add16} /> <Button iconDescription="Tooltip text" icon={Add} />
### Icon-only, link button ### Icon-only, link button
<Button iconDescription="Login" icon={Login16} href="#" /> <Button iconDescription="Login" icon={Login} href="#" />
### Icon-only button (custom tooltip position) ### Icon-only button (custom tooltip position)
The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`. The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} /> <Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />
### Selected icon-only, ghost button ### Selected icon-only, ghost button

4
docs/src/pages/components/ButtonSet.svx
View file

@ -4,7 +4,7 @@ source: Button/ButtonSet.svelte
<script> <script>
import { Button, ButtonSet } from "carbon-components-svelte"; import { Button, ButtonSet } from "carbon-components-svelte";
import Login16 from "carbon-icons-svelte/lib/Login16"; import Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -22,6 +22,6 @@ Buttons in a button set are juxtaposed by default.
Set `stacked` to `true` to use the stacked variant. Set `stacked` to `true` to use the stacked variant.
<ButtonSet stacked> <ButtonSet stacked>
<Button icon={Login16}>Log in</Button> <Button icon={Login}>Log in</Button>
<Button kind="ghost">Sign up</Button> <Button kind="ghost">Sign up</Button>
</ButtonSet> </ButtonSet>

8
docs/src/pages/components/ContentSwitcher.svx
View file

@ -4,8 +4,8 @@ components: ["ContentSwitcher", "Switch"]
<script> <script>
import { ContentSwitcher, Switch } from "carbon-components-svelte"; import { ContentSwitcher, Switch } from "carbon-components-svelte";
import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16"; import Bullhorn from "carbon-icons-svelte/lib/Bullhorn.svelte";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16"; import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -33,12 +33,12 @@ components: ["ContentSwitcher", "Switch"]
<ContentSwitcher> <ContentSwitcher>
<Switch> <Switch>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<Bullhorn16 style="margin-right: 0.5rem;" /> Latest news <Bullhorn style="margin-right: 0.5rem;" /> Latest news
</div> </div>
</Switch> </Switch>
<Switch> <Switch>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<Analytics16 style="margin-right: 0.5rem;" /> Trending <Analytics style="margin-right: 0.5rem;" /> Trending
</div> </div>
</Switch> </Switch>
</ContentSwitcher> </ContentSwitcher>

4
docs/src/pages/components/DataTable.svx
View file

@ -4,7 +4,7 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
<script> <script>
import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte"; import { InlineNotification, DataTable, DataTableSkeleton, Pagination, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16"; import Launch from "carbon-icons-svelte/lib/Launch.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
const pagination = { pageSize: 5, page: 1} const pagination = { pageSize: 5, page: 1}
@ -146,7 +146,7 @@ The slot name for the table header cells is `"cell-header"`.
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="cell" let:row let:cell> <svelte:fragment slot="cell" let:row let:cell>
{#if cell.key === 'rule' && cell.value === 'Round robin'} {#if cell.key === 'rule' && cell.value === 'Round robin'}
<Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link> <Link icon={Launch} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
{:else} {:else}
{cell.value} {cell.value}
{/if} {/if}

4
docs/src/pages/components/Link.svx
View file

@ -4,7 +4,7 @@ components: ["Link", "OutboundLink"]
<script> <script>
import { Link, OutboundLink } from "carbon-components-svelte"; import { Link, OutboundLink } from "carbon-components-svelte";
import Carbon16 from "carbon-icons-svelte/lib/Carbon16" import Carbon from "carbon-icons-svelte/lib/Carbon.svelte"
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -39,7 +39,7 @@ Note that `inline` must be `false` when rendering a link with an icon.
<div> <div>
Visit the Visit the
<Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>. <Link href="https://www.carbondesignsystem.com/" icon={Carbon}>Carbon Design System</Link>.
</div> </div>
### Large size ### Large size

4
docs/src/pages/components/OverflowMenu.svx
View file

@ -4,7 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<script> <script>
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte"; import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16"; import Add from "carbon-icons-svelte/lib/Add.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -68,7 +68,7 @@ By default, the first overflow menu item is focused when opening the dropdown.
### Custom trigger icon ### Custom trigger icon
<OverflowMenu icon={Add16}> <OverflowMenu icon={Add}>
<OverflowMenuItem text="Manage credentials" /> <OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" /> <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" /> <OverflowMenuItem danger text="Delete service" />

2
docs/src/pages/components/Search.svx
View file

@ -1,5 +1,5 @@
<script> <script>
import Query16 from "carbon-icons-svelte/lib/Query16"; import Query from "carbon-icons-svelte/lib/Query.svelte";
import { Search } from "carbon-components-svelte"; import { Search } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>

2
docs/src/pages/components/StructuredList.svx
View file

@ -4,7 +4,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
<script> <script>
import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte"; import { StructuredList, StructuredListSkeleton, StructuredListBody, StructuredListHead, StructuredListCell ,StructuredListRow, StructuredListInput } from "carbon-components-svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16"; import CheckmarkFilled from "carbon-icons-svelte/lib/CheckmarkFilled.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>

4
docs/src/pages/components/Tag.svx
View file

@ -1,6 +1,6 @@
<script> <script>
import { Tag } from "carbon-components-svelte"; import { Tag } from "carbon-components-svelte";
import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16"; import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -43,7 +43,7 @@
Note: rendering a custom icon cannnot be used with the filterable variant. Note: rendering a custom icon cannnot be used with the filterable variant.
<Tag icon={IbmCloud16}>IBM Cloud</Tag> <Tag icon={IbmCloud}>IBM Cloud</Tag>
### Interactive variant ### Interactive variant

4
docs/src/pages/components/Tooltip.svx
View file

@ -4,7 +4,7 @@ components: ["Tooltip", "TooltipFooter"]
<script> <script>
import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte"; import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte";
import Catalog16 from "carbon-icons-svelte/lib/Catalog16"; import Catalog from "carbon-icons-svelte/lib/Catalog.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -57,7 +57,7 @@ By default, the tooltip is triggered by an information icon.
### Custom icon (component) ### Custom icon (component)
<Tooltip triggerText="Resource list" icon={Catalog16}> <Tooltip triggerText="Resource list" icon={Catalog}>
<p> <p>
Resources are provisioned based on your account's organization. Resources are provisioned based on your account's organization.
</p> </p>

18
docs/src/pages/components/TooltipIcon.svx
View file

@ -1,29 +1,29 @@
<script> <script>
import { TooltipIcon } from "carbon-components-svelte"; import { TooltipIcon } from "carbon-components-svelte";
import Carbon24 from "carbon-icons-svelte/lib/Carbon24"; import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
import Filter20 from "carbon-icons-svelte/lib/Filter20"; import Filter from "carbon-icons-svelte/lib/Filter.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
### Default ("bottom" direction, "center" aligned) ### Default ("bottom" direction, "center" aligned)
<TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} /> <TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
### Directions ### Directions
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} /> <TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} /> <TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} /> <TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} /> <TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter} />
### Custom tooltip text ### Custom tooltip text
Use the "text" slot to customize the tooltip text. Use the "text" slot to customize the tooltip text.
<TooltipIcon icon={Carbon24}> <TooltipIcon icon={Carbon}>
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span> <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
</TooltipIcon> </TooltipIcon>
### Disabled ### Disabled
<TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon24} /> <TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />

12
docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
View file

@ -1,8 +1,8 @@
<script> <script>
import { Button } from "carbon-components-svelte"; import { Button } from "carbon-components-svelte";
import TextBold16 from "carbon-icons-svelte/lib/TextBold16"; import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16"; import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16"; import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
let index = 1; let index = 1;
</script> </script>
@ -11,20 +11,20 @@
isSelected="{index === 0}" isSelected="{index === 0}"
kind="ghost" kind="ghost"
iconDescription="Bold" iconDescription="Bold"
icon="{TextBold16}" icon="{TextBold}"
on:click="{() => (index = 0)}" on:click="{() => (index = 0)}"
/> />
<Button <Button
isSelected="{index === 1}" isSelected="{index === 1}"
kind="ghost" kind="ghost"
iconDescription="Italicize" iconDescription="Italicize"
icon="{TextItalic16}" icon="{TextItalic}"
on:click="{() => (index = 1)}" on:click="{() => (index = 1)}"
/> />
<Button <Button
isSelected="{index === 2}" isSelected="{index === 2}"
kind="ghost" kind="ghost"
iconDescription="Underline" iconDescription="Underline"
icon="{TextUnderline16}" icon="{TextUnderline}"
on:click="{() => (index = 2)}" on:click="{() => (index = 2)}"
/> />

13
docs/src/pages/framed/ContextMenu/ContextMenu.svelte
View file

@ -5,8 +5,8 @@
ContextMenuGroup, ContextMenuGroup,
ContextMenuOption, ContextMenuOption,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16"; import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut16 from "carbon-icons-svelte/lib/Cut16"; import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let selectedIds = []; let selectedIds = [];
@ -18,14 +18,9 @@
indented indented
labelText="Copy" labelText="Copy"
shortcutText="⌘C" shortcutText="⌘C"
icon="{CopyFile16}" icon="{CopyFile}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
/> />
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options" bind:selectedIds> <ContextMenuGroup labelText="Export options" bind:selectedIds>

13
docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
View file

@ -5,8 +5,8 @@
ContextMenuGroup, ContextMenuGroup,
ContextMenuOption, ContextMenuOption,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16"; import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut16 from "carbon-icons-svelte/lib/Cut16"; import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let target; let target;
</script> </script>
@ -16,14 +16,9 @@
indented indented
labelText="Copy" labelText="Copy"
shortcutText="⌘C" shortcutText="⌘C"
icon="{CopyFile16}" icon="{CopyFile}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
/> />
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options"> <ContextMenuGroup labelText="Export options">

13
docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
View file

@ -5,8 +5,8 @@
ContextMenuGroup, ContextMenuGroup,
ContextMenuOption, ContextMenuOption,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import CopyFile16 from "carbon-icons-svelte/lib/CopyFile16"; import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut16 from "carbon-icons-svelte/lib/Cut16"; import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let target; let target;
let target2; let target2;
@ -20,14 +20,9 @@
indented indented
labelText="Copy" labelText="Copy"
shortcutText="⌘C" shortcutText="⌘C"
icon="{CopyFile16}" icon="{CopyFile}"
/>
<ContextMenuOption
indented
labelText="Cut"
shortcutText="⌘X"
icon="{Cut16}"
/> />
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options"> <ContextMenuGroup labelText="Export options">

4
docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
View file

@ -9,7 +9,7 @@
ToolbarBatchActions, ToolbarBatchActions,
Button, Button,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import Save16 from "carbon-icons-svelte/lib/Save16"; import Save from "carbon-icons-svelte/lib/Save.svelte";
const headers = [ const headers = [
{ key: "name", value: "Name" }, { key: "name", value: "Name" },
@ -34,7 +34,7 @@
<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}"> <DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
<Toolbar> <Toolbar>
<ToolbarBatchActions> <ToolbarBatchActions>
<Button icon="{Save16}">Save</Button> <Button icon="{Save}">Save</Button>
</ToolbarBatchActions> </ToolbarBatchActions>
<ToolbarContent> <ToolbarContent>
<ToolbarSearch /> <ToolbarSearch />

4
docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
View file

@ -1,13 +1,13 @@
<script> <script>
import { Modal } from "carbon-components-svelte"; import { Modal } from "carbon-components-svelte";
import Send16 from "carbon-icons-svelte/lib/Send16"; import Send from "carbon-icons-svelte/lib/Send.svelte";
</script> </script>
<Modal <Modal
open open
modalHeading="Invite someone" modalHeading="Invite someone"
primaryButtonText="Send invitation" primaryButtonText="Send invitation"
primaryButtonIcon="{Send16}" primaryButtonIcon="{Send}"
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
> >
<p>Do you really want to invite someone?</p> <p>Do you really want to invite someone?</p>

44
docs/src/pages/framed/TreeView/TreeViewIcons.svelte
View file

@ -1,76 +1,74 @@
<script> <script>
import { TreeView } from "carbon-components-svelte"; import { TreeView } from "carbon-components-svelte";
import WatsonMachineLearning16 from "carbon-icons-svelte/lib/WatsonMachineLearning16"; import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16"; import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";
import Blockchain16 from "carbon-icons-svelte/lib/Blockchain16"; import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";
import DataBase16 from "carbon-icons-svelte/lib/DataBase16"; import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";
import SignalStrength16 from "carbon-icons-svelte/lib/SignalStrength16"; import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";
let activeId = 1; let activeId = 1;
let selectedIds = []; let selectedIds = [];
let children = [ let children = [
{ id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning16 }, { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },
{ {
id: 1, id: 1,
text: "Analytics", text: "Analytics",
icon: Analytics16, icon: Analytics,
expanded: true, expanded: true,
children: [ children: [
{ {
id: 2, id: 2,
text: "IBM Analytics Engine", text: "IBM Analytics Engine",
icon: Analytics16, icon: Analytics,
expanded: true, expanded: true,
children: [ children: [
{ id: 3, text: "Apache Spark", icon: Analytics16 }, { id: 3, text: "Apache Spark", icon: Analytics },
{ id: 4, text: "Hadoop", icon: Analytics16 }, { id: 4, text: "Hadoop", icon: Analytics },
], ],
}, },
{ id: 5, text: "IBM Cloud SQL Query", icon: Analytics16 }, { id: 5, text: "IBM Cloud SQL Query", icon: Analytics },
{ id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics16 }, { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics },
], ],
}, },
{ {
id: 7, id: 7,
text: "Blockchain", text: "Blockchain",
icon: Blockchain16, icon: Blockchain,
children: [ children: [{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain }],
{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain16 },
],
}, },
{ {
id: 9, id: 9,
text: "Databases", text: "Databases",
icon: DataBase16, icon: DataBase,
children: [ children: [
{ {
id: 10, id: 10,
text: "IBM Cloud Databases for Elasticsearch", text: "IBM Cloud Databases for Elasticsearch",
icon: DataBase16, icon: DataBase,
}, },
{ {
id: 11, id: 11,
text: "IBM Cloud Databases for Enterprise DB", text: "IBM Cloud Databases for Enterprise DB",
icon: DataBase16, icon: DataBase,
}, },
{ id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase16 }, { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase },
{ {
id: 13, id: 13,
text: "IBM Cloud Databases for PostgreSQL", text: "IBM Cloud Databases for PostgreSQL",
icon: DataBase16, icon: DataBase,
}, },
], ],
}, },
{ {
id: 14, id: 14,
text: "Integration", text: "Integration",
icon: SignalStrength16, icon: SignalStrength,
disabled: true, disabled: true,
children: [ children: [
{ {
id: 15, id: 15,
text: "IBM API Connect", text: "IBM API Connect",
icon: SignalStrength16, icon: SignalStrength,
disabled: true, disabled: true,
}, },
], ],

12
docs/src/pages/framed/UIShell/HeaderNavRail.svelte
View file

@ -16,7 +16,7 @@
Row, Row,
Column, Column,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import Fade16 from "carbon-icons-svelte/lib/Fade16"; import Fade from "carbon-icons-svelte/lib/Fade.svelte";
let isSideNavOpen = false; let isSideNavOpen = false;
</script> </script>
@ -39,16 +39,16 @@
<SideNav bind:isOpen="{isSideNavOpen}" rail> <SideNav bind:isOpen="{isSideNavOpen}" rail>
<SideNavItems> <SideNavItems>
<SideNavLink icon="{Fade16}" text="Link 1" href="/" isSelected /> <SideNavLink icon="{Fade}" text="Link 1" href="/" isSelected />
<SideNavLink icon="{Fade16}" text="Link 2" href="/" /> <SideNavLink icon="{Fade}" text="Link 2" href="/" />
<SideNavLink icon="{Fade16}" text="Link 3" href="/" /> <SideNavLink icon="{Fade}" text="Link 3" href="/" />
<SideNavMenu icon="{Fade16}" text="Menu"> <SideNavMenu icon="{Fade}" text="Menu">
<SideNavMenuItem href="/" text="Link 1" /> <SideNavMenuItem href="/" text="Link 1" />
<SideNavMenuItem href="/" text="Link 2" /> <SideNavMenuItem href="/" text="Link 2" />
<SideNavMenuItem href="/" text="Link 3" /> <SideNavMenuItem href="/" text="Link 3" />
</SideNavMenu> </SideNavMenu>
<SideNavDivider /> <SideNavDivider />
<SideNavLink icon="{Fade16}" text="Link 4" href="/" /> <SideNavLink icon="{Fade}" text="Link 4" href="/" />
</SideNavItems> </SideNavItems>
</SideNav> </SideNav>
</Header> </Header>

10
docs/src/pages/framed/UIShell/HeaderUtilities.svelte
View file

@ -18,8 +18,8 @@
Row, Row,
Column, Column,
} from "carbon-components-svelte"; } from "carbon-components-svelte";
import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20"; import SettingsAdjust from "carbon-icons-svelte/lib/SettingsAdjust.svelte";
import UserAvatarFilledAlt20 from "carbon-icons-svelte/lib/UserAvatarFilledAlt20"; import UserAvatarFilledAlt from "carbon-icons-svelte/lib/UserAvatarFilledAlt.svelte";
let isSideNavOpen = false; let isSideNavOpen = false;
let isOpen1 = false; let isOpen1 = false;
@ -31,11 +31,11 @@
<SkipToContent /> <SkipToContent />
</svelte:fragment> </svelte:fragment>
<HeaderUtilities> <HeaderUtilities>
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" /> <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
<HeaderAction <HeaderAction
bind:isOpen="{isOpen1}" bind:isOpen="{isOpen1}"
icon="{UserAvatarFilledAlt20}" icon="{UserAvatarFilledAlt}"
closeIcon="{UserAvatarFilledAlt20}" closeIcon="{UserAvatarFilledAlt}"
> >
<HeaderPanelLinks> <HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider> <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>

6
docs/src/pages/framed/_reset.svelte
View file

@ -22,7 +22,11 @@
padding: var(--cds-spacing-06) var(--cds-spacing-05); 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); outline: 1px solid var(--cds-interactive-04);
} }
:global(.framed .bx--content [class^="bx--col"]) {
outline: 0;
}
</style> </style>

8
docs/yarn.lock
View file

@ -185,10 +185,10 @@ carbon-components-svelte@../:
dependencies: dependencies:
flatpickr "4.6.9" flatpickr "4.6.9"
carbon-icons-svelte@^10.45.1: carbon-icons-svelte@^11.0.1:
version "10.45.1" version "11.0.1"
resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.45.1.tgz#210b8d8906bbdc4611dbc06f1030bca26169c2d9" resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-11.0.1.tgz#65b09832e9e0fa899d631564323e92e6ab878930"
integrity sha512-Uz3byPkSBzjpvLmjt/ZWYJkQG1omfqKh1vzF1FeFYOYqbGOCwc4sHbyF8oet2CseT2cECn1BbEyY4yWvlWYd/w== integrity sha512-0CCJLmHW3yJ8T9DM2HNGQx304b2VLGY13Xeg6T1cJWeU2oTPIvBbTfveChIULBBI9FIFGLB9m8ZZgeYWEjAAew==
caseless@~0.12.0: caseless@~0.12.0:
version "0.12.0" version "0.12.0"

2
src/UIShell/HeaderActionLink.svelte
View file

@ -27,7 +27,7 @@
{...$$restProps} {...$$restProps}
> >
<slot name="icon"> <slot name="icon">
<svelte:component this="{icon}" /> <svelte:component this="{icon}" size="{20}" />
</slot> </slot>
</a> </a>