Alignment with Carbon version 10.30 (#559)

* feat(toolbar): forward "clear" event in ToolbarSearch

* docs(search): add on:clear example

* fix(ui-shell): set aria-hidden in SideNav

Ref c2b4f1f00

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

* fix(text-input): use bx--text-input class for TextInputSkeleton

* fix(radio-button): only render span if labelText is truthy

* docs(password-input): add custom tooltip example

* feat(button): add isSelected prop for icon-only, ghost buttons

* feat(radio-button): add legendText prop to RadioButtonGroup

* docs(tag): add filterable (disabled) variant

* feat(tag): add interactive prop

* chore(number-input): deprecate the mobile variant

Mobile variant styles will no longer work.

* feat(button): set aria-pressed attribute if icon-only, ghost button is selected

* fix(multi-select): type dispatched select event

* fix(button): remove redundant "button" role

* feat(icon): deprecate Icon, IconSkeleton

* feat(ui-shell): make SideNavMenuItem text slottable

* fix(list-box): update styles for ListBoxSelection

* fix(list-box): temporarily apply override styles to ListBoxMenuIcon for chevron

* fix(tag): set disabled prop on interactive tag

* docs(button): extract selected, icon-only button example

* feat(tooltip): elevate z-index of tooltip when open

* feat: forward restProps to input element

* fix(types): fix TimePicker test to pass svelte-check

* feat: add ImageLoader component

* test: add ImageLoader

* feat: add LocalStorage component

* test(local-storage): fix invalid file

* chore(docs): use green tag type

tests/ImageLoader.test.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { ImageLoader } from "../types";
+
+  let loading = false;
+  let loaded = false;
+  let error = false;
+</script>
+
+<ImageLoader
+  bind:loading
+  bind:loaded
+  bind:error
+  fadeIn
+  ratio="16x9"
+  src=""
+  on:load="{() => {}}"
+  on:error="{() => {}}"
+/>

tests/LocalStorage.test.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { LocalStorage } from "../types";
+
+  let storage;
+  let toggled = false;
+  let events = [];
+</script>
+
+<LocalStorage
+  bind:this="{storage}"
+  key="dark-mode"
+  bind:value="{toggled}"
+  on:save="{() => {
+    events = [...events, { event: 'on:save' }];
+  }}"
+  on:update="{({ detail }) => {
+    events = [...events, { event: 'on:update', detail }];
+  }}"
+/>

tests/MultiSelect.test.svelte

@@ -11,6 +11,11 @@
     { id: '1', text: 'Email' },
     { id: '2', text: 'Fax' },
   ]}"
+  on:select="{(e) => {
+    console.log(e.detail.selectedIds);
+    console.log(e.detail.selected);
+    console.log(e.detail.unselected);
+  }}"
 />
 
 <MultiSelect

tests/RadioButton.test.svelte

@@ -1,48 +1,25 @@
 <script lang="ts">
-  import {
-    FormGroup,
-    RadioButton,
-    RadioButtonSkeleton,
-    RadioButtonGroup,
-  } from "../types";
+  import { RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "../types";
 </script>
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup selected="standard">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
+  <RadioButton labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup labelPosition="left" selected="standard">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup
+  legendText="Storage tier (disk)"
+  labelPosition="left"
+  selected="standard"
+>
+  <RadioButton labelText="Free (1 GB)" value="free" />
+  <RadioButton labelText="Standard (10 GB)" value="standard" />
+  <RadioButton labelText="Pro (128 GB)" value="pro" />
+</RadioButtonGroup>
 
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup orientation="vertical" selected="standard">
-    <RadioButton labelText="Free (1 GB)" value="free" />
-    <RadioButton labelText="Standard (10 GB)" value="standard" />
-    <RadioButton labelText="Pro (128 GB)" value="pro" />
-  </RadioButtonGroup>
-</FormGroup>
-
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup>
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-  </RadioButtonGroup>
-</FormGroup>
-
-<FormGroup legendText="Storage tier (disk)">
-  <RadioButtonGroup orientation="vertical">
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-    <RadioButtonSkeleton />
-  </RadioButtonGroup>
-</FormGroup>
+<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
+  <RadioButtonSkeleton />
+  <RadioButtonSkeleton />
+  <RadioButtonSkeleton />
+</RadioButtonGroup>

tests/Tag.test.svelte

@@ -31,4 +31,6 @@
 
 <Tag icon="{Add16}">Custom icon</Tag>
 
+<Tag interactive>Text</Tag>
+
 <Tag skeleton />

tests/TimePicker.test.svelte

@@ -2,7 +2,7 @@
   import { TimePicker, TimePickerSelect, SelectItem } from "../types";
 </script>
 
-<TimePicker labelText="Cron job" placeholder="hh:mm">
+<TimePicker spellcheck="{false}" labelText="Cron job" placeholder="hh:mm">
   <TimePickerSelect value="PM">
     <SelectItem value="am" text="AM" />
     <SelectItem value="pm" text="PM" />