ueno-llc · AAPK-code · Sep 8, 2020
diff --git a/docs/src/components-spec.json b/docs/src/components-spec.json
@@ -320,5 +320,9 @@
       "input": "Standard Event",
       "submit": "Standard Event"
     }
+  },
+  "gux-flyout-menu": {
+    "attributes": {},
+    "events": {}
   }
 }
diff --git a/src/components/beta/gux-flyout-menu/example.html b/src/components/beta/gux-flyout-menu/example.html
@@ -0,0 +1,49 @@
+<div style="display: flex;">
+  <div style="margin-left: 20px;">
+    <gux-flyout-menu-beta>
+      <gux-flyout-option name="Option One" short-cut="Crl+Alt+A"></gux-flyout-option>
+      <gux-flyout-option name="Option Two" short-cut="Crl+Alt+C"></gux-flyout-option>
+      <gux-flyout-option name="Option Three" short-cut="Shift+A"></gux-flyout-option>
+      <gux-flyout-option name="Option Four" short-cut="⌘A"></gux-flyout-option>
+      <gux-flyout-option name="Option Five" short-cut="⌘⇧A"></gux-flyout-option>
+    </gux-flyout-menu-beta>
+  </div>
+  <div style="margin-left: 20px;">
+    <gux-flyout-menu-beta>
+      <gux-flyout-option
+        with-icon
+        icon-name="angle-right"
+        name="Option One"
+      >
+        <div class="gux-flyout-inner-content">
+          <gux-flyout-option with-icon icon-name="angle-right" name="Option One">
+            <div class="gux-flyout-inner-content">
+              <gux-flyout-option name="Option One" short-cut="⌘A"></gux-flyout-option>
+              <gux-flyout-option name="Option Two" short-cut="⌘⇧A"></gux-flyout-option>
+              <gux-flyout-option name="Option Three" short-cut="Crl+C"></gux-flyout-option>
+            </div>
+          </gux-flyout-option>
+          <gux-flyout-option with-icon icon-name="angle-right" name="Option Two"></gux-flyout-option>
+          <gux-flyout-option with-icon icon-name="angle-right" name="Option Three"></gux-flyout-option>
+          <gux-flyout-option with-icon icon-name="angle-right" name="Option Four">
+            <div class="gux-flyout-inner-content">
+              <gux-flyout-option name="Option One" short-cut="⌘A"></gux-flyout-option>
+              <gux-flyout-option name="Option Two" short-cut="⌘⇧A"></gux-flyout-option>
+              <gux-flyout-option name="Option Three" short-cut="Crl+Alt+C"></gux-flyout-option>
+            </div>
+          </gux-flyout-option>
+        </div>
+      </gux-flyout-option>
+      <gux-flyout-option
+        with-icon
+        icon-name="angle-right"
+        name="Option Two"
+      ></gux-flyout-option>
+      <gux-flyout-option
+        with-icon
+        icon-name="angle-right"
+        name="Option Three"
+      ></gux-flyout-option>
+    </gux-flyout-menu-beta>
+  </div>
+</div>
diff --git a/src/components/beta/gux-flyout-menu/gux-flyout-menu.less b/src/components/beta/gux-flyout-menu/gux-flyout-menu.less
@@ -0,0 +1,103 @@
+// Style
+gux-flyout-menu-beta {
+  display: block;
+  padding: 16px 0;
+  background-color: #fdfdfd;
+  box-shadow: 0 0 5px 0 rgba(218, 225, 232, 1);
+  min-width: 185px;
+  position: relative;
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  &::after {
+    border-left: 13px solid transparent;
+    border-right: 13px solid transparent;
+    border-bottom: 11px solid #ffffff;
+    top: -11px;
+    left: 10px;
+  }
+
+  &::before {
+    border-left: 14px solid transparent;
+    border-right: 14px solid transparent;
+    border-bottom: 12px solid rgba(218, 225, 232, 0.8);
+    top: -12px;
+    left: 9px;
+  }
+
+  .gux-flyout {
+    &-content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  gux-flyout-option {
+    font-family: Roboto;
+    padding: 0 16px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    line-height: 32px;
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    height: auto;
+    color: #000000;
+
+    .gux-flyout-inner-content {
+      box-shadow: 0 0 5px 0 rgba(218, 225, 232, 1);
+      padding: 0;
+      position: absolute;
+      top: 0;
+      left: 100%;
+      min-width: 185px;
+    }
+
+    .main-menu-options > .gux-flyout-inner-content {
+      display: none;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: #2A60C8;
+      color: #ffffff;
+      outline: none;
+      cursor: pointer;
+
+      .main-menu-options > .gux-flyout-inner-content {
+        display: block;
+      }
+    }
+  }
+
+  .gux-flyout-inner-content {
+    gux-flyout-option {
+      .main-menu-options > .gux-flyout-inner-content {
+        display: none;
+      }
+
+      &:hover,
+      &:active,
+      &:focus {
+        .main-menu-options > .gux-flyout-inner-content {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .main-menu-options {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
diff --git a/src/components/beta/gux-flyout-menu/gux-flyout-menu.tsx b/src/components/beta/gux-flyout-menu/gux-flyout-menu.tsx
@@ -0,0 +1,14 @@
+import { Component, Element, h } from '@stencil/core';
+
+@Component({
+  styleUrl: 'gux-flyout-menu.less',
+  tag: 'gux-flyout-menu-beta'
+})
+export class GuxFlyoutMenu {
+  @Element()
+  root: HTMLElement;
+
+  render() {
+    return <slot />;
+  }
+}
diff --git a/src/components/beta/gux-flyout-menu/gux-flyout-option/gux-flyout-option.tsx b/src/components/beta/gux-flyout-menu/gux-flyout-option/gux-flyout-option.tsx
@@ -0,0 +1,27 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'gux-flyout-option'
+})
+export class GuxFlyoutOption {
+  @Prop() name = 'default name';
+  @Prop() withIcon: boolean;
+  @Prop() iconName = 'angle-right';
+  @Prop() shortCut: string;
+
+  private isIcon = iconName =>
+    this.withIcon ? (
+      <gux-icon screenreaderText={iconName} icon-name={iconName} />
+    ) : (
+      <span> {this.shortCut} </span>
+    );
+
+  render() {
+    return (
+      <div class="main-menu-options">
+        <slot>{this.name}</slot>
+        {this.isIcon(this.iconName)}
+      </div>
+    );
+  }
+}
diff --git a/src/components/beta/gux-flyout-menu/gux-flyout-option/readme.md b/src/components/beta/gux-flyout-menu/gux-flyout-option/readme.md
@@ -0,0 +1,33 @@
+# gux-flyout-option
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute   | Description | Type      | Default          |
+| ---------- | ----------- | ----------- | --------- | ---------------- |
+| `iconName` | `icon-name` |             | `string`  | `'angle-right'`  |
+| `name`     | `name`      |             | `string`  | `'default name'` |
+| `shortCut` | `short-cut` |             | `string`  | `undefined`      |
+| `withIcon` | `with-icon` |             | `boolean` | `undefined`      |
+
+
+## Dependencies
+
+### Depends on
+
+- [gux-icon](../../../stable/gux-icon)
+
+### Graph
+```mermaid
+graph TD;
+  gux-flyout-option --> gux-icon
+  style gux-flyout-option fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/beta/gux-flyout-menu/readme.md b/src/components/beta/gux-flyout-menu/readme.md
@@ -0,0 +1,10 @@
+# gux-flyout-menu
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/beta/gux-flyout-menu/tests/gux-flyout-menu.e2e.ts b/src/components/beta/gux-flyout-menu/tests/gux-flyout-menu.e2e.ts
@@ -0,0 +1,27 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('gux-panel-frame', () => {
+  it('render root element', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent('<gux-flyout-menu-beta></gux-flyout-menu-beta>');
+    const element = await page.find('gux-flyout-menu-beta');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('render and existing options', async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(`
+      <gux-flyout-option id="opt1" name="Option One" short-cut="Crl+Alt+A"></gux-flyout-option>
+      <gux-flyout-option name="Option Two" short-cut="Crl+Alt+C"></gux-flyout-option>
+      <gux-flyout-option name="Option Three" short-cut="Shift+A"></gux-flyout-option>
+      <gux-flyout-option name="Option Four" short-cut="⌘A"></gux-flyout-option>
+      <gux-flyout-option name="Option Five" short-cut="⌘⇧A"></gux-flyout-option>
+    `);
+    await page.waitForChanges();
+
+    const element = await page.find('#opt1');
+    expect(element).toBeDefined();
+  });
+});
diff --git a/src/components/stable/gux-icon/readme.md b/src/components/stable/gux-icon/readme.md
@@ -28,6 +28,7 @@
  - [gux-disclosure-button](../gux-disclosure-button)
  - [gux-dropdown](../gux-dropdown)
  - [gux-error-message-beta](../../beta/form/gux-form-field/components/gux-error-message-beta)
+ - [gux-flyout-option](../../beta/gux-flyout-menu/gux-flyout-option)
  - [gux-input-color-beta](../../beta/form/gux-form-field/components/gux-input-color-beta)
  - [gux-modal](../gux-modal)
  - [gux-notification-toast](../gux-notification-toast)
@@ -55,6 +56,7 @@ graph TD;
   gux-disclosure-button --> gux-icon
   gux-dropdown --> gux-icon
   gux-error-message-beta --> gux-icon
+  gux-flyout-option --> gux-icon
   gux-input-color-beta --> gux-icon
   gux-modal --> gux-icon
   gux-notification-toast --> gux-icon

diff --git a/src/components/stable/gux-list/list-item/gux-list-item.tsx b/src/components/stable/gux-list/list-item/gux-list-item.tsx
@@ -27,18 +27,18 @@ export class GuxListItem {
   @Prop()
   value: any;
 
-  /**
-   * How the item should be highlighted.
-   */
-  @Prop()
-  strategy: GuxTextHighlightStrategy;
-
   /**
    * Emits when the list item is clicked, or enter/space is pressed.
    */
   @Event()
   press: EventEmitter<any>;
 
+  /**
+   * How the item should be highlighted.
+   */
+  @Prop()
+  strategy: GuxTextHighlightStrategy;
+
   @Listen('click')
   handleClick() {
     this.onItemClicked();