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: 4b5b5fdf8

COMPONENT_INDEX.md

@@ -1090,6 +1090,7 @@ None.
 | placeholder     | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the input placeholder text                 |
 | pattern         | <code>let</code> | No       | <code>string</code>                       | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code>      | Specify the Regular Expression for the input value |
 | disabled        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the input                 |
+| helperText      | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the helper text                            |
 | iconDescription | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the ARIA label for the calendar icon       |
 | id              | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                    |
 | labelText       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                             |

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";

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";
 

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";

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";
 

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";

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";

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",

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",

docs/src/pages/components/DatePicker.svx

@@ -13,6 +13,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
   <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
+### With helper text
+
+<DatePicker>
+  <DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
 ### Hidden label
 
 <DatePicker>

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`.
 
 <FileSource src="/framed/TreeView/TreeViewExpanded" />
 

docs/src/pages/index.svelte

@@ -139,7 +139,7 @@
             <TabContent>
               <p>
                 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
                 <OutboundLink inline size="lg" href="https://unpkg.com/">
                   unpkg.com
                 </OutboundLink>.
@@ -159,18 +159,22 @@
             <TabContent>
               <p>
                 The most performant method to load styles is to import SCSS
-                directly from <code>carbon-components</code>. Although it
+                directly from
-                requires more set up, you can reduce the size of the bundle CSS
+                <code>carbon-components</code>. Although it requires more set
-                by importing individual component styles instead of a
+                up, you can reduce the size of the bundle CSS by importing
-                pre-compiled CSS StyleSheet.
+                individual component styles instead of a pre-compiled CSS
+                StyleSheet.
               </p>
               <p>
-                Refer to the <OutboundLink
+                Refer to the
+                <OutboundLink
                   inline
                   size="lg"
                   href="https://github.com/carbon-design-system/carbon/blob/main/docs/guides/sass.md"
-                  >official Carbon guide on SASS</OutboundLink
+                >
-                > for documentation.
+                  official Carbon guide on SASS
+                </OutboundLink>
+                for documentation.
               </p>
             </TabContent>
           </div>

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:
+carbon-components@10.40.0:
-  version "10.39.0"
+  version "10.40.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.39.0.tgz#384cf2467d3f213af16865c80703da9b96329573"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.40.0.tgz#59c339dd964624cd07802dc695ceed6f32a07ef7"
-  integrity sha512-UrDWQ1RlUr7Nn0b9Vs9E3p14V3o5U+3TS700hbHyAxYYq9CoI8WKQhx16x5Leot6dD8HVVTxkb3ahgv6iJG9Rg==
+  integrity sha512-tIc0qHVLilWCelkH56al4ILwZRA4AbbwJEFt0mnGtefmgQ3O1UJLm5/ybp7VnWeHwUnip7PljHSDwHUzQcj5zg==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"

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",

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}
     <div class:bx--form-requirement="{true}">{warnText}</div>
   {/if}
+  {#if helperText}
+    <div
+      class:bx--form__helper-text="{true}"
+      class:bx--form__helper-text--disabled="{disabled}"
+    >
+      {helperText}
+    </div>
+  {/if}
 </div>

tests/DatePicker.test.svelte

@@ -7,7 +7,11 @@
     console.log(e.detail);
   }}"
 >
-  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
+  <DatePickerInput
+    labelText="Date of birth"
+    helperText="Example: 01/12/1990"
+    placeholder="mm/dd/yyyy"
+  />
 </DatePicker>
 
 <DatePicker>

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 ""

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:
+carbon-components@10.40.0:
-  version "10.39.0"
+  version "10.40.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.39.0.tgz#384cf2467d3f213af16865c80703da9b96329573"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.40.0.tgz#59c339dd964624cd07802dc695ceed6f32a07ef7"
-  integrity sha512-UrDWQ1RlUr7Nn0b9Vs9E3p14V3o5U+3TS700hbHyAxYYq9CoI8WKQhx16x5Leot6dD8HVVTxkb3ahgv6iJG9Rg==
+  integrity sha512-tIc0qHVLilWCelkH56al4ILwZRA4AbbwJEFt0mnGtefmgQ3O1UJLm5/ybp7VnWeHwUnip7PljHSDwHUzQcj5zg==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"