Align v10.34 (#621)

* feat(theme): add g80 theme

* docs(data-table): use link with icon variant

* feat(search): support expandable variant

* fix(file-uploaded): use semantic p element instead of strong

* feat(side-nav): dispatch open, close, click:overlay events

* refactor(ui-shell): remove usage of deprecated Icon component

* feat(ui-shell): allow custom hamburger menu icons

* feat(button): support xl size

* fix(code-snippet): wrap code element with pre

* refactor(button): use button specific tooltip class for icon-only variant

* feat(password-input): support warning, inline props

* feat(data-table): support medium size

src/UIShell/GlobalHeader/Header.svelte

@@ -35,6 +35,22 @@
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render for the closed state
+   * Defaults to `Menu20`
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let iconMenu = Menu20;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render for the opened state
+   * Defaults to `Close20`
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let iconClose = Close20;
+
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
+  import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
   import { shouldRenderHamburgerMenu } from "../navStore";
   import HamburgerMenu from "../SideNav/HamburgerMenu.svelte";
 
@@ -52,7 +68,11 @@
 <header role="banner" aria-label="{ariaLabel}" class:bx--header="{true}">
   <slot name="skip-to-content" />
   {#if ($shouldRenderHamburgerMenu && winWidth < 1056) || persistentHamburgerMenu}
-    <HamburgerMenu bind:isOpen="{isSideNavOpen}" />
+    <HamburgerMenu
+      bind:isOpen="{isSideNavOpen}"
+      iconClose="{iconClose}"
+      iconMenu="{iconMenu}"
+    />
   {/if}
   <a
     href="{href}"

src/UIShell/GlobalHeader/HeaderActionSearch.svelte

@@ -15,7 +15,6 @@
   import { createEventDispatcher } from "svelte";
   import Close20 from "carbon-icons-svelte/lib/Close20";
   import Search20 from "carbon-icons-svelte/lib/Search20";
-  import { Icon } from "../../Icon";
   import searchStore from "../searchStore";
 
   const dispatch = createEventDispatcher();
@@ -96,7 +95,7 @@
         }
       }}"
     >
-      <Icon title="Search" tabindex="0" render="{Search20}" />
+      <svelte:component this="{Search20}" title="Search" tabindex="0" />
     </button>
     <input
       bind:this="{elInput}"
@@ -130,7 +129,7 @@
         }
       }}"
     >
-      <Icon title="Close" tabindex="0" render="{Close20}" />
+      <svelte:component this="{Close20}" title="Close" tabindex="0" />
     </button>
   </div>
 </div>

src/UIShell/SideNav/HamburgerMenu.svelte

@@ -8,18 +8,31 @@
   /** Set to `true` to toggle the open state */
   export let isOpen = false;
 
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render for the closed state
+   * Defaults to `Menu20`
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let iconMenu = Menu20;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render for the opened state
+   * Defaults to `Close20`
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   */
+  export let iconClose = Close20;
+
   /** Obtain a reference to the HTML button element */
   export let ref = null;
 
   import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
   import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
-  import { Icon } from "../../Icon";
 </script>
 
 <button
   bind:this="{ref}"
   type="button"
-  title="Open menu"
+  title="{ariaLabel}"
   aria-label="{ariaLabel}"
   class:bx--header__action="{true}"
   class:bx--header__menu-trigger="{true}"
@@ -28,8 +41,5 @@
   on:click
   on:click="{() => (isOpen = !isOpen)}"
 >
-  <Icon
-    title="{isOpen ? 'Close' : 'Open Menu'}"
-    render="{isOpen ? Close20 : Menu20}"
-  />
+  <svelte:component this="{isOpen ? iconClose : iconMenu}" />
 </button>

src/UIShell/SideNav/SideNav.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * @event {any} open
+   * @event {any} close
+   * @event {any} click:overlay
+   */
+
   /** Set to `true` to use the fixed variant */
   export let fixed = false;
 
@@ -11,9 +17,13 @@
   /** Set to `true` to toggle the expanded state */
   export let isOpen = false;
 
-  import { onMount } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte";
   import { shouldRenderHamburgerMenu } from "../navStore";
 
+  const dispatch = createEventDispatcher();
+
+  $: dispatch(isOpen ? "open" : "close");
+
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);
     return () => shouldRenderHamburgerMenu.set(false);
@@ -23,6 +33,7 @@
 {#if !fixed}
   <div
     on:click="{() => {
+      dispatch('click:overlay');
       isOpen = false;
     }}"
     class:bx--side-nav__overlay="{true}"

src/UIShell/SideNav/SideNavLink.svelte

@@ -22,8 +22,6 @@
 
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
-
-  import Icon from "../../Icon/Icon.svelte";
 </script>
 
 <li class:bx--side-nav__item="{true}">
@@ -42,7 +40,7 @@
         class:bx--side-nav__icon="{true}"
         class:bx--side-nav__icon--small="{true}"
       >
-        <Icon render="{icon}" />
+        <svelte:component this="{icon}" />
       </div>
     {/if}
     <span class:bx--side-nav__link-text="{true}">{text}</span>

src/UIShell/SideNav/SideNavMenu.svelte

@@ -18,7 +18,6 @@
   export let ref = null;
 
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
-  import Icon from "../../Icon/Icon.svelte";
 </script>
 
 <li class:bx--side-nav__item="{true}" class:bx--side-nav__item--icon="{icon}">
@@ -35,7 +34,7 @@
   >
     {#if icon}
       <div class:bx--side-nav__icon="{true}">
-        <Icon render="{icon}" />
+        <svelte:component this="{icon}" />
       </div>
     {/if}
     <span class:bx--side-nav__submenu-title="{true}">{text}</span>
@@ -44,7 +43,7 @@
       class:bx--side-nav__icon--small="{true}"
       class:bx--side-nav__submenu-chevron="{true}"
     >
-      <Icon title="Open Menu" tabindex="0" render="{ChevronDown16}" />
+      <svelte:component this="{ChevronDown16}" title="Open Menu" tabindex="0" />
     </div>
   </button>
   <ul role="menu" class:bx--side-nav__menu="{true}">