From 9114298f765211db582f90702e094cb0ba268a81 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 22 Jul 2021 16:56:51 -0700 Subject: [PATCH] Align 10.40 (#763) * docs: fix typo [ci skip] * docs(tree-view): update expanded nodes guidance * chore(deps-dev): upgrade carbon-components to v10.40.0 * build(css): omit treeview SCSS import treeview.scss is included in global styles.css by default in v10.40.0 * feat(date-picker): add helperText prop Ref: https://github.com/carbon-design-system/carbon/commit/4b5b5fdf8 --- COMPONENT_INDEX.md | 1 + css/all.scss | 3 --- css/g10.scss | 3 --- css/g100.scss | 3 --- css/g80.scss | 3 --- css/g90.scss | 3 --- css/white.scss | 3 --- docs/package.json | 2 +- docs/src/COMPONENT_API.json | 11 +++++++++++ docs/src/pages/components/DatePicker.svx | 6 ++++++ docs/src/pages/components/TreeView.svx | 2 +- docs/src/pages/index.svelte | 20 ++++++++++++-------- docs/yarn.lock | 10 +++++----- package.json | 2 +- src/DatePicker/DatePickerInput.svelte | 13 ++++++++++++- tests/DatePicker.test.svelte | 6 +++++- types/DatePicker/DatePickerInput.d.ts | 6 ++++++ yarn.lock | 8 ++++---- 18 files changed, 65 insertions(+), 40 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 3f939bca..c06be76c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1090,6 +1090,7 @@ None. | placeholder | let | No | string | "" | Specify the input placeholder text | | pattern | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value | | disabled | let | No | boolean | false | Set to `true` to disable the input | +| helperText | let | No | string | "" | Specify the helper text | | iconDescription | let | No | string | "" | Specify the ARIA label for the calendar icon | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | labelText | let | No | string | "" | Specify the label text | diff --git a/css/all.scss b/css/all.scss index ecbbd37f..6679fa7a 100644 --- a/css/all.scss +++ b/css/all.scss @@ -76,8 +76,5 @@ $css--plex: true; @import "carbon-components/scss/globals/scss/_css--body"; @import "carbon-components/scss/globals/grid/grid"; -// Import experimental TreeView styles not included in global styles -@import "carbon-components/src/components/treeview/treeview"; - // Import all component styles @import "carbon-components/scss/globals/scss/styles"; diff --git a/css/g10.scss b/css/g10.scss index e77b2144..e97cdb84 100644 --- a/css/g10.scss +++ b/css/g10.scss @@ -27,9 +27,6 @@ $carbon--theme: $carbon--theme--g10; @import "carbon-components/scss/globals/scss/_css--body"; @import "carbon-components/scss/globals/grid/grid"; -// Import experimental TreeView styles not included in global styles -@import "carbon-components/src/components/treeview/treeview"; - // Import all component styles @import "carbon-components/scss/globals/scss/styles"; diff --git a/css/g100.scss b/css/g100.scss index b30327a8..6828061d 100644 --- a/css/g100.scss +++ b/css/g100.scss @@ -27,8 +27,5 @@ $carbon--theme: $carbon--theme--g100; @import "carbon-components/scss/globals/scss/_css--body"; @import "carbon-components/scss/globals/grid/grid"; -// Import experimental TreeView styles not included in global styles -@import "carbon-components/src/components/treeview/treeview"; - // Import all component styles @import "carbon-components/scss/globals/scss/styles"; \ No newline at end of file diff --git a/css/g80.scss b/css/g80.scss index c0df672a..9f5475c9 100644 --- a/css/g80.scss +++ b/css/g80.scss @@ -27,9 +27,6 @@ $carbon--theme: $carbon--theme--g80; @import "carbon-components/scss/globals/scss/_css--body"; @import "carbon-components/scss/globals/grid/grid"; -// Import experimental TreeView styles not included in global styles -@import "carbon-components/src/components/treeview/treeview"; - // Import all component styles @import "carbon-components/scss/globals/scss/styles"; diff --git a/css/g90.scss b/css/g90.scss index d219f985..abf54fa0 100644 --- a/css/g90.scss +++ b/css/g90.scss @@ -27,8 +27,5 @@ $carbon--theme: $carbon--theme--g90; @import "carbon-components/scss/globals/scss/_css--body"; @import "carbon-components/scss/globals/grid/grid"; -// Import experimental TreeView styles not included in global styles -@import "carbon-components/src/components/treeview/treeview"; - // Import all component styles @import "carbon-components/scss/globals/scss/styles"; \ No newline at end of file diff --git a/css/white.scss b/css/white.scss index 409b423f..9b4bd827 100644 --- a/css/white.scss +++ b/css/white.scss @@ -27,8 +27,5 @@ $carbon--theme: $carbon--theme--white; @import "carbon-components/scss/globals/scss/_css--body"; @import "carbon-components/scss/globals/grid/grid"; -// Import experimental TreeView styles not included in global styles -@import "carbon-components/src/components/treeview/treeview"; - // Import all component styles @import "carbon-components/scss/globals/scss/styles"; \ No newline at end of file diff --git a/docs/package.json b/docs/package.json index 9da2aeb7..26b6fa5c 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.39.0", + "carbon-components": "10.40.0", "carbon-components-svelte": "../", "clipboard-copy": "^4.0.1", "mdsvex": "^0.8.8", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 2d4834cb..e2bd1683 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -2734,6 +2734,17 @@ "constant": false, "reactive": false }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, { "name": "iconDescription", "kind": "let", diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx index 6ea1ea8c..a6cae4af 100644 --- a/docs/src/pages/components/DatePicker.svx +++ b/docs/src/pages/components/DatePicker.svx @@ -13,6 +13,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"] +### With helper text + + + + + ### Hidden label diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx index 7e1a4232..4cd34e29 100644 --- a/docs/src/pages/components/TreeView.svx +++ b/docs/src/pages/components/TreeView.svx @@ -37,7 +37,7 @@ To render a node with an icon, define an `icon` property with a Carbon Svelte ic ### Initial expanded nodes -Set `expanded` to `true` on nodes that should be expanded by default. +Expanded nodes can be set using `expandedIds`. diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte index 0ce0eaa3..0a94746d 100644 --- a/docs/src/pages/index.svelte +++ b/docs/src/pages/index.svelte @@ -139,7 +139,7 @@

An alternative to loading styles is to link an external - StyleSheet from a Content Delivery Networks (CDN) like + StyleSheet from a Content Delivery Network (CDN) like unpkg.com . @@ -159,18 +159,22 @@

The most performant method to load styles is to import SCSS - directly from carbon-components. Although it - requires more set up, you can reduce the size of the bundle CSS - by importing individual component styles instead of a - pre-compiled CSS StyleSheet. + directly from + carbon-components. Although it requires more set + up, you can reduce the size of the bundle CSS by importing + individual component styles instead of a pre-compiled CSS + StyleSheet.

- Refer to the official Carbon guide on SASS for documentation. + > + official Carbon guide on SASS + + for documentation.

diff --git a/docs/yarn.lock b/docs/yarn.lock index 002ef591..59a60c1e 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -837,15 +837,15 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178: integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw== carbon-components-svelte@../: - version "0.39.0" + version "0.41.0" dependencies: carbon-icons-svelte "^10.27.0" flatpickr "4.6.9" -carbon-components@10.39.0: - version "10.39.0" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.39.0.tgz#384cf2467d3f213af16865c80703da9b96329573" - integrity sha512-UrDWQ1RlUr7Nn0b9Vs9E3p14V3o5U+3TS700hbHyAxYYq9CoI8WKQhx16x5Leot6dD8HVVTxkb3ahgv6iJG9Rg== +carbon-components@10.40.0: + version "10.40.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.40.0.tgz#59c339dd964624cd07802dc695ceed6f32a07ef7" + integrity sha512-tIc0qHVLilWCelkH56al4ILwZRA4AbbwJEFt0mnGtefmgQ3O1UJLm5/ybp7VnWeHwUnip7PljHSDwHUzQcj5zg== dependencies: "@carbon/telemetry" "0.0.0-alpha.6" flatpickr "4.6.1" diff --git a/package.json b/package.json index c4ebf63e..e4a32363 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "@rollup/plugin-node-resolve": "^11.1.1", "@tsconfig/svelte": "^1.0.10", "autoprefixer": "^10.2.4", - "carbon-components": "10.39.0", + "carbon-components": "10.40.0", "gh-pages": "^3.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.3", diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte index 92668423..71beefad 100644 --- a/src/DatePicker/DatePickerInput.svelte +++ b/src/DatePicker/DatePickerInput.svelte @@ -17,6 +17,9 @@ /** Set to `true` to disable the input */ export let disabled = false; + /** Specify the helper text */ + export let helperText = ""; + /** Specify the ARIA label for the calendar icon */ export let iconDescription = ""; @@ -50,7 +53,7 @@ /** Obtain a reference to the input HTML element */ export let ref = null; - import { getContext, onMount } from "svelte"; + import { getContext } from "svelte"; import Calendar16 from "carbon-icons-svelte/lib/Calendar16/Calendar16.svelte"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte"; import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte"; @@ -161,4 +164,12 @@ {#if !invalid && warn}
{warnText}
{/if} + {#if helperText} +
+ {helperText} +
+ {/if} diff --git a/tests/DatePicker.test.svelte b/tests/DatePicker.test.svelte index 79a7cb24..ec0d4473 100644 --- a/tests/DatePicker.test.svelte +++ b/tests/DatePicker.test.svelte @@ -7,7 +7,11 @@ console.log(e.detail); }}" > - + diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts index 6f085a3a..0e9c4a48 100644 --- a/types/DatePicker/DatePickerInput.d.ts +++ b/types/DatePicker/DatePickerInput.d.ts @@ -32,6 +32,12 @@ export interface DatePickerInputProps */ disabled?: boolean; + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + /** * Specify the ARIA label for the calendar icon * @default "" diff --git a/yarn.lock b/yarn.lock index 5acc5eeb..976b1f5f 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.39.0: - version "10.39.0" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.39.0.tgz#384cf2467d3f213af16865c80703da9b96329573" - integrity sha512-UrDWQ1RlUr7Nn0b9Vs9E3p14V3o5U+3TS700hbHyAxYYq9CoI8WKQhx16x5Leot6dD8HVVTxkb3ahgv6iJG9Rg== +carbon-components@10.40.0: + version "10.40.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.40.0.tgz#59c339dd964624cd07802dc695ceed6f32a07ef7" + integrity sha512-tIc0qHVLilWCelkH56al4ILwZRA4AbbwJEFt0mnGtefmgQ3O1UJLm5/ybp7VnWeHwUnip7PljHSDwHUzQcj5zg== dependencies: "@carbon/telemetry" "0.0.0-alpha.6" flatpickr "4.6.1"