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

Alignment with Carbon version 10.27 (#495)

Browse source 
* chore(deps-dev): bump devDependencies

* docs: update number of available carbon icons

* feat(notification): distinguish dispatched close event between click/timeout

* fix(notification): prevent class from being overriden by $$restProps

* docs(notification): improve example body copy

* fix(notification): remove notificationType prop

* refactor(notification): resolve svelte file in imports

* fix(notification): prevent class from being overridden by $$restProps

* feat(notification): update TS signature for dispatched close event

* docs: update contributing

* fix(loading): adjust spinner styles

* feat(tag): support custom icon variant

* feat(tile): add optional expand/collapse icon labels to ExpandableTile

* feat(code-snippet): support disabled state for single and multi-line types

* fix(code-snippet): remove impossible class directive

* fix(code-snippet): showMoreLess button size should be "field", not "small"

* fix(password-input): disable visibility button

- set default values for tooltipAlignment, tooltipPosition

* fix(text-input): add missing warning field wrapper class

* feat(button): infer hasIconOnly using $$slots API

- requires Svelte version >=3.25

* docs(button): add danger tertiary, icon-only example

* feat(button): set default values for tooltip alignment, position

* docs: document dynamic theming

* fix(modal): correctly set class props #482

* fix(form): forward submit event in FluidForm #487

* feat(dropdown): support warning state

* feat(multi-select): support warning state

* fix(multi-select): prevent dropdown from opening if disabled

* feat(number-input): support warning state

* chore(deps-dev): upgrade devDependencies

* docs:  bump @carbon/themes, carbon-components

* refactor(data-table): co-locate DataTableSkeleton with DataTable

* docs: update number of pictograms

* fix(password-input): add missing "bx--btn" class to visibility toggle

* docs: increase z-index for component preview
This commit is contained in:
Eric Liu 2021-01-27 13:29:20 -08:00 • committed by GitHub
commit f2a3f8d2e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
63 changed files with 2104 additions and 529 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/package.json
View file

@ -9,10 +9,10 @@
"build:svite": "svite build"
},
"devDependencies": {
"@carbon/themes": "^10.22.1",
"@carbon/themes": "10.26.0",
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.0.1",
"carbon-components": "^10.25.0",
"carbon-components": "10.27.0",
"carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0",
"mdsvex": "^0.8.8",

353
docs/src/COMPONENT_API.json
View file

@ -547,7 +547,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "icon",
@ -572,6 +572,7 @@
"kind": "let",
"description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`",
"type": "\"start\" | \"center\" | \"end\"",
"value": "\"center\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -581,6 +582,7 @@
"kind": "let",
"description": "Set the position of the tooltip relative to the icon",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"value": "\"bottom\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -1123,6 +1125,26 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@ -1949,6 +1971,16 @@
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` for the disabled variant\nOnly applies to the \"single\", \"multi\" types",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "wrapText",
"kind": "let",
@ -2677,6 +2709,94 @@
],
"rest_props": { "type": "InlineComponent", "name": "TableContainer" }
},
{
"moduleName": "DataTableSkeleton",
"filePath": "/src/DataTable/DataTableSkeleton.svelte",
"props": [
{
"name": "columns",
"kind": "let",
"description": "Specify the number of columns\nSuperseded by `headers` if `headers` is a non-empty array",
"type": "number",
"value": "5",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "rows",
"kind": "let",
"description": "Specify the number of rows",
"type": "number",
"value": "5",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"tall\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "zebra",
"kind": "let",
"description": "Set to `true` to apply zebra styles to the datatable rows",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "showHeader",
"kind": "let",
"description": "Set to `false` to hide the header",
"type": "boolean",
"value": "true",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "headers",
"kind": "let",
"description": "Set the column headers\nSupersedes `columns` if value is a non-empty array",
"type": "string[] | Partial<DataTableHeader>[]",
"value": "[]",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "showToolbar",
"kind": "let",
"description": "Set to `false` to hide the toolbar",
"type": "boolean",
"value": "true",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "table" },
{ "type": "forwarded", "name": "mouseover", "element": "table" },
{ "type": "forwarded", "name": "mouseenter", "element": "table" },
{ "type": "forwarded", "name": "mouseleave", "element": "table" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" },
"extends": {
"interface": "DataTableHeader",
"import": "\"../DataTable/DataTable\""
}
},
{
"moduleName": "Toolbar",
"filePath": "/src/DataTable/Toolbar.svelte",
@ -3284,94 +3404,6 @@
"import": "\"../OverflowMenu/OverflowMenuItem\""
}
},
{
"moduleName": "DataTableSkeleton",
"filePath": "/src/DataTableSkeleton/DataTableSkeleton.svelte",
"props": [
{
"name": "columns",
"kind": "let",
"description": "Specify the number of columns\nSuperseded by `headers` if `headers` is a non-empty array",
"type": "number",
"value": "5",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "rows",
"kind": "let",
"description": "Specify the number of rows",
"type": "number",
"value": "5",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"tall\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "zebra",
"kind": "let",
"description": "Set to `true` to apply zebra styles to the datatable rows",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "showHeader",
"kind": "let",
"description": "Set to `false` to hide the header",
"type": "boolean",
"value": "true",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "headers",
"kind": "let",
"description": "Set the column headers\nSupersedes `columns` if value is a non-empty array",
"type": "string[] | Partial<DataTableHeader>[]",
"value": "[]",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "showToolbar",
"kind": "let",
"description": "Set to `false` to hide the toolbar",
"type": "boolean",
"value": "true",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "table" },
{ "type": "forwarded", "name": "mouseover", "element": "table" },
{ "type": "forwarded", "name": "mouseenter", "element": "table" },
{ "type": "forwarded", "name": "mouseleave", "element": "table" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" },
"extends": {
"interface": "DataTableHeader",
"import": "\"../DataTable/DataTable\""
}
},
{
"moduleName": "DatePicker",
"filePath": "/src/DatePicker/DatePicker.svelte",
@ -3787,6 +3819,26 @@
"constant": false,
"reactive": false
},
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "helperText",
"kind": "let",
@ -4494,7 +4546,7 @@
"filePath": "/src/FluidForm/FluidForm.svelte",
"props": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"events": [{ "type": "forwarded", "name": "submit", "element": "Form" }],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Form" }
},
@ -5247,6 +5299,26 @@
"constant": false,
"reactive": false
},
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "helperText",
"kind": "let",
@ -5679,16 +5751,6 @@
"moduleName": "ToastNotification",
"filePath": "/src/Notification/ToastNotification.svelte",
"props": [
{
"name": "notificationType",
"kind": "let",
"description": "Set the type of notification",
"type": "\"toast\" | \"inline\"",
"value": "\"toast\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "kind",
"kind": "let",
@ -5782,11 +5844,15 @@
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{
"type": "dispatched",
"name": "close",
"detail": "{ timeout: boolean }"
},
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "close" }
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
@ -5795,16 +5861,6 @@
"moduleName": "InlineNotification",
"filePath": "/src/Notification/InlineNotification.svelte",
"props": [
{
"name": "notificationType",
"kind": "let",
"description": "Set the type of notification",
"type": "\"toast\" | \"inline\"",
"value": "\"inline\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "kind",
"kind": "let",
@ -5891,11 +5947,15 @@
{ "name": "actions", "default": false, "slot_props": "{}" }
],
"events": [
{
"type": "dispatched",
"name": "close",
"detail": "{ timeout: boolean }"
},
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "close" }
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
@ -6045,6 +6105,26 @@
"constant": false,
"reactive": false
},
{
"name": "warn",
"kind": "let",
"description": "Set to `true` to indicate an warning state",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "warnText",
"kind": "let",
"description": "Specify the warning state text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "helperText",
"kind": "let",
@ -7732,6 +7812,15 @@
"constant": false,
"reactive": false
},
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
@ -8233,6 +8322,7 @@
"kind": "let",
"description": "Set the alignment of the tooltip relative to the icon",
"type": "\"start\" | \"center\" | \"end\"",
"value": "\"center\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -8242,6 +8332,7 @@
"kind": "let",
"description": "Set the position of the tooltip relative to the icon",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"value": "\"bottom\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -8495,6 +8586,26 @@
"constant": false,
"reactive": false
},
{
"name": "tileExpandedLabel",
"kind": "let",
"description": "Specify the icon label of the expanded tile",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "tileCollapsedLabel",
"kind": "let",
"description": "Specify the icon label of the collapsed tile",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "tabindex",
"kind": "let",
@ -8519,7 +8630,7 @@
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the top-level element",
"type": "null | HTMLDivElement",
"type": "null | HTMLButtonElement",
"value": "null",
"isFunction": false,
"constant": false,
@ -8531,14 +8642,14 @@
{ "name": "below", "default": false, "slot_props": "{}" }
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "keypress", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "keypress", "element": "button" },
{ "type": "forwarded", "name": "mouseover", "element": "button" },
{ "type": "forwarded", "name": "mouseenter", "element": "button" },
{ "type": "forwarded", "name": "mouseleave", "element": "button" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
"rest_props": { "type": "Element", "name": "button" }
},
{
"moduleName": "SelectableTile",

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

@ -106,7 +106,7 @@
border: 1px solid var(--cds-ui-03);
border-bottom: 0;
position: relative;
z-index: 1;
z-index: 9999;
}
.preview-viewer:not(.framed) {

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

@ -1,10 +1,7 @@
---
description: High-level description
---
<script>
import { Button } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
import Preview from "../../components/Preview.svelte";
</script>
@ -32,6 +29,12 @@ description: High-level description
<Button kind="danger-tertiary">Danger tertiary button</Button>
### Danger tertiary, icon-only button
**Note:** you must provide an `iconDescription` for the button tooltip.
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
### Danger ghost button
<Button kind="danger-ghost">Danger ghost button</Button>
@ -42,13 +45,15 @@ description: High-level description
### Icon-only button
Set `hasIconOnly` to `true` to use the icon-only button variant.
**Note:** you must provide an `iconDescription` for the button tooltip.
The tooltip position and alignment can be controlled by the `tooltipPosition`, `tooltipAlignment` props, respectively.
<Button iconDescription="Tooltip text" icon={Add16} />
<Button hasIconOnly tooltipPosition="bottom" tooltipAlignment="center" iconDescription="Tooltip text" icon={Add16} />
### 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} />
### Link button

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

@ -47,6 +47,14 @@ let comment = `
<CodeSnippet type="multi" {code} hideCopyButton />
### Disabled
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
<CodeSnippet disabled>yarn add -D carbon-components-svelte</CodeSnippet>
<br />
<CodeSnippet disabled type="multi" code="{comment}" />
### Wrapped text
`wrapText` only applies to the `"multi"` type.

12
docs/src/pages/components/Dropdown.svx
View file

@ -51,6 +51,18 @@ Use the `itemToString` prop to format the display of individual items.
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Invalid state
<Dropdown invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Warning state
<Dropdown warn warnText="This contact method is not associated with your account" titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Disabled state
<Dropdown disabled titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},

7
docs/src/pages/components/ExpandableTile.svx
View file

@ -26,4 +26,11 @@ source: Tile/ExpandableTile.svelte
<ExpandableTile light>
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>
### With icon labels
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
<div slot="above" style="height: 10rem">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div>
</ExpandableTile>

30
docs/src/pages/components/InlineNotification.svx
View file

@ -9,15 +9,15 @@ source: Notification/InlineNotification.svelte
### Default (error)
<InlineNotification on:close />
<InlineNotification title="Error" subtitle="An internal server error occurred." />
### Hidden close button
<InlineNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" />
<InlineNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
### With actions
<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
<InlineNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours.">
<div slot="actions">
<NotificationActionButton>Learn more</NotificationActionButton>
</div>
@ -25,18 +25,18 @@ source: Notification/InlineNotification.svelte
### Notification variants
<InlineNotification kind="error" />
<InlineNotification kind="info" />
<InlineNotification kind="info-square" />
<InlineNotification kind="success" />
<InlineNotification kind="warning" />
<InlineNotification kind="warning-alt" />
<InlineNotification kind="error" title="Error" subtitle="An internal server error occurred." />
<InlineNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification kind="success" title="Success" subtitle="Your settings have been saved." />
<InlineNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
### Low contrast
<InlineNotification lowContrast kind="error" />
<InlineNotification lowContrast kind="info" />
<InlineNotification lowContrast kind="info-square" />
<InlineNotification lowContrast kind="success" />
<InlineNotification lowContrast kind="warning" />
<InlineNotification lowContrast kind="warning-alt" />
<InlineNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." />
<InlineNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." />
<InlineNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." />
<InlineNotification lowContrast kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />
<InlineNotification lowContrast kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." />

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

@ -89,4 +89,28 @@ Use the `itemToString` prop to format the display of individual items.
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Invalid state
<MultiSelect invalid invalidText="A contact method is required" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Warning state
<MultiSelect warn warnText="One or more contact methods are not associated with your account" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Disabled state
<MultiSelect disabled titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>

6
docs/src/pages/components/NumberInput.svx
View file

@ -41,7 +41,11 @@ components: ["NumberInput", "NumberInputSkeleton"]
### Invalid state
<NumberInput invalid invalidText="An error occurred" label="Clusters" />
<NumberInput invalid invalidText="Invalid value" label="Clusters" />
### Warning state
<NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value="25" />
### Disabled state

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

@ -1,5 +1,7 @@
<script>
import { Tag } from "carbon-components-svelte";
import IbmCloud16 from "carbon-icons-svelte/lib/IbmCloud16";
import Document16 from "carbon-icons-svelte/lib/Document16";
import Preview from "../../components/Preview.svelte";
</script>
@ -25,6 +27,13 @@
<Tag filter on:click>Filterable</Tag>
### Custom icon
Note: rendering a custom icon cannnot be used with the filterable variant.
<Tag icon={IbmCloud16}>IBM Cloud</Tag>
<Tag icon={Document16} type="blue">API documentation</Tag>
### Skeleton
<Tag skeleton />

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

@ -39,6 +39,10 @@ components: ["TextInput", "TextInputSkeleton"]
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
### Warning state
<TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />
### Disabled state
<TextInput disabled labelText="User name" placeholder="Enter user name..." />

28
docs/src/pages/components/ToastNotification.svx
View file

@ -9,26 +9,26 @@ source: Notification/ToastNotification.svelte
### Default (error)
<ToastNotification />
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
### Hidden close button
<ToastNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" />
<ToastNotification hideCloseButton kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
### Notification variants
<ToastNotification kind="error" />
<ToastNotification kind="info" />
<ToastNotification kind="info-square" />
<ToastNotification kind="success" />
<ToastNotification kind="warning" />
<ToastNotification kind="warning-alt" />
<ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="success" title="Success" subtitle="Your settings have been saved." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
### Low contrast
<ToastNotification lowContrast kind="error" />
<ToastNotification lowContrast kind="info" />
<ToastNotification lowContrast kind="info-square" />
<ToastNotification lowContrast kind="success" />
<ToastNotification lowContrast kind="warning" />
<ToastNotification lowContrast kind="warning-alt" />
<ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="info-square" title="New updates" subtitle="Restart to get the latest updates." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="success" title="Success" subtitle="Your settings have been saved." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="warning" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />
<ToastNotification lowContrast kind="warning-alt" title="Upcoming scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="[MMM D, YYYY h:mm A]" />

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

@ -94,7 +94,7 @@
<TileCard
borderBottom
title="Carbon Icons Svelte"
subtitle="5800+ icons"
subtitle="6000+ icons"
target="_blank"
href="https://github.com/IBM/carbon-icons-svelte"
/>
@ -105,7 +105,7 @@
<TileCard
borderRight
title="Carbon Pictograms Svelte"
subtitle="600+ pictograms"
subtitle="700+ pictograms"
target="_blank"
href="https://github.com/IBM/carbon-pictograms-svelte"
/>

652
docs/yarn.lock
View file

File diff suppressed because it is too large Load diff