mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
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:
parent
755a8aa5bc
commit
ba58ba8f00
176 changed files with 1410 additions and 2487 deletions
|
@ -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)}"
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
],
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue