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

Alignment with Carbon version 10.28 (#505)

Browse source 
* chore(deps-dev): remove @carbon/themes

* chore(deps-dev): bump devDependencies

* fix(tabs): forward click event to Tab

* feat(toggle): dispatch toggle event

* feat(tag): dispatch close event

* feat(tooltip-icon): make tooltipText slottable

* feat(dropdown): add hideLabel prop

* docs(select): add "Hidden label" example

* refactor(modal): use class directive

* feat(modal): dispatch transitionend event

* chore(deps-dev): upgrade carbon-components to 10.28.0-rc.0

* feat(date-picker): add warn state

* feat(tag): support small size variant

* fix(search): add semantic role

* feat(toolbar-search): add disabled state

* fix(composed-modal): add aria-label prop, update header semantic tags

* chore(deps-dev): upgrade carbon-components to v10.28

* docs(overflow-menu): add light variant example

* docs(link): document OutboundLink in Component API

* chore(tooltip-icon): rename slot to "tooltipText"

* docs(component-api): wrap code blocks to minimize width

* docs(aspect-ratio): remove inline outline style

* fix(tab): do not trigger focus when mounting

* docs(tabs): add reactive example

Closes #438
This commit is contained in:
Eric Liu 2021-02-05 05:59:10 -08:00 • committed by GitHub
commit 7cd3723960
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 549 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/package.json
View file

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

35
docs/src/App.svelte
View file

@ -6,29 +6,12 @@
<Router routes="{routes}" />
<style lang="scss" global>
@import "@carbon/themes/scss/themes";
$feature-flags: (
enable-css-custom-properties: true,
ui-shell: true,
grid-columns-16: true
);
:root {
@include carbon--theme($carbon--theme--white, true);
}
:root[theme="g10"] {
@include carbon--theme($carbon--theme--g10, true);
}
:root[theme="g90"] {
@include carbon--theme($carbon--theme--g90, true);
}
:root[theme="g100"] {
@include carbon--theme($carbon--theme--g100, true);
}
$css--font-face: true;
$css--helpers: true;
$css--body: true;
@ -37,6 +20,22 @@
$css--default-type: true;
$css--plex: true;
// Use all Carbon themes
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
:root {
@include carbon--theme($carbon--theme--white, true);
}
:root[theme="g10"] {
@include carbon--theme($carbon--theme--g10, true);
}
:root[theme="g90"] {
@include carbon--theme($carbon--theme--g90, true);
}
:root[theme="g100"] {
@include carbon--theme($carbon--theme--g100, true);
}
@import "carbon-components/scss/globals/scss/_css--reset.scss";
@import "carbon-components/scss/globals/scss/_css--font-face.scss";
@import "carbon-components/scss/globals/scss/_css--helpers.scss";

93
docs/src/COMPONENT_API.json
View file

@ -1713,11 +1713,15 @@
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{
"type": "dispatched",
"name": "transitionend",
"detail": "{ open: 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": "forwarded", "name": "transitionend", "element": "div" },
{ "type": "dispatched", "name": "submit" },
{ "type": "dispatched", "name": "close" },
{ "type": "dispatched", "name": "open" }
@ -3065,6 +3069,16 @@
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the search bar",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "tabindex",
"kind": "let",
@ -3632,6 +3646,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": "name",
"kind": "let",
@ -3858,6 +3892,16 @@
"constant": false,
"reactive": false
},
{
"name": "hideLabel",
"kind": "let",
"description": "Set to `true` to visually hide the label text",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "translateWithId",
"kind": "let",
@ -5608,6 +5652,11 @@
}
],
"events": [
{
"type": "dispatched",
"name": "transitionend",
"detail": "{ open: boolean; }"
},
{ "type": "forwarded", "name": "keydown", "element": "div" },
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
@ -7708,6 +7757,7 @@
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "li" },
{ "type": "forwarded", "name": "mouseover", "element": "li" },
{ "type": "forwarded", "name": "mouseenter", "element": "li" },
{ "type": "forwarded", "name": "mouseleave", "element": "li" }
@ -7763,7 +7813,17 @@
{
"moduleName": "TagSkeleton",
"filePath": "/src/Tag/TagSkeleton.svelte",
"props": [],
"props": [
{
"name": "size",
"kind": "let",
"type": "\"sm\" | \"default\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "span" },
@ -7787,6 +7847,15 @@
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"type": "\"sm\" | \"default\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "filter",
"kind": "let",
@ -7858,7 +7927,8 @@
{ "type": "forwarded", "name": "click", "element": "TagSkeleton" },
{ "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" },
{ "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" },
{ "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" }
{ "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" },
{ "type": "dispatched", "name": "close" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div | span" }
@ -9244,6 +9314,11 @@
],
"slots": [],
"events": [
{
"type": "dispatched",
"name": "toggle",
"detail": "{ toggled: boolean; }"
},
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
@ -9671,7 +9746,7 @@
{
"name": "tooltipText",
"kind": "let",
"description": "Specify the tooltip text",
"description": "Specify the tooltip text.\nAlternatively, use the \"tooltipText\" slot",
"type": "string",
"value": "\"\"",
"isFunction": false,
@ -9719,7 +9794,15 @@
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "tooltipText",
"default": false,
"fallback": "{tooltipText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "mouseover", "element": "button" },

4
docs/src/components/ComponentApi.svelte
View file

@ -203,4 +203,8 @@
margin-top: var(--cds-layout-01);
margin-bottom: var(--cds-layout-04);
}
code {
word-break: break-word;
}
</style>

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

@ -207,4 +207,8 @@
display: block;
}
}
.preview-viewer > .bx--aspect-ratio {
outline: 1px solid var(--cds-interactive-04);
}
</style>

14
docs/src/pages/components/AspectRatio.svx
View file

@ -9,43 +9,43 @@ Supported aspect ratios: `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"`,
### Default (2x1)
<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
<AspectRatio>
2x1
</AspectRatio>
### Ratio 16x9
<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
<AspectRatio ratio="16x9">
16x9
</AspectRatio>
### Ratio 4x3
<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
<AspectRatio ratio="4x3">
4x3
</AspectRatio>
### Ratio 1x1
<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
<AspectRatio ratio="1x1">
1x1
</AspectRatio>
### Ratio 3x4
<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
<AspectRatio ratio="3x4">
3x4
</AspectRatio>
### Ratio 9x16
<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
<AspectRatio ratio="9x16">
9x16
</AspectRatio>
### Ratio 1x2
<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
<AspectRatio ratio="1x2">
1x2
</AspectRatio>

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

@ -43,6 +43,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
<DatePickerInput invalid invalidText="Invalid date" labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### Warning state
<DatePicker>
<DatePickerInput warn warnText="This info will not be stored" labelText="Date of birth" placeholder="mm/dd/yyyy" />
</DatePicker>
### Disabled state
<DatePicker>

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

@ -13,6 +13,12 @@ components: ["Dropdown", "DropdownSkeleton"]
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Hidden label
<Dropdown hideLabel titleText="Contact" selectedIndex={0} items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Format item display text
Use the `itemToString` prop to format the display of individual items.

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

@ -1,3 +1,7 @@
---
components: ["Link", "OutboundLink"]
---
<script>
import { Link, OutboundLink } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";

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

@ -32,6 +32,14 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
### Light variant
<OverflowMenu light>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
### Extra-large size
<OverflowMenu size="xl">

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

@ -16,6 +16,15 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g100" text="Gray 100" />
</Select>
### Hidden label
<Select hideLabel labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Item groups
<Select labelText="Carbon theme" selected="g10" >

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

@ -20,6 +20,10 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
</div>
</Tabs>
### Reactive example
<FileSource src="/framed/Tabs/TabsReactive" />
### Container type
<Tabs type="container">

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

@ -9,6 +9,10 @@
<Tag>IBM Cloud</Tag>
### Small size
<Tag size="sm">IBM Cloud</Tag>
### Tag types
<Tag type="red">red</Tag>
@ -25,15 +29,18 @@
### Filterable
<Tag filter on:click>Filterable</Tag>
<Tag filter on:close>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 />
<Tag skeleton />
### Skeleton (small)
<Tag size="sm" skeleton />

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

@ -19,6 +19,10 @@ components: ["Toggle", "ToggleSkeleton"]
<FileSource src="/framed/Toggle/ToggleReactive" />
### on:toggle event
<Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />
### Custom labels
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />

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

@ -16,4 +16,13 @@
<TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
### Custom tooltip text
Use the "text" slot to customize the tooltip text.
<TooltipIcon>
<span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
<Carbon24 />
</TooltipIcon>

2
docs/src/pages/framed/Modal/ComposedModal.svelte
View file

@ -11,7 +11,7 @@
</script>
<ComposedModal open>
<ModalHeader title="Confirm changes" />
<ModalHeader label="Changes" title="Confirm changes" />
<ModalBody hasForm>
<Checkbox labelText="I have reviewed the changes" bind:checked />
</ModalBody>

36
docs/src/pages/framed/Tabs/TabsReactive.svelte Normal file
View file

@ -0,0 +1,36 @@
<script>
import { Tabs, Tab, TabContent, Button } from "carbon-components-svelte";
let selected = 0;
</script>
<Tabs bind:selected>
<Tab label="Tab label 1" />
<Tab label="Tab label 2" />
<Tab label="Tab label 3" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
</div>
</Tabs>
<div>
<h4>Selected index: {selected}</h4>
</div>
<div>
<Button
size="small"
disabled="{selected === 1}"
on:click="{() => (selected = 1)}"
>
Set index to 1
</Button>
</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

53
docs/yarn.lock
View file

@ -119,21 +119,6 @@
lodash "^4.17.19"
to-fast-properties "^2.0.0"
"@carbon/colors@^10.19.0":
version "10.19.0"
resolved "https://registry.npmjs.org/@carbon/colors/-/colors-10.19.0.tgz#b3fe4b8302f5a0d8450d4fe9af36eed40c035426"
integrity sha512-LrlxOuIrpWQmn8VmSu0VwuT4hRiXmSOtt9Yjs5OKEUuSIxADZFMpY+fJIvMu7q69Y4XeV6XNYrJpIExOfb62iw==
"@carbon/import-once@^10.5.0":
version "10.5.0"
resolved "https://registry.npmjs.org/@carbon/import-once/-/import-once-10.5.0.tgz#9a84b50a761aa561ae6600a6c34b9955d97b3fd8"
integrity sha512-OlyJpA5wJ9XNv/FAogN4TGhwmrdyVYeoJ/ARkcmbdWiXwq4OTCVki9MUlV779+HYseLlXBxtlA1No3/R4Sds0g==
"@carbon/layout@^10.17.0":
version "10.17.0"
resolved "https://registry.npmjs.org/@carbon/layout/-/layout-10.17.0.tgz#de2b80673c0ee13c451adf7060e63b117a87bc30"
integrity sha512-FS198XBh0dxfjU2GJ35b85gQbnuNFSK8IcpSBsgX7KKSIktwpPy0WV40EGQoZD/qFPIJpzZRngkJWD+d6vhf7w==
"@carbon/telemetry@0.0.0-alpha.6":
version "0.0.0-alpha.6"
resolved "https://registry.npmjs.org/@carbon/telemetry/-/telemetry-0.0.0-alpha.6.tgz#1d11e64f310e98f32c3db0c55f02e047f2398087"
@ -150,24 +135,6 @@
winston "^3.3.3"
yargs "^16.1.1"
"@carbon/themes@10.26.0":
version "10.26.0"
resolved "https://registry.npmjs.org/@carbon/themes/-/themes-10.26.0.tgz#61720c0e51ebe6a1121e22d0f764b0d55cf8533d"
integrity sha512-8S/S3S9l+7lbxGpbz81eoRxOYtloFTMPBZtcOmfUE1bwX3y31hhxc+4hrTCqdS0LQQSDvGebfYxiF7bfiVRFRg==
dependencies:
"@carbon/colors" "^10.19.0"
"@carbon/layout" "^10.17.0"
"@carbon/type" "^10.20.0"
color "^3.1.2"
"@carbon/type@^10.20.0":
version "10.20.0"
resolved "https://registry.npmjs.org/@carbon/type/-/type-10.20.0.tgz#cea815adb8edceb98b4f7111d82ce6aa6ac59a96"
integrity sha512-F12I0oSR9CwFavdO357+a+2S7bGK4V3iaT5F89WNBR6RyV6jSTVq02rqWaRtmDK7Axy0dH/8Dxbq/xnLynFb6g==
dependencies:
"@carbon/import-once" "^10.5.0"
"@carbon/layout" "^10.17.0"
"@dabh/diagnostics@^2.0.2":
version "2.0.2"
resolved "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.2.tgz#290d08f7b381b8f94607dc8f471a12c675f9db31"
@ -870,15 +837,15 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
carbon-components-svelte@../:
version "0.26.0"
version "0.27.0"
dependencies:
carbon-icons-svelte "^10.21.0"
flatpickr "4.6.9"
carbon-components@10.27.0:
version "10.27.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.27.0.tgz#b984ee1b87371a64ecd041853993ffc69c9191a0"
integrity sha512-kDW3ezjfqxTydIMLZ+pTxA3oWsmhET330NTVe47hXeCRsoZ000tq0ZwGbbliSjlW2wY4s5nKxWkMj0b+dkeFyQ==
carbon-components@10.28.0:
version "10.28.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.28.0.tgz#c4d2b23df2559cf3b0226867c45e2e84e0af7c4e"
integrity sha512-bFsyngr625zc/t2gl4BPFYl0/ed4q38rrPihQxBXHhLAdeZNyy8xyOQlbh1PEQbTu47H/s/bxVo6QiFm/VmLZA==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"
@ -1052,7 +1019,7 @@ color-name@^1.0.0, color-name@~1.1.4:
resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
color-string@^1.5.2, color-string@^1.5.4:
color-string@^1.5.2:
version "1.5.4"
resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
@ -1068,14 +1035,6 @@ color@3.0.x:
color-convert "^1.9.1"
color-string "^1.5.2"
color@^3.1.2:
version "3.1.3"
resolved "https://registry.npmjs.org/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
dependencies:
color-convert "^1.9.1"
color-string "^1.5.4"
colorette@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"