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

Align v10.33 (#619)

Browse source 
* chore(deps-dev): upgrade carbon-components to v10.33.0

* fix(clickable-tile): support disabled state for ClickableTile

* fix(aspect-ratio): add missing 3x2 ratio

* docs: update number of supported chart types

* feat(link): support link with icon

* refactor(outbound-link): use icon prop

* fix(search): wrap search icon with div
This commit is contained in:
Eric Liu 2021-04-30 17:08:09 -07:00 • committed by GitHub
commit f3cddbad9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 131 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

44
COMPONENT_INDEX.md
View file

@ -257,9 +257,9 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
| ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
| ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
### Slots
@ -479,6 +479,7 @@ None.
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| clicked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to click the tile |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` |
### Slots
@ -1858,16 +1859,16 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :----------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| error | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if an error occurs when loading the image |
| loaded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when the image is loaded |
| loading | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false |
| src | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source |
| alt | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text |
| ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "9x16" &#124; "1x2"</code> | -- | Specify the aspect ratio for the image wrapper |
| fadeIn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion |
| loadImage | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url &#124;&#124; src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| error | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if an error occurs when loading the image |
| loaded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when the image is loaded |
| loading | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false |
| src | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source |
| alt | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text |
| ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | -- | Specify the aspect ratio for the image wrapper |
| fadeIn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion |
| loadImage | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url &#124;&#124; src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value |
### Slots
@ -1944,14 +1945,15 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href value |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href value |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />`inline` must be `false` |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
### Slots

2
README.md
View file

@ -13,7 +13,7 @@ The Carbon Svelte portfolio also includes:
- **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components
- **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 16 chart types, powered by d3
- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 17 chart types, powered by d3
## [Documentation](http://ibm.biz/carbon-svelte)

2
docs/package.json
View file

@ -11,7 +11,7 @@
"devDependencies": {
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.2.3",
"carbon-components": "10.32.1",
"carbon-components": "10.33.0",
"carbon-components-svelte": "../",
"mdsvex": "^0.8.8",
"npm-run-all": "^4.1.5",

35
docs/src/COMPONENT_API.json
View file

@ -202,7 +202,7 @@
"name": "ratio",
"kind": "let",
"description": "Specify the aspect ratio",
"type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"",
"type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"",
"value": "\"2x1\"",
"isFunction": false,
"constant": false,
@ -767,6 +767,16 @@
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the tile",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "href",
"kind": "let",
@ -779,14 +789,14 @@
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{ "type": "forwarded", "name": "click", "element": "a" },
{ "type": "forwarded", "name": "keydown", "element": "a" },
{ "type": "forwarded", "name": "mouseover", "element": "a" },
{ "type": "forwarded", "name": "mouseenter", "element": "a" },
{ "type": "forwarded", "name": "mouseleave", "element": "a" }
{ "type": "forwarded", "name": "click", "element": "Link" },
{ "type": "forwarded", "name": "keydown", "element": "Link" },
{ "type": "forwarded", "name": "mouseover", "element": "Link" },
{ "type": "forwarded", "name": "mouseenter", "element": "Link" },
{ "type": "forwarded", "name": "mouseleave", "element": "Link" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "a" }
"rest_props": { "type": "InlineComponent", "name": "Link" }
},
{
"moduleName": "CodeSnippet",
@ -4348,7 +4358,7 @@
"name": "ratio",
"kind": "let",
"description": "Specify the aspect ratio for the image wrapper",
"type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"",
"type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"",
"isFunction": false,
"constant": false,
"reactive": false
@ -4604,6 +4614,15 @@
"constant": false,
"reactive": false
},
{
"name": "icon",
"kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render\n`inline` must be `false`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",

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

@ -5,7 +5,7 @@
The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below.
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
### Default (2x1)
@ -37,6 +37,12 @@ Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"
3x4
</AspectRatio>
### Ratio 3x2
<AspectRatio ratio="3x2">
3x2
</AspectRatio>
### Ratio 9x16
<AspectRatio ratio="9x16">

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

@ -14,3 +14,7 @@ source: Tile/ClickableTile.svelte
### Light variant
<ClickableTile light href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
### Disabled state
<ClickableTile disabled href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>

2
docs/src/pages/components/ImageLoader.svx
View file

@ -28,7 +28,7 @@ Use the "loading" and "error" named slots to render an element when the image is
If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image.
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
<ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />

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

@ -4,6 +4,7 @@ components: ["Link", "OutboundLink"]
<script>
import { Link, OutboundLink } from "carbon-components-svelte";
import Carbon16 from "carbon-icons-svelte/lib/Carbon16"
import Preview from "../../components/Preview.svelte";
</script>
@ -32,6 +33,15 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun
<Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
</div>
### Link with icon
Note that `inline` must be `false` when rendering a link with an icon.
<div>
Visit the
<Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>.
</div>
### Large size
<Link size="lg" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>

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

@ -100,7 +100,7 @@
<Column xlg="{5}" lg="{8}" md="{4}">
<TileCard
title="Carbon Charts Svelte"
subtitle="16 chart types, powered by d3"
subtitle="17 chart types, powered by d3"
target="_blank"
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
/>

10
docs/yarn.lock
View file

@ -837,16 +837,16 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
carbon-components-svelte@../:
version "0.32.1"
version "0.32.2"
dependencies:
carbon-icons-svelte "^10.27.0"
clipboard-copy "3.2.0"
flatpickr "4.6.9"
carbon-components@10.32.1:
version "10.32.1"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb"
integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA==
carbon-components@10.33.0:
version "10.33.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.33.0.tgz#c573de233530270d172a2cae0faba5d1530725e5"
integrity sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"

2
package.json
View file

@ -32,7 +32,7 @@
"@rollup/plugin-node-resolve": "^11.1.1",
"@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^10.2.4",
"carbon-components": "10.32.1",
"carbon-components": "10.33.0",
"gh-pages": "^3.1.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",

3
src/AspectRatio/AspectRatio.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Specify the aspect ratio
* @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
* @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
*/
export let ratio = "2x1";
</script>
@ -13,6 +13,7 @@
class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
class:bx--aspect-ratio--3x2="{ratio === '3x2'}"
class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
{...$$restProps}

2
src/ImageLoader/ImageLoader.svelte
View file

@ -16,7 +16,7 @@
/**
* Specify the aspect ratio for the image wrapper
* @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
* @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
*/
export let ratio = undefined;

16
src/Link/Link.svelte
View file

@ -14,6 +14,13 @@
/** Set to `true` to use the inline variant */
export let inline = false;
/**
* Specify the icon from `carbon-icons-svelte` to render
* `inline` must be `false`
* @type {typeof import("carbon-icons-svelte").CarbonIcon}
*/
export let icon = undefined;
/** Set to `true` to disable the checkbox */
export let disabled = false;
@ -37,7 +44,9 @@
on:mouseenter
on:mouseleave
>
<slot />
<slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
<svelte:component this="{icon}" />
</div>{/if}
</p>
{:else}
<a
@ -54,6 +63,9 @@
on:click
on:mouseover
on:mouseenter
on:mouseleave><slot /></a
on:mouseleave
><slot />{#if !inline && icon}<div class:bx--link__icon="{true}">
<svelte:component this="{icon}" />
</div>{/if}</a
>
{/if}

2
src/Link/OutboundLink.svelte
View file

@ -12,7 +12,7 @@
on:mouseenter
on:mouseleave
target="_blank"
icon="{Launch16}"
>
<slot />
<Launch16 />
</Link>

4
src/Search/Search.svelte
View file

@ -103,7 +103,9 @@
class:bx--search--xl="{size === 'xl'}"
class="{searchClass}"
>
<Search16 class="bx--search-magnifier" />
<div class:bx--search-magnifier="{true}">
<Search16 class="bx--search-magnifier-icon" />
</div>
<label id="{id}-search" for="{id}" class:bx--label="{true}"
>{labelText}</label
>

18
src/Tile/ClickableTile.svelte
View file

@ -5,21 +5,23 @@
/** Set to `true` to enable the light variant */
export let light = false;
/** Set to `true` to disable the tile */
export let disabled = false;
/**
* Set the `href`
* @type {string}
*/
export let href = undefined;
import Link from "../Link/Link.svelte";
</script>
<!-- svelte-ignore a11y-missing-attribute -->
<a
class:bx--tile="{true}"
class:bx--tile--clickable="{true}"
class:bx--tile--is-clicked="{clicked}"
class:bx--tile--light="{light}"
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
<Link
{...$$restProps}
disabled="{disabled}"
class="bx--tile bx--tile--clickable {clicked &&
'bx--tile--is-clicked'} {light && 'bx--tile--light'} {$$restProps.class}"
href="{href}"
on:click
on:click="{() => {
@ -36,4 +38,4 @@
on:mouseleave
>
<slot />
</a>
</Link>

2
types/AspectRatio/AspectRatio.d.ts vendored
View file

@ -7,7 +7,7 @@ export interface AspectRatioProps
* Specify the aspect ratio
* @default "2x1"
*/
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2";
}
export default class AspectRatio extends SvelteComponentTyped<

2
types/ImageLoader/ImageLoader.d.ts vendored
View file

@ -18,7 +18,7 @@ export interface ImageLoaderProps
/**
* Specify the aspect ratio for the image wrapper
*/
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2";
/**
* Set to `true` when `loaded` is `true` and `error` is false

6
types/Link/Link.d.ts vendored
View file

@ -19,6 +19,12 @@ export interface LinkProps
*/
inline?: boolean;
/**
* Specify the icon from `carbon-icons-svelte` to render
* `inline` must be `false`
*/
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
/**
* Set to `true` to disable the checkbox
* @default false

9
types/Tile/ClickableTile.d.ts vendored
View file

@ -1,8 +1,7 @@
/// <reference types="svelte" />
import { SvelteComponentTyped } from "svelte";
export interface ClickableTileProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
export interface ClickableTileProps {
/**
* Set to `true` to click the tile
* @default false
@ -15,6 +14,12 @@ export interface ClickableTileProps
*/
light?: boolean;
/**
* Set to `true` to disable the tile
* @default false
*/
disabled?: boolean;
/**
* Set the `href`
*/

8
yarn.lock
View file

@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
carbon-components@10.32.1:
version "10.32.1"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.1.tgz#064d4504daafafa379ee2fbc5b2997204fb2e5eb"
integrity sha512-m9Q9y1NSsXcLINSYmRmOOuxwvSNrXqC2FIN3ykg+WO3+WrmozbPsgFSyMs0gd/RUgNXP6edt8k0Op//oks01gA==
carbon-components@10.33.0:
version "10.33.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.33.0.tgz#c573de233530270d172a2cae0faba5d1530725e5"
integrity sha512-u9eqP0tZTdyd4RzD5isK1LqTH+Lb+3jUtei7dkKXBK5sm+Xx8yP8l2koOZqzsFzaMGpeZOlO/3ajmDQ+LK6Gbw==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"