From 78072a1c6660c3eaa22c077c3f4c08f545281928 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Mon, 21 Feb 2022 13:40:57 -0800
Subject: [PATCH] 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                          |  2 ++
 docs/package.json                           |  2 +-
 docs/src/COMPONENT_API.json                 | 21 +++++++++++++
 docs/src/pages/components/FileUploader.svx  |  4 +++
 docs/src/pages/components/TextArea.svx      |  8 +++++
 docs/yarn.lock                              | 10 +++---
 package.json                                |  2 +-
 src/FileUploader/FileUploader.svelte        | 18 +++++++++--
 src/TextArea/TextArea.svelte                | 34 +++++++++++++++------
 types/FileUploader/FileUploader.svelte.d.ts |  6 ++++
 types/TextArea/TextArea.svelte.d.ts         |  6 ++++
 yarn.lock                                   |  8 ++---
 12 files changed, 98 insertions(+), 23 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a57ead6f..c06f3057 100644
--- a/COMPONENT_INDEX.md
+++ b/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      |
diff --git a/docs/package.json b/docs/package.json
index 124e8e03..6c38630a 100644
--- a/docs/package.json
+++ b/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",
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 1d907713..02745291 100644
--- a/docs/src/COMPONENT_API.json
+++ b/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",
diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx
index ad6b97a5..cb7390a3 100644
--- a/docs/src/pages/components/FileUploader.svx
+++ b/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" />
diff --git a/docs/src/pages/components/TextArea.svx b/docs/src/pages/components/TextArea.svx
index a2babc64..097afb33 100644
--- a/docs/src/pages/components/TextArea.svx
+++ b/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..." />
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 07ddebcf..1e4e325d 100644
--- a/docs/yarn.lock
+++ b/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:
-  version "10.52.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.52.0.tgz#07db35dddbc5f9e5042e8621a781e9cb96fce0fa"
-  integrity sha512-itiG52GdDGxGh4IyuIV7gsuQCE1LLD2FCTEp5bPGhF/Onn042QzGendjl+yE7kfUk3FVlWmHN216dh/mA2sdZg==
+carbon-components@10.53.0:
+  version "10.53.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.53.0.tgz#260d77550a6f33b6cf69e3e61ce0be8089308f48"
+  integrity sha512-w1my4Jm//CYeraDM002TT/rMULxDSJ8wG0MCWPHGXFF/9OPHVGWo9idbLppM3lCS/PMfl/gpLvfpUVedFr7Yfw==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"
diff --git a/package.json b/package.json
index ee444890..76f93841 100644
--- a/package.json
+++ b/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",
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index 05930c09..b661ab75 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/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 class:bx--label-description="{true}">{labelDescription}</p>
+  <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}"
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index 2fc894c3..67d8d5e0 100644
--- a/src/TextArea/TextArea.svelte
+++ b/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
-      for="{id}"
-      class:bx--label="{true}"
-      class:bx--visually-hidden="{hideLabel}"
-      class:bx--label--disabled="{disabled}"
-    >
-      <slot name="labelText">
-        {labelText}
-      </slot>
-    </label>
+    <div class:bx--text-area__label-wrapper="{true}">
+      <label
+        for="{id}"
+        class:bx--label="{true}"
+        class:bx--visually-hidden="{hideLabel}"
+        class:bx--label--disabled="{disabled}"
+      >
+        <slot name="labelText">
+          {labelText}
+        </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
diff --git a/types/FileUploader/FileUploader.svelte.d.ts b/types/FileUploader/FileUploader.svelte.d.ts
index 39366c2d..2df994a3 100644
--- a/types/FileUploader/FileUploader.svelte.d.ts
+++ b/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 []
diff --git a/types/TextArea/TextArea.svelte.d.ts b/types/TextArea/TextArea.svelte.d.ts
index a649eb52..fab23273 100644
--- a/types/TextArea/TextArea.svelte.d.ts
+++ b/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
diff --git a/yarn.lock b/yarn.lock
index 5598a1e1..86d80886 100644
--- a/yarn.lock
+++ b/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:
-  version "10.52.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.52.0.tgz#07db35dddbc5f9e5042e8621a781e9cb96fce0fa"
-  integrity sha512-itiG52GdDGxGh4IyuIV7gsuQCE1LLD2FCTEp5bPGhF/Onn042QzGendjl+yE7kfUk3FVlWmHN216dh/mA2sdZg==
+carbon-components@10.53.0:
+  version "10.53.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.53.0.tgz#260d77550a6f33b6cf69e3e61ce0be8089308f48"
+  integrity sha512-w1my4Jm//CYeraDM002TT/rMULxDSJ8wG0MCWPHGXFF/9OPHVGWo9idbLppM3lCS/PMfl/gpLvfpUVedFr7Yfw==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"