feat: Add a MultiSelect component

cypress/component/FormField.spec.tsx

@@ -38,7 +38,7 @@ describe('Form Field', () => {
       });
     });
 
-    it.only('should link the input to the label name', () => {
+    it('should link the input to the label name', () => {
       cy.get('input').should('have.ariaLabel', 'First Name');
     });
 

modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -50,6 +50,7 @@ A note to the reader:
   - [Search Form](#search-form)
   - [Select](#select)
   - [Text Area](#text-area)
+  - [Menu Item](#menu-item)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -474,6 +475,20 @@ interface MyProps {
 }
 ```
 
+### Menu Item
+
+**PR: ** [2969](https://github.com/Workday/canvas-kit/pull/2969)
+
+`Menu.Item` was converted to use Stencils for styling and uses SystemIcon stencil variables to
+change icon color instead of deeply nested selectors. We also added a `type` prop that can be either
+`selectable` or `actionable`. The default for `Menu.Item` is `actionable`, while components with the
+primary function of selection (like `Select`) default to `selectable`.
+
+- `actionable` - used for menu items where the user performs an action rather than selecting. A
+  selected checkmark does not show for `actionable` menu items.
+- `selectable` - used for menu items where the user selects an option. A selected checkmark will
+  show. Note this may cause visual regression tests to trigger, but this is intended.
+
 ## Troubleshooting
 
 ### My Styles Seem Broken?

modules/preview-react/mutliselect/MultiSelect.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {createContainer, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {handleCsProp} from '@workday/canvas-kit-styling';
+import {Combobox} from '@workday/canvas-kit-react/combobox';
+import {Menu} from '@workday/canvas-kit-react/menu';
+
+import {useMultiSelectModel} from './useMultiSelectModel';
+import {MultiSelectInput, MultiSelectSearchInput} from './MultiSelectInput';
+import {MultiSelectCard} from './MultiSelectCard';
+
+export interface MultiSelectProps extends React.PropsWithChildren {}
+
+export const MultiSelect = createContainer()({
+  modelHook: useMultiSelectModel,
+  subComponents: {
+    Input: MultiSelectInput,
+    SearchInput: MultiSelectSearchInput,
+    Popper: Combobox.Menu.Popper,
+    Card: MultiSelectCard,
+    List: Combobox.Menu.List,
+    Item: Combobox.Menu.Item,
+  },
+})<MultiSelectProps>(({children, ...elemProps}, _, model) => {
+  return (
+    <Combobox.Menu model={model} {...elemProps}>
+      {children}
+    </Combobox.Menu>
+  );
+});

modules/preview-react/mutliselect/MultiSelectCard.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {
+  createElemPropsHook,
+  createSubcomponent,
+  ExtractProps,
+} from '@workday/canvas-kit-react/common';
+import {Menu} from '@workday/canvas-kit-react/menu';
+
+import {useMultiSelectModel} from './useMultiSelectModel';
+import {calc, px2rem} from '@workday/canvas-kit-styling';
+
+export interface MultiSelectCardProps extends ExtractProps<typeof Menu.Card> {}
+
+/**
+ * This hook sets the `minWidth` style attribute to match the width of the
+ * {@link MultiSelectInput MultiSelect.Input} component.
+ */
+export const useMultiSelectCard = createElemPropsHook(useMultiSelectModel)(model => {
+  return {
+    minWidth: calc.add(px2rem(model.state.width), px2rem(2)),
+  } as const;
+});
+
+export const MultiSelectCard = createSubcomponent('div')({
+  modelHook: useMultiSelectModel,
+  elemPropsHook: useMultiSelectCard,
+})<MultiSelectCardProps>(({children, ...elemProps}, Element) => {
+  return (
+    <Menu.Card as={Element} {...elemProps}>
+      {children}
+    </Menu.Card>
+  );
+});