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

Align v10.34 (#621)

Browse source 
* feat(theme): add g80 theme

* docs(data-table): use link with icon variant

* feat(search): support expandable variant

* fix(file-uploaded): use semantic p element instead of strong

* feat(side-nav): dispatch open, close, click:overlay events

* refactor(ui-shell): remove usage of deprecated Icon component

* feat(ui-shell): allow custom hamburger menu icons

* feat(button): support xl size

* fix(code-snippet): wrap code element with pre

* refactor(button): use button specific tooltip class for icon-only variant

* feat(password-input): support warning, inline props

* feat(data-table): support medium size
This commit is contained in:
Eric Liu 2021-06-25 03:45:30 -07:00 • committed by GitHub
commit f9909827d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 572 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

9
docs/src/App.svelte
View file

@ -48,6 +48,15 @@
}
}
// Set the <html> theme attribute to "g80" to use the Gray 90 theme
// <html theme="g80">
:root[theme="g80"] {
@include carbon--theme($carbon--theme--g80, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
// <html theme="g90">
:root[theme="g90"] {

82
docs/src/COMPONENT_API.json
View file

@ -362,7 +362,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of button",
"type": "\"default\" | \"field\" | \"small\"",
"type": "\"default\" | \"field\" | \"small\" | \"xl\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,
@ -1931,7 +1931,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"tall\"",
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -3787,6 +3787,24 @@
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "iconMenu",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the closed state\nDefaults to `Menu20`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "iconClose",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the opened state\nDefaults to `Close20`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [
@ -7040,6 +7058,36 @@
"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": "inline",
"kind": "let",
"description": "Set to `true` to use inline version",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "id",
"kind": "let",
@ -7801,6 +7849,26 @@
"constant": false,
"reactive": false
},
{
"name": "expandable",
"kind": "let",
"description": "Set to `true` to enable the expandable variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "expanded",
"kind": "let",
"description": "Set to `true to expand the search input",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "value",
"kind": "let",
@ -7894,6 +7962,8 @@
],
"slots": [],
"events": [
{ "type": "dispatched", "name": "expand", "detail": "any" },
{ "type": "dispatched", "name": "collapse", "detail": "any" },
{ "type": "forwarded", "name": "click", "element": "SearchSkeleton" },
{
"type": "forwarded",
@ -8379,7 +8449,11 @@
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"events": [
{ "type": "dispatched", "name": "open", "detail": "any" },
{ "type": "dispatched", "name": "close", "detail": "any" },
{ "type": "dispatched", "name": "click:overlay", "detail": "any" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "nav" }
},
@ -9318,7 +9392,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the table",
"type": "\"compact\" | \"short\" | \"tall\"",
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
"isFunction": false,
"constant": false,
"reactive": false

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

@ -1,7 +1,7 @@
<script>
export let persist = false;
export let persistKey = "carbon-theme";
export const themes = ["white", "g10", "g90", "g100"];
export const themes = ["white", "g10", "g80", "g90", "g100"];
import { onMount, afterUpdate } from "svelte";
import { theme } from "../store";

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

@ -62,6 +62,7 @@
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>

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

@ -94,6 +94,14 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button size="small" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button>
### Extra-large button
<Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button>
<Button size="xl" kind="tertiary">Tertiary</Button>
<Button size="xl" kind="ghost">Ghost</Button>
<Button size="xl" kind="danger">Danger</Button>
### Disabled button
<Button disabled>Disabled button</Button>

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

@ -132,7 +132,7 @@ The slot name for the table header cells is `"cell-header"`.
</span>
<span slot="cell" let:row let:cell>
{#if cell.key === 'rule' && cell.value === 'Round robin'}
<Link inline href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value} <Launch16 /></Link>
<Link icon={Launch16} href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value}</Link>
{:else}
{cell.value}
{/if}
@ -438,6 +438,61 @@ The slot name for the table header cells is `"cell-header"`.
]}"
/>
### Medium rows
<DataTable size="medium"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
### Short rows
<DataTable size="short"

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

@ -27,6 +27,10 @@ Set prop `type` to `"text"` to toggle password visibility.
<PasswordInput light labelText="Password" placeholder="Enter password..." />
### Inline
<PasswordInput inline labelText="Password" placeholder="Enter password..." />
### Extra-large size
<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
@ -39,6 +43,10 @@ Set prop `type` to `"text"` to toggle password visibility.
<PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
### Warning state
<PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />
### Disabled state
<PasswordInput disabled labelText="Password" placeholder="Enter password..." />

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

@ -23,6 +23,10 @@ The "clear" event is dispatched when clicking the "X" button in the search input
<Search value="Cloud functions" on:clear={() => console.log('clear')}/>
### Expandable variant
<Search expandable on:expand on:collapse />
### Light variant
<Search light />
@ -35,7 +39,7 @@ The "clear" event is dispatched when clicking the "X" button in the search input
<Search size="sm" />
### Disabled
### Disabled state
<Search disabled />

13
docs/src/pages/components/Select.svx
View file

@ -12,15 +12,17 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Helper text
<Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -30,6 +32,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select hideLabel labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -43,6 +46,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g10" text="Gray 10" />
</SelectItemGroup>
<SelectItemGroup label="Dark theme">
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</SelectItemGroup>
@ -53,6 +57,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select light labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -62,6 +67,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select inline labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -71,6 +77,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select size="xl" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -80,6 +87,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select size="sm" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -89,6 +97,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -98,6 +107,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -107,6 +117,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>