feat: add context-menu

packages/components/src/components/context-menu/_context-menu.scss

@@ -0,0 +1,128 @@
+//
+// Copyright IBM Corp. 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../../globals/scss/vars';
+@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
+@import '../../globals/scss/helper-mixins';
+@import '../../globals/scss/css--reset';
+
+/// Context Menu styles
+/// @access private
+/// @group context-menu
+@mixin context-menu {
+  .#{$prefix}--context-menu {
+    @include box-shadow;
+
+    position: fixed;
+    z-index: z('modal');
+    min-width: 13rem;
+    max-width: 18rem;
+    padding: $spacing-02 0;
+    background-color: $ui-01;
+    visibility: hidden;
+  }
+
+  .#{$prefix}--context-menu--open {
+    visibility: visible;
+
+    &:focus {
+      @include focus-outline('border');
+    }
+  }
+
+  .#{$prefix}--context-menu--invisible {
+    opacity: 0;
+  }
+
+  .#{$prefix}--context-menu-option {
+    position: relative;
+    height: $spacing-07;
+    background-color: $ui-01;
+    transition: background-color $duration--fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--context-menu-option--active,
+  .#{$prefix}--context-menu-option:hover {
+    background-color: $hover-ui;
+  }
+
+  .#{$prefix}--context-menu-option > .#{$prefix}--context-menu {
+    margin-top: calc(#{$spacing-02} * -1);
+  }
+
+  .#{$prefix}--context-menu-option__content {
+    @include button-reset;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 $spacing-05;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--context-menu-option__content--disabled {
+    background-color: $ui-01;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--context-menu-option__content--disabled
+    .#{$prefix}--context-menu-option__label,
+  .#{$prefix}--context-menu-option__content--disabled
+    .#{$prefix}--context-menu-option__info,
+  .#{$prefix}--context-menu-option__content--disabled
+    .#{$prefix}--context-menu-option__icon {
+    color: $disabled-02;
+  }
+
+  .#{$prefix}--context-menu-option__content--indented
+    .#{$prefix}--context-menu-option__label {
+    margin-left: $spacing-05;
+  }
+
+  .#{$prefix}--context-menu-option__label {
+    @include type-style('body-short-01');
+
+    flex-grow: 1;
+    // add top/bottom padding to make sure letters are not cut off by hidden overflow
+    padding: $spacing-02 0;
+    overflow: hidden;
+    color: $text-01;
+    white-space: nowrap;
+    text-align: start;
+    text-overflow: ellipsis;
+  }
+
+  .#{$prefix}--context-menu-option__info {
+    display: inline-flex;
+    margin-left: $spacing-05;
+    color: $icon-01;
+  }
+
+  .#{$prefix}--context-menu-option__icon {
+    display: flex;
+    align-items: center;
+    width: 1rem;
+    height: 1rem;
+    margin-right: $spacing-03;
+    color: $icon-01;
+  }
+
+  .#{$prefix}--context-menu-divider {
+    width: 100%;
+    height: 1px;
+    margin: $spacing-02 0;
+    background-color: $ui-03;
+  }
+}
+
+@include exports('context-menu') {
+  @include context-menu;
+}

packages/components/src/globals/scss/styles.scss

@@ -130,6 +130,7 @@ $deprecations--message: 'Deprecated code was found, this code will be removed be
 @import '../../components/code-snippet/code-snippet';
 @import '../../components/overflow-menu/overflow-menu';
 @import '../../components/content-switcher/content-switcher';
+@import '../../components/context-menu/context-menu';
 @import '../../components/date-picker/date-picker';
 @import '../../components/dropdown/dropdown';
 @import '../../components/loading/loading';

packages/react/.storybook/styles.scss

@@ -50,6 +50,7 @@ $prefix: 'bx';
 @import '~carbon-components/src/components/code-snippet/code-snippet';
 @import '~carbon-components/src/components/overflow-menu/overflow-menu';
 @import '~carbon-components/src/components/content-switcher/content-switcher';
+@import '~carbon-components/src/components/context-menu/context-menu';
 @import '~carbon-components/src/components/date-picker/date-picker';
 @import '~carbon-components/src/components/dropdown/dropdown';
 @import '~carbon-components/src/components/loading/loading';

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -7563,5 +7563,144 @@ Map {
       },
     },
   },
+  "unstable_ContextMenu" => Object {
+    "ContextMenuDivider": Object {},
+    "ContextMenuItem": Object {
+      "propTypes": Object {
+        "children": Object {
+          "type": "node",
+        },
+        "disabled": Object {
+          "type": "bool",
+        },
+        "label": Object {
+          "isRequired": true,
+          "type": "node",
+        },
+        "shortcut": Object {
+          "type": "node",
+        },
+        "shortcutText": Object {
+          "type": "string",
+        },
+      },
+    },
+    "ContextMenuRadioGroup": Object {
+      "propTypes": Object {
+        "initialSelectedItem": Object {
+          "type": "string",
+        },
+        "items": Object {
+          "args": Array [
+            Object {
+              "type": "string",
+            },
+          ],
+          "isRequired": true,
+          "type": "arrayOf",
+        },
+        "label": Object {
+          "isRequired": true,
+          "type": "string",
+        },
+        "onChange": Object {
+          "type": "func",
+        },
+      },
+    },
+    "ContextMenuSelectableOption": Object {
+      "propTypes": Object {
+        "initialChecked": Object {
+          "type": "bool",
+        },
+        "label": Object {
+          "isRequired": true,
+          "type": "node",
+        },
+        "onChange": Object {
+          "type": "func",
+        },
+      },
+    },
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "level": Object {
+        "type": "number",
+      },
+      "onClose": Object {
+        "type": "func",
+      },
+      "open": Object {
+        "type": "bool",
+      },
+      "x": Object {
+        "type": "number",
+      },
+      "y": Object {
+        "type": "number",
+      },
+    },
+  },
+  "unstable_ContextMenuItem" => Object {
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "disabled": Object {
+        "type": "bool",
+      },
+      "label": Object {
+        "isRequired": true,
+        "type": "node",
+      },
+      "shortcut": Object {
+        "type": "node",
+      },
+      "shortcutText": Object {
+        "type": "string",
+      },
+    },
+  },
+  "unstable_ContextMenuDivider" => Object {},
+  "unstable_ContextMenuSelectableOption" => Object {
+    "propTypes": Object {
+      "initialChecked": Object {
+        "type": "bool",
+      },
+      "label": Object {
+        "isRequired": true,
+        "type": "node",
+      },
+      "onChange": Object {
+        "type": "func",
+      },
+    },
+  },
+  "unstable_ContextMenuRadioGroup" => Object {
+    "propTypes": Object {
+      "initialSelectedItem": Object {
+        "type": "string",
+      },
+      "items": Object {
+        "args": Array [
+          Object {
+            "type": "string",
+          },
+        ],
+        "isRequired": true,
+        "type": "arrayOf",
+      },
+      "label": Object {
+        "isRequired": true,
+        "type": "string",
+      },
+      "onChange": Object {
+        "type": "func",
+      },
+    },
+  },
+  "unstable_useContextMenu" => Object {},
 }
 `;

packages/react/src/__tests__/index-test.js

@@ -193,10 +193,16 @@ describe('Carbon Components React', () => {
         "TooltipDefinition",
         "TooltipIcon",
         "UnorderedList",
+        "unstable_ContextMenu",
+        "unstable_ContextMenuDivider",
+        "unstable_ContextMenuItem",
+        "unstable_ContextMenuRadioGroup",
+        "unstable_ContextMenuSelectableOption",
         "unstable_PageSelector",
         "unstable_Pagination",
         "unstable_TreeNode",
         "unstable_TreeView",
+        "unstable_useContextMenu",
       ]
     `);
   });