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/Button/Button.svelte

@@ -13,7 +13,7 @@
 
   /**
    * Specify the size of button
-   * @type {"default" | "field" | "small"}
+   * @type {"default" | "field" | "small" | "xl"}
    */
   export let size = "default";
 
@@ -100,12 +100,15 @@
       "bx--btn",
       size === "field" && "bx--btn--field",
       size === "small" && "bx--btn--sm",
+      size === "xl" && "bx--btn--xl",
       kind && `bx--btn--${kind}`,
       disabled && "bx--btn--disabled",
       hasIconOnly && "bx--btn--icon-only",
       hasIconOnly && "bx--tooltip__trigger",
       hasIconOnly && "bx--tooltip--a11y",
-      hasIconOnly && tooltipPosition && `bx--tooltip--${tooltipPosition}`,
+      hasIconOnly &&
+        tooltipPosition &&
+        `bx--btn--icon-only--${tooltipPosition}`,
       hasIconOnly &&
         tooltipAlignment &&
         `bx--tooltip--align-${tooltipAlignment}`,

src/CodeSnippet/CodeSnippet.svelte

@@ -179,11 +179,10 @@
       aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
       class:bx--snippet-container="{true}"
     >
-      <code>
-        <pre bind:this="{ref}">
-            <slot>{code}</slot>
-          </pre>
-      </code>
+      <pre
+        bind:this="{ref}">
+        <code><slot>{code}</slot></code>
+      </pre>
     </div>
     {#if !hideCopyButton}
       <CopyButton

src/DataTable/DataTable.svelte

@@ -37,7 +37,7 @@
 
   /**
    * Set the size of the data table
-   * @type {"compact" | "short" | "tall"}
+   * @type {"compact" | "short" | "medium" | "tall"}
    */
   export let size = undefined;
 

src/DataTable/Table.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Set the size of the table
-   * @type {"compact" | "short" | "tall"}
+   * @type {"compact" | "short" | "medium" | "tall"}
    */
   export let size = undefined;
 
@@ -28,6 +28,7 @@
       class:bx--data-table--compact="{size === 'compact'}"
       class:bx--data-table--short="{size === 'short'}"
       class:bx--data-table--tall="{size === 'tall'}"
+      class:bx--data-table--md="{size === 'medium'}"
       class:bx--data-table--sort="{sortable}"
       class:bx--data-table--zebra="{zebra}"
       class:bx--data-table--static="{useStaticWidth}"
@@ -43,6 +44,7 @@
     class:bx--data-table--compact="{size === 'compact'}"
     class:bx--data-table--short="{size === 'short'}"
     class:bx--data-table--tall="{size === 'tall'}"
+    class:bx--data-table--md="{size === 'medium'}"
     class:bx--data-table--sort="{sortable}"
     class:bx--data-table--zebra="{zebra}"
     class:bx--data-table--static="{useStaticWidth}"

src/FileUploader/FileUploader.svelte

@@ -84,7 +84,7 @@
   on:mouseenter
   on:mouseleave
 >
-  <strong class:bx--file--label="{true}">{labelTitle}</strong>
+  <p class:bx--file--label="{true}">{labelTitle}</p>
   <p class:bx--label-description="{true}">{labelDescription}</p>
   <FileUploaderButton
     disableLabelChanges

src/Search/Search.svelte

@@ -1,8 +1,12 @@
 <script>
+  /**
+   * @event {any} expand
+   * @event {any} collapse
+   */
+
   /**
    * @deprecated this prop will be removed in the next major release
    * Use size="sm" instead
-   * @type {boolean} [small=false]
    */
   export let small = false;
 
@@ -15,40 +19,28 @@
   /** Specify the class name passed to the outer div element */
   export let searchClass = "";
 
-  /**
-   * Set to `true` to display the skeleton state
-   * @type {boolean} [skeleton=false]
-   */
+  /** Set to `true` to display the skeleton state  */
   export let skeleton = false;
 
-  /**
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
+  /** Set to `true` to enable the light variant */
   export let light = false;
 
-  /**
-   * Set to `true` to disable the search input
-   * @type {boolean} [disabled=false]
-   */
+  /** Set to `true` to disable the search input */
   export let disabled = false;
 
-  /**
-   * Specify the value of the search input
-   * @type {string} [value=""]
-   */
+  /** Set to `true` to enable the expandable variant */
+  export let expandable = false;
+
+  /** Set to `true to expand the search input */
+  export let expanded = false;
+
+  /** Specify the value of the search input */
   export let value = "";
 
-  /**
-   * Specify the `type` attribute of the search input
-   * @type {string} [type="text"]
-   */
+  /** Specify the `type` attribute of the search input */
   export let type = "text";
 
-  /**
-   * Specify the `placeholder` attribute of the search input
-   * @type {string} [placeholder="Search..."]
-   */
+  /** Specify the `placeholder` attribute of the search input */
   export let placeholder = "Search...";
 
   /**
@@ -79,6 +71,11 @@
   import SearchSkeleton from "./SearchSkeleton.svelte";
 
   const dispatch = createEventDispatcher();
+
+  let searchRef = null;
+
+  $: if (expanded && ref) ref.focus();
+  $: dispatch(expanded ? "expand" : "collapse");
 </script>
 
 {#if skeleton}
@@ -101,9 +98,17 @@
     class:bx--search--sm="{size === 'sm' || small}"
     class:bx--search--lg="{size === 'lg'}"
     class:bx--search--xl="{size === 'xl'}"
+    class:bx--search--expandable="{expandable}"
+    class:bx--search--expanded="{expanded}"
     class="{searchClass}"
   >
-    <div class:bx--search-magnifier="{true}">
+    <div
+      bind:this="{searchRef}"
+      class:bx--search-magnifier="{true}"
+      on:click="{() => {
+        if (expandable) expanded = true;
+      }}"
+    >
       <Search16 class="bx--search-magnifier-icon" />
     </div>
     <label id="{id}-search" for="{id}" class:bx--label="{true}"
@@ -128,7 +133,15 @@
         value = target.value;
       }}"
       on:focus
+      on:focus="{() => {
+        if (expandable) expanded = true;
+      }}"
       on:blur
+      on:blur="{() => {
+        if (expanded && value.trim().length === 0) {
+          expanded = false;
+        }
+      }}"
       on:keydown
       on:keydown="{({ key }) => {
         if (key === 'Escape') {

src/TextInput/PasswordInput.svelte

@@ -59,6 +59,15 @@
   /** Specify the text for the invalid state */
   export let invalidText = "";
 
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
+  /** Set to `true` to use inline version */
+  export let inline = false;
+
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -73,6 +82,7 @@
 
   import { getContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
   import View16 from "carbon-icons-svelte/lib/View16/View16.svelte";
   import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16/ViewOff16.svelte";
 
@@ -80,100 +90,146 @@
 
   $: isFluid = !!ctx && ctx.isFluid;
   $: errorId = `error-${id}`;
+  $: warnId = `warn-${id}`;
 </script>
 
 <div
   class:bx--form-item="{true}"
   class:bx--text-input-wrapper="{true}"
   class:bx--password-input-wrapper="{!isFluid}"
+  class:bx--text-input-wrapper--light="{light}"
+  class:bx--text-input-wrapper--inline="{inline}"
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  {#if labelText}
+  {#if inline}
     <label
       for="{id}"
       class:bx--label="{true}"
       class:bx--visually-hidden="{hideLabel}"
       class:bx--label--disabled="{disabled}"
+      class:bx--label--inline="{inline}"
+      class:bx--label--inline--sm="{inline && size === 'sm'}"
+      class:bx--label--inline--xl="{inline && size === 'xl'}"
+    >
+      {labelText}
+    </label>
+    {#if !isFluid && helperText}
+      <div
+        class:bx--form__helper-text="{true}"
+        class:bx--form__helper-text--disabled="{disabled}"
+        class:bx--form__helper-text--inline="{inline}"
+      >
+        {helperText}
+      </div>
+    {/if}
+  {:else}
+    <label
+      for="{id}"
+      class:bx--label="{true}"
+      class:bx--visually-hidden="{hideLabel}"
+      class:bx--label--disabled="{disabled}"
+      class:bx--label--inline="{inline}"
+      class:bx--label--inline--sm="{inline && size === 'sm'}"
+      class:bx--label--inline--xl="{inline && size === 'xl'}"
     >
       {labelText}
     </label>
   {/if}
   <div
-    class:bx--text-input__field-wrapper="{true}"
-    data-invalid="{invalid || undefined}"
+    class:bx--text-input__field-outer-wrapper="{true}"
+    class:bx--text-input__field-outer-wrapper--inline="{inline}"
   >
-    {#if invalid}
-      <WarningFilled16 class="bx--text-input__invalid-icon" />
-    {/if}
-    <input
-      bind:this="{ref}"
-      data-invalid="{invalid || undefined}"
-      aria-invalid="{invalid || undefined}"
-      aria-describedby="{invalid ? errorId : undefined}"
-      id="{id}"
-      name="{name}"
-      placeholder="{placeholder}"
-      type="{type}"
-      value="{value}"
-      disabled="{disabled}"
-      class:bx--text-input="{true}"
-      class:bx--password-input="{true}"
-      class:bx--text-input--light="{light}"
-      class:bx--text-input--invalid="{invalid}"
-      {...$$restProps}
-      class="{size && `bx--text-input--${size}`}"
-      on:change
-      on:input
-      on:input="{({ target }) => {
-        value = target.value;
-      }}"
-      on:keydown
-      on:focus
-      on:blur
-    />
-    <button
-      type="button"
-      disabled="{disabled}"
-      class:bx--text-input--password__visibility__toggle="{true}"
-      class:bx--btn="{true}"
-      class:bx--btn--icon-only="{true}"
-      class:bx--btn--disabled="{disabled}"
-      class:bx--tooltip__trigger="{true}"
-      class:bx--tooltip--a11y="{true}"
-      class="{tooltipPosition &&
-        `bx--tooltip--${tooltipPosition}`}
-        {tooltipAlignment &&
-        `bx--tooltip--align-${tooltipAlignment}`}"
-      on:click="{() => {
-        type = type === 'password' ? 'text' : 'password';
-      }}"
-    >
-      {#if !disabled}
-        <span class:bx--assistive-text="{true}">
-          {#if type === "text"}
-            {hidePasswordLabel}
-          {:else}{showPasswordLabel}{/if}
-        </span>
-      {/if}
-      {#if type === "text"}
-        <ViewOff16 class="bx--icon-visibility-off" />
-      {:else}
-        <View16 class="bx--icon-visibility-on" />
-      {/if}
-    </button>
-  </div>
-  {#if !invalid && helperText}
     <div
-      class:bx--form__helper-text="{true}"
-      class:bx--form__helper-text--disabled="{disabled}"
+      class:bx--text-input__field-wrapper="{true}"
+      class:bx--text-input__field-wrapper--warning="{warn}"
+      data-invalid="{invalid || undefined}"
     >
-      {helperText}
+      {#if invalid}
+        <WarningFilled16 class="bx--text-input__invalid-icon" />
+      {/if}
+      {#if !invalid && warn}
+        <WarningAltFilled16
+          class="bx--text-input__invalid-icon
+            bx--text-input__invalid-icon--warning"
+        />
+      {/if}
+      <input
+        bind:this="{ref}"
+        data-invalid="{invalid || undefined}"
+        aria-invalid="{invalid || undefined}"
+        aria-describedby="{invalid ? errorId : warn ? warnId : undefined}"
+        id="{id}"
+        name="{name}"
+        placeholder="{placeholder}"
+        type="{type}"
+        value="{value}"
+        disabled="{disabled}"
+        class:bx--text-input="{true}"
+        class:bx--password-input="{true}"
+        class:bx--text-input--light="{light}"
+        class:bx--text-input--invalid="{invalid}"
+        class:bx--text-input--warning="{warn}"
+        {...$$restProps}
+        class="{size && `bx--text-input--${size}`}"
+        on:change
+        on:input
+        on:input="{({ target }) => {
+          value = target.value;
+        }}"
+        on:keydown
+        on:focus
+        on:blur
+      />
+      <button
+        type="button"
+        disabled="{disabled}"
+        class:bx--text-input--password__visibility__toggle="{true}"
+        class:bx--btn="{true}"
+        class:bx--btn--icon-only="{true}"
+        class:bx--btn--disabled="{disabled}"
+        class:bx--tooltip__trigger="{true}"
+        class:bx--tooltip--a11y="{true}"
+        class="{tooltipPosition &&
+          `bx--tooltip--${tooltipPosition}`}
+        {tooltipAlignment &&
+          `bx--tooltip--align-${tooltipAlignment}`}"
+        on:click="{() => {
+          type = type === 'password' ? 'text' : 'password';
+        }}"
+      >
+        {#if !disabled}
+          <span class:bx--assistive-text="{true}">
+            {#if type === "text"}
+              {hidePasswordLabel}
+            {:else}{showPasswordLabel}{/if}
+          </span>
+        {/if}
+        {#if type === "text"}
+          <ViewOff16 class="bx--icon-visibility-off" />
+        {:else}
+          <View16 class="bx--icon-visibility-on" />
+        {/if}
+      </button>
     </div>
-  {/if}
-  {#if invalid}
-    <div class:bx--form-requirement="{true}" id="{errorId}">{invalidText}</div>
-  {/if}
+    {#if !isFluid && invalid}
+      <div class:bx--form-requirement="{true}" id="{errorId}">
+        {invalidText}
+      </div>
+    {/if}
+    {#if !invalid && !warn && !isFluid && !inline}
+      <div
+        class:bx--form__helper-text="{true}"
+        class:bx--form__helper-text--disabled="{disabled}"
+        class:bx--form__helper-text--inline="{inline}"
+      >
+        {helperText}
+      </div>
+    {/if}
+    {#if !isFluid && !invalid && warn}
+      <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+    {/if}
+  </div>
 </div>

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}">