feat(ActionList): Add isVertical variant

Author: rebeccaalpert

packages/react-core/src/components/ActionList/ActionList.tsx

@@ -8,15 +8,27 @@ export interface ActionListProps extends React.HTMLProps<HTMLDivElement> {
   isIconList?: boolean;
   /** Additional classes added to the action list */
   className?: string;
+  /** Whether the layout of children is vertical or horizontal. */
+  isVertical?: boolean;
 }
 
 export const ActionList: React.FunctionComponent<ActionListProps> = ({
   children,
   isIconList,
   className,
+  isVertical = false,
   ...props
 }: ActionListProps) => (
-  <div className={css(styles.actionList, isIconList && styles.modifiers.icons, className)} {...props}>
+  <div
+    className={css(
+      styles.actionList,
+      isIconList && styles.modifiers.icons,
+      // @ts-expect-error: Vertical modifier does not yet exist
+      isVertical && styles.modifiers.vertical,
+      className
+    )}
+    {...props}
+  >
     {children}
   </div>
 );

packages/react-core/src/components/ActionList/__tests__/ActionList.test.tsx

@@ -37,6 +37,18 @@ test(`Renders with class ${styles.modifiers.icons} when isIconList is true`, ()
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.icons);
 });
 
+test(`Does not render with class ${styles.modifiers.vertical} by default`, () => {
+  render(<ActionList>Test</ActionList>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.vertical);
+});
+
+test(`Renders with class ${styles.modifiers.vertical} when isVertical is true`, () => {
+  render(<ActionList isVertical={true}>Test</ActionList>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.vertical);
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(<ActionList aria-label="Test label">Test</ActionList>);
 

packages/react-core/src/components/ActionList/examples/ActionList.md

@@ -9,6 +9,10 @@ import { Fragment, useState } from 'react';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 
 ## Examples
 
@@ -35,3 +39,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 ```ts file="./ActionListWithCancelButton.tsx"
 
 ```
+
+### Action list with vertical modifier
+
+```ts file="./ActionListVertical.tsx"
+
+```

packages/react-core/src/components/ActionList/examples/ActionListVertical.tsx

@@ -0,0 +1,41 @@
+import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+
+export const ActionListVertical: React.FunctionComponent = () => (
+  <>
+    <h4>With icons</h4>
+    <ActionList isVertical>
+      <ActionListItem>
+        <Button variant="plain" icon={<PlayIcon />} />
+      </ActionListItem>
+      <ActionListItem>
+        <Button variant="plain" icon={<OutlinedPlusSquare />} />
+      </ActionListItem>
+      <ActionListItem>
+        <Button variant="plain" icon={<OutlinedQuestionCircleIcon />} />
+      </ActionListItem>
+    </ActionList>
+    <h4>With icons in groups</h4>
+    <ActionList isVertical>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button variant="plain" icon={<PlayIcon />} />
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="plain" icon={<OutlinedPlusSquare />} />
+        </ActionListItem>
+      </ActionListGroup>
+      <ActionListGroup>
+        <ActionListItem>
+          <Button variant="plain" icon={<OutlinedQuestionCircleIcon />} />
+        </ActionListItem>
+        <ActionListItem>
+          <Button variant="plain" icon={<OutlinedCopy />} />
+        </ActionListItem>
+      </ActionListGroup>
+    </ActionList>
+  </>
+);