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

Merge pull request #363 from IBM/fixes

Browse source 
Fixes
This commit is contained in:
Eric Liu 2020-10-24 15:22:09 -07:00 • committed by GitHub
commit a58be75648
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 49 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -1737,7 +1737,7 @@ import { Header } from "carbon-components-svelte";
| uiShellAriaLabel | <code>string</code> | -- | Specify the ARIA label for the header. | | uiShellAriaLabel | <code>string</code> | -- | Specify the ARIA label for the header. |
| href | <code>string</code> | -- | Specify the `href` attribute. | | href | <code>string</code> | -- | Specify the `href` attribute. |
| company | <code>string</code> | -- | Specify the company name. | | company | <code>string</code> | -- | Specify the company name. |
| platformName | <code>string</code> | -- | Specify the platform name. Alternatively, use the named slot "platform" (e.g. &lt;span slot="platform"&gt;...&lt;/span&gt;). | | platformName | <code>string</code> | `""` | Specify the platform name. Alternatively, use the named slot "platform" (e.g. &lt;span slot="platform"&gt;...&lt;/span&gt;). |
| ref | <code>null &#124; HTMLAnchorElement</code> | `null` | Obtain a reference to the HTML anchor element. | | ref | <code>null &#124; HTMLAnchorElement</code> | `null` | Obtain a reference to the HTML anchor element. |
### Slots ### Slots

72
docs/src/PUBLIC_API.json
View file

@ -5361,6 +5361,7 @@
"platformName", "platformName",
{ {
"kind": "let", "kind": "let",
"value": "\"\"",
"type": "string", "type": "string",
"description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g. <span slot=\"platform\">...</span>)" "description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g. <span slot=\"platform\">...</span>)"
} }
@ -5381,14 +5382,14 @@
{ {
"attributes": [ "attributes": [
{ {
"start": 1398, "start": 1394,
"end": 1420, "end": 1416,
"type": "Attribute", "type": "Attribute",
"name": "name", "name": "name",
"value": [ "value": [
{ {
"start": 1404, "start": 1400,
"end": 1419, "end": 1415,
"type": "Text", "type": "Text",
"raw": "skip-to-content", "raw": "skip-to-content",
"data": "skip-to-content" "data": "skip-to-content"
@ -5406,14 +5407,14 @@
{ {
"attributes": [ "attributes": [
{ {
"start": 1740, "start": 1736,
"end": 1755, "end": 1751,
"type": "Attribute", "type": "Attribute",
"name": "name", "name": "name",
"value": [ "value": [
{ {
"start": 1746, "start": 1742,
"end": 1754, "end": 1750,
"type": "Text", "type": "Text",
"raw": "platform", "raw": "platform",
"data": "platform" "data": "platform"
@ -5423,13 +5424,13 @@
], ],
"children": [ "children": [
{ {
"start": 1756, "start": 1752,
"end": 1770, "end": 1766,
"type": "MustacheTag", "type": "MustacheTag",
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 1757, "start": 1753,
"end": 1769, "end": 1765,
"loc": { "loc": {
"start": { "start": {
"line": 72, "line": 72,
@ -5462,8 +5463,8 @@
[ [
"click", "click",
{ {
"start": 1614, "start": 1610,
"end": 1622, "end": 1618,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -5743,61 +5744,38 @@
}, },
{ {
"start": 608, "start": 608,
"end": 669, "end": 642,
"type": "IfBlock",
"expression": {
"type": "Identifier",
"start": 613,
"end": 617,
"loc": {
"start": {
"line": 30,
"column": 9
},
"end": {
"line": 30,
"column": 13
}
},
"name": "icon"
},
"children": [
{
"start": 625,
"end": 659,
"type": "InlineComponent", "type": "InlineComponent",
"name": "svelte:component", "name": "svelte:component",
"attributes": [], "attributes": [],
"children": [], "children": [],
"expression": { "expression": {
"type": "Identifier", "type": "Identifier",
"start": 650, "start": 633,
"end": 654, "end": 637,
"loc": { "loc": {
"start": { "start": {
"line": 31, "line": 30,
"column": 31 "column": 29
}, },
"end": { "end": {
"line": 31, "line": 30,
"column": 35 "column": 33
} }
}, },
"name": "icon" "name": "icon"
} }
}
]
}, },
{ {
"start": 669, "start": 642,
"end": 672, "end": 645,
"type": "Text", "type": "Text",
"raw": "\n ", "raw": "\n ",
"data": "\n " "data": "\n "
} }
], ],
"default": true, "default": true,
"default_value": "\n \n{#if icon}\n <svelte:component this=\"{icon}\" />\n {/if}\n\n \n" "default_value": "\n \n<svelte:component this=\"{icon}\" />\n\n \n"
} }
] ]
], ],

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

@ -4,18 +4,11 @@
export let src = ""; export let src = "";
export let framed = false; export let framed = false;
import { CodeSnippet, Button, InlineLoading } from "carbon-components-svelte"; import { CodeSnippet, Button } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16"; import Launch16 from "carbon-icons-svelte/lib/Launch16";
import copy from "clipboard-copy"; import copy from "clipboard-copy";
import { url, beforeUrlChange } from "@sveltech/routify"; import { url, beforeUrlChange } from "@sveltech/routify";
import { theme } from "../store"; import { theme } from "../store";
let success = false;
$beforeUrlChange(() => {
if (success) success = false;
return true;
});
</script> </script>
<style global> <style global>
@ -135,10 +128,10 @@
<div class="preview"> <div class="preview">
{#if framed} {#if framed}
<div class="framed-header"> <div class="framed-header">
<div style="margin-left: var(--cds-spacing-03)"> <div
{#if framed && !success} style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
<InlineLoading description="Loading..." /> >
{/if} Content loaded in an iframe
</div> </div>
<Button <Button
style="margin-left: auto;" style="margin-left: auto;"
@ -155,9 +148,6 @@
<div class="preview-viewer" class:framed> <div class="preview-viewer" class:framed>
{#if framed} {#if framed}
<iframe <iframe
on:load="{() => {
success = true;
}}"
title="{src.split('/').pop()}" title="{src.split('/').pop()}"
src="{$url(`${src}?theme=${$theme}`)}" src="{$url(`${src}?theme=${$theme}`)}"
></iframe> ></iframe>

16
docs/src/pages/components/Accordion.svx
View file

@ -18,7 +18,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
</p> </p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Natural Language Understanding"> <AccordionItem title="Natural Language Understanding">
Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more. <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Language Translator"> <AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p> <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
@ -33,7 +33,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
</p> </p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Natural Language Understanding"> <AccordionItem title="Natural Language Understanding">
Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more. <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Language Translator"> <AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p> <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
@ -56,7 +56,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
<h5>Natural Language Understanding</h5> <h5>Natural Language Understanding</h5>
<div>AI / Machine Learning</div> <div>AI / Machine Learning</div>
</div> </div>
Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more. <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem> </AccordionItem>
<AccordionItem> <AccordionItem>
<div slot="title"> <div slot="title">
@ -75,7 +75,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
</p> </p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Natural Language Understanding"> <AccordionItem title="Natural Language Understanding">
Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more. <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Language Translator"> <AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p> <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
@ -90,7 +90,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
</p> </p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Natural Language Understanding"> <AccordionItem title="Natural Language Understanding">
Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more. <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Language Translator"> <AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p> <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
@ -105,7 +105,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
</p> </p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Natural Language Understanding"> <AccordionItem title="Natural Language Understanding">
Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more. <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Language Translator"> <AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p> <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
@ -120,7 +120,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
</p> </p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Natural Language Understanding"> <AccordionItem title="Natural Language Understanding">
Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more. <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Language Translator"> <AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p> <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>
@ -135,7 +135,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
</p> </p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Natural Language Understanding"> <AccordionItem title="Natural Language Understanding">
Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more. <p>Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.</p>
</AccordionItem> </AccordionItem>
<AccordionItem title="Language Translator"> <AccordionItem title="Language Translator">
<p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p> <p>Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.</p>

2
src/ComboBox/ComboBox.svelte
View file

@ -285,7 +285,7 @@
</ListBoxField> </ListBoxField>
{#if open} {#if open}
<ListBoxMenu aria-label="{ariaLabel}" id="{id}"> <ListBoxMenu aria-label="{ariaLabel}" id="{id}">
{#each filteredItems as item, i (item.id || i)} {#each filteredItems as item, i (item.id)}
<ListBoxMenuItem <ListBoxMenuItem
id="{item.id}" id="{item.id}"
active="{selectedIndex === i || selectedId === item.id}" active="{selectedIndex === i || selectedId === item.id}"

2
src/Dropdown/Dropdown.svelte
View file

@ -235,7 +235,7 @@
</button> </button>
{#if open} {#if open}
<ListBoxMenu aria-labelledby="{id}" id="{id}"> <ListBoxMenu aria-labelledby="{id}" id="{id}">
{#each items as item, i (item.id || i)} {#each items as item, i (item.id)}
<ListBoxMenuItem <ListBoxMenuItem
id="{item.id}" id="{item.id}"
active="{selectedIndex === i || selectedId === item.id}" active="{selectedIndex === i || selectedId === item.id}"

2
src/MultiSelect/MultiSelect.svelte
View file

@ -420,7 +420,7 @@
</ListBoxField> </ListBoxField>
{#if open} {#if open}
<ListBoxMenu aria-label="{ariaLabel}" id="{id}"> <ListBoxMenu aria-label="{ariaLabel}" id="{id}">
{#each filterable ? filteredItems : sortedItems as item, i (item.id || i)} {#each filterable ? filteredItems : sortedItems as item, i (item.id)}
<ListBoxMenuItem <ListBoxMenuItem
id="{item.id}" id="{item.id}"
active="{item.checked}" active="{item.checked}"

4
src/UIShell/GlobalHeader/Header.svelte
View file

@ -32,9 +32,9 @@
/** /**
* Specify the platform name * Specify the platform name
* Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>) * Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
* @type {string} [platformName] * @type {string} [platformName=""]
*/ */
export let platformName = undefined; export let platformName = "";
/** /**
* Obtain a reference to the HTML anchor element * Obtain a reference to the HTML anchor element

2
src/UIShell/HeaderGlobalAction.svelte
View file

@ -27,8 +27,6 @@
on:click on:click
> >
<slot> <slot>
{#if icon}
<svelte:component this="{icon}" /> <svelte:component this="{icon}" />
{/if}
</slot> </slot>
</button> </button>

1
types/index.d.ts vendored
View file

@ -1683,6 +1683,7 @@ export class Header extends CarbonSvelteComponent {
/** /**
* Specify the platform name * Specify the platform name
* Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>) * Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
* @default ""
*/ */
platformName?: string; platformName?: string;