fix(overflow-menu): match experimental spec (#1808)

* fix(overflow-menu): show ellipsis for all overflowing child elements * docs(overflow-menu): add example with non-button child elements * fix(overflow-menu): darken menu option text on hover
carbon-design-system · Feb 15, 2019 · e5d3a18 · e5d3a18
1 parent d9e89a4
commit e5d3a18
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/src/components/overflow-menu/_overflow-menu.scss b/src/components/overflow-menu/_overflow-menu.scss
@@ -231,7 +231,7 @@
     align-items: flex-start;
     position: absolute;
     z-index: z('floating');
-    background-color: $inverse-01;
+    background-color: $ui-01;
     width: 11.25rem;
     list-style: none;
     top: 32px;
@@ -305,6 +305,13 @@
     border-top: 1px solid $ui-03;
   }
 
+  a.#{$prefix}--overflow-menu-options__btn::before {
+    content: '';
+    height: 100%;
+    vertical-align: middle;
+    display: inline-block;
+  }
+
   .#{$prefix}--overflow-menu-options__btn {
     @include reset;
     @include typescale('zeta');
@@ -314,19 +321,22 @@
     width: 100%;
     height: 100%;
     border: none;
-    display: inline-flex;
-    align-items: center;
+    display: inline-block;
     background-color: transparent;
     text-align: left;
     padding: 0 $spacing-md;
     cursor: pointer;
-    color: $text-01;
+    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 {
+      color: $text-01;
+    }
+
     &:focus {
       @include focus-outline('outline');
     }

diff --git a/src/components/overflow-menu/overflow-menu.hbs b/src/components/overflow-menu/overflow-menu.hbs
@@ -58,3 +58,28 @@
     {{/each}}
   </ul>
 </div>
+
+<div data-overflow-menu tabindex="0" aria-label="Overflow" class="{{@root.prefix}}--overflow-menu" role="button" aria-haspopup="true"
+  aria-expanded="false">
+  {{#if @root.featureFlags.componentsX}}
+    {{ carbon-icon 'OverflowMenuVertical16' class=(add @root.prefix '--overflow-menu__icon') }}
+  {{else}}
+    <svg aria-hidden="true" class="{{@root.prefix}}--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+      <g fill-rule="evenodd">
+        <circle cx="1.5" cy="1.5" r="1.5" />
+        <circle cx="1.5" cy="7.5" r="1.5" />
+        <circle cx="1.5" cy="13.5" r="1.5" />
+      </g>
+    </svg>
+  {{/if}}
+  <ul class="{{@root.prefix}}--overflow-menu-options {{@root.prefix}}--overflow-menu--flip" tabindex="-1" data-floating-menu-direction="{{direction}}"
+    role="menu" aria-label="Overflow">
+    {{#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">
+      <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>
+    </li>
+    {{/each}}
+  </ul>
+</div>