Align v10.39 (#738)

* chore(deps-dev): upgrade carbon-components to v10.39.0 * fix(data-table): deprecate Table shouldShowBorder prop Ref: 0f7324156 * fix(form-group): add legendId Ref: 4fc56c30b * feat(number-input): support readonly variant Ref: d0bd8eddb * feat(multi-select): export multiSelectRef, fieldRef, selectionRef * feat(local-storage): add clearItem, clearAll instance methods * docs(local-storage): simplify clear example * docs(local-storage): add instructions [ci skip] * chore(local-storage): reset value on clear [ci skip] * chore(local-storage): revert value clear [ci skip]
2025-09-15 18:31:06 +00:00 · 2021-07-09 13:40:25 -07:00 · 2021-07-09 13:40:25 -07:00 · b6fa25c3e7
commit b6fa25c3e7
parent edefd6429b
18 changed files with 221 additions and 45 deletions
--- 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.38.0",
+    "carbon-components": "10.39.0",
    "carbon-components-svelte": "../",
    "clipboard-copy": "^4.0.1",
    "mdsvex": "^0.8.8",
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@ -3682,6 +3682,16 @@
      "moduleName": "FormGroup",
      "filePath": "src/FormGroup/FormGroup.svelte",
      "props": [
+        {
+          "name": "noMargin",
+          "kind": "let",
+          "description": "Set to `true` for to remove the bottom margin",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
        {
          "name": "invalid",
          "kind": "let",
@ -3702,16 +3712,6 @@
          "constant": false,
          "reactive": false
        },
-        {
-          "name": "noMargin",
-          "kind": "let",
-          "description": "Set to `true` for to remove the bottom margin",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "constant": false,
-          "reactive": false
-        },
        {
          "name": "messageText",
          "kind": "let",
@ -3731,6 +3731,16 @@
          "isFunction": false,
          "constant": false,
          "reactive": false
+        },
+        {
+          "name": "legendId",
+          "kind": "let",
+          "description": "Specify an id for the legend element",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
        }
      ],
      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
@ -5341,6 +5351,26 @@
          "isFunction": false,
          "constant": false,
          "reactive": true
+        },
+        {
+          "name": "clearItem",
+          "kind": "function",
+          "description": "Remove the persisted key value from the browser's local storage",
+          "type": "() => void",
+          "value": "() => {     localStorage.removeItem(key);   }",
+          "isFunction": true,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "clearAll",
+          "kind": "function",
+          "description": "Clear all key values from the browser's local storage",
+          "type": "() => void",
+          "value": "() => {     localStorage.clear();   }",
+          "isFunction": true,
+          "constant": false,
+          "reactive": false
        }
      ],
      "slots": [],
@ -6068,6 +6098,36 @@
          "isFunction": false,
          "constant": false,
          "reactive": true
+        },
+        {
+          "name": "multiSelectRef",
+          "kind": "let",
+          "description": "Obtain a reference to the outer div element",
+          "type": "null | HTMLDivElement",
+          "value": "null",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "fieldRef",
+          "kind": "let",
+          "description": "Obtain a reference to the field box element",
+          "type": "null | HTMLDivElement",
+          "value": "null",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "selectionRef",
+          "kind": "let",
+          "description": "Obtain a reference to the selection element",
+          "type": "null | HTMLDivElement",
+          "value": "null",
+          "isFunction": false,
+          "constant": false,
+          "reactive": true
        }
      ],
      "slots": [],
--- a/docs/src/pages/components/LocalStorage.svx
+++ b/docs/src/pages/components/LocalStorage.svx
@ -5,5 +5,19 @@
 This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level.
  
 ### Reactive example
+
+In the example below, toggle the switch and reload the page. The updated theme should be persisted locally.
  
-<FileSource src="/framed/LocalStorage/LocalStorage" />
+<FileSource src="/framed/LocalStorage/LocalStorage" />
+
+### Clear item, clear all
+
+Use the `bind:this` directive to access the `clearItem` and `clearAll` methods.
+
+Invoking `clearItem` will remove the persisted key value from the browser's local storage.
+
+Invoking `clearAll` will remove all key values.
+
+In the following example, toggle the switch and reload the page. Then, click the "Clear storage" button. Refresh the page; the theme should be reset to the untoggled state.
+
+<FileSource src="/framed/LocalStorage/LocalStorageClear" />
--- a/docs/src/pages/components/NumberInput.svx
+++ b/docs/src/pages/components/NumberInput.svx
@ -31,6 +31,10 @@ components: ["NumberInput", "NumberInputSkeleton"]

 <NumberInput light label="Clusters" />

+### Read-only variant
+
+<NumberInput readonly label="Clusters" />
+
 ### Extra-large size

 <NumberInput size="xl" label="Clusters" />
--- a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
+++ b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
@ -1,7 +1,6 @@
 <script>
-  import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
+  import { LocalStorage, Toggle } from "carbon-components-svelte";

-  let storage;
  let toggled = false;
  let events = [];

@ -9,7 +8,6 @@
 </script>

 <LocalStorage
-  bind:this="{storage}"
  key="dark-mode"
  bind:value="{toggled}"
  on:save="{() => {
--- a/docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte
+++ b/docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte
@ -0,0 +1,17 @@
+<script>
+  import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
+
+  let storage;
+  let toggled = false;
+
+  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
+</script>
+
+<LocalStorage bind:this="{storage}" bind:value="{toggled}" />
+
+<Toggle size="sm" labelText="Dark mode" bind:toggled />
+
+<br />
+<br />
+
+<Button size="small" on:click="{storage.clearAll}">Clear storage</Button>
--- 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.38.2"
+  version "0.39.0"
  dependencies:
    carbon-icons-svelte "^10.27.0"
    flatpickr "4.6.9"

-carbon-components@10.38.0:
-  version "10.38.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.38.0.tgz#f275192f70eccf0d0052a192113ee20059594d4f"
-  integrity sha512-o5Ns3M2LQMuQ41UJiT+WFU+t/hAerde+77LKmrBpiPRBHJ+/VEBAfKmjB5TiH5QM/VWVDWo0Dvr8gc6yNKRqug==
+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==
  dependencies:
    "@carbon/telemetry" "0.0.0-alpha.6"
    flatpickr "4.6.1"