;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js b/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js
index d3a36409c3e..a14bca29525 100644
--- a/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js
+++ b/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js
@@ -2,22 +2,61 @@ import React from 'react';
import { css } from '@patternfly/react-styles';
import PropTypes from 'prop-types';
import styles from '@patternfly/patternfly/components/DataList/data-list.css';
-import { EllipsisVIcon } from '@patternfly/react-icons';
-import { Button, ButtonVariant } from '../Button';
+import { Dropdown, DropdownPosition, KebabToggle } from '../Dropdown';
-const DataListAction = ({ className, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, rowid, ...props }) => (
-
-
-
-);
+class DataListAction extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ isOpen: false
+ };
+ }
+
+ onToggle = isOpen => {
+ this.setState({ isOpen });
+ };
+
+ onSelect = event => {
+ this.setState(prevState => ({
+ isOpen: !prevState.isOpen
+ }));
+ };
+
+ render() {
+ const {
+ children,
+ actions,
+ className,
+ id,
+ 'aria-label': ariaLabel,
+ 'aria-labelledby': ariaLabelledBy,
+ ...props
+ } = this.props;
+
+ return children ? (
+ children
+ ) : (
+
+ }
+ dropdownItems={actions}
+ />
+
+ );
+ }
+}
DataListAction.propTypes = {
/** Content rendered inside the DataList list */
children: PropTypes.node,
/** Additional classes added to the DataList list */
className: PropTypes.string,
+ /** DataList actions to show in the dropdown */
+ actions: PropTypes.arrayOf(PropTypes.node).isRequired,
/** Identify the DataList toggle number */
id: PropTypes.string.isRequired,
/** Adds accessible text to the DataList item */
diff --git a/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap b/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap
index 1d667172ea6..23e998c90c0 100644
--- a/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/DataList/__snapshots__/DataList.test.js.snap
@@ -31,6 +31,84 @@ exports[`DataList Cell default 1`] = `
`;
+exports[`DataList DataListAction button 1`] = `
+
+`;
+
+exports[`DataList DataListAction dropdown 1`] = `
+.pf-c-data-list__action {
+ display: block;
+ flex: 0 0 auto;
+ margin-left: 1.5rem;
+}
+
+
+
+ action-1
+ ,
+ -
+ action-2
+
,
+ ]
+ }
+ isOpen={false}
+ isPlain={true}
+ onSelect={[Function]}
+ position="right"
+ toggle={
+
+ }
+ />
+
+`;
+
exports[`DataList Item 1`] = `
.pf-c-data-list__item.data-list-item-custom {
display: flex;
diff --git a/packages/patternfly-4/react-core/src/components/DataList/examples/ActionsDataList.js b/packages/patternfly-4/react-core/src/components/DataList/examples/ActionsDataList.js
new file mode 100644
index 00000000000..4d20dbe91c4
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/DataList/examples/ActionsDataList.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+ Button,
+ Dropdown,
+ KebabToggle,
+ DropdownItem,
+ DataList,
+ DataListItem,
+ DataListCell,
+ DataListCheck,
+ DataListAction
+} from '@patternfly/react-core';
+
+class ActionsDataList extends React.Component {
+ state = { isOpen: false, isDeleted: false };
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
+export default ActionsDataList;