Align v10.53 (#1109)

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

* feat(text-area): add maxCount prop

* docs(text-area): add maximum character count

* feat(file-uploader): add disabled prop

* docs(file-uploader): add disabled state example

COMPONENT_INDEX.md

@@ -1265,6 +1265,7 @@ None.
 | :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | ----------------------------------------------------------- |
 | files            | <code>let</code>   | Yes      | <code>File[]</code>                                                                        | <code>[]</code>                         | Obtain a reference to the uploaded files                    |
 | status           | <code>let</code>   | No       | <code>"uploading" &#124; "edit" &#124; "complete"</code>                                   | <code>"uploading"</code>                | Specify the file uploader status                            |
+| disabled         | <code>let</code>   | No       | <code>boolean</code>                                                                       | <code>false</code>                      | Set to `true` to disable the file uploader                  |
 | accept           | <code>let</code>   | No       | <code>string[]</code>                                                                      | <code>[]</code>                         | Specify the accepted file types                             |
 | multiple         | <code>let</code>   | No       | <code>boolean</code>                                                                       | <code>false</code>                      | Set to `true` to allow multiple files                       |
 | clearFiles       | <code>const</code> | No       | <code>() => void</code>                                                                    | <code>() => { files = []; }</code>      | Programmatically clear the uploaded files                   |
@@ -4113,6 +4114,7 @@ None.
 | placeholder | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the placeholder text                    |
 | cols        | <code>let</code> | No       | <code>number</code>                          | <code>50</code>                                  | Specify the number of cols                      |
 | rows        | <code>let</code> | No       | <code>number</code>                          | <code>4</code>                                   | Specify the number of rows                      |
+| maxCount    | <code>let</code> | No       | <code>number</code>                          | <code>undefined</code>                           | Specify the max character count                 |
 | 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 input              |
 | readonly    | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to use the read-only variant      |

docs/package.json

@@ -12,7 +12,7 @@
     "@sveltech/routify": "^1.9.9",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.33",
     "autoprefixer": "^10.2.3",
-    "carbon-components": "10.52.0",
+    "carbon-components": "10.53.0",
     "carbon-components-10.47": "npm:carbon-components@10.47",
     "carbon-components-svelte": "../",
     "carbon-icons-svelte": "^10.44.3",

docs/src/COMPONENT_API.json

@@ -3467,6 +3467,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the file uploader",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "accept",
           "kind": "let",
@@ -11421,6 +11432,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "maxCount",
+          "kind": "let",
+          "description": "Specify the max character count",
+          "type": "number",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "light",
           "kind": "let",

docs/src/pages/components/FileUploader.svx

@@ -15,6 +15,10 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
 
 <FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
 
+### File uploader (disabled state)
+
+<FileUploader disabled multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
+
 ### Item (uploading)
 
 <FileUploaderItem name="README.md" status="uploading" />

docs/src/pages/components/TextArea.svx

@@ -11,6 +11,14 @@ components: ["TextArea", "TextAreaSkeleton"]
 
 <TextArea labelText="App description" placeholder="Enter a description..." />
 
+### Maximum character count
+
+Specify the max character count using the `maxCount` prop. A character counter will be displayed to the right of the label.
+
+You can always use the native `maxlength` attribute if you'd prefer that a counter not be shown.
+
+<TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} />
+
 ### With helper text
 
 <TextArea labelText="App description" helperText="A rich description helps us better recommend related products and services" placeholder="Enter a description..." />

docs/yarn.lock

@@ -467,14 +467,14 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
     warning "^3.0.0"
 
 carbon-components-svelte@../:
-  version "0.57.1"
+  version "0.58.2"
   dependencies:
     flatpickr "4.6.9"
 
-carbon-components@10.52.0:
+carbon-components@10.53.0:
-  version "10.52.0"
+  version "10.53.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.52.0.tgz#07db35dddbc5f9e5042e8621a781e9cb96fce0fa"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.53.0.tgz#260d77550a6f33b6cf69e3e61ce0be8089308f48"
-  integrity sha512-itiG52GdDGxGh4IyuIV7gsuQCE1LLD2FCTEp5bPGhF/Onn042QzGendjl+yE7kfUk3FVlWmHN216dh/mA2sdZg==
+  integrity sha512-w1my4Jm//CYeraDM002TT/rMULxDSJ8wG0MCWPHGXFF/9OPHVGWo9idbLppM3lCS/PMfl/gpLvfpUVedFr7Yfw==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"

package.json

@@ -29,7 +29,7 @@
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@tsconfig/svelte": "^1.0.10",
     "autoprefixer": "^10.2.4",
-    "carbon-components": "10.52.0",
+    "carbon-components": "10.53.0",
     "carbon-components-10.47": "npm:carbon-components@10.47",
     "carbon-icons-svelte": "^10.38.0",
     "husky": "^4.3.8",

src/FileUploader/FileUploader.svelte

@@ -11,6 +11,9 @@
    */
   export let status = "uploading";
 
+  /** Set to `true` to disable the file uploader */
+  export let disabled = false;
+
   /**
    * Specify the accepted file types
    * @type {string[]}
@@ -99,9 +102,20 @@
   on:mouseenter
   on:mouseleave
 >
-  <p class:bx--file--label="{true}">{labelTitle}</p>
+  <p
-  <p class:bx--label-description="{true}">{labelDescription}</p>
+    class:bx--file--label="{true}"
+    class:bx--label-description--disabled="{disabled}"
+  >
+    {labelTitle}
+  </p>
+  <p
+    class:bx--label-description="{true}"
+    class:bx--label-description--disabled="{disabled}"
+  >
+    {labelDescription}
+  </p>
   <FileUploaderButton
+    disabled="{disabled}"
     disableLabelChanges
     labelText="{buttonLabel}"
     accept="{accept}"

src/TextArea/TextArea.svelte

@@ -11,6 +11,12 @@
   /** Specify the number of rows */
   export let rows = 4;
 
+  /**
+   * Specify the max character count
+   * @type {number}
+   */
+  export let maxCount = undefined;
+
   /** Set to `true` to enable the light variant */
   export let light = false;
 
@@ -61,16 +67,23 @@
   class:bx--form-item="{true}"
 >
   {#if (labelText || $$slots.labelText) && !hideLabel}
-    <label
+    <div class:bx--text-area__label-wrapper="{true}">
-      for="{id}"
+      <label
-      class:bx--label="{true}"
+        for="{id}"
-      class:bx--visually-hidden="{hideLabel}"
+        class:bx--label="{true}"
-      class:bx--label--disabled="{disabled}"
+        class:bx--visually-hidden="{hideLabel}"
-    >
+        class:bx--label--disabled="{disabled}"
-      <slot name="labelText">
+      >
-        {labelText}
+        <slot name="labelText">
-      </slot>
+          {labelText}
-    </label>
+        </slot>
+      </label>
+      {#if maxCount}
+        <div class:bx--label="{true}" class:bx--label--disabled="{disabled}">
+          {value.length}/{maxCount}
+        </div>
+      {/if}
+    </div>
   {/if}
   <div
     class:bx--text-area__wrapper="{true}"
@@ -94,6 +107,7 @@
       class:bx--text-area="{true}"
       class:bx--text-area--light="{light}"
       class:bx--text-area--invalid="{invalid}"
+      maxlength="{maxCount ?? undefined}"
       {...$$restProps}
       on:change
       on:input

types/FileUploader/FileUploader.svelte.d.ts

@@ -9,6 +9,12 @@ export interface FileUploaderProps
    */
   status?: "uploading" | "edit" | "complete";
 
+  /**
+   * Set to `true` to disable the file uploader
+   * @default false
+   */
+  disabled?: boolean;
+
   /**
    * Specify the accepted file types
    * @default []

types/TextArea/TextArea.svelte.d.ts

@@ -27,6 +27,12 @@ export interface TextAreaProps
    */
   rows?: number;
 
+  /**
+   * Specify the max character count
+   * @default undefined
+   */
+  maxCount?: number;
+
   /**
    * Set to `true` to enable the light variant
    * @default false

yarn.lock

@@ -469,10 +469,10 @@ caniuse-lite@^1.0.30001181:
     lodash.debounce "^4.0.8"
     warning "^3.0.0"
 
-carbon-components@10.52.0:
+carbon-components@10.53.0:
-  version "10.52.0"
+  version "10.53.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.52.0.tgz#07db35dddbc5f9e5042e8621a781e9cb96fce0fa"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.53.0.tgz#260d77550a6f33b6cf69e3e61ce0be8089308f48"
-  integrity sha512-itiG52GdDGxGh4IyuIV7gsuQCE1LLD2FCTEp5bPGhF/Onn042QzGendjl+yE7kfUk3FVlWmHN216dh/mA2sdZg==
+  integrity sha512-w1my4Jm//CYeraDM002TT/rMULxDSJ8wG0MCWPHGXFF/9OPHVGWo9idbLppM3lCS/PMfl/gpLvfpUVedFr7Yfw==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"