From f3cddbad9fc07610d806bdaa725cdc469f8130e6 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Fri, 30 Apr 2021 17:08:09 -0700 Subject: [PATCH] Align v10.33 (#619) * 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 --- COMPONENT_INDEX.md | 44 +++++++++++---------- README.md | 2 +- docs/package.json | 2 +- docs/src/COMPONENT_API.json | 35 ++++++++++++---- docs/src/pages/components/AspectRatio.svx | 8 +++- docs/src/pages/components/ClickableTile.svx | 4 ++ docs/src/pages/components/ImageLoader.svx | 2 +- docs/src/pages/components/Link.svx | 10 +++++ docs/src/pages/index.svelte | 2 +- docs/yarn.lock | 10 ++--- package.json | 2 +- src/AspectRatio/AspectRatio.svelte | 3 +- src/ImageLoader/ImageLoader.svelte | 2 +- src/Link/Link.svelte | 16 +++++++- src/Link/OutboundLink.svelte | 2 +- src/Search/Search.svelte | 4 +- src/Tile/ClickableTile.svelte | 18 +++++---- types/AspectRatio/AspectRatio.d.ts | 2 +- types/ImageLoader/ImageLoader.d.ts | 2 +- types/Link/Link.d.ts | 6 +++ types/Tile/ClickableTile.d.ts | 9 ++++- yarn.lock | 8 ++-- 22 files changed, 131 insertions(+), 62 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 03c6f99e..3d2cdec6 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -257,9 +257,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | +| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | ### Slots @@ -479,6 +479,7 @@ None. | :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | | clicked | let | Yes | boolean | false | Set to `true` to click the tile | | light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the tile | | href | let | No | string | -- | Set the `href` | ### Slots @@ -1858,16 +1859,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :----------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -| error | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | -| loaded | let | Yes | boolean | false | Set to `true` when the image is loaded | -| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | -| src | let | No | string | "" | Specify the image source | -| alt | let | No | string | "" | Specify the image alt text | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | -- | Specify the aspect ratio for the image wrapper | -| fadeIn | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | -| loadImage | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| error | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | +| loaded | let | Yes | boolean | false | Set to `true` when the image is loaded | +| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | +| src | let | No | string | "" | Specify the image source | +| alt | let | No | string | "" | Specify the image alt text | +| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | -- | Specify the aspect ratio for the image wrapper | +| fadeIn | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | +| loadImage | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | 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 | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | -| size | let | No | "sm" | "lg" | -- | Specify the size of the link | -| href | let | No | string | -- | Specify the href value | -| inline | let | No | boolean | false | Set to `true` to use the inline variant | -| disabled | let | No | boolean | false | Set to `true` to disable the checkbox | -| visited | let | No | boolean | false | Set to `true` to allow visited styles | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | +| size | let | No | "sm" | "lg" | -- | Specify the size of the link | +| href | let | No | string | -- | Specify the href value | +| inline | let | No | boolean | false | Set to `true` to use the inline variant | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render
`inline` must be `false` | +| disabled | let | No | boolean | false | Set to `true` to disable the checkbox | +| visited | let | No | boolean | false | Set to `true` to allow visited styles | ### Slots diff --git a/README.md b/README.md index a576e34f..119dcc6d 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/docs/package.json b/docs/package.json index d5ebc5be..2f85e322 100644 --- a/docs/package.json +++ b/docs/package.json @@ -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", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 106ca4c0..3253c26b 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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", diff --git a/docs/src/pages/components/AspectRatio.svx b/docs/src/pages/components/AspectRatio.svx index 8b920a20..cb7c86e8 100644 --- a/docs/src/pages/components/AspectRatio.svx +++ b/docs/src/pages/components/AspectRatio.svx @@ -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 +### Ratio 3x2 + + + 3x2 + + ### Ratio 9x16 diff --git a/docs/src/pages/components/ClickableTile.svx b/docs/src/pages/components/ClickableTile.svx index 4535df18..0fa46459 100644 --- a/docs/src/pages/components/ClickableTile.svx +++ b/docs/src/pages/components/ClickableTile.svx @@ -14,3 +14,7 @@ source: Tile/ClickableTile.svelte ### Light variant Carbon Design System + +### Disabled state + +Carbon Design System diff --git a/docs/src/pages/components/ImageLoader.svx b/docs/src/pages/components/ImageLoader.svx index 9a7057f7..34808896 100644 --- a/docs/src/pages/components/ImageLoader.svx +++ b/docs/src/pages/components/ImageLoader.svx @@ -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"`. diff --git a/docs/src/pages/components/Link.svx b/docs/src/pages/components/Link.svx index 115ec048..52bc215f 100644 --- a/docs/src/pages/components/Link.svx +++ b/docs/src/pages/components/Link.svx @@ -4,6 +4,7 @@ components: ["Link", "OutboundLink"] @@ -32,6 +33,15 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun Carbon Design System. +### Link with icon + +Note that `inline` must be `false` when rendering a link with an icon. + +
+ Visit the + Carbon Design System. +
+ ### Large size Carbon Design System diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte index 3d6d4244..2bbff299 100644 --- a/docs/src/pages/index.svelte +++ b/docs/src/pages/index.svelte @@ -100,7 +100,7 @@ diff --git a/docs/yarn.lock b/docs/yarn.lock index ee129f67..e2532299 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -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" diff --git a/package.json b/package.json index b62f8f40..eac1da4d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/AspectRatio/AspectRatio.svelte b/src/AspectRatio/AspectRatio.svelte index a4cb0577..e0af4be0 100644 --- a/src/AspectRatio/AspectRatio.svelte +++ b/src/AspectRatio/AspectRatio.svelte @@ -1,7 +1,7 @@ @@ -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} diff --git a/src/ImageLoader/ImageLoader.svelte b/src/ImageLoader/ImageLoader.svelte index b8fd4d7f..1c089568 100644 --- a/src/ImageLoader/ImageLoader.svelte +++ b/src/ImageLoader/ImageLoader.svelte @@ -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; diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte index 15eff2ab..275c1932 100644 --- a/src/Link/Link.svelte +++ b/src/Link/Link.svelte @@ -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 > - + {#if !inline && icon}
+ +
{/if}

{:else} {#if !inline && icon}
+ +
{/if} {/if} diff --git a/src/Link/OutboundLink.svelte b/src/Link/OutboundLink.svelte index be2307e7..90e00f67 100644 --- a/src/Link/OutboundLink.svelte +++ b/src/Link/OutboundLink.svelte @@ -12,7 +12,7 @@ on:mouseenter on:mouseleave target="_blank" + icon="{Launch16}" > - diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte index 271587c2..0f5eca6d 100644 --- a/src/Search/Search.svelte +++ b/src/Search/Search.svelte @@ -103,7 +103,9 @@ class:bx--search--xl="{size === 'xl'}" class="{searchClass}" > - +
+ +
diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte index 980216c4..8832c323 100644 --- a/src/Tile/ClickableTile.svelte +++ b/src/Tile/ClickableTile.svelte @@ -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"; - - import { SvelteComponentTyped } from "svelte"; -export interface ClickableTileProps - extends svelte.JSX.HTMLAttributes { +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` */ diff --git a/yarn.lock b/yarn.lock index cf319fe4..88e255c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"