From eb9412f9d32f656924fa852f2646d6b4b3dd3c84 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 31 Jan 2020 15:05:34 -0800
Subject: [PATCH 1/7] fix(ui-shell): remove role='menu' from ui-shell (#5235)

---
 .../src/components/ui-shell/_header.scss      |  4 +--
 .../src/components/ui-shell/_side-nav.scss    | 21 ++++++--------
 .../src/components/ui-shell/header-nav.hbs    | 12 ++++----
 .../components/ui-shell/navigation-menu.hbs   | 18 +++++++-----
 .../components/ui-shell/side-nav-fixed.hbs    | 20 ++++++-------
 .../src/components/ui-shell/side-nav.hbs      | 28 +++++++++++--------
 .../src/components/UIShell/HeaderMenu.js      | 15 ++--------
 .../src/components/UIShell/SideNavMenu.js     |  4 +--
 .../react/src/components/UIShell/Switcher.js  |  2 +-
 .../src/components/UIShell/UIShell-story.js   |  2 +-
 .../__snapshots__/HeaderMenu-test.js.snap     | 16 ++---------
 .../__snapshots__/SideNavMenu-test.js.snap    |  1 -
 12 files changed, 64 insertions(+), 79 deletions(-)

diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss
index 78f2b0fc8d4f..d4fb4dc67037 100644
--- a/packages/components/src/components/ui-shell/_header.scss
+++ b/packages/components/src/components/ui-shell/_header.scss
@@ -167,7 +167,7 @@
     }
   }
 
-  .#{$prefix}--header__menu-bar[role='menubar'] {
+  .#{$prefix}--header__menu-bar {
     display: flex;
     height: 100%;
     list-style: none;
@@ -240,7 +240,7 @@
     transform: rotate(180deg);
   }
 
-  .#{$prefix}--header__menu[role='menu'] {
+  .#{$prefix}--header__menu {
     display: none;
     list-style: none;
     padding: 0;
diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss
index 3aee0dac9da9..c3879da74ca4 100644
--- a/packages/components/src/components/ui-shell/_side-nav.scss
+++ b/packages/components/src/components/ui-shell/_side-nav.scss
@@ -328,8 +328,8 @@
     > .#{$prefix}--side-nav__submenu:hover,
   .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
     > .#{$prefix}--side-nav__link:hover,
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
+  .#{$prefix}--side-nav__menu
+    a.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
   .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover,
   .#{$prefix}--side-nav
     .#{$prefix}--header__menu-title[aria-expanded='true']:hover {
@@ -433,20 +433,19 @@
     color: $ibm-color__gray-100;
   }
 
-  .#{$prefix}--side-nav__menu[role='menu'] {
+  .#{$prefix}--side-nav__menu {
     display: block;
     visibility: hidden;
     max-height: 0;
   }
 
   .#{$prefix}--side-nav__submenu[aria-expanded='true']
-    + .#{$prefix}--side-nav__menu[role='menu'] {
+    + .#{$prefix}--side-nav__menu {
     max-height: rem(1500px);
     visibility: inherit;
   }
 
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[role='menuitem'] {
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link {
     height: mini-units(4);
     min-height: mini-units(4);
     padding-left: mini-units(4);
@@ -454,13 +453,11 @@
   }
 
   .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
-    a.#{$prefix}--side-nav__link[role='menuitem'] {
+    a.#{$prefix}--side-nav__link {
     padding-left: mini-units(9);
   }
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link--current,
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[aria-current='page'],
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link--current,
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link[aria-current='page'],
   a.#{$prefix}--side-nav__link--current {
     background-color: $ibm-color__gray-20;
 
@@ -584,7 +581,7 @@
   }
 
   .#{$prefix}--side-nav--fixed
-    .#{$prefix}--side-nav__menu[role='menu']
+    .#{$prefix}--side-nav__menu
     a.#{$prefix}--side-nav__link {
     padding-left: mini-units(4);
   }
diff --git a/packages/components/src/components/ui-shell/header-nav.hbs b/packages/components/src/components/ui-shell/header-nav.hbs
index 6018b2c21d53..7c67a16deadc 100644
--- a/packages/components/src/components/ui-shell/header-nav.hbs
+++ b/packages/components/src/components/ui-shell/header-nav.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -17,27 +17,27 @@
   "0", while the rest should get "-1"
 -->
 <nav class="{{@root.prefix}}--header__nav" aria-label="Platform Name" data-header-nav>
-  <ul class="{{@root.prefix}}--header__menu-bar" role="menubar" aria-label="Platform Name">
+  <ul class="{{@root.prefix}}--header__menu-bar" aria-label="Platform Name">
     {{#each header.navLinks}}
     {{#if href}}
     <li>
-      <a class="{{@root.prefix}}--header__menu-item" href="javascript:void(0)" role="menuitem" tabindex="0">
+      <a class="{{@root.prefix}}--header__menu-item" href="javascript:void(0)" tabindex="0">
         {{this.title}}
       </a>
     </li>
     {{else}}
     <li class="{{@root.prefix}}--header__submenu" data-header-submenu>
-      <a class="{{@root.prefix}}--header__menu-item {{@root.prefix}}--header__menu-title" role="menuitem" aria-haspopup="true"
+      <a class="{{@root.prefix}}--header__menu-item {{@root.prefix}}--header__menu-title" aria-haspopup="true"
         aria-expanded="{{this.state.expanded}}" href="javascript:void(0)" tabindex="0">
         {{this.title}}
         <svg class="{{@root.prefix}}--header__menu-arrow" width="12" height="7" aria-hidden="true">
           <path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
         </svg>
       </a>
-      <ul class="{{@root.prefix}}--header__menu" role="menu" aria-label="{{this.title}}">
+      <ul class="{{@root.prefix}}--header__menu" aria-label="{{this.title}}">
         {{#each this.items}}
         <li role="none">
-          <a class="{{@root.prefix}}--header__menu-item" role="menuitem" href="{{this.href}}" tabindex="-1">
+          <a class="{{@root.prefix}}--header__menu-item" href="{{this.href}}" tabindex="-1">
             <span class="{{@root.prefix}}--text-truncate--end">
               {{this.title}}
             </span>
diff --git a/packages/components/src/components/ui-shell/navigation-menu.hbs b/packages/components/src/components/ui-shell/navigation-menu.hbs
index d2b9a9335fc2..4d0781e5f023 100644
--- a/packages/components/src/components/ui-shell/navigation-menu.hbs
+++ b/packages/components/src/components/ui-shell/navigation-menu.hbs
@@ -1,4 +1,4 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
@@ -12,7 +12,8 @@
       {{#each this.items}}
       {{#if this.active}}
       {{#if this.hasIcon}}
-      <li class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active {{@root.prefix}}--navigation-item--icon">
+      <li
+        class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active {{@root.prefix}}--navigation-item--icon">
         {{else}}
       <li class="{{@root.prefix}}--navigation-item {{@root.prefix}}--navigation-item--active">
         {{/if}}
@@ -28,7 +29,8 @@
           {{#if this.hasIcon}}
           <div class="{{@root.prefix}}--navigation-icon">
             <svg width="20" height="20" 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" />
+              <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>
           {{/if}}
@@ -47,7 +49,8 @@
               <div class="{{@root.prefix}}--navigation-icon">
 
                 <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-                  <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" />
+                  <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>
               {{/if}}
@@ -58,14 +61,15 @@
                 </svg>
               </div>
             </button>
-            <ul id="category-1-menu" class="{{@root.prefix}}--navigation__category-items" role="menu">
+            <ul id="category-1-menu" class="{{@root.prefix}}--navigation__category-items">
               {{#each this.links}}
               {{#if this.active}}
-              <li class="{{@root.prefix}}--navigation__category-item {{@root.prefix}}--navigation__category-item--active">
+              <li
+                class="{{@root.prefix}}--navigation__category-item {{@root.prefix}}--navigation__category-item--active">
                 {{else}}
               <li class="{{@root.prefix}}--navigation__category-item">
                 {{/if}}
-                <a class="{{@root.prefix}}--navigation-link" href="{{ this.href }}" role="menuitem">
+                <a class="{{@root.prefix}}--navigation-link" href="{{ this.href }}">
                   {{ this.title }}
                 </a>
               </li>
diff --git a/packages/components/src/components/ui-shell/side-nav-fixed.hbs b/packages/components/src/components/ui-shell/side-nav-fixed.hbs
index 8659f45450b8..d6f10c49a258 100644
--- a/packages/components/src/components/ui-shell/side-nav-fixed.hbs
+++ b/packages/components/src/components/ui-shell/side-nav-fixed.hbs
@@ -20,19 +20,19 @@
             </svg>
           </div>
         </button>
-        <ul class="{{@root.prefix}}--side-nav__menu" role="menu" hidden="">
+        <ul class="{{@root.prefix}}--side-nav__menu" hidden="">
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
-          <li class="{{@root.prefix}}--side-nav__menu-item" role="menuitem">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+          <li class="{{@root.prefix}}--side-nav__menu-item">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
@@ -50,28 +50,28 @@
             </svg>
           </div>
         </button>
-        <ul class="{{@root.prefix}}--side-nav__menu" role="menu">
+        <ul class="{{@root.prefix}}--side-nav__menu">
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 L0 menu item
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 L0 menu item
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
             </a>
           </li>
diff --git a/packages/components/src/components/ui-shell/side-nav.hbs b/packages/components/src/components/ui-shell/side-nav.hbs
index 672f86fd622b..0767ab18a1e1 100644
--- a/packages/components/src/components/ui-shell/side-nav.hbs
+++ b/packages/components/src/components/ui-shell/side-nav.hbs
@@ -13,7 +13,8 @@
         <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" 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" />
+              <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="{{@root.prefix}}--side-nav__link-text">Link</span>
@@ -23,7 +24,8 @@
         <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" 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" />
+              <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="{{@root.prefix}}--side-nav__link-text">Link - active</span>
@@ -33,7 +35,8 @@
         <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" 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" />
+              <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="{{@root.prefix}}--side-nav__link-text">
@@ -46,7 +49,8 @@
           aria-current="page">
           <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
             <svg width="20" height="20" 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" />
+              <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="{{@root.prefix}}--side-nav__link-text">
@@ -58,40 +62,42 @@
         <button class="{{@root.prefix}}--side-nav__submenu" type="button" aria-haspopup="true" aria-expanded="true">
           <div class="{{@root.prefix}}--side-nav__icon">
             <svg width="20" height="20" 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" />
+              <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="{{@root.prefix}}--side-nav__submenu-title">
             Category title that is really long and probably should overflow
           </span>
-          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
+          <div
+            class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
             <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
               <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
             </svg>
           </div>
         </button>
-        <ul class="{{@root.prefix}}--side-nav__menu" role="menu">
+        <ul class="{{@root.prefix}}--side-nav__menu">
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 Link with really long text that probably should be truncated
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">
                 Link with really long text that probably should be truncated
               </span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
               <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
             </a>
           </li>
           <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
-            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
               <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
             </a>
           </li>
diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js
index ceae32af52af..edd651f8445a 100644
--- a/packages/react/src/components/UIShell/HeaderMenu.js
+++ b/packages/react/src/components/UIShell/HeaderMenu.js
@@ -120,8 +120,7 @@ class HeaderMenu extends React.Component {
   };
 
   /**
-   * ref handler for our menu button. This node is represented by the
-   * `role="menu"` attribute. If we are supplied a `focusRef` prop, we also
+   * ref handler for our menu button. If we are supplied a `focusRef` prop, we also
    * forward along the node.
    *
    * This is useful when this component is a child in a
@@ -199,10 +198,7 @@ class HeaderMenu extends React.Component {
           {menuLinkName}
           <MenuContent />
         </a>
-        <ul
-          {...accessibilityLabel}
-          className={`${prefix}--header__menu`}
-          role="menu">
+        <ul {...accessibilityLabel} className={`${prefix}--header__menu`}>
           {React.Children.map(children, this._renderMenuItem)}
         </ul>
       </li>
@@ -210,11 +206,7 @@ class HeaderMenu extends React.Component {
   }
 
   /**
-   * Render an individual menuitem, passing along `role: 'none'` because the
-   * host node <li> doesn't apply when in a <ul> with `role="menu"` and so we
-   * need to revert the semantics.
-   *
-   * We also capture the `ref` for each child inside of `this.items` to properly
+   * We capture the `ref` for each child inside of `this.items` to properly
    * manage focus. In addition to this focus management, all items receive a
    * `tabIndex: -1` so the user won't hit a large number of items in their tab
    * sequence when they might not want to go through all the items.
@@ -223,7 +215,6 @@ class HeaderMenu extends React.Component {
     if (React.isValidElement(item)) {
       return React.cloneElement(item, {
         ref: this.handleItemRef(index),
-        role: 'none',
       });
     }
   };
diff --git a/packages/react/src/components/UIShell/SideNavMenu.js b/packages/react/src/components/UIShell/SideNavMenu.js
index ddd0766cab4f..55def7bf12c4 100644
--- a/packages/react/src/components/UIShell/SideNavMenu.js
+++ b/packages/react/src/components/UIShell/SideNavMenu.js
@@ -164,9 +164,7 @@ export class SideNavMenu extends React.Component {
             <ChevronDown20 />
           </SideNavIcon>
         </button>
-        <ul className={`${prefix}--side-nav__menu`} role="menu">
-          {children}
-        </ul>
+        <ul className={`${prefix}--side-nav__menu`}>{children}</ul>
       </li>
     );
   }
diff --git a/packages/react/src/components/UIShell/Switcher.js b/packages/react/src/components/UIShell/Switcher.js
index 1220440871f5..549c4466b4bf 100644
--- a/packages/react/src/components/UIShell/Switcher.js
+++ b/packages/react/src/components/UIShell/Switcher.js
@@ -31,7 +31,7 @@ const Switcher = React.forwardRef(function Switcher(props, ref) {
   });
 
   return (
-    <ul ref={ref} className={className} role="menu" {...accessibilityLabel}>
+    <ul ref={ref} className={className} {...accessibilityLabel}>
       {children}
     </ul>
   );
diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
index 7f26173b34a2..8d299c5a94b0 100644
--- a/packages/react/src/components/UIShell/UIShell-story.js
+++ b/packages/react/src/components/UIShell/UIShell-story.js
@@ -588,7 +588,7 @@ storiesOf('UI Shell', module)
           </HeaderGlobalAction>
         </HeaderGlobalBar>
         <HeaderPanel aria-label="Header Panel" expanded>
-          <Switcher role="menu" aria-label="Switcher Container">
+          <Switcher aria-label="Switcher Container">
             <SwitcherItem isSelected aria-label="Link 1" href="#">
               Link 1
             </SwitcherItem>
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
index 355e1b61050a..8696178f2e52 100644
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
+++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
@@ -57,16 +57,12 @@ exports[`HeaderMenu should render 1`] = `
       </a>
       <ul
         className="bx--header__menu"
-        role="menu"
       >
         <ForwardRef(HeaderMenuItem)
           href="/a"
           key=".0"
-          role="none"
         >
-          <li
-            role="none"
-          >
+          <li>
             <Link
               className="bx--header__menu-item"
               element="a"
@@ -90,11 +86,8 @@ exports[`HeaderMenu should render 1`] = `
         <ForwardRef(HeaderMenuItem)
           href="/b"
           key=".1"
-          role="none"
         >
-          <li
-            role="none"
-          >
+          <li>
             <Link
               className="bx--header__menu-item"
               element="a"
@@ -118,11 +111,8 @@ exports[`HeaderMenu should render 1`] = `
         <ForwardRef(HeaderMenuItem)
           href="/c"
           key=".2"
-          role="none"
         >
-          <li
-            role="none"
-          >
+          <li>
             <Link
               className="bx--header__menu-item"
               element="a"
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap
index 953ffbbc32e9..8f4a77e6a159 100644
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap
+++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap
@@ -129,7 +129,6 @@ exports[`SideNavMenu should render 1`] = `
     </button>
     <ul
       className="bx--side-nav__menu"
-      role="menu"
     >
       text
     </ul>

From e6386de2f47f0a3ed63817db4d618dc4aba98a63 Mon Sep 17 00:00:00 2001
From: carbon-bot <carbon@us.ibm.com>
Date: Fri, 31 Jan 2020 23:16:03 +0000
Subject: [PATCH 2/7] chore(project): sync generated files

---
 packages/components/docs/sass.md | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 5c2a4a504dc7..beae79da2285 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -24407,7 +24407,7 @@ UI shell header
     }
   }
 
-  .#{$prefix}--header__menu-bar[role='menubar'] {
+  .#{$prefix}--header__menu-bar {
     display: flex;
     height: 100%;
     list-style: none;
@@ -24480,7 +24480,7 @@ UI shell header
     transform: rotate(180deg);
   }
 
-  .#{$prefix}--header__menu[role='menu'] {
+  .#{$prefix}--header__menu {
     display: none;
     list-style: none;
     padding: 0;
@@ -25358,8 +25358,8 @@ UI shell side nav
     > .#{$prefix}--side-nav__submenu:hover,
   .#{$prefix}--side-nav__item:not(.#{$prefix}--side-nav__item--active)
     > .#{$prefix}--side-nav__link:hover,
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
+  .#{$prefix}--side-nav__menu
+    a.#{$prefix}--side-nav__link:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
   .#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover,
   .#{$prefix}--side-nav
     .#{$prefix}--header__menu-title[aria-expanded='true']:hover {
@@ -25463,20 +25463,19 @@ UI shell side nav
     color: $ibm-color__gray-100;
   }
 
-  .#{$prefix}--side-nav__menu[role='menu'] {
+  .#{$prefix}--side-nav__menu {
     display: block;
     visibility: hidden;
     max-height: 0;
   }
 
   .#{$prefix}--side-nav__submenu[aria-expanded='true']
-    + .#{$prefix}--side-nav__menu[role='menu'] {
+    + .#{$prefix}--side-nav__menu {
     max-height: rem(1500px);
     visibility: inherit;
   }
 
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[role='menuitem'] {
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link {
     height: mini-units(4);
     min-height: mini-units(4);
     padding-left: mini-units(4);
@@ -25484,13 +25483,11 @@ UI shell side nav
   }
 
   .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon
-    a.#{$prefix}--side-nav__link[role='menuitem'] {
+    a.#{$prefix}--side-nav__link {
     padding-left: mini-units(9);
   }
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link--current,
-  .#{$prefix}--side-nav__menu[role='menu']
-    a.#{$prefix}--side-nav__link[aria-current='page'],
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link--current,
+  .#{$prefix}--side-nav__menu a.#{$prefix}--side-nav__link[aria-current='page'],
   a.#{$prefix}--side-nav__link--current {
     background-color: $ibm-color__gray-20;
 
@@ -25614,7 +25611,7 @@ UI shell side nav
   }
 
   .#{$prefix}--side-nav--fixed
-    .#{$prefix}--side-nav__menu[role='menu']
+    .#{$prefix}--side-nav__menu
     a.#{$prefix}--side-nav__link {
     padding-left: mini-units(4);
   }

From 054b1da43e551eb541862d4ef88cb5e4792494e3 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Fri, 31 Jan 2020 17:47:03 -0600
Subject: [PATCH 3/7] fix(file-uploader): adjusts default button and removes
 clear file button (#5166)

---
 packages/components/docs/sass.md              | 19 ++++++++-----
 .../file-uploader/_file-uploader.scss         | 28 ++++++++++++-------
 .../FileUploader/FileUploader-story.js        | 16 +----------
 .../components/FileUploader/FileUploader.js   | 13 +++------
 .../FileUploader/stories/drop-container.js    |  2 +-
 5 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index beae79da2285..f3dd8fd1cd91 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -3471,7 +3471,6 @@ $carbon--spacing-07: 2rem;
   - `spacing-07`
 - **Used by**:
   - [snippet [mixin]](#snippet-mixin)
-  - [file-uploader [mixin]](#file-uploader-mixin)
   - [form [mixin]](#form-mixin)
   - [listbox [mixin]](#listbox-mixin)
   - [number-input [mixin]](#number-input-mixin)
@@ -3494,6 +3493,7 @@ $carbon--spacing-08: 2.5rem;
   - `spacing-08`
 - **Used by**:
   - [snippet [mixin]](#snippet-mixin)
+  - [file-uploader [mixin]](#file-uploader-mixin)
   - [listbox [mixin]](#listbox-mixin)
   - [search [mixin]](#search-mixin)
   - [text-area [mixin]](#text-area-mixin)
@@ -6533,6 +6533,7 @@ $icon-01: if(
   - [snippet [mixin]](#snippet-mixin)
   - [data-table-v2-action [mixin]](#data-table-v2-action-mixin)
   - [date-picker [mixin]](#date-picker-mixin)
+  - [file-uploader [mixin]](#file-uploader-mixin)
   - [listbox [mixin]](#listbox-mixin)
   - [modal [mixin]](#modal-mixin)
   - [number-input [mixin]](#number-input-mixin)
@@ -6564,7 +6565,6 @@ $icon-02: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [file-uploader [mixin]](#file-uploader-mixin)
   - [listbox [mixin]](#listbox-mixin)
   - [overflow-menu [mixin]](#overflow-menu-mixin)
   - [search [mixin]](#search-mixin)
@@ -16945,17 +16945,22 @@ File uploader styles
     margin-bottom: $carbon--spacing-05;
   }
 
+  // For backwards compatibility
   .#{$prefix}--file-btn ~ .#{$prefix}--file-container {
     margin-top: $carbon--spacing-06;
   }
 
+  .#{$prefix}--btn ~ .#{$prefix}--file-container {
+    margin-top: $carbon--spacing-05;
+  }
+
   .#{$prefix}--file__selected-file {
     display: grid;
     grid-gap: $carbon--spacing-03 $carbon--spacing-05;
     grid-template-columns: 1fr auto;
     grid-auto-rows: auto;
     align-items: center;
-    min-height: $carbon--spacing-07;
+    min-height: $carbon--spacing-08;
     max-width: rem(320px);
     margin-bottom: $carbon--spacing-03;
     background-color: $field-01;
@@ -17084,7 +17089,7 @@ File uploader styles
     border: none;
     cursor: pointer;
     padding: 0;
-    fill: $icon-02;
+    fill: $icon-01;
 
     &:focus {
       @include focus-outline('border');
@@ -17092,7 +17097,7 @@ File uploader styles
   }
 
   .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
-    fill: $icon-02;
+    fill: $icon-01;
   }
 
   .#{$prefix}--file__state-container .#{$prefix}--inline-loading__animation {
@@ -17132,14 +17137,14 @@ File uploader styles
   - [text-02 [variable]](#text-02-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
-  - [carbon--spacing-07 [variable]](#carbon--spacing-07-variable)
+  - [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
   - [field-01 [variable]](#field-01-variable)
   - [carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
   - [ui-03 [variable]](#ui-03-variable)
   - [ui-05 [variable]](#ui-05-variable)
   - [interactive-04 [variable]](#interactive-04-variable)
   - [icon-03 [variable]](#icon-03-variable)
-  - [icon-02 [variable]](#icon-02-variable)
+  - [icon-01 [variable]](#icon-01-variable)
   - [ui-04 [variable]](#ui-04-variable)
 
 ## form
diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
index 55f55f31e907..542c6996bf16 100644
--- a/packages/components/src/components/file-uploader/_file-uploader.scss
+++ b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -102,17 +102,27 @@
     margin-bottom: $carbon--spacing-05;
   }
 
+  // For backwards compatibility
   .#{$prefix}--file-btn ~ .#{$prefix}--file-container {
     margin-top: $carbon--spacing-06;
   }
 
+  .#{$prefix}--btn ~ .#{$prefix}--file-container {
+    margin-top: $carbon--spacing-05;
+  }
+
+  .#{$prefix}--file .#{$prefix}--file-container,
+  .#{$prefix}--file ~ .#{$prefix}--file-container {
+    margin-top: $carbon--spacing-03;
+  }
+
   .#{$prefix}--file__selected-file {
     display: grid;
-    grid-gap: $carbon--spacing-03 $carbon--spacing-05;
+    grid-gap: $carbon--spacing-05;
     grid-template-columns: 1fr auto;
     grid-auto-rows: auto;
     align-items: center;
-    min-height: $carbon--spacing-07;
+    min-height: $carbon--spacing-09;
     max-width: rem(320px);
     margin-bottom: $carbon--spacing-03;
     background-color: $field-01;
@@ -160,13 +170,12 @@
 
   .#{$prefix}--file__selected-file--invalid {
     @include focus-outline('invalid');
-    outline-width: 1px;
-    padding: $carbon--spacing-04 0;
+    padding: $carbon--spacing-05 0;
   }
 
   .#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement {
     border-top: 1px solid $ui-03;
-    padding-top: $carbon--spacing-03;
+    padding-top: $carbon--spacing-05;
   }
 
   .#{$prefix}--file__selected-file--invalid
@@ -174,8 +183,7 @@
   .#{$prefix}--file__selected-file--invalid
     .#{$prefix}--form-requirement__supplement {
     @include type-style('label-01');
-    padding-right: $carbon--spacing-03;
-    padding-left: $carbon--spacing-05;
+    padding: 0 $carbon--spacing-05;
   }
 
   .#{$prefix}--file__selected-file--invalid
@@ -205,7 +213,7 @@
     display: flex;
     justify-content: center;
     min-width: 1.5rem;
-    padding-right: $carbon--spacing-03;
+    padding-right: $carbon--spacing-05;
 
     .#{$prefix}--loading__svg {
       stroke: $ui-05;
@@ -241,7 +249,7 @@
     border: none;
     cursor: pointer;
     padding: 0;
-    fill: $icon-02;
+    fill: $icon-01;
 
     &:focus {
       @include focus-outline('border');
@@ -249,7 +257,7 @@
   }
 
   .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
-    fill: $icon-02;
+    fill: $icon-01;
   }
 
   .#{$prefix}--file__state-container .#{$prefix}--inline-loading__animation {
diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js
index 18a005b07fb6..f43f771f9fa8 100644
--- a/packages/react/src/components/FileUploader/FileUploader-story.js
+++ b/packages/react/src/components/FileUploader/FileUploader-story.js
@@ -21,7 +21,6 @@ import {
 import { settings } from 'carbon-components';
 import FileUploader, { FileUploaderButton } from '../FileUploader';
 import FileUploaderSkeleton from '../FileUploader/FileUploader.Skeleton';
-import Button from '../Button';
 import FileUploaderItem from './FileUploaderItem';
 import FileUploaderDropContainer from './FileUploaderDropContainer';
 
@@ -133,22 +132,9 @@ storiesOf('FileUploader', module)
   .add(
     'FileUploader',
     () => {
-      let fileUploader;
       return (
         <div className={`${prefix}--file__container`}>
-          <FileUploader
-            {...props.fileUploader()}
-            ref={node => (fileUploader = node)}
-          />
-          <Button
-            kind="secondary"
-            size="small"
-            style={{ marginTop: '1rem' }}
-            onClick={() => {
-              fileUploader.clearFiles();
-            }}>
-            Clear File
-          </Button>
+          <FileUploader {...props.fileUploader()} />
         </div>
       );
     },
diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.js
index 8669da725c0c..b0284ca0701f 100644
--- a/packages/react/src/components/FileUploader/FileUploader.js
+++ b/packages/react/src/components/FileUploader/FileUploader.js
@@ -151,15 +151,10 @@ export class FileUploaderButton extends Component {
       disabled,
       ...other
     } = this.props;
-    const classes = classNames(
-      `${prefix}--btn`,
-      `${prefix}--btn--sm`,
-      className,
-      {
-        [`${prefix}--btn--${buttonKind}`]: buttonKind,
-        [`${prefix}--btn--disabled`]: disabled,
-      }
-    );
+    const classes = classNames(`${prefix}--btn`, className, {
+      [`${prefix}--btn--${buttonKind}`]: buttonKind,
+      [`${prefix}--btn--disabled`]: disabled,
+    });
 
     this.uid = this.props.id || uid();
 
diff --git a/packages/react/src/components/FileUploader/stories/drop-container.js b/packages/react/src/components/FileUploader/stories/drop-container.js
index 93e84bbdd458..593a0217c341 100644
--- a/packages/react/src/components/FileUploader/stories/drop-container.js
+++ b/packages/react/src/components/FileUploader/stories/drop-container.js
@@ -93,7 +93,7 @@ function ExampleDropContainerApp(props) {
         Only .jpg and .png files. 500kb max file size
       </p>
       <FileUploaderDropContainer {...props} onAddFiles={onAddFiles} />
-      <div className="uploaded-files" style={{ width: '100%' }}>
+      <div className={`${prefix}--file-container`}>
         {files.map(
           ({ uuid, name, size, status, iconDescription, invalid, ...rest }) => (
             <FileUploaderItem

From 32d7ba5be001d98463b0dfaba7dd372288262b29 Mon Sep 17 00:00:00 2001
From: carbon-bot <carbon@us.ibm.com>
Date: Sat, 1 Feb 2020 00:00:05 +0000
Subject: [PATCH 4/7] chore(project): sync generated files

---
 packages/components/docs/sass.md | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index f3dd8fd1cd91..4ff4581c656b 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -3383,7 +3383,6 @@ $carbon--spacing-04: 0.75rem;
   - `spacing-04`
 - **Used by**:
   - [dropdown [mixin]](#dropdown-mixin)
-  - [file-uploader [mixin]](#file-uploader-mixin)
   - [lists [mixin]](#lists-mixin)
   - [inline-notifications [mixin]](#inline-notifications-mixin)
   - [text-area [mixin]](#text-area-mixin)
@@ -3493,7 +3492,6 @@ $carbon--spacing-08: 2.5rem;
   - `spacing-08`
 - **Used by**:
   - [snippet [mixin]](#snippet-mixin)
-  - [file-uploader [mixin]](#file-uploader-mixin)
   - [listbox [mixin]](#listbox-mixin)
   - [search [mixin]](#search-mixin)
   - [text-area [mixin]](#text-area-mixin)
@@ -3517,6 +3515,7 @@ $carbon--spacing-09: 3rem;
 - **Used by**:
   - [accordion [mixin]](#accordion-mixin)
   - [date-picker [mixin]](#date-picker-mixin)
+  - [file-uploader [mixin]](#file-uploader-mixin)
   - [listbox [mixin]](#listbox-mixin)
   - [modal [mixin]](#modal-mixin)
   - [tile [mixin]](#tile-mixin)
@@ -16954,13 +16953,18 @@ File uploader styles
     margin-top: $carbon--spacing-05;
   }
 
+  .#{$prefix}--file .#{$prefix}--file-container,
+  .#{$prefix}--file ~ .#{$prefix}--file-container {
+    margin-top: $carbon--spacing-03;
+  }
+
   .#{$prefix}--file__selected-file {
     display: grid;
-    grid-gap: $carbon--spacing-03 $carbon--spacing-05;
+    grid-gap: $carbon--spacing-05;
     grid-template-columns: 1fr auto;
     grid-auto-rows: auto;
     align-items: center;
-    min-height: $carbon--spacing-08;
+    min-height: $carbon--spacing-09;
     max-width: rem(320px);
     margin-bottom: $carbon--spacing-03;
     background-color: $field-01;
@@ -17008,13 +17012,12 @@ File uploader styles
 
   .#{$prefix}--file__selected-file--invalid {
     @include focus-outline('invalid');
-    outline-width: 1px;
-    padding: $carbon--spacing-04 0;
+    padding: $carbon--spacing-05 0;
   }
 
   .#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement {
     border-top: 1px solid $ui-03;
-    padding-top: $carbon--spacing-03;
+    padding-top: $carbon--spacing-05;
   }
 
   .#{$prefix}--file__selected-file--invalid
@@ -17022,8 +17025,7 @@ File uploader styles
   .#{$prefix}--file__selected-file--invalid
     .#{$prefix}--form-requirement__supplement {
     @include type-style('label-01');
-    padding-right: $carbon--spacing-03;
-    padding-left: $carbon--spacing-05;
+    padding: 0 $carbon--spacing-05;
   }
 
   .#{$prefix}--file__selected-file--invalid
@@ -17053,7 +17055,7 @@ File uploader styles
     display: flex;
     justify-content: center;
     min-width: 1.5rem;
-    padding-right: $carbon--spacing-03;
+    padding-right: $carbon--spacing-05;
 
     .#{$prefix}--loading__svg {
       stroke: $ui-05;
@@ -17137,9 +17139,8 @@ File uploader styles
   - [text-02 [variable]](#text-02-variable)
   - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
-  - [carbon--spacing-08 [variable]](#carbon--spacing-08-variable)
+  - [carbon--spacing-09 [variable]](#carbon--spacing-09-variable)
   - [field-01 [variable]](#field-01-variable)
-  - [carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
   - [ui-03 [variable]](#ui-03-variable)
   - [ui-05 [variable]](#ui-05-variable)
   - [interactive-04 [variable]](#interactive-04-variable)

From c9019ce501baf5ac1d7e11ff9f6189ddde35114f Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Sat, 1 Feb 2020 09:25:45 +0900
Subject: [PATCH 5/7] chore(devenv): deploy vanilla devenv (#5227)

Fixes #5205.
---
 .github/workflows/deploy-vanilla-devenv.yml | 49 +++++++++++++++++++++
 packages/components/.cfignore               |  2 +
 packages/components/manifest.yml            |  3 +-
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/deploy-vanilla-devenv.yml

diff --git a/.github/workflows/deploy-vanilla-devenv.yml b/.github/workflows/deploy-vanilla-devenv.yml
new file mode 100644
index 000000000000..9dcc5172e914
--- /dev/null
+++ b/.github/workflows/deploy-vanilla-devenv.yml
@@ -0,0 +1,49 @@
+name: Deploy vanilla devenv to IBM Cloud
+
+on:
+  push:
+    tags:
+      # Matches tags that have the shape `vX.Y.Z`. Reference:
+      # https://help.github.com/en/articles/workflow-syntax-for-github-actions#onpushpull_requesttagsbranches
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+
+      # Ignore tags that use a preid after `vX.Y.Z`, for example: vX.Y.Z-alpha.0
+      # https://help.github.com/en/articles/workflow-syntax-for-github-actions#example-using-positive-and-negative-patterns
+      - '!v[0-9]+.[0-9]+.[0-9]+-*'
+
+jobs:
+  build:
+    runs-on: macOS-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: Use Node.js 10.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: '10.x'
+      - name: Install dependencies
+        run: yarn install --offline
+      - name: Build project
+        run: yarn build
+      - name: Install ibmcloud CLI
+        run: curl -fsSL https://clis.cloud.ibm.com/install/osx | sh
+      - name: Login to IBM Cloud
+        env:
+          CLOUD_API_KEY: ${{ secrets.CLOUD_API_KEY}}
+        run: |
+          ibmcloud login \
+          -a 'https://cloud.ibm.com' \
+          -u 'apikey' \
+          -p "$CLOUD_API_KEY" \
+          -o 'carbon-design-system' \
+          -s 'production' \
+          -r 'us-south'
+      - name: Install IBM Cloud plugins
+        run: |
+          ibmcloud cf add-plugin-repo CF-Community https://plugins.cloudfoundry.org
+          ibmcloud cf install-plugin blue-green-deploy -f -r CF-Community
+      - name: Deploy vanilla devenv
+        run: |
+          cd packages/components
+          ibmcloud cf blue-green-deploy carbon-dev-environment \
+            -f manifest.yml \
+            --delete-old-apps
diff --git a/packages/components/.cfignore b/packages/components/.cfignore
index 3a5c9b7964e4..af5467883571 100644
--- a/packages/components/.cfignore
+++ b/packages/components/.cfignore
@@ -4,6 +4,8 @@
 demo/*
 !demo/index.html
 !demo/demo.js
+!demo/demo.min.js
+!demo/demo.min.js.map
 !demo/demo.css
 !demo/code/
 !demo/code/**
diff --git a/packages/components/manifest.yml b/packages/components/manifest.yml
index 89b2a989a326..4dfce6c5f405 100644
--- a/packages/components/manifest.yml
+++ b/packages/components/manifest.yml
@@ -3,4 +3,5 @@ applications:
 - name: carbon-dev-environment
   memory: 64M
   buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
-  random-route: true
+routes:
+  - route: vanilla.carbondesignsystem.com

From c1c1cfdda3b8e73befe98625b71e460e002e417c Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Fri, 31 Jan 2020 20:17:58 -0600
Subject: [PATCH 6/7] docs(button): expose tertiary button and restrict icon
 button variants (#5201)

---
 .../src/components/button/_button.scss        | 58 ++++++++++++++-----
 .../src/components/button/button.config.js    | 14 ++---
 .../src/components/Button/Button-story.js     | 11 +++-
 .../react/src/components/Button/Button.js     |  7 +--
 4 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index 66e8270c5cb0..0375ae67956d 100644
--- a/packages/components/src/components/button/_button.scss
+++ b/packages/components/src/components/button/_button.scss
@@ -101,7 +101,7 @@
     }
 
     &:active {
-      color: $inverse-01;
+      border-color: transparent;
     }
 
     &:disabled,
@@ -114,7 +114,7 @@
       color: $disabled;
       outline: none;
 
-      & > .#{$prefix}--btn__icon path {
+      > .#{$prefix}--btn__icon path {
         fill: $disabled;
       }
     }
@@ -124,6 +124,19 @@
     }
   }
 
+  .#{$prefix}--btn--tertiary,
+  .#{$prefix}--btn--tertiary.#{$prefix}--btn--field,
+  .#{$prefix}--btn--tertiary.#{$prefix}--btn--sm {
+    padding-right: rem(62px);
+    padding-left: rem(14px);
+
+    &:focus {
+      border-width: rem(3px);
+      padding-right: rem(60px);
+      padding-left: rem(12px);
+    }
+  }
+
   .#{$prefix}--btn--ghost {
     @include button-theme(
       transparent,
@@ -180,13 +193,11 @@
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
     @include tooltip--trigger('icon', 'bottom');
-    outline: $button-outline-width solid transparent;
-    outline-offset: -4px;
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
     border-color: $focus;
-    outline-color: $ui-02;
+    box-shadow: inset 0 0 0 $button-outline-width $ui-02;
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
@@ -207,11 +218,6 @@
     padding-left: rem(13px);
     padding-right: rem(13px);
 
-    &.#{$prefix}--btn--tertiary {
-      padding-left: rem(15px);
-      padding-right: rem(15px);
-    }
-
     .#{$prefix}--btn__icon {
       position: static;
     }
@@ -221,23 +227,43 @@
     }
   }
 
+  .#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
+    padding-left: rem(15px);
+    padding-right: rem(15px);
+
+    &:focus {
+      padding-left: rem(13px);
+      padding-right: rem(13px);
+    }
+  }
+
   .#{$prefix}--btn--field.#{$prefix}--btn--icon-only {
     padding-left: rem(9px);
     padding-right: rem(9px);
+  }
 
-    &.#{$prefix}--btn--tertiary {
-      padding-left: rem(11px);
-      padding-right: rem(11px);
+  .#{$prefix}--btn--field.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
+    padding-left: rem(11px);
+    padding-right: rem(11px);
+
+    &:focus {
+      padding-left: rem(9px);
+      padding-right: rem(9px);
     }
   }
 
   .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only {
     padding-left: rem(5px);
     padding-right: rem(5px);
+  }
 
-    &.#{$prefix}--btn--tertiary {
-      padding-left: rem(7px);
-      padding-right: rem(7px);
+  .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
+    padding-left: rem(7px);
+    padding-right: rem(7px);
+
+    &:focus {
+      padding-left: rem(5px);
+      padding-right: rem(5px);
     }
   }
 
diff --git a/packages/components/src/components/button/button.config.js b/packages/components/src/components/button/button.config.js
index e86dde432976..f75109c35050 100644
--- a/packages/components/src/components/button/button.config.js
+++ b/packages/components/src/components/button/button.config.js
@@ -29,7 +29,7 @@ module.exports = {
       name: 'primary--field',
       label: 'Primary Buttons (Field)',
       notes: `
-        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. 
+        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
         Field buttons match the height of input elements that they sit next to.
       `,
       context: {
@@ -66,7 +66,7 @@ module.exports = {
       name: 'secondary--field',
       label: 'Secondary Buttons (Field)',
       notes: `
-        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. 
+        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
         Field buttons match the height of input elements that they sit next to.
       `,
       context: {
@@ -96,13 +96,14 @@ module.exports = {
         'Tertiary buttons should be used for tertiary actions on each page.',
       context: {
         variant: 'tertiary',
+        hasIconOnly: true,
       },
     },
     {
       name: 'tertiary--field',
       label: 'Tertiary Buttons (Field)',
       notes: `
-        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. 
+        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
         Field buttons match the height of input elements that they sit next to.
       `,
       context: {
@@ -122,6 +123,7 @@ module.exports = {
       context: {
         variant: 'tertiary',
         small: true,
+        hasIconOnly: true,
       },
     },
     {
@@ -138,13 +140,12 @@ module.exports = {
       name: 'danger--field',
       label: 'Danger Buttons (Field)',
       notes: `
-        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. 
+        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
         Field buttons match the height of input elements that they sit next to.
       `,
       context: {
         variant: 'danger',
         field: true,
-        hasIconOnly: true,
       },
     },
     {
@@ -172,13 +173,12 @@ module.exports = {
       name: 'ghost--field',
       label: 'Ghost Buttons (Field)',
       notes: `
-        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field. 
+        "Field" buttons are used in forms, when a button needs to line up horizontally with an input field.
         Field buttons match the height of input elements that they sit next to.
       `,
       context: {
         variant: 'ghost',
         field: true,
-        hasIconOnly: true,
       },
     },
     {
diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
index 989e794fe4f6..8260f1bf0896 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -33,6 +33,7 @@ const iconMap = {
 const kinds = {
   'Primary button (primary)': 'primary',
   'Secondary button (secondary)': 'secondary',
+  'Tertiary button (tertiary)': 'tertiary',
   'Danger button (danger)': 'danger',
   'Ghost button (ghost)': 'ghost',
 };
@@ -64,7 +65,15 @@ const props = {
     const iconToUse = iconMap[select('Icon (icon)', icons, 'Add16')];
     return {
       className: 'some-class',
-      kind: select('Button kind (kind)', kinds, 'primary'),
+      kind: select(
+        'Button kind (kind)',
+        {
+          'Primary button (primary)': 'primary',
+          'Secondary button (secondary)': 'secondary',
+          'Tertiary button (tertiary)': 'tertiary',
+        },
+        'primary'
+      ),
       disabled: boolean('Disabled (disabled)', false),
       size: select('Button size (size)', sizes, 'default'),
       renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
index 780406d9c889..35ad6a797d5f 100644
--- a/packages/react/src/components/Button/Button.js
+++ b/packages/react/src/components/Button/Button.js
@@ -38,12 +38,7 @@ const Button = React.forwardRef(function Button(
     [`${prefix}--btn`]: true,
     [`${prefix}--btn--field`]: size === 'field',
     [`${prefix}--btn--sm`]: size === 'small' || small,
-    [`${prefix}--btn--primary`]: kind === 'primary',
-    [`${prefix}--btn--danger`]: kind === 'danger',
-    [`${prefix}--btn--secondary`]: kind === 'secondary',
-    [`${prefix}--btn--ghost`]: kind === 'ghost',
-    [`${prefix}--btn--danger--primary`]: kind === 'danger--primary',
-    [`${prefix}--btn--tertiary`]: kind === 'tertiary',
+    [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--icon-only`]: hasIconOnly,
     [`${prefix}--tooltip__trigger`]: hasIconOnly,

From af33d29803d1779e09c6a02ee55dae9e64d9aa3b Mon Sep 17 00:00:00 2001
From: carbon-bot <carbon@us.ibm.com>
Date: Sat, 1 Feb 2020 02:28:30 +0000
Subject: [PATCH 7/7] chore(project): sync generated files

---
 packages/components/docs/sass.md | 58 +++++++++++++++++++++++---------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 4ff4581c656b..c38252066665 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -12955,7 +12955,7 @@ Button styles
     }
 
     &:active {
-      color: $inverse-01;
+      border-color: transparent;
     }
 
     &:disabled,
@@ -12968,7 +12968,7 @@ Button styles
       color: $disabled;
       outline: none;
 
-      & > .#{$prefix}--btn__icon path {
+      > .#{$prefix}--btn__icon path {
         fill: $disabled;
       }
     }
@@ -12978,6 +12978,19 @@ Button styles
     }
   }
 
+  .#{$prefix}--btn--tertiary,
+  .#{$prefix}--btn--tertiary.#{$prefix}--btn--field,
+  .#{$prefix}--btn--tertiary.#{$prefix}--btn--sm {
+    padding-right: rem(62px);
+    padding-left: rem(14px);
+
+    &:focus {
+      border-width: rem(3px);
+      padding-right: rem(60px);
+      padding-left: rem(12px);
+    }
+  }
+
   .#{$prefix}--btn--ghost {
     @include button-theme(
       transparent,
@@ -13034,13 +13047,11 @@ Button styles
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
     @include tooltip--trigger('icon', 'bottom');
-    outline: $button-outline-width solid transparent;
-    outline-offset: -4px;
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
     border-color: $focus;
-    outline-color: $ui-02;
+    box-shadow: inset 0 0 0 $button-outline-width $ui-02;
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
@@ -13061,11 +13072,6 @@ Button styles
     padding-left: rem(13px);
     padding-right: rem(13px);
 
-    &.#{$prefix}--btn--tertiary {
-      padding-left: rem(15px);
-      padding-right: rem(15px);
-    }
-
     .#{$prefix}--btn__icon {
       position: static;
     }
@@ -13075,23 +13081,43 @@ Button styles
     }
   }
 
+  .#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
+    padding-left: rem(15px);
+    padding-right: rem(15px);
+
+    &:focus {
+      padding-left: rem(13px);
+      padding-right: rem(13px);
+    }
+  }
+
   .#{$prefix}--btn--field.#{$prefix}--btn--icon-only {
     padding-left: rem(9px);
     padding-right: rem(9px);
+  }
 
-    &.#{$prefix}--btn--tertiary {
-      padding-left: rem(11px);
-      padding-right: rem(11px);
+  .#{$prefix}--btn--field.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
+    padding-left: rem(11px);
+    padding-right: rem(11px);
+
+    &:focus {
+      padding-left: rem(9px);
+      padding-right: rem(9px);
     }
   }
 
   .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only {
     padding-left: rem(5px);
     padding-right: rem(5px);
+  }
 
-    &.#{$prefix}--btn--tertiary {
-      padding-left: rem(7px);
-      padding-right: rem(7px);
+  .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
+    padding-left: rem(7px);
+    padding-right: rem(7px);
+
+    &:focus {
+      padding-left: rem(5px);
+      padding-right: rem(5px);
     }
   }