feat(DataList): add compact data list

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

@@ -15,6 +15,8 @@ export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
   onSelectDataListItem?: (id: string) => void;
   /* Id of DataList item currently selected */
   selectedDataListItemId?: string;
+  /** Flag indicating if DataList should have compact styling */
+  isCompact?: boolean;
 }
 
 interface DataListContextProps {
@@ -33,6 +35,7 @@ export const DataList: React.FunctionComponent<DataListProps> = ({
   'aria-label': ariaLabel,
   selectedDataListItemId = '',
   onSelectDataListItem,
+  isCompact = false,
   ...props
 }: DataListProps) => {
   const isSelectable = !isUndefined(onSelectDataListItem);
@@ -49,7 +52,11 @@ export const DataList: React.FunctionComponent<DataListProps> = ({
         updateSelectedDataListItem
       }}
     >
-      <ul className={css(styles.dataList, className)} aria-label={ariaLabel} {...props}>
+      <ul
+        className={css(styles.dataList, isCompact && styles.modifiers.compact, className)}
+        aria-label={ariaLabel}
+        {...props}
+      >
         {children}
       </ul>
     </DataListContext.Provider>

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

@@ -18,6 +18,11 @@ describe('DataList', () => {
     expect(view).toMatchSnapshot();
   });
 
+  test('List compact', () => {
+    const view = shallow(<DataList aria-label="this is a simple list" isCompact />);
+    expect(view).toMatchSnapshot();
+  });
+
   test('List', () => {
     const view = shallow(<DataList key="list-id-1" className="data-list-custom" aria-label="this is a simple list" />);
     expect(view).toMatchSnapshot();

packages/react-core/src/components/DataList/__tests__/__snapshots__/DataList.test.tsx.snap

@@ -128,6 +128,23 @@ exports[`DataList List 1`] = `
 </ContextProvider>
 `;
 
+exports[`DataList List compact 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "isSelectable": false,
+      "selectedDataListItemId": "",
+      "updateSelectedDataListItem": [Function],
+    }
+  }
+>
+  <ul
+    aria-label="this is a simple list"
+    className="pf-c-data-list pf-m-compact"
+  />
+</ContextProvider>
+`;
+
 exports[`DataList List default 1`] = `
 <ContextProvider
   value={

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

@@ -2,31 +2,94 @@
 title: 'Data list'
 section: components
 cssPrefix: 'pf-c-data-list'
-propComponents: ['DataList', 'DataListAction', 'DataListCell', 'DataListCheck', 'DataListItem', 'DataListItemCells', 'DataListItemRow', 'DataListToggle', 'DataListContent']
+propComponents:
+  [
+    'DataList',
+    'DataListAction',
+    'DataListCell',
+    'DataListCheck',
+    'DataListItem',
+    'DataListItemCells',
+    'DataListItemRow',
+    'DataListToggle',
+    'DataListContent',
+  ]
 typescript: true
 ---
+
+import {
+Button,
+DataList,
+DataListItem,
+DataListItemCells,
+DataListItemRow,
+DataListCell,
+DataListCheck,
+DataListAction,
+DataListActionVisibility,
+DataListToggle,
+DataListContent,
+Dropdown,
+DropdownPosition,
+KebabToggle,
+DropdownItem
+} from '@patternfly/react-core';
+import { CodeBranchIcon } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
+
+## Examples
+
+```js title=Basic
+import React from 'react';
 import {
   Button,
   DataList,
   DataListItem,
-  DataListItemCells,
   DataListItemRow,
+  DataListItemCells,
   DataListCell,
   DataListCheck,
   DataListAction,
-  DataListActionVisibility,
   DataListToggle,
   DataListContent,
   Dropdown,
-  DropdownPosition,
   KebabToggle,
   DropdownItem
 } from '@patternfly/react-core';
-import { CodeBranchIcon } from '@patternfly/react-icons';
-import { css } from '@patternfly/react-styles';
 
-## Examples
-```js title=Basic
+SimpleDataList = () => (
+  <DataList aria-label="Simple data list example">
+    <DataListItem aria-labelledby="simple-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content">
+              <span id="simple-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content">Secondary content</DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+    <DataListItem aria-labelledby="simple-item2">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell isFilled={false} key="secondary content fill">
+              <span id="simple-item2">Secondary content (pf-m-no-fill)</span>
+            </DataListCell>,
+            <DataListCell isFilled={false} alignRight key="secondary content align">
+              Secondary content (pf-m-align-right pf-m-no-fill)
+            </DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);
+```
+
+```js title=Compact
 import React from 'react';
 import {
   Button,
@@ -45,7 +108,7 @@ import {
 } from '@patternfly/react-core';
 
 SimpleDataList = () => (
-  <DataList aria-label="Simple data list example">
+  <DataList aria-label="Compact data list example" isCompact>
     <DataListItem aria-labelledby="simple-item1">
       <DataListItemRow>
         <DataListItemCells
@@ -206,8 +269,12 @@ class CheckboxActionDataList extends React.Component {
                 onSelect={this.onSelect2}
                 toggle={<KebabToggle onToggle={this.onToggle2} />}
                 dropdownItems={[
-                  <DropdownItem key="pri-action2" component="button">Primary</DropdownItem>,
-                  <DropdownItem key="sec-action2" component="button">Secondary</DropdownItem>,
+                  <DropdownItem key="pri-action2" component="button">
+                    Primary
+                  </DropdownItem>,
+                  <DropdownItem key="sec-action2" component="button">
+                    Secondary
+                  </DropdownItem>
                 ]}
               />
             </DataListAction>
@@ -249,10 +316,18 @@ class CheckboxActionDataList extends React.Component {
                 onSelect={this.onSelect3}
                 toggle={<KebabToggle onToggle={this.onToggle3} />}
                 dropdownItems={[
-                  <DropdownItem key="pri-action3" component="button">Primary</DropdownItem>,
-                  <DropdownItem key="sec1-action3" component="button">Secondary</DropdownItem>,
-                  <DropdownItem key="sec2-action3" component="button">Secondary</DropdownItem>,
-                  <DropdownItem key="sec3-action3" component="button">Secondary</DropdownItem>,
+                  <DropdownItem key="pri-action3" component="button">
+                    Primary
+                  </DropdownItem>,
+                  <DropdownItem key="sec1-action3" component="button">
+                    Secondary
+                  </DropdownItem>,
+                  <DropdownItem key="sec2-action3" component="button">
+                    Secondary
+                  </DropdownItem>,
+                  <DropdownItem key="sec3-action3" component="button">
+                    Secondary
+                  </DropdownItem>
                 ]}
               />
             </DataListAction>
@@ -825,6 +900,7 @@ class ModifiersDataList extends React.Component {
   }
 }
 ```
+
 ```js title=Selectable-rows
 import React from 'react';
 import {
@@ -845,17 +921,17 @@ import {
 class SelectableDataList extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { 
+    this.state = {
       isOpen1: false,
       isOpen2: false,
       selectedDataListItemId: ''
     };
 
-    this.onToggle1 = isOpen1  => {
+    this.onToggle1 = isOpen1 => {
       this.setState({ isOpen1 });
     };
-    
-    this.onToggle2 = isOpen2  => {
+
+    this.onToggle2 = isOpen2 => {
       this.setState({ isOpen2 });
     };
 
@@ -864,22 +940,26 @@ class SelectableDataList extends React.Component {
         isOpen1: !prevState.isOpen1
       }));
     };
-    
+
     this.onSelect2 = event => {
       this.setState(prevState => ({
         isOpen2: !prevState.isOpen2
       }));
     };
-    
-    this.onSelectDataListItem = (id) => {
+
+    this.onSelectDataListItem = id => {
       this.setState({ selectedDataListItemId: id });
-    }
+    };
   }
 
   render() {
     return (
       <React.Fragment>
-        <DataList aria-label="selectable data list example" selectedDataListItemId={this.state.selectedDataListItemId} onSelectDataListItem={this.onSelectDataListItem}>
+        <DataList
+          aria-label="selectable data list example"
+          selectedDataListItemId={this.state.selectedDataListItemId}
+          onSelectDataListItem={this.onSelectDataListItem}
+        >
           {!this.state.isDeleted && (
             <DataListItem aria-labelledby="selectable-action-item1" id="item1">
               <DataListItemRow>

packages/react-integration/cypress/integration/datalist.spec.ts

@@ -31,3 +31,37 @@ describe('Data List Demo Test', () => {
     cy.get('#row2.pf-m-selected').should('be.visible');
   });
 });
+
+describe('Data List Compact Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#data-list-compact-demo-nav-item-link').click();
+    cy.url().should('eq', 'http://localhost:3000/data-list-compact-demo-nav-link');
+  });
+
+  it('Verify header', () => {
+    cy.get('#simple-item1').contains('Primary content');
+    cy.get('#simple-item2').contains('Secondary content');
+  });
+
+  it('Verify body content', () => {
+    cy.get('#simple-item3').contains('Secondary content (pf-m-no-fill)');
+    cy.get('#simple-item4').contains('Secondary content (pf-m-align-right pf-m-no-fill)');
+  });
+
+  it('Verify rows selectable', () => {
+    cy.get('#row1.pf-m-selectable').should('be.visible');
+    cy.get('#row2.pf-m-selectable').should('be.visible');
+
+    cy.get('#row1.pf-m-selected').should('not.be.visible');
+    cy.get('#row2.pf-m-selected').should('not.be.visible');
+
+    cy.get('#row1').click();
+    cy.get('#row1.pf-m-selected').should('be.visible');
+    cy.get('#row2.pf-m-selected').should('not.be.visible');
+
+    cy.get('#row2').click();
+    cy.get('#row1.pf-m-selected').should('not.be.visible');
+    cy.get('#row2.pf-m-selected').should('be.visible');
+  });
+});

packages/react-integration/demo-app-ts/src/Demos.ts

@@ -160,6 +160,11 @@ export const Demos: DemoInterface[] = [
     name: 'Data List Demo',
     componentType: Examples.DataListDemo
   },
+  {
+    id: 'data-list-compact-demo',
+    name: 'Data List Compact Demo',
+    componentType: Examples.DataListCompactDemo
+  },
   {
     id: 'data-toolbar-demo',
     name: 'Data Toolbar Demo',

packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListCompactDemo.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  DataList,
+  DataListProps,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  DataListCell
+} from '@patternfly/react-core';
+
+interface DataListState {
+  selectedDataListItemId: string;
+}
+
+export class DataListCompactDemo extends React.Component<DataListProps, DataListState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedDataListItemId: ''
+    };
+  }
+
+  onSelectDataListItem = id => {
+    this.setState({ selectedDataListItemId: id });
+  };
+
+  render() {
+    return (
+      <DataList
+        aria-label="Simple data list example"
+        selectedDataListItemId={this.state.selectedDataListItemId}
+        onSelectDataListItem={this.onSelectDataListItem}
+        isCompact
+      >
+        <DataListItem aria-labelledby="simple-item1" id="row1">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary content">
+                  <span id="simple-item1">Primary content</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span id="simple-item2">Secondary content</span>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-labelledby="simple-item2" id="row2">
+          <DataListItemRow>
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isFilled={false} key="secondary content fill">
+                  <span id="simple-item3">Secondary content (pf-m-no-fill)</span>
+                </DataListCell>,
+                <DataListCell isFilled={false} alignRight key="secondary content align">
+                  <span id="simple-item4">Secondary content (pf-m-align-right pf-m-no-fill)</span>
+                </DataListCell>
+              ]}
+            />
+          </DataListItemRow>
+        </DataListItem>
+      </DataList>
+    );
+  }
+}