refactor: use icons from carbon-icons-svelte@11 (#1227)

* chore: update ignore rules, remove unused files

* refactor(icons): use icons from carbon-icons-svelte@11

* docs(time-picker): fix default value

* chore: upgrade carbon-icons-svelte to v11

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

* docs: update number of icons [ci skip]
This commit is contained in:
metonym 2022-04-03 11:57:28 -07:00 committed by GitHub
commit ba58ba8f00
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
176 changed files with 1410 additions and 2487 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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 @@
<SkipToContent />
</svelte:fragment>
<HeaderUtilities>
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
<HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
<HeaderAction
bind:isOpen="{isOpen1}"
icon="{UserAvatarFilledAlt20}"
closeIcon="{UserAvatarFilledAlt20}"
icon="{UserAvatarFilledAlt}"
closeIcon="{UserAvatarFilledAlt}"
>
<HeaderPanelLinks>
<HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>

View file

@ -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;
}
</style>