feat(datalist): add hidden and visible breakpoints

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
patternfly · Jul 5, 2019 · d82580c · d82580c
1 parent b25e652
commit d82580c
Show file tree

Hide file tree

Showing 8 changed files with 219 additions and 84 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataList.md b/packages/patternfly-4/react-core/src/components/DataList/DataList.md
@@ -16,6 +16,7 @@ import {
   DataListCell,
   DataListCheck,
   DataListAction,
+  DataListActionVisibility,
   DataListToggle,
   DataListContent,
   Dropdown,
@@ -24,6 +25,7 @@ import {
   DropdownItem
 } from '@patternfly/react-core';
 import { CodeBranchIcon } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
 
 ```js
 import React from 'react';
@@ -97,15 +99,35 @@ import {
 class CheckboxActionDataList extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { isOpen: false };
+    this.state = { isOpen1: false, isOpen2: false, isOpen3: false };
 
-    this.onToggle = isOpen => {
-      this.setState({ isOpen });
+    this.onToggle1 = isOpen1 => {
+      this.setState({ isOpen1 });
     };
 
-    this.onSelect = event => {
+    this.onSelect1 = event => {
       this.setState(prevState => ({
-        isOpen: !prevState.isOpen
+        isOpen1: !prevState.isOpen1
+      }));
+    };
+
+    this.onToggle2 = isOpen2 => {
+      this.setState({ isOpen2 });
+    };
+
+    this.onSelect2 = event => {
+      this.setState(prevState => ({
+        isOpen2: !prevState.isOpen2
+      }));
+    };
+
+    this.onToggle3 = isOpen3 => {
+      this.setState({ isOpen3 });
+    };
+
+    this.onSelect3 = event => {
+      this.setState(prevState => ({
+        isOpen3: !prevState.isOpen3
       }));
     };
   }
@@ -144,9 +166,9 @@ class CheckboxActionDataList extends React.Component {
               <Dropdown
                 isPlain
                 position={DropdownPosition.right}
-                isOpen={this.state.isOpen}
-                onSelect={this.onSelect}
-                toggle={<KebabToggle onToggle={this.onToggle} />}
+                isOpen={this.state.isOpen1}
+                onSelect={this.onSelect1}
+                toggle={<KebabToggle onToggle={this.onToggle1} />}
                 dropdownItems={[
                   <DropdownItem key="link">Link</DropdownItem>,
                   <DropdownItem key="action" component="button">
@@ -175,6 +197,25 @@ class CheckboxActionDataList extends React.Component {
               ]}
             />
             <DataListAction
+              className={css(DataListActionVisibility.hiddenOnLg)}
+              aria-labelledby="check-action-item2 check-action-action2"
+              id="check-action-action2"
+              aria-label="Actions"
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={this.state.isOpen2}
+                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>,
+                ]}
+              />
+            </DataListAction>
+            <DataListAction
+              className={css(DataListActionVisibility.visibleOnLg, DataListActionVisibility.hidden)}
               aria-labelledby="check-action-item2 check-action-action2"
               id="check-action-action2"
               aria-label="Actions"
@@ -184,6 +225,53 @@ class CheckboxActionDataList extends React.Component {
             </DataListAction>
           </DataListItemRow>
         </DataListItem>
+        <DataListItem aria-labelledby="check-action-item3">
+          <DataListItemRow>
+            <DataListCheck aria-labelledby="check-action-item3" name="check-action-check3" />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell key="primary content">
+                  <span id="check-action-item3">Primary content - Lorem ipsum</span> dolor sit amet, consectetur
+                  adipisicing elit, sed do eiusmod.
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              className={css(DataListActionVisibility.hiddenOnXl)}
+              aria-labelledby="check-action-item3 check-action-action3"
+              id="check-action-action3"
+              aria-label="Actions"
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={this.state.isOpen3}
+                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>,
+                ]}
+              />
+            </DataListAction>
+            <DataListAction
+              className={css(DataListActionVisibility.visibleOnXl, DataListActionVisibility.hidden)}
+              aria-labelledby="check-action-item3 check-action-action3"
+              id="check-action-action3"
+              aria-label="Actions"
+            >
+              <Button variant="primary">Primary</Button>
+              <Button variant="secondary">Secondary</Button>
+              <Button variant="secondary">Secondary</Button>
+              <Button variant="secondary">Secondary</Button>
+            </DataListAction>
+          </DataListItemRow>
+        </DataListItem>
       </DataList>
     );
   }
@@ -566,7 +654,7 @@ import {
 class ModifiersDataList extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { show: true, isOpen1: false, isOpen2: false };
+    this.state = { show: true, isOpen1: false, isOpen2: false, isOpen3: false };
 
     this.onToggle1 = isOpen1 => {
       this.setState({ isOpen1 });

diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataList.test.js b/packages/patternfly-4/react-core/src/components/DataList/DataList.test.js
@@ -2,13 +2,14 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { DataList } from './DataList';
 import { DataListItem } from './DataListItem';
-import { DataListAction } from './DataListAction';
+import { DataListAction, DataListActionVisibility } from './DataListAction';
 import { DataListCell } from './DataListCell';
 import { DataListToggle } from './DataListToggle';
 import { DataListItemCells } from './DataListItemCells';
 import { DataListItemRow } from './DataListItemRow';
 import { DataListContent } from './DataListContent';
 import { Button } from '../Button';
+import {css} from '@patternfly/react-styles';
 import { DropdownItem, Dropdown, KebabToggle, DropdownPosition } from '../Dropdown';
 
 describe('DataList', () => {
@@ -141,6 +142,35 @@ describe('DataList', () => {
     expect(view).toMatchSnapshot();
   });
 
+  test('DataListAction visibility - show button when lg', () => {
+    const view = shallow(
+      <DataListAction
+        className={css(DataListActionVisibility.visibleOnLg, DataListActionVisibility.hidden)}
+        aria-labelledby="check-action-item2 check-action-action2"
+        id="check-action-action2"
+        aria-label="Actions"
+      >
+        <Button variant="primary">Primary</Button>
+      </DataListAction>
+    );
+    expect(view.find('div').props().className).toContain('pf-m-hidden');
+    expect(view.find('div').props().className).toContain('pf-m-visible-on-lg');
+  });
+
+  test('DataListAction visibility - hide button on 2xl', () => {
+    const view = shallow(
+      <DataListAction
+        className={css(DataListActionVisibility.hiddenOn2Xl)}
+        aria-labelledby="check-action-item2 check-action-action2"
+        id="check-action-action2"
+        aria-label="Actions"
+      >
+        <Button variant="primary">Primary</Button>
+      </DataListAction>
+    );
+    expect(view.find('div').props().className).toContain('pf-m-hidden-on-2xl');
+  });
+
   test('DataListContent', () => {
     const view = shallow(<DataListContent aria-label="Primary Content Details"> test</DataListContent>);
     expect(view).toMatchSnapshot();

diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListAction.tsx b/packages/patternfly-4/react-core/src/components/DataList/DataListAction.tsx
@@ -1,8 +1,26 @@
 import * as React from 'react';
-import { css } from '@patternfly/react-styles';
+import { css, pickProperties } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { Omit } from '../../helpers/typeUtils';
 
+const visibilityModifiers = pickProperties(styles.modifiers, [
+  'hidden',
+  'hiddenOnSm',
+  'hiddenOnMd',
+  'hiddenOnLg',
+  'hiddenOnXl',
+  'hiddenOn_2xl',
+  'visibleOnSm',
+  'visibleOnMd',
+  'visibleOnLg',
+  'visibleOnXl',
+  'visibleOn_2xl'
+]);
+
+export const DataListActionVisibility = Object.keys(visibilityModifiers)
+  .map(key => [key.replace('_2xl', '2Xl'), visibilityModifiers[key]])
+  .reduce((acc, curr) => ({ ...acc, [curr[0]]: curr[1] }), {});
+
 export interface DataListActionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'children'> {
   /** Content rendered as DataList Action  (e.g <Button> or <Dropdown>) */
   children: React.ReactNode;
@@ -22,8 +40,8 @@ interface DataListActionState {
 
 export class DataListAction extends React.Component<DataListActionProps, DataListActionState> {
   static defaultProps = {
-    className: '',
-  }
+    className: ''
+  };
 
   constructor(props: DataListActionProps) {
     super(props);
@@ -53,10 +71,8 @@ export class DataListAction extends React.Component<DataListActionProps, DataLis
     } = this.props;
 
     return (
-      <div className={css(styles.dataListItemAction, className)}>
-        <div className={css(styles.dataListAction, className)} {...props}>
-          {children}
-        </div>
+      <div className={css(styles.dataListItemAction, className)} {...props}>
+        {children}
       </div>
     );
   }

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
@@ -33,78 +33,70 @@ exports[`DataList DataListAction button 1`] = `
 <div
   className="pf-c-data-list__item-action"
 >
-  <div
-    className="pf-c-data-list__action"
+  <Component
+    id="delete-item-1"
   >
-    <Component
-      id="delete-item-1"
-    >
-      Delete
-    </Component>
-  </div>
+    Delete
+  </Component>
 </div>
 `;
 
 exports[`DataList DataListAction dropdown 1`] = `
 <div
   className="pf-c-data-list__item-action"
 >
-  <div
-    className="pf-c-data-list__action"
-  >
-    <Dropdown
-      className=""
-      direction="down"
-      dropdownItems={
-        Array [
-          <DropdownItem
-            className=""
-            component="button"
-            href=""
-            isDisabled={false}
-            isHovered={false}
-            onClick={[MockFunction]}
-            tooltip={null}
-            tooltipProps={Object {}}
-          >
-            action-1
-          </DropdownItem>,
-          <DropdownItem
-            className=""
-            component="button"
-            href=""
-            isDisabled={false}
-            isHovered={false}
-            onClick={[MockFunction]}
-            tooltip={null}
-            tooltipProps={Object {}}
-          >
-            action-2
-          </DropdownItem>,
-        ]
-      }
-      isGrouped={false}
-      isOpen={false}
-      isPlain={true}
-      onSelect={[Function]}
-      position="right"
-      toggle={
-        <Kebab
-          aria-label="Actions"
+  <Dropdown
+    className=""
+    direction="down"
+    dropdownItems={
+      Array [
+        <DropdownItem
           className=""
-          id=""
-          isActive={false}
+          component="button"
+          href=""
           isDisabled={false}
-          isFocused={false}
           isHovered={false}
-          isOpen={false}
-          isPlain={false}
-          onToggle={[Function]}
-          parentRef={null}
-        />
-      }
-    />
-  </div>
+          onClick={[MockFunction]}
+          tooltip={null}
+          tooltipProps={Object {}}
+        >
+          action-1
+        </DropdownItem>,
+        <DropdownItem
+          className=""
+          component="button"
+          href=""
+          isDisabled={false}
+          isHovered={false}
+          onClick={[MockFunction]}
+          tooltip={null}
+          tooltipProps={Object {}}
+        >
+          action-2
+        </DropdownItem>,
+      ]
+    }
+    isGrouped={false}
+    isOpen={false}
+    isPlain={true}
+    onSelect={[Function]}
+    position="right"
+    toggle={
+      <Kebab
+        aria-label="Actions"
+        className=""
+        id=""
+        isActive={false}
+        isDisabled={false}
+        isFocused={false}
+        isHovered={false}
+        isOpen={false}
+        isPlain={false}
+        onToggle={[Function]}
+        parentRef={null}
+      />
+    }
+  />
 </div>
 `;