mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
Align v10.34 (#621)
* 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
GitHub
parent
630e19b57a
commit
f9909827d0
36 changed files with 572 additions and 197 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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..." />
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue