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-14 18:01: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/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@ -1466,11 +1466,12 @@ None.

 | Prop name   | Kind             | Reactive | Type                 | Default value      | Description                                   |
 | :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
+| noMargin    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
 | invalid     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state    |
 | message     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement    |
-| noMargin    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
 | messageText | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the message text                      |
 | legendText  | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                       |
+| legendId    | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify an id for the legend element          |

 ### Slots

@ -2241,9 +2242,11 @@ None.
 ### Props

 | Prop name | Kind                  | Reactive | Type                    | Default value                                        | Description                                                     |
-| :-------- | :--------------- | :------- | :------------------ | -------------------------------- | ----------------------------- |
+| :-------- | :-------------------- | :------- | :---------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
 | value     | <code>let</code>      | Yes      | <code>any</code>        | <code>""</code>                                      | Provide a value to persist                                      |
 | key       | <code>let</code>      | No       | <code>string</code>     | <code>"local-storage-key"</code>                     | Specify the local storage key                                   |
+| clearItem | <code>function</code> | No       | <code>() => void</code> | <code>() => { localStorage.removeItem(key); }</code> | Remove the persisted key value from the browser's local storage |
+| clearAll  | <code>function</code> | No       | <code>() => void</code> | <code>() => { localStorage.clear(); }</code>         | Clear all key values from the browser's local storage           |

 ### Slots

@ -2397,6 +2400,9 @@ export interface MultiSelectItem {

 | Prop name         | Kind             | Reactive | Type                                                                                           | Default value                                                                       | Description                                                                           |
 | :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| selectionRef      | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                        | <code>null</code>                                                                   | Obtain a reference to the selection element                                           |
+| fieldRef          | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                        | <code>null</code>                                                                   | Obtain a reference to the field box element                                           |
+| multiSelectRef    | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                        | <code>null</code>                                                                   | Obtain a reference to the outer div element                                           |
 | inputRef          | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                                                      | <code>null</code>                                                                   | Obtain a reference to the input HTML element                                          |
 | open              | <code>let</code> | Yes      | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to open the dropdown                                                    |
 | value             | <code>let</code> | Yes      | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the multiselect value                                                         |
--- 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
@ -6,4 +6,18 @@ This utility component wraps the [Window.localStorage API](https://developer.moz
  
 ### 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" />
+
+### 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"
--- 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.38.0",
+    "carbon-components": "10.39.0",
    "gh-pages": "^3.1.0",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.3",
--- a/src/DataTable/Table.svelte
+++ b/src/DataTable/Table.svelte
@ -11,7 +11,10 @@
  /** Set to `true` to use static width */
  export let useStaticWidth = false;

-  /**  Set to `true` for the bordered variant */
+  /**
+   * Set to `true` for the bordered variant
+   * @deprecated this prop will be removed in the next major release
+   */
  export let shouldShowBorder = false;

  /** Set to `true` for the sortable variant */
--- a/src/FormGroup/FormGroup.svelte
+++ b/src/FormGroup/FormGroup.svelte
@ -1,31 +1,38 @@
 <script>
+  /** Set to `true` for to remove the bottom margin */
+  export let noMargin = false;
+
  /** Set to `true` to indicate an invalid state */
  export let invalid = false;

  /** Set to `true` to render a form requirement */
  export let message = false;

-  /** Set to `true` for to remove the bottom margin */
-  export let noMargin = false;
-
  /** Specify the message text */
  export let messageText = "";

  /** Specify the legend text */
  export let legendText = "";
+
+  /** Specify an id for the legend element */
+  export let legendId = "";
 </script>

 <fieldset
  data-invalid="{invalid || undefined}"
  class:bx--fieldset="{true}"
  class:bx--fieldset--no-margin="{noMargin}"
+  aria-labelledby="{$$restProps['aria-labelledby'] || legendId}"
  {...$$restProps}
  on:click
  on:mouseover
  on:mouseenter
  on:mouseleave
 >
-  <legend class:bx--label="{true}">{legendText}</legend>
+  <legend
+    class:bx--label="{true}"
+    id="{legendId || $$restProps['aria-labelledby']}">{legendText}</legend
+  >
  <slot />
  {#if message}
    <div class:bx--form__requirement="{true}">{messageText}</div>
--- a/src/LocalStorage/LocalStorage.svelte
+++ b/src/LocalStorage/LocalStorage.svelte
@ -15,6 +15,22 @@
   */
  export let value = "";

+  /**
+   * Remove the persisted key value from the browser's local storage
+   * @type {() => void}
+   */
+  export function clearItem() {
+    localStorage.removeItem(key);
+  }
+
+  /**
+   * Clear all key values from the browser's local storage
+   * @type {() => void}
+   */
+  export function clearAll() {
+    localStorage.clear();
+  }
+
  import { onMount, afterUpdate, createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@ -128,6 +128,21 @@
  /** Obtain a reference to the input HTML element */
  export let inputRef = null;

+  /** Obtain a reference to the outer div element */
+  export let multiSelectRef = null;
+
+  /**
+   * Obtain a reference to the field box element
+   * @type {null | HTMLDivElement}
+   */
+  export let fieldRef = null;
+
+  /**
+   * Obtain a reference to the selection element
+   * @type {null | HTMLDivElement}
+   */
+  export let selectionRef = null;
+
  import { afterUpdate, createEventDispatcher, setContext } from "svelte";
  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@ -143,10 +158,6 @@

  const dispatch = createEventDispatcher();

-  let multiSelectRef = null;
-  let fieldRef = null;
-  let selectionRef = null;
-
  let inputValue = "";
  let initialSorted = false;
  let highlightedIndex = -1;
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@ -108,6 +108,7 @@
  import Subtract16 from "carbon-icons-svelte/lib/Subtract16/Subtract16.svelte";
  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte";

  const defaultTranslations = {
    [translationIds.increment]: "Increment number",
@ -273,6 +274,9 @@
            class="bx--number__invalid bx--number__invalid--warning"
          />
        {/if}
+        {#if readonly}
+          <EditOff16 class="bx--text-input__readonly-icon" />
+        {/if}
        {#if !hideSteppers}
          <div class:bx--number__controls="{true}">
            <button
--- a/types/FormGroup/FormGroup.d.ts
+++ b/types/FormGroup/FormGroup.d.ts
@ -3,6 +3,12 @@ import { SvelteComponentTyped } from "svelte";

 export interface FormGroupProps
  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
+  /**
+   * Set to `true` for to remove the bottom margin
+   * @default false
+   */
+  noMargin?: boolean;
+
  /**
   * Set to `true` to indicate an invalid state
   * @default false
@ -15,12 +21,6 @@ export interface FormGroupProps
   */
  message?: boolean;

-  /**
-   * Set to `true` for to remove the bottom margin
-   * @default false
-   */
-  noMargin?: boolean;
-
  /**
   * Specify the message text
   * @default ""
@ -32,6 +32,12 @@ export interface FormGroupProps
   * @default ""
   */
  legendText?: string;
+
+  /**
+   * Specify an id for the legend element
+   * @default ""
+   */
+  legendId?: string;
 }

 export default class FormGroup extends SvelteComponentTyped<
--- a/types/LocalStorage/LocalStorage.d.ts
+++ b/types/LocalStorage/LocalStorage.d.ts
@ -13,6 +13,18 @@ export interface LocalStorageProps {
   * @default ""
   */
  value?: any;
+
+  /**
+   * Remove the persisted key value from the browser's local storage
+   * @default () => { localStorage.removeItem(key); }
+   */
+  clearItem?: () => void;
+
+  /**
+   * Clear all key values from the browser's local storage
+   * @default () => { localStorage.clear(); }
+   */
+  clearAll?: () => void;
 }

 export default class LocalStorage extends SvelteComponentTyped<
--- a/types/MultiSelect/MultiSelect.d.ts
+++ b/types/MultiSelect/MultiSelect.d.ts
@ -180,6 +180,24 @@ export interface MultiSelectProps
   * @default null
   */
  inputRef?: null | HTMLInputElement;
+
+  /**
+   * Obtain a reference to the outer div element
+   * @default null
+   */
+  multiSelectRef?: null | HTMLDivElement;
+
+  /**
+   * Obtain a reference to the field box element
+   * @default null
+   */
+  fieldRef?: null | HTMLDivElement;
+
+  /**
+   * Obtain a reference to the selection element
+   * @default null
+   */
+  selectionRef?: null | HTMLDivElement;
 }

 export default class MultiSelect extends SvelteComponentTyped<
--- 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.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"