From 1c8fc7428bf28ee4f77c64ca84dff028a0cbaf97 Mon Sep 17 00:00:00 2001
From: emyarod <afw5059@gmail.com>
Date: Tue, 12 Mar 2019 10:07:26 -0500
Subject: [PATCH] refactor(overflow-menu): convert item to flex item

---
 .../overflow-menu/_overflow-menu.scss         | 12 ++++---
 .../overflow-menu/overflow-menu.hbs           | 31 ++++++++++++++++---
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/components/overflow-menu/_overflow-menu.scss b/src/components/overflow-menu/_overflow-menu.scss
index d3246b6e0ec0..6c0dc81c81a4 100644
--- a/src/components/overflow-menu/_overflow-menu.scss
+++ b/src/components/overflow-menu/_overflow-menu.scss
@@ -319,16 +319,14 @@
     width: 100%;
     height: 100%;
     border: none;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
     background-color: transparent;
     text-align: left;
     padding: 0 $spacing-md;
     cursor: pointer;
     color: $text-02;
     max-width: 11.25rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     transition: outline $transition--base, background-color $transition--base, color $transition--base;
 
     &:hover {
@@ -344,6 +342,12 @@
     }
   }
 
+  .#{$prefix}--overflow-menu-options__option-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .#{$prefix}--overflow-menu-options__option:hover {
     background-color: $hover-ui;
   }
diff --git a/src/components/overflow-menu/overflow-menu.hbs b/src/components/overflow-menu/overflow-menu.hbs
index 3030a7e0e279..4ed5d097dca2 100644
--- a/src/components/overflow-menu/overflow-menu.hbs
+++ b/src/components/overflow-menu/overflow-menu.hbs
@@ -20,13 +20,27 @@
   {{/if}}
   <ul class="{{@root.prefix}}--overflow-menu-options" tabindex="-1" role="menu" aria-label="Overflow"
     data-floating-menu-direction="{{direction}}">
+    <li
+      class="{{@root.prefix}}--overflow-menu-options__option {{#if disabled}} {{@root.prefix}}--overflow-menu-options__option--disabled {{/if}} {{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger {{/if}}"
+      role="presentation" {{#if disabled}} aria-disabled="true" {{/if}}>
+      <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}} title="{{title}}"
+        {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus {{/if}} {{#if disabled}} tabindex="-1" {{/if}}>
+        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
+          asdfasdf
+        </div>
+        {{carbon-icon 'Add16'}}
+      </button>
+    </li>
     {{#each items}}
     <li
       class="{{@root.prefix}}--overflow-menu-options__option {{#if disabled}} {{@root.prefix}}--overflow-menu-options__option--disabled {{/if}} {{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger {{/if}}"
       role="presentation" {{#if disabled}} aria-disabled="true" {{/if}}>
       <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}} title="{{title}}"
-        {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus {{/if}} {{#if disabled}} tabindex="-1"
-        {{/if}}>{{label}}</button>
+        {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus {{/if}} {{#if disabled}} tabindex="-1" {{/if}}>
+        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
+          {{label}}
+        </div>
+      </button>
     </li>
     {{/each}}
   </ul>
@@ -52,8 +66,11 @@
       class="{{@root.prefix}}--overflow-menu-options__option {{#if disabled}} {{@root.prefix}}--overflow-menu-options__option--disabled {{/if}} {{#if danger}} {{@root.prefix}}--overflow-menu-options__option--danger {{/if}}"
       role="presentation" {{#if disabled}} aria-disabled="true" {{/if}}>
       <button class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}} title="{{title}}"
-        {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus {{/if}} {{#if disabled}} tabindex="-1"
-        {{/if}}>{{label}}</button>
+        {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus {{/if}} {{#if disabled}} tabindex="-1" {{/if}}>
+        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
+          {{label}}
+        </div>
+      </button>
     </li>
     {{/each}}
   </ul>
@@ -80,7 +97,11 @@
       role="presentation">
       <a href="https://www.ibm.com" class="{{@root.prefix}}--overflow-menu-options__btn" role="menuitem" {{#if title}}
         title="{{title}}" {{/if}} {{#if primaryFocus}} data-floating-menu-primary-focus{{/if}}{{#if disabled}}
-        tabindex="-1" {{/if}}>{{label}}</a>
+        tabindex="-1" {{/if}}>
+        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
+          {{label}}
+        </div>
+      </a>
     </li>
     {{/each}}
   </ul>