Add Menu component

packages/react-components/src/components/Icons/SvgChevronRightIcon/SvgChevronRightIcon.tsx

@@ -0,0 +1,18 @@
+/* The component implements the Chevron Right icon from Font Awesome: https://fontawesome.com/icons/chevron-right */
+export default function SvgChevronRightIcon({ id = "chevron-right-icon" }) {
+  return (
+    <svg
+      id={id}
+      width="20"
+      height="20"
+      viewBox="0 0 320 512"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

packages/react-components/src/components/Icons/SvgChevronRightIcon/index.ts

@@ -0,0 +1 @@
+export { default } from "./SvgChevronRightIcon";

packages/react-components/src/components/Menu/Menu.css

@@ -0,0 +1,28 @@
+.bcds-react-aria-Menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-margin-small);
+}
+
+.bcds-react-aria-Popover {
+  background-color: var(--surface-color-forms-default);
+  border: 1px solid var(--surface-color-border-default);
+  border-radius: var(--layout-border-radius-medium);
+  box-shadow: var(--surface-shadow-medium);
+  box-sizing: border-box;
+  padding: var(--layout-padding-small) var(--layout-padding-small);
+  width: var(
+    --trigger-width
+  ); /* Variable provided by Menu component: https://react-spectrum.adobe.com/react-aria/Menu.html#popover-1 */
+}
+
+/* Sections */
+.bcds-react-aria-Menu .react-aria-Header {
+  font: var(--typography-bold-small-body);
+}
+
+.bcds-react-aria-Menu .react-aria-MenuSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-margin-small);
+}

packages/react-components/src/components/Menu/Menu.tsx

@@ -0,0 +1,26 @@
+import {
+  MenuTrigger,
+  Menu as ReactAriaMenu,
+  MenuProps as ReactAriaMenuProps,
+  MenuSection,
+  Header as MenuSectionHeader,
+  SubmenuTrigger,
+} from "react-aria-components";
+
+import Popover from "../Popover";
+import "./Menu.css";
+
+export default function Menu<T extends object>({
+  children,
+  ...props
+}: ReactAriaMenuProps<T>) {
+  return (
+    <Popover>
+      <ReactAriaMenu className="bcds-react-aria-Menu" {...props}>
+        {children}
+      </ReactAriaMenu>
+    </Popover>
+  );
+}
+
+export { MenuTrigger, SubmenuTrigger, MenuSection, MenuSectionHeader };

packages/react-components/src/components/Menu/index.ts

@@ -0,0 +1,8 @@
+export {
+  default,
+  MenuTrigger,
+  SubmenuTrigger,
+  MenuSection,
+  MenuSectionHeader,
+} from "./Menu";
+export type { MenuProps } from "react-aria-components";

packages/react-components/src/components/MenuItem/MenuItem.css

@@ -0,0 +1,52 @@
+.bcds-react-aria-Menu-Item {
+  color: var(--typography-color-secondary);
+  display: inline-flex;
+  gap: var(--layout-margin-xsmall);
+  cursor: pointer;
+}
+
+/* Link styling */
+a.bcds-react-aria-Menu-Item {
+  color: var(--typography-color-link);
+  text-decoration: underline;
+  text-underline-offset: var(--layout-padding-hair);
+}
+
+a.bcds-react-aria-Menu-Item[data-hovered] {
+  color: var(--surface-color-border-active);
+}
+
+/* Sizing */
+.bcds-react-aria-Menu-Item.small {
+  font: var(--typography-regular-small-body);
+}
+
+.bcds-react-aria-Menu-Item.medium {
+  font: var(--typography-regular-body);
+}
+
+/* Icon displayed when an item has a submenu */
+.bcds-react-aria-Menu-Item > svg {
+  width: var(--icons-size-xsmall);
+  height: var(--icons-size-xsmall);
+  padding: var(--layout-padding-hair);
+  align-self: center;
+}
+
+/* States */
+
+.bcds-react-aria-Menu-Item[data-focus-visible] {
+  outline: solid var(--layout-border-width-medium)
+    var(--surface-color-border-active);
+  outline-offset: var(--layout-margin-xsmall);
+  border-radius: var(--layout-border-radius-small);
+}
+
+.bcds-react-aria-Menu-Item[data-hovered] {
+  color: var(--surface-color-border-active);
+}
+
+.bcds-react-aria-Menu-Item[data-disabled] {
+  color: var(--typography-color-disabled);
+  cursor: not-allowed;
+}

packages/react-components/src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,43 @@
+import {
+  MenuItem as ReactAriaMenuItem,
+  MenuItemProps as ReactAriaMenuItemProps,
+  MenuItemRenderProps,
+} from "react-aria-components";
+import { ReactNode } from "react";
+import "./MenuItem.css";
+import SvgChevronRightIcon from "../Icons/SvgChevronRightIcon";
+
+export interface MenuItemProps extends ReactAriaMenuItemProps {
+  size?: "small" | "medium";
+  children?:
+    | ReactNode
+    | ((
+        props: MenuItemRenderProps & { defaultChildren: ReactNode }
+      ) => ReactNode);
+}
+
+export default function MenuItem({ size = "small", ...props }: MenuItemProps) {
+  const textValue =
+    props.textValue ||
+    (typeof props.children === "string" ? props.children : undefined);
+
+  return (
+    <ReactAriaMenuItem
+      {...props}
+      textValue={textValue}
+      className={`bcds-react-aria-Menu-Item ${size}`}
+    >
+      {(renderProps: MenuItemRenderProps & { defaultChildren: ReactNode }) => {
+        if (typeof props.children === "function") {
+          return props.children(renderProps);
+        }
+        return (
+          <>
+            {props.children}
+            {renderProps.hasSubmenu && <SvgChevronRightIcon />}
+          </>
+        );
+      }}
+    </ReactAriaMenuItem>
+  );
+}

packages/react-components/src/components/MenuItem/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./MenuItem";
+export type { MenuItemProps } from "./MenuItem";

packages/react-components/src/components/Popover/Popover.css

@@ -0,0 +1,12 @@
+.bcds-react-aria-Popover {
+  background-color: var(--surface-color-forms-default);
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-border-default);
+  border-radius: var(--layout-border-radius-medium);
+  box-shadow: var(--surface-shadow-medium);
+  box-sizing: border-box;
+  padding: var(--layout-padding-xsmall) var(--layout-padding-xsmall);
+  width: var(
+    --trigger-width
+  ); /* Variable provided by Menu component: https://react-spectrum.adobe.com/react-aria/Menu.html#popover-1 */
+}

packages/react-components/src/components/Popover/Popover.tsx

@@ -0,0 +1,12 @@
+import { Popover as ReactAriaPopover } from "react-aria-components";
+import type { PopoverProps } from "react-aria-components";
+
+import "./Popover.css";
+
+export default function Popover(props: PopoverProps) {
+  return (
+    <ReactAriaPopover className="bcds-react-aria-Popover" {...props}>
+      {props.children}
+    </ReactAriaPopover>
+  );
+}

packages/react-components/src/components/Popover/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Popover";
+export type { PopoverProps } from "react-aria-components";

packages/react-components/src/components/Select/Select.css

@@ -90,18 +90,6 @@
 }
 
 /* Dropdown menu panel */
-.bcds-react-aria-Select--Popover {
-  background-color: var(--surface-color-forms-default);
-  border: 1px solid var(--surface-color-border-default);
-  border-radius: var(--layout-border-radius-medium);
-  box-shadow: var(--surface-shadow-medium);
-  box-sizing: border-box;
-  overflow-y: auto;
-  padding: var(--layout-padding-hair) var(--layout-padding-xsmall);
-  width: var(
-    --trigger-width
-  ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */
-}
 .bcds-react-aria-Select--ListBox[data-focused] {
   outline: none;
 }

packages/react-components/src/components/Select/Select.tsx

@@ -9,14 +9,14 @@ import {
   ListBoxItem,
   ListBoxItemProps as ReactAriaListBoxItemProps,
   ListBoxSection,
-  Popover,
   Select as ReactAriaSelect,
   SelectProps as ReactAriaSelectProps,
   SelectValue,
   Text,
   ValidationResult,
 } from "react-aria-components";
 
+import Popover from "../Popover";
 import SvgExclamationIcon from "../Icons/SvgExclamationIcon";
 import SvgChevronUpIcon from "../Icons/SvgChevronUpIcon";
 import SvgChevronDownIcon from "../Icons/SvgChevronDownIcon";
@@ -108,7 +108,7 @@ export default function Select<T extends object>({
           <FieldError className="bcds-react-aria-Select--Error">
             {errorMessage}
           </FieldError>
-          <Popover className="bcds-react-aria-Select--Popover" offset={4}>
+          <Popover offset={4}>
             <ListBox
               className="bcds-react-aria-Select--ListBox"
               // This ternary statement is used to mock the data for `sections`

packages/react-components/src/components/index.ts

@@ -14,7 +14,16 @@ export { default as Footer, FooterLinks } from "./Footer";
 export { default as Form } from "./Form";
 export { default as Header } from "./Header";
 export { default as InlineAlert } from "./InlineAlert";
+export {
+  default as Menu,
+  MenuTrigger,
+  SubmenuTrigger,
+  MenuSection,
+  MenuSectionHeader,
+} from "./Menu";
+export { default as MenuItem } from "./MenuItem";
 export { default as Modal } from "./Modal";
+export { default as Popover } from "./Popover";
 export { default as Radio } from "./Radio";
 export { default as RadioGroup } from "./RadioGroup";
 export { default as Select } from "./Select";
@@ -28,6 +37,7 @@ export { default as SvgExclamationIcon } from "./Icons/SvgExclamationIcon";
 export { default as SvgExclamationCircleIcon } from "./Icons/SvgExclamationCircleIcon";
 export { default as SvgChevronUpIcon } from "./Icons/SvgChevronUpIcon";
 export { default as SvgChevronDownIcon } from "./Icons/SvgChevronDownIcon";
+export { default as SvgChevronRightIcon } from "./Icons/SvgChevronRightIcon";
 export { default as SvgCloseIcon } from "./Icons/SvgCloseIcon";
 export { default as SvgInfoIcon } from "./Icons/SvgInfoIcon";
 export { default as SvgTooltipArrowUp } from "./Icons/SvgTooltipArrowUp";