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

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,11 +1,11 @@
<script>
import { InlineNotification, Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
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 Login16 from "carbon-icons-svelte/lib/Login16";
import Add from "carbon-icons-svelte/lib/Add.svelte";
import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
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";
import Login from "carbon-icons-svelte/lib/Login.svelte";
import Preview from "../../components/Preview.svelte";
let index = 1;
@ -43,7 +43,7 @@
</div>
</InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
### Danger ghost button
@ -51,7 +51,7 @@
### Button with icon
<Button icon={Add16}>With icon</Button>
<Button icon={Add}>With icon</Button>
### Icon-only button
@ -61,17 +61,17 @@
</div>
</InlineNotification>
<Button iconDescription="Tooltip text" icon={Add16} />
<Button iconDescription="Tooltip text" icon={Add} />
### Icon-only, link button
<Button iconDescription="Login" icon={Login16} href="#" />
<Button iconDescription="Login" icon={Login} href="#" />
### Icon-only button (custom tooltip position)
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

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

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

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

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

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

@ -4,7 +4,7 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
<script>
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";
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 slot="cell" let:row let:cell>
{#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}
{cell.value}
{/if}

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

@ -4,7 +4,7 @@ components: ["Link", "OutboundLink"]
<script>
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";
</script>
@ -39,7 +39,7 @@ Note that `inline` must be `false` when rendering a link with an icon.
<div>
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>
### Large size

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

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

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

@ -1,5 +1,5 @@
<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 Preview from "../../components/Preview.svelte";
</script>

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

@ -4,7 +4,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
<script>
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";
</script>

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

@ -1,6 +1,6 @@
<script>
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";
</script>
@ -43,7 +43,7 @@
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

24
docs/src/pages/components/TimePicker.svx
View file

@ -10,11 +10,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Default
<TimePicker labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -23,11 +23,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Light variant
<TimePicker light labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -36,11 +36,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Extra-large size
<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -49,11 +49,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Small size
<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -62,11 +62,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Invalid state
<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<TimePickerSelect value="pm">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<TimePickerSelect value="pdt">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
@ -76,11 +76,11 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
### Disabled state
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
<TimePickerSelect value="PM" disabled>
<TimePickerSelect value="pm" disabled>
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT" disabled>
<TimePickerSelect value="pdt" disabled>
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>

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

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

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

@ -1,29 +1,29 @@
<script>
import { TooltipIcon } from "carbon-components-svelte";
import Carbon24 from "carbon-icons-svelte/lib/Carbon24";
import Filter20 from "carbon-icons-svelte/lib/Filter20";
import Carbon from "carbon-icons-svelte/lib/Carbon.svelte";
import Filter from "carbon-icons-svelte/lib/Filter.svelte";
import Preview from "../../components/Preview.svelte";
</script>
### 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
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter20} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter20} />
<TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
<TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
<TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter} />
### Custom 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>
</TooltipIcon>
### 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} />