Action List: Close Actions Menu on Action click (#697)

* Changing children property in ActionListColumn interface to title

* Updated ActionListItemAction to close Action menu on click / enter key press

* Removed unnecessary MenuContext import

* Updated ActionList test suite to reflect change to ActionListColumn interface and new Action click behavior

* Updated sort_utils.test

* Updated sort_utils snapshots

* Updated icons in ActionListDemo

* Removed unnecessary state in ActionListItem

Author: Elliot

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `TextArea` component was created with documentation and tests
 - `FieldTextArea` component was created with documentation and tests
 - `ArrowLeft`, `EditOutline`, `ExploreOutline` Icons added
+- `ActionList` supports sorting
 - `ModalHeader` add support for `iconClose` option
 
 ### Change
@@ -20,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - update InputSearch to display search icon
 - `ArrowDropDown` and `ArrowDropUp` Icons renamed to `ArrowUp` and `ArrowDown`
 - `CacheRefesh` Icon update
+- `ActionList` closes Actions menu on `ActionListItemAction` click
 - `Confirm` no longer displays a `Close` `IconButton` in the header
 
 

packages/components/src/ActionList/ActionList.test.tsx

@@ -39,21 +39,21 @@ import {
 const columns: ActionListColumns = [
   {
     canSort: true,
-    children: 'ID',
     id: 'id',
     primaryKey: true,
+    title: 'ID',
     type: 'number',
     widthPercent: 10,
   },
   {
-    children: 'Name',
     id: 'name',
+    title: 'Name',
     type: 'string',
     widthPercent: 45,
   },
   {
-    children: 'Role',
     id: 'role',
+    title: 'Role',
     type: 'string',
     widthPercent: 45,
   },
@@ -218,7 +218,6 @@ describe('ActionList', () => {
       fireEvent.click(viewProfileAction)
       expect(handleActionClick.mock.calls.length).toBe(1)
 
-      fireEvent.click(listItemButton)
       expect(queryByText('View Profile')).not.toBeInTheDocument()
     })
   })

packages/components/src/ActionList/ActionList.tsx

@@ -37,7 +37,7 @@ import { ActionListHeaderColumn } from './ActionListHeader/ActionListHeaderColum
 
 export type ActionListColumns = ActionListColumn[]
 export interface ActionListColumn {
-  children: ReactNode
+  title: ReactNode
   /**
    * A unique identifier for a given column
    * Note: A column object's id should match a key in your data object template

packages/components/src/ActionList/ActionListHeader/generate.tsx

@@ -4,9 +4,9 @@ import { ActionListHeaderColumn } from './ActionListHeaderColumn'
 import { ActionListHeader } from './ActionListHeader'
 
 export const generateActionListHeaderColumns = (columns: ActionListColumns) =>
-  columns.map(({ children, id }) => (
+  columns.map(({ id, title }) => (
     <ActionListHeaderColumn key={id} id={id}>
-      {children}
+      {title}
     </ActionListHeaderColumn>
   ))
 

packages/components/src/ActionList/ActionListItemAction.tsx

@@ -26,8 +26,8 @@
 
 import { CompatibleHTMLProps } from '@looker/design-tokens'
 import { IconNames } from '@looker/icons'
-import React, { ReactNode } from 'react'
-import { MenuItem } from '../Menu/'
+import React, { ReactNode, useContext } from 'react'
+import { MenuItem, MenuContext } from '../Menu'
 
 export interface ActionListItemActionProps
   extends CompatibleHTMLProps<HTMLElement> {
@@ -41,6 +41,13 @@ export interface ActionListItemActionProps
  * MenuItem may undergo a refactor soon. Creating a proxy in the form of ActionListItemAction
  * allows us to adapt to any changes to MenuItem or its interface.
  * */
-export const ActionListItemAction = (props: ActionListItemActionProps) => (
-  <MenuItem {...props} />
-)
+export const ActionListItemAction = (props: ActionListItemActionProps) => {
+  const { setOpen } = useContext(MenuContext)
+  const handleActionClick = (
+    event: React.MouseEvent<HTMLElement, MouseEvent>
+  ) => {
+    setOpen && setOpen(false)
+    props.onClick && props.onClick(event)
+  }
+  return <MenuItem {...props} onClick={handleActionClick} />
+}

packages/components/src/ActionList/utils/__snapshots__/sort_utils.test.ts.snap

@@ -5,17 +5,17 @@ Object {
   "columns": Array [
     Object {
       "canSort": true,
-      "children": "ID",
       "id": "id",
       "primaryKey": true,
       "sortDirection": "asc",
+      "title": "ID",
       "type": "number",
       "widthPercent": 20,
     },
     Object {
       "canSort": true,
-      "children": "Name",
       "id": "name",
+      "title": "Name",
       "type": "string",
       "widthPercent": 80,
     },
@@ -38,17 +38,17 @@ Object {
   "columns": Array [
     Object {
       "canSort": true,
-      "children": "ID",
       "id": "id",
       "primaryKey": true,
       "sortDirection": "desc",
+      "title": "ID",
       "type": "number",
       "widthPercent": 20,
     },
     Object {
       "canSort": true,
-      "children": "Name",
       "id": "name",
+      "title": "Name",
       "type": "string",
       "widthPercent": 80,
     },
@@ -71,17 +71,17 @@ Object {
   "columns": Array [
     Object {
       "canSort": true,
-      "children": "ID",
       "id": "id",
       "primaryKey": true,
+      "title": "ID",
       "type": "number",
       "widthPercent": 20,
     },
     Object {
       "canSort": true,
-      "children": "Name",
       "id": "name",
       "sortDirection": "asc",
+      "title": "Name",
       "type": "string",
       "widthPercent": 80,
     },
@@ -104,17 +104,17 @@ Object {
   "columns": Array [
     Object {
       "canSort": true,
-      "children": "ID",
       "id": "id",
       "primaryKey": true,
+      "title": "ID",
       "type": "number",
       "widthPercent": 20,
     },
     Object {
       "canSort": true,
-      "children": "Name",
       "id": "name",
       "sortDirection": "desc",
+      "title": "Name",
       "type": "string",
       "widthPercent": 80,
     },

packages/components/src/ActionList/utils/sort_utils.test.ts

@@ -54,16 +54,16 @@ describe('Action List Sort Utils', () => {
     const columns: ActionListColumns = [
       {
         canSort: true,
-        children: 'ID',
         id: 'id',
         primaryKey: true,
+        title: 'ID',
         type: 'number',
         widthPercent: 20,
       },
       {
         canSort: true,
-        children: 'Name',
         id: 'name',
+        title: 'Name',
         type: 'string',
         widthPercent: 80,
       },

packages/playground/src/ActionList/ActionListDemo.tsx

@@ -61,33 +61,33 @@ const data = [
 
 const columns: ActionListColumns = [
   {
-    children: 'PDT Name',
     id: 'pdt_name',
     primaryKey: true,
+    title: 'PDT Name',
     type: 'string',
     widthPercent: 27,
   },
   {
-    children: 'Status',
     id: 'status',
+    title: 'Status',
     type: 'string',
     widthPercent: 13,
   },
   {
-    children: 'Model',
     id: 'model',
+    title: 'Model',
     type: 'string',
     widthPercent: 20,
   },
   {
-    children: 'Persistance Type',
     id: 'persistance_type',
+    title: 'Persistance Type',
     type: 'string',
     widthPercent: 20,
   },
   {
-    children: 'Last Successful Build',
     id: 'last_successful_build',
+    title: 'Last Successful Build',
     type: 'string',
     widthPercent: 20,
   },
@@ -144,7 +144,7 @@ export const ActionListDemo: FC = () => {
           }
           indicator={
             <Icon
-              name={status === 'Success' ? 'ArrowUp' : 'ArrowDown'}
+              name={status === 'Success' ? 'CircleCheck' : 'CircleCancel'}
               color={
                 status === 'Success' ? 'palette.green300' : 'palette.red300'
               }

packages/playground/src/ActionList/SortableActionListDemo.tsx

@@ -49,16 +49,16 @@ export const SortableActionListDemo: FC = () => {
   const columns: ActionListColumns = [
     {
       canSort: true,
-      children: 'ID',
       id: 'id',
       primaryKey: true,
+      title: 'ID',
       type: 'number',
       widthPercent: 20,
     },
     {
       canSort: true,
-      children: 'Name',
       id: 'name',
+      title: 'Name',
       type: 'string',
       widthPercent: 80,
     },