Merge pull request #115 from Heydan83/master

UIShell code been left last time
2025-09-16 02:41:05 +00:00 · 2020-01-25 11:00:19 -08:00 · 2020-01-25 11:00:19 -08:00 · dc2212745b
commit dc2212745b
parent 396386ab68 b9d2676f87
10 changed files with 1188 additions and 815 deletions
--- a/src/components/UIShell/UIShell.Story.svelte
+++ b/src/components/UIShell/UIShell.Story.svelte
@ -4,8 +4,13 @@
  import UIShell from './UIShell.svelte';
  import FormTest from './FormTest.svelte';
  import SettingsAdjust20 from 'carbon-icons-svelte/lib/SettingsAdjust20';
+  import ChangeCatalog16 from 'carbon-icons-svelte/lib/ChangeCatalog16';
+  import ManageProtection16 from 'carbon-icons-svelte/lib/ManageProtection16';
+  import Recommend16 from 'carbon-icons-svelte/lib/Recommend16';
+  import Settings16 from 'carbon-icons-svelte/lib/Settings16';
  import { leftPanelActions, leftPanelTypes } from './constants';
  import searchStore from './searchStore';
+  import isNavItemSelectedStore from './UIShellSideNav/isNavItemSelectedStore';

  const navMenu = [
    {
@ -78,7 +83,7 @@
          skeleton: false,
          render: SettingsAdjust20,
          title: 'Settings',
-          tabIndex: 0,
+          tabindex: '0',
          focusable: false,
          style: undefined
        }
@ -200,48 +205,94 @@
      subMenu: [
        {
          href: '#',
-          text: 'Sub-link 1'
+          text: 'Cat 1 Sub-link 1'
        },
        {
          href: '#',
-          text: 'Sub-link 2'
+          text: 'Cat 1 Sub-link 2'
        },
        {
          href: '#',
-          text: 'Sub-link 3'
+          text: 'Cat 1 Sub-link 3'
+        }
+      ],
+      icon: [
+        {
+          class: undefined,
+          skeleton: false,
+          render: ChangeCatalog16,
+          title: 'Catalog',
+          tabindex: '0',
+          focusable: false,
+          style: undefined
        }
      ]
    },
    {
      href: '#',
      text: 'Link 2',
-      subMenu: undefined
+      subMenu: undefined,
+      icon: [
+        {
+          class: undefined,
+          skeleton: false,
+          render: ManageProtection16,
+          title: 'Protection',
+          tabindex: '0',
+          focusable: false,
+          style: undefined
+        }
+      ]
    },
    {
      href: '#',
      text: 'Link 3',
-      subMenu: undefined
+      subMenu: undefined,
+      icon: [
+        {
+          class: undefined,
+          skeleton: false,
+          render: Recommend16,
+          title: 'Recommend',
+          tabindex: '0',
+          focusable: false,
+          style: undefined
+        }
+      ]
    },
    {
      href: undefined,
-      text: 'Link 4',
+      text: 'Category 2',
      subMenu: [
        {
          href: '#',
-          text: 'Sub-link 1'
+          text: 'Cat 2 Sub-link 1'
        },
        {
          href: '#',
-          text: 'Sub-link 2'
+          text: 'Cat 2 Sub-link 2'
        },
        {
          href: '#',
-          text: 'Sub-link 3'
+          text: 'Cat 2 Sub-link 3'
+        }
+      ],
+      icon: [
+        {
+          class: undefined,
+          skeleton: false,
+          render: Settings16,
+          title: 'Settings',
+          tabindex: '0',
+          focusable: false,
+          style: undefined
        }
      ]
    }
  ];

+  isNavItemSelectedStore.setStoreValues(sideNavMenu);
+
  function searchInStore(event) {
    if (event.detail.action === leftPanelActions.search.actionString) {
      searchStore.search(event.detail.textInput);
--- a/src/components/UIShell/UIShell.svelte
+++ b/src/components/UIShell/UIShell.svelte
@ -15,11 +15,26 @@
  import UIShellSideNavItem from './UIShellSideNav/UIShellSideNavItem.svelte';
  import HamburgerMenu from './UIShellSideNav/HamburgerMenu.svelte';

+  let isSideNavOpen = undefined;
+  let winWidth = window.innerWidth;
+
+  window.addEventListener('resize', () => {
+    winWidth = window.innerWidth;
+
+    if (winWidth >= 1056) {
+      isSideNavOpen = true;
+    } else {
+      isSideNavOpen = false;
+    }
+  });
+
  $: ariaLabel = company + (uiShellAriaLabel || $$props['aria-label'] || platformName);
 </script>

 <header aria-label={ariaLabel} class={cx('--header')} role="banner">
-  <HamburgerMenu />
+  {#if winWidth < 1056}
+    <HamburgerMenu bind:isOpen={isSideNavOpen} />
+  {/if}
  <a class={cx('--header__name')} {href}>
    <span class={cx('--header__name--prefix')}>{company}</span>
    &nbsp;{platformName}
@ -35,8 +50,10 @@
    <UIShellRightPanel {rightPanel} on:inputSearch />
  {/if}
  {#if sideNavMenu}
-    <UIShellSideNavWrapper>
-      <UIShellSideNavItem />
+    <UIShellSideNavWrapper bind:isOpen={isSideNavOpen} bind:winWidth>
+      {#each sideNavMenu as itemSideMenu}
+        <UIShellSideNavItem {...itemSideMenu} />
+      {/each}
    </UIShellSideNavWrapper>
  {/if}
 </header>
--- a/src/components/UIShell/UIShellRightPanel/ActionSearch.svelte
+++ b/src/components/UIShell/UIShellRightPanel/ActionSearch.svelte
@ -10,8 +10,8 @@
  import searchStore from '../searchStore';
  import ActionSearchResult from './ActionSearchResult.svelte';

-  let searchTabIndex = 0;
-  let closeTabIndex = -1;
+  let searchTabIndex = '0';
+  let closeTabIndex = '-1';
  let inputSearchField = undefined;
  const dispatch = createEventDispatcher();

@ -46,11 +46,11 @@
  }

  $: if (searchIsActive) {
-    searchTabIndex = -1;
-    closeTabIndex = 0;
+    searchTabIndex = '-1';
+    closeTabIndex = '0';
  } else {
-    searchTabIndex = 0;
-    closeTabIndex = -1;
+    searchTabIndex = '0';
+    closeTabIndex = '-1';
  }

  $: showResults = $searchStore ? true : false;
--- a/src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte
+++ b/src/components/UIShell/UIShellSideNav/HamburgerMenu.svelte
@ -1,29 +1,32 @@
 <script>
  export let ariaLabel = undefined;
+  export let isOpen = false;

  import { cx } from '../../../lib';
  import Menu20 from 'carbon-icons-svelte/lib/Menu20';
  import Icon from '../../Icon/Icon.svelte';
+  import { fly } from 'svelte/transition';
  import { closeIcon } from '../constants';

-  let isOpen = false;
-
-  $: iconProps = !isOpen ? {
+  $: iconProps = !isOpen
+    ? {
        class: undefined,
        skeleton: false,
        render: Menu20,
        title: 'Open Menu',
-      tabIndex: 0,
+        tabindex: '0',
        focusable: false,
        style: undefined
-    } : closeIcon;
+      }
+    : closeIcon;
 </script>

 <button
+  transition:fly={{ x: -200, delay: 50, duration: 250 }}
  aria-label={ariaLabel}
  class={cx('--header__action', '--header__menu-trigger', '--header__menu-toggle')}
  title="Open menu"
  type="button"
-  on:click={() => isOpen = !isOpen}>
+  on:click={() => (isOpen = !isOpen)}>
  <Icon {...iconProps} />
 </button>
--- a/src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte
+++ b/src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte
@ -1,185 +1,81 @@
-<li class="bx--side-nav__item bx--side-nav__item--icon">
-  <button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
-    <div class="bx--side-nav__icon">
-      <svg
-        width="16"
-        height="16"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        aria-hidden="true">
-        <path
-          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
-          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
-          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
-          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-      </svg>
+<script>
+  export let href = undefined;
+  export let text = undefined;
+  export let subMenu = undefined;
+  export let icon = undefined;
+  export let expanded = false;
+
+  import { cx } from '../../../lib';
+  import { onDestroy } from 'svelte';
+  import Icon from '../../Icon/Icon.svelte';
+  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
+  import isNavItemSelectedStore from './isNavItemSelectedStore';
+  import UIShellSideNavSubMenu from './UIShellSideNavSubMenu.svelte';
+
+  let isSelected = undefined;
+
+  const unsubscribe = isNavItemSelectedStore.subscribe(values => {
+    values.forEach(item => {
+      if (item.id === text) {
+        isSelected = item.isSelected;
+      }
+    });
+  });
+
+  let iconProps = {
+    class: undefined,
+    skeleton: false,
+    render: ChevronDown16,
+    title: 'Open Menu',
+    tabindex: '0',
+    focusable: false,
+    style: undefined
+  };
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+</script>
+
+{#if href}
+  <li class={cx('--side-nav__item')}>
+    <a
+      {href}
+      class={cx('--side-nav__link', isSelected && '--side-nav__link--current')}
+      aria-current={isSelected ? 'page' : ''}
+      on:click={() => isNavItemSelectedStore.setSelected(text)}>
+      <div class={cx('--side-nav__icon', '--side-nav__icon--small')}>
+        {#if icon}
+          <Icon {...icon[0]} />
+        {/if}
      </div>
-    <span class="bx--side-nav__submenu-title">Category title</span>
-    <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-      <svg
-        focusable="false"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 32 32"
-        aria-hidden="true"
-        style="will-change: transform;">
-        <path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
-      </svg>
+      <span class={cx('--side-nav__link-text')}>{text}</span>
+    </a>
+  </li>
+{:else}
+  <li class={cx('--side-nav__item', '--side-nav__item--icon')}>
+    <button
+      aria-haspopup="true"
+      aria-expanded={expanded}
+      class={cx('--side-nav__submenu')}
+      type="button"
+      on:click={() => {
+        expanded = !expanded;
+      }}>
+      <div class={cx('--side-nav__icon')}>
+        <Icon {...icon[0]} />
+      </div>
+      <span class={cx('--side-nav__submenu-title')}>{text}</span>
+      <div class={cx('--side-nav__icon', '--side-nav__icon--small', '--side-nav__submenu-chevron')}>
+        {#if icon}
+          <Icon {...iconProps} />
+        {/if}
      </div>
    </button>
-  <ul class="bx--side-nav__menu" role="menu">
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
+    <ul class={cx('--side-nav__menu')} role="menu">
+      {#each subMenu as menuItem}
+        <UIShellSideNavSubMenu {...menuItem} />
+      {/each}
    </ul>
-</li>
-<li class="bx--side-nav__item bx--side-nav__item--icon">
-  <button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
-    <div class="bx--side-nav__icon">
-      <svg
-        width="16"
-        height="16"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        aria-hidden="true">
-        <path
-          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
-          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
-          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
-          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-      </svg>
-    </div>
-    <span class="bx--side-nav__submenu-title">Category title</span>
-    <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-      <svg
-        focusable="false"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 32 32"
-        aria-hidden="true"
-        style="will-change: transform;">
-        <path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
-      </svg>
-    </div>
-  </button>
-  <ul class="bx--side-nav__menu" role="menu">
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
  </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-  </ul>
-</li>
-<li class="bx--side-nav__item bx--side-nav__item--icon">
-  <button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
-    <div class="bx--side-nav__icon">
-      <svg
-        width="16"
-        height="16"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        aria-hidden="true">
-        <path
-          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
-          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
-          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
-          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-      </svg>
-    </div>
-    <span class="bx--side-nav__submenu-title">Category title</span>
-    <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-      <svg
-        focusable="false"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 32 32"
-        aria-hidden="true"
-        style="will-change: transform;">
-        <path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
-      </svg>
-    </div>
-  </button>
-  <ul class="bx--side-nav__menu" role="menu">
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-    <li class="bx--side-nav__menu-item" role="none">
-      <a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
-        <span class="bx--side-nav__link-text">Link</span>
-      </a>
-    </li>
-  </ul>
-</li>
-<li class="bx--side-nav__item">
-  <a href="javascript:void(0)" class="bx--side-nav__link">
-    <div class="bx--side-nav__icon bx--side-nav__icon--small">
-      <svg
-        width="16"
-        height="16"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        aria-hidden="true">
-        <path
-          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
-          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
-          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
-          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-      </svg>
-    </div>
-    <span class="bx--side-nav__link-text">Link</span>
-  </a>
-</li>
-<li class="bx--side-nav__item">
-  <a href="javascript:void(0)" class="bx--side-nav__link">
-    <div class="bx--side-nav__icon bx--side-nav__icon--small">
-      <svg
-        width="16"
-        height="16"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 32 32"
-        aria-hidden="true">
-        <path
-          d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
-          .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
-          0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
-          .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
-      </svg>
-    </div>
-    <span class="bx--side-nav__link-text">Link</span>
-  </a>
-</li>
+{/if}
--- a/src/components/UIShell/UIShellSideNav/UIShellSideNavSubMenu.svelte
+++ b/src/components/UIShell/UIShellSideNav/UIShellSideNavSubMenu.svelte
@ -0,0 +1,33 @@
+<script>
+  export let href = undefined;
+  export let text = undefined;
+
+  import { cx } from '../../../lib';
+  import { onDestroy } from 'svelte';
+  import isNavItemSelectedStore from './isNavItemSelectedStore';
+
+  let isSelected = undefined;
+
+  const unsubscribe = isNavItemSelectedStore.subscribe(values => {
+    values.forEach(item => {
+      if (item.id === text) {
+        isSelected = item.isSelected;
+      }
+    });
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+</script>
+
+<li class={cx('--side-nav__menu-item')} role="none">
+  <a
+    {href}
+    class={cx('--side-nav__link')}
+    role="menuitem"
+    aria-current={isSelected ? 'page' : ''}
+    on:click={() => isNavItemSelectedStore.setSelected(text)}>
+    <span class={cx('--side-nav__link-text')}>{text}</span>
+  </a>
+</li>
--- a/src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte
+++ b/src/components/UIShell/UIShellSideNav/UIShellSideNavWrapper.svelte
@ -1,29 +1,26 @@
 <script>
  export let ariaLabel = undefined;
+  export let isOpen = undefined;

  import { cx } from '../../../lib';
+  import Icon from '../../Icon/Icon.svelte';
+  import { closeIcon } from '../constants';
+
+  $: footerSpanText = isOpen ? 'Open' : 'Close';
 </script>

-<nav class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux')} aria-label={ariaLabel}>
+<nav
+  class={cx('--side-nav__navigation', '--side-nav', '--side-nav--ux', isOpen && '--side-nav--expanded')}
+  aria-label={ariaLabel}>
  <ul class={cx('--side-nav__items')}>
    <slot />
  </ul>
-  <footer class="bx--side-nav__footer">
-    <button class="bx--side-nav__toggle" type="button" title="Open">
-      <div class="bx--side-nav__icon">
-        <svg
-          focusable="false"
-          preserveAspectRatio="xMidYMid meet"
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 32 32"
-          aria-hidden="true"
-          style="will-change: transform;">
-          <path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z" />
-        </svg>
+  <footer class={cx('--side-nav__footer')}>
+    <button class={cx('--side-nav__toggle')} type="button" title="Open">
+      <div class={cx('--side-nav__icon')}>
+        <Icon {...closeIcon} />
      </div>
-      <span class="bx--assistive-text">Open</span>
+      <span class={cx('--assistive-text')}>{footerSpanText}</span>
    </button>
  </footer>
 </nav>
--- a/src/components/UIShell/UIShellSideNav/isNavItemSelectedStore.js
+++ b/src/components/UIShell/UIShellSideNav/isNavItemSelectedStore.js
@ -0,0 +1,60 @@
+import { writable } from 'svelte/store';
+
+const isSelectedStore = writable([undefined]);
+
+const store = {
+  subscribe: isSelectedStore.subscribe,
+  setStoreValues: arrayOfObjs => {
+    let storeNewData = [];
+    arrayOfObjs.forEach(element => {
+      let newItem = {};
+      if (element.href) {
+        newItem = {
+          id: element.text,
+          isSelected: false
+        };
+
+        storeNewData.push(newItem);
+      } else {
+        element.subMenu.forEach(subelement => {
+          newItem = {
+            id: subelement.text,
+            isSelected: false
+          };
+
+          storeNewData.push(newItem);
+        });
+      }
+    });
+
+    isSelectedStore.set(storeNewData);
+  },
+  setSelected: id => {
+    isSelectedStore.update(values => {
+      const newValues = values.map(item => {
+        if (item.id === id) {
+          item.isSelected = true;
+          return item;
+        } else {
+          item.isSelected = false;
+          return item;
+        }
+      });
+
+      return newValues;
+    });
+  },
+  deselectAll: () => {
+    isSelectedStore.update(values => {
+      values.forEach(item => {
+        item.isSelected = false;
+        return item;
+      });
+    });
+  },
+  clear: () => {
+    isSelectedStore.set(undefined);
+  }
+};
+
+export default store;
--- a/src/components/UIShell/constants.js
+++ b/src/components/UIShell/constants.js
@ -13,7 +13,7 @@ export const leftPanelActions = {
      skeleton: false,
      render: Search20,
      title: 'Search',
-      tabIndex: 0,
+      tabindex: '0',
      focusable: false,
      style: undefined
    }
@ -25,7 +25,7 @@ export const leftPanelActions = {
      skeleton: false,
      render: Help20,
      title: 'Help',
-      tabIndex: 0,
+      tabindex: '0',
      focusable: false,
      style: undefined
    }
@ -37,7 +37,7 @@ export const leftPanelActions = {
      skeleton: false,
      render: Notification20,
      title: 'Notifications',
-      tabIndex: 0,
+      tabindex: '0',
      focusable: false,
      style: undefined
    }
@ -49,7 +49,7 @@ export const leftPanelActions = {
      skeleton: false,
      render: UserAvatar20,
      title: 'Account',
-      tabIndex: 0,
+      tabindex: '0',
      focusable: false,
      style: undefined
    }
@ -61,7 +61,7 @@ export const leftPanelActions = {
      skeleton: false,
      render: AppSwitcher20,
      title: 'App Switcher',
-      tabIndex: 0,
+      tabindex: '0',
      focusable: false,
      style: undefined
    }
@ -80,7 +80,7 @@ export const closeIcon = {
  skeleton: false,
  render: Close20,
  title: 'Close',
-  tabIndex: 0,
+  tabindex: '0',
  focusable: false,
  style: undefined
 };
--- a/yarn.lock
+++ b/yarn.lock