refactor(overflow-menu): convert item to flex item

carbon-design-system · Mar 12, 2019 · 1c8fc74 · 1c8fc74
1 parent a6546bf
commit 1c8fc74
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 9 deletions.
diff --git 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
@@ -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>