diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx index 09d1da82cb6..ae7acbb63e9 100644 --- a/packages/react-core/src/components/DataList/DataList.tsx +++ b/packages/react-core/src/components/DataList/DataList.tsx @@ -19,27 +19,29 @@ export enum DataListWrapModifier { } export interface DataListProps extends React.HTMLProps { - /** Content rendered inside the DataList list */ + /** Content rendered inside the data list list */ children?: React.ReactNode; - /** Additional classes added to the DataList list */ + /** Additional classes added to the data list list */ className?: string; - /** Adds accessible text to the DataList list */ + /** Adds accessible text to the data list list */ 'aria-label': string; - /** Optional callback to make DataList selectable, fired when DataListItem selected */ + /** Optional callback to make data list selectable, fired when data list item selected */ onSelectDataListItem?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void; - /** Id of DataList item currently selected */ + /** Id of data list item currently selected */ selectedDataListItemId?: string; - /** Flag indicating if DataList should have compact styling */ + /** Flag indicating if data list should have compact styling */ isCompact?: boolean; - /** @beta Flag indicating if DataList should have plain styling with a transparent background */ + /** @beta Flag indicating if data list should have plain styling with a transparent background */ isPlain?: boolean; + /** @beta Flag to prevent the data list from automatically applying plain styling when glass theme is enabled. When both this and isPlain are true, isPlain takes precedence. */ + isNoPlainOnGlass?: boolean; /** Specifies the grid breakpoints */ gridBreakpoint?: 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; - /** Determines which wrapping modifier to apply to the DataList */ + /** Determines which wrapping modifier to apply to the data list */ wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord'; /** Object that causes the data list to render hidden inputs which improve selectable item a11y */ onSelectableRowChange?: (event: React.FormEvent, id: string) => void; - /** @hide custom ref of the DataList */ + /** @hide custom ref of the data list */ innerRef?: React.RefObject; } @@ -62,12 +64,20 @@ export const DataListBase: React.FunctionComponent = ({ selectedDataListItemId = '', isCompact = false, isPlain = false, + isNoPlainOnGlass = false, gridBreakpoint = 'md', wrapModifier = null, onSelectableRowChange, innerRef, ...props }: DataListProps) => { + if (isPlain && isNoPlainOnGlass) { + // eslint-disable-next-line no-console + console.warn( + `DataList: When both isPlain and isNoPlainOnGlass are true, isPlain will take precedence and isNoPlainOnGlass will have no effect. It's recommended to pass only one prop according to the current theme.` + ); + } + const isSelectable = onSelectDataListItem !== undefined; const updateSelectedDataListItem = (event: React.MouseEvent | React.KeyboardEvent, id: string) => { @@ -88,6 +98,7 @@ export const DataListBase: React.FunctionComponent = ({ styles.dataList, isCompact && styles.modifiers.compact, isPlain && styles.modifiers.plain, + isNoPlainOnGlass && styles.modifiers.noPlain, gridBreakpointClasses[gridBreakpoint], wrapModifier && styles.modifiers[wrapModifier], className diff --git a/packages/react-core/src/components/DataList/DataListAction.tsx b/packages/react-core/src/components/DataList/DataListAction.tsx index a511848d248..dab1e06dc73 100644 --- a/packages/react-core/src/components/DataList/DataListAction.tsx +++ b/packages/react-core/src/components/DataList/DataListAction.tsx @@ -3,15 +3,15 @@ import styles from '@patternfly/react-styles/css/components/DataList/data-list'; import { formatBreakpointMods } from '../../helpers/util'; export interface DataListActionProps extends Omit, 'children'> { - /** Content rendered as DataList Action (e.g