Feat(Options Menu): Add Options Menu Component

Author: nicolethoen

packages/patternfly-4/react-core/src/components/Dropdown/Dropdown.js

@@ -26,7 +26,7 @@ const propTypes = {
   isOpen: PropTypes.bool,
   /** Display the toggle with no border or background */
   isPlain: PropTypes.bool,
-  /** Indicates where menu will be alligned horizontally */
+  /** Indicates where menu will be aligned horizontally */
   position: PropTypes.oneOf(Object.values(DropdownPosition)),
   /** Display menu above or below dropdown toggle */
   direction: PropTypes.oneOf(Object.values(DropdownDirection)),

packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.d.ts

@@ -0,0 +1,22 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import { DropdownDirection, DropdownPosition } from '../Dropdown';
+import { OneOf } from '../../helpers';
+
+export interface OptionsMenuProps extends HTMLProps<HTMLDivElement> {
+  className?: string;
+  id: string;
+  menuItems: ReactNode[];
+  toggle: ReactNode;
+  title: string,
+  isPlain?: boolean;
+  isOpen?: boolean;
+  isHovered?: boolean;
+  isActive?: boolean;
+  isFocused?: boolean;
+  position?: OneOf<typeof DropdownPosition, keyof typeof DropdownPosition>;
+  direction?: OneOf<typeof DropdownDirection, keyof typeof DropdownDirection>;
+}
+
+declare const OptionsMenu: FunctionComponent<OptionsMenuProps>;
+
+export default OptionsMenu;

packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.js

@@ -0,0 +1,102 @@
+import React, { Children, cloneElement, Component } from 'react';
+import PropTypes from 'prop-types';
+import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.css';
+import { css, getModifier } from '@patternfly/react-styles';
+import { OptionsMenuDirection, OptionsMenuPosition } from './optionsMenuConstants';
+
+const propTypes = {
+  /** Classes applied to root element of the Options menu */
+  className: PropTypes.string,
+  /** Id of the root element of the Options menu */
+  id: PropTypes.string.isRequired,
+  /** Array of OptionsMenuItem and/or OptionMenuItemGroup nodes that will be rendered in the Options menu list */
+  menuItems: PropTypes.arrayOf(PropTypes.node).isRequired,
+  /** Either an OptionsMenuToggleButton or a custom button to use to toggle the Options menu */
+  toggle: PropTypes.node.isRequired,
+  /** Provides an accessible name for the Options menu */
+  title: PropTypes.string,
+  /** Flag to indicate if menu is open */
+  isOpen: PropTypes.bool,
+  /** Flag to indicate the toggle has no border or background */
+  isPlain: PropTypes.bool,
+  /** Forces display of the hover state of the Options menu */
+  isHovered: PropTypes.bool,
+  /** Forces display of the active state of the Options menu */
+  isActive:  PropTypes.bool,
+  /** Forces display of the hover state of the Options menu */
+  isFocused: PropTypes.bool,
+  /** Display menu above or below Options menu toggle */
+  direction: PropTypes.oneOf(Object.values(OptionsMenuDirection)),
+  /** Indicates where menu will be aligned horizontally */
+  position: PropTypes.oneOf(Object.values(OptionsMenuPosition)),
+};
+
+const defaultProps = {
+  className: '',
+  title: '',
+  isOpen: false,
+  isPlain: false,
+  isHovered: false,
+  isActive:  false,
+  isFocused: false,
+  direction: OptionsMenuDirection.down,
+  position: OptionsMenuPosition.left,
+};
+
+class OptionsMenu extends Component {
+
+  render() {
+    const {
+      className,
+      direction,
+      position,
+      id,
+      isOpen,
+      isPlain,
+      isHovered,
+      isActive,
+      isFocused,
+      isText,
+      title,
+      menuItems,
+      toggle } = this.props;
+    return (
+      <div id={id}
+        className={
+          css(styles.optionsMenu,
+            direction === OptionsMenuDirection.up && getModifier(styles, 'top'),
+            position === OptionsMenuPosition.right && getModifier(styles, 'align-right'),
+            isOpen && getModifier(styles, 'expanded'),
+            className)}>
+        <span id={`${id}-label`} hidden>{title || id}</span>
+        <div className={css(styles.optionsMenuToggle,
+          isPlain && getModifier(styles, 'plain'),
+          isHovered && getModifier(styles, 'hover'),
+          isActive && getModifier(styles, 'active'),
+          isFocused && getModifier(styles, 'focus'),
+          isText && getModifier(styles, 'text')
+        )}>
+          {Children.map(toggle, oneToggle =>
+            cloneElement(oneToggle, {
+              parentId: id,
+              isOpen,
+            })
+          )}
+        </div>
+        <ul className={css(styles.optionsMenuMenu,
+          position === OptionsMenuPosition.right && getModifier(styles, 'align-right'))}
+            aria-labelledby={`${id}-label`}
+            hidden={!isOpen}>
+          {menuItems.map((item) => {
+            return <li key={item.key}>{item}</li>
+          })}
+        </ul>
+      </div>
+    )
+  }
+}
+
+OptionsMenu.propTypes = propTypes;
+OptionsMenu.defaultProps = defaultProps;
+
+export default OptionsMenu;