feat(datalist): add the breakpointMods prop

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

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { PickOptional } from '../../helpers/typeUtils';
+import { DataListActionBreakpointMod } from './DataListActionBreakpoints';
+import { formatBreakpointMods } from '../../helpers/util';
 
 const visibilityModifiers = [
   'hidden',
@@ -53,6 +55,8 @@ export interface DataListActionProps extends Omit<React.HTMLProps<HTMLDivElement
   'aria-labelledby': string;
   /** Adds accessible text to the DataList Action */
   'aria-label': string;
+  /** An array of objects representing the various modifiers to apply to the data list action at various breakpoints */
+  breakpointMods?: DataListActionBreakpointMod[];
 }
 
 interface DataListActionState {
@@ -61,7 +65,8 @@ interface DataListActionState {
 
 export class DataListAction extends React.Component<DataListActionProps, DataListActionState> {
   static defaultProps: PickOptional<DataListActionProps> = {
-    className: ''
+    className: '',
+    breakpointMods: [] as DataListActionBreakpointMod[]
   };
 
   constructor(props: DataListActionProps) {
@@ -89,12 +94,16 @@ export class DataListAction extends React.Component<DataListActionProps, DataLis
       id,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      breakpointMods,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
 
     return (
-      <div className={css(styles.dataListItemAction, className)} {...props}>
+      <div
+        className={css(styles.dataListItemAction, formatBreakpointMods(breakpointMods, styles), className)}
+        {...props}
+      >
         {children}
       </div>
     );

packages/react-core/src/components/DataList/DataListActionBreakpoints.ts

@@ -0,0 +1,18 @@
+export enum DataListActionModifiers {
+  hidden = 'hidden',
+  visible = 'visible'
+}
+
+export enum DataListActionBreakpoints {
+  md = 'Md',
+  lg = 'Lg',
+  xl = 'Xl',
+  '2xl' = '2Xl'
+}
+
+export interface DataListActionBreakpointMod {
+  /** The attribute to modify  */
+  modifier: 'hidden' | 'visible' | keyof typeof DataListActionModifiers;
+  /** The breakpoint at which to apply the modifier */
+  breakpoint: 'md' | 'lg' | 'xl' | '2xl' | keyof typeof DataListActionBreakpoints;
+}

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

@@ -19,6 +19,8 @@ typescript: true
 
 import {
 Button,
+DataListActionModifiers,
+DataListActionBreakpoints,
 DataList,
 DataListItem,
 DataListItemCells,
@@ -144,6 +146,8 @@ import React from 'react';
 import {
   Button,
   DataList,
+  DataListActionModifiers,
+  DataListActionBreakpoints,
   DataListItem,
   DataListItemCells,
   DataListItemRow,
@@ -257,7 +261,12 @@ class CheckboxActionDataList extends React.Component {
               ]}
             />
             <DataListAction
-              className={css(DataListActionVisibility.hiddenOnLg)}
+              breakpointMods={[
+                {
+                  modifier: DataListActionModifiers.hidden,
+                  breakpoint: DataListActionBreakpoints.lg
+                }
+              ]}
               aria-labelledby="check-action-item2 check-action-action2"
               id="check-action-action2"
               aria-label="Actions"
@@ -279,7 +288,14 @@ class CheckboxActionDataList extends React.Component {
               />
             </DataListAction>
             <DataListAction
-              className={css(DataListActionVisibility.visibleOnLg, DataListActionVisibility.hidden)}
+              breakpointMods={[
+                {
+                  modifier: DataListActionModifiers.visible,
+                  breakpoint: DataListActionBreakpoints.lg
+                }, {
+                  modifier: DataListActionModifiers.hidden,
+                }
+              ]}
               aria-labelledby="check-action-item2 check-action-action2"
               id="check-action-action2"
               aria-label="Actions"
@@ -304,7 +320,12 @@ class CheckboxActionDataList extends React.Component {
               ]}
             />
             <DataListAction
-              className={css(DataListActionVisibility.hiddenOnXl)}
+              breakpointMods={[
+                {
+                  modifier: DataListActionModifiers.hidden,
+                  breakpoint: DataListActionBreakpoints.xl
+                }
+              ]}
               aria-labelledby="check-action-item3 check-action-action3"
               id="check-action-action3"
               aria-label="Actions"
@@ -332,7 +353,14 @@ class CheckboxActionDataList extends React.Component {
               />
             </DataListAction>
             <DataListAction
-              className={css(DataListActionVisibility.visibleOnXl, DataListActionVisibility.hidden)}
+              breakpointMods={[
+                {
+                  modifier: DataListActionModifiers.visible,
+                  breakpoint: DataListActionBreakpoints.xl
+                }, {
+                  modifier: DataListActionModifiers.hidden,
+                }
+              ]}
               aria-labelledby="check-action-item3 check-action-action3"
               id="check-action-action3"
               aria-label="Actions"

packages/react-core/src/components/DataList/index.ts

@@ -7,3 +7,4 @@ export * from './DataListItemCells';
 export * from './DataListItemRow';
 export * from './DataListToggle';
 export * from './DataListContent';
+export * from './DataListActionBreakpoints';

packages/react-core/src/helpers/util.ts

@@ -2,6 +2,7 @@ import * as ReactDOM from 'react-dom';
 import { SIDE } from './constants';
 import { ToolbarBreakpointMod } from '../components/Toolbar/ToolbarUtils';
 import { FlexBreakpointMod, FlexItemBreakpointMod } from '../layouts/Flex/FlexUtils';
+import { DataListActionBreakpointMod } from '../components/DataList/DataListActionBreakpoints';
 import { PageSectionBreakpointMod } from '../components/Page/PageSection';
 
 /**
@@ -238,11 +239,16 @@ export function pluralize(i: number, singular: string, plural?: string) {
 
 /** This function is a helper for turning arrays of breakpointMod objects for data toolbar and flex into classes
  *
- * @param {(ToolbarBreakpointMod | FlexBreakpointMod | FlexItemBreakpointMod | PageSectionBreakpointMod)[]} breakpointMods The modifiers object
+ * @param {(ToolbarBreakpointMod | FlexBreakpointMod | FlexItemBreakpointMod | PageSectionBreakpointMod | DataListActionBreakpointMod)[]} breakpointMods The modifiers object
  * @param {any} styles The appropriate styles object for the component
  */
 export const formatBreakpointMods = (
-  breakpointMods: (ToolbarBreakpointMod | FlexBreakpointMod | FlexItemBreakpointMod | PageSectionBreakpointMod)[],
+  breakpointMods: (
+    | ToolbarBreakpointMod
+    | FlexBreakpointMod
+    | FlexItemBreakpointMod
+    | PageSectionBreakpointMod
+    | DataListActionBreakpointMod)[],
   styles: any
 ) =>
   breakpointMods