feat(datalist): add hidden and visible breakpoints

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
patternfly · Jun 21, 2019 · 4401a7a · 4401a7a
1 parent 7f38b12
commit 4401a7a
Show file tree

Hide file tree

Showing 8 changed files with 190 additions and 80 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataList.d.ts b/packages/patternfly-4/react-core/src/components/DataList/DataList.d.ts
@@ -1,8 +1,18 @@
 import { FunctionComponent, HTMLProps } from 'react';
 import { Omit } from '../../helpers/typeUtils';
 
+enum Breakpoints {
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+  '2xl' = '2xl',
+}
+
 export interface DataListProps extends Omit<HTMLProps<HTMLUListElement>, 'aria-label'> {
   'aria-label': string;
+  hiddenBreakpoint: OneOf<typeof Breakpoints, keyof typeof Breakpoints>;
+  visibleBreakpoint: OneOf<typeof Breakpoints, keyof typeof Breakpoints>;
 }
 
 declare const DataList: FunctionComponent<DataListProps>;

diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataList.md b/packages/patternfly-4/react-core/src/components/DataList/DataList.md
@@ -15,6 +15,7 @@ import {
   DataListCell,
   DataListCheck,
   DataListAction,
+  DataListVisibility,
   DataListToggle,
   DataListContent,
   Dropdown,
@@ -23,6 +24,7 @@ import {
   DropdownItem
 } from '@patternfly/react-core';
 import { CodeBranchIcon } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
 
 ```js
 import React from 'react';
@@ -95,15 +97,35 @@ import {
 class CheckboxActionDataList extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { isOpen: false };
+    this.state = { isOpen1: false, isOpen2: 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
       }));
     };
   }
@@ -142,9 +164,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">
@@ -173,6 +195,25 @@ class CheckboxActionDataList extends React.Component {
               ]}
             />
             <DataListAction
+              className={css(DataListVisibility.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(DataListVisibility.visibleOnLg, DataListVisibility.hidden)}
               aria-labelledby="check-action-item2 check-action-action2"
               id="check-action-action2"
               aria-label="Actions"
@@ -182,6 +223,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(DataListVisibility.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(DataListVisibility.visibleOnXl, DataListVisibility.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>
     );
   }

diff --git a/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js b/packages/patternfly-4/react-core/src/components/DataList/DataListAction.js
@@ -1,8 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@patternfly/react-styles';
+import { css, pickProperties } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 
+export const DataListVisibility = pickProperties(styles.modifiers, [
+  'hidden',
+  'hiddenOnSm',
+  'hiddenOnMd',
+  'hiddenOnLg',
+  'hiddenOnXl',
+  'hiddenOn2Xl',
+  'visibleOnSm',
+  'visibleOnMd',
+  'visibleOnLg',
+  'visibleOnXl',
+  'visibleOn2Xl'
+]);
+
 class DataListAction extends React.Component {
   constructor(props) {
     super(props);
@@ -32,10 +46,8 @@ class DataListAction extends React.Component {
     } = 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
@@ -41,78 +41,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>
 `;
 

diff --git a/packages/patternfly-4/react-core/src/components/DataList/index.js b/packages/patternfly-4/react-core/src/components/DataList/index.js
@@ -1,5 +1,5 @@
 export { default as DataList } from './DataList';
-export { default as DataListAction } from './DataListAction';
+export { default as DataListAction, DataListVisibility } from './DataListAction';
 export { default as DataListCell } from './DataListCell';
 export { default as DataListCheck } from './DataListCheck';
 export { default as DataListItem } from './DataListItem';

diff --git a/packages/patternfly-4/react-styles/src/index.js b/packages/patternfly-4/react-styles/src/index.js
@@ -1,2 +1,9 @@
 export { StyleSheet, css } from './StyleSheet';
-export { isValidStyleDeclaration, getModifier, isModifier, getInsertedStyles, getClassName } from './utils';
+export {
+  isValidStyleDeclaration,
+  getModifier,
+  isModifier,
+  getInsertedStyles,
+  getClassName,
+  pickProperties
+} from './utils';
diff --git a/packages/patternfly-4/react-styles/src/utils.js b/packages/patternfly-4/react-styles/src/utils.js
@@ -46,3 +46,7 @@ export function getClassName(styleObj = {}) {
 export function getInsertedStyles() {
   return Object.values(emotionCache.inserted);
 }
+
+export function pickProperties(object, properties) {
+  return properties.reduce((picked, property) => ({ ...picked, [property]: object[property] }), {});
+}
diff --git a/packages/patternfly-4/react-table/src/components/Table/utils/decorators/classNames.js b/packages/patternfly-4/react-table/src/components/Table/utils/decorators/classNames.js
@@ -1,9 +1,6 @@
-import { css } from '@patternfly/react-styles';
+import { css, pickProperties } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
-const pickProperties = (object, properties) =>
-  properties.reduce((picked, property) => ({ ...picked, [property]: object[property] }), {});
-
 export const Visibility = pickProperties(styles.modifiers, [
   'hidden',
   'hiddenOnSm',