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

carbon-design-system · Mar 12, 2019 · bc54e96 · bc54e96
1 parent 1aa6fb0
commit bc54e96
Show file tree

Hide file tree

Showing 2 changed files with 57 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
@@ -25,10 +25,24 @@
       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}}
+    <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">
+          Add
+        </div>
+        {{carbon-icon 'Add16'}}
+      </button>
+    </li>
   </ul>
 </div>
 
@@ -52,10 +66,24 @@
       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}}
+    <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">
+          Add
+        </div>
+        {{carbon-icon 'Add16'}}
+      </button>
+    </li>
   </ul>
 </div>
 
@@ -80,8 +108,24 @@
       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}}
+    <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}}>
+      <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}}>
+        <div class="{{@root.prefix}}--overflow-menu-options__option-content">
+          Add
+        </div>
+        {{carbon-icon 'Add16'}}
+      </a>
+    </li>
   </ul>
 </div>