Skip to content

fix(DataList):removed Selectable row object #8827

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 1 commit into from
Mar 17, 2023
Merged

fix(DataList):removed Selectable row object #8827

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 4 additions & 9 deletions packages/react-core/src/components/DataList/DataList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,6 @@ export enum DataListWrapModifier {
breakWord = 'breakWord'
}

export interface SelectableRowObject {
/** Callback that executes when the screen reader accessible element receives a change event */
onChange: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
}

export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'ref'> {
/** Content rendered inside the DataList list */
children?: React.ReactNode;
Expand All @@ -43,14 +38,14 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
/** Determines which wrapping modifier to apply to the DataList */
wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
/** Object that causes the data list to render hidden inputs which improve selectable item a11y */
selectableRow?: SelectableRowObject;
onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
}

interface DataListContextProps {
isSelectable: boolean;
selectedDataListItemId: string;
updateSelectedDataListItem: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;
selectableRow?: SelectableRowObject;
onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
}

export const DataListContext = React.createContext<Partial<DataListContextProps>>({
Expand Down Expand Up @@ -84,7 +79,7 @@ export class DataList extends React.Component<DataListProps> {
isCompact,
wrapModifier,
gridBreakpoint,
selectableRow,
onSelectableRowChange,
...props
} = this.props;
const isSelectable = onSelectDataListItem !== undefined;
Expand All @@ -99,7 +94,7 @@ export class DataList extends React.Component<DataListProps> {
isSelectable,
selectedDataListItemId,
updateSelectedDataListItem,
selectableRow
onSelectableRowChange
}}
>
<ul
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/DataList/DataListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
} = this.props;
return (
<DataListContext.Consumer>
{({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, selectableRow }) => {
{({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, onSelectableRowChange }) => {
const selectDataListItem = (event: React.MouseEvent) => {
let target: any = event.target;
while (event.currentTarget !== target) {
Expand Down Expand Up @@ -91,12 +91,12 @@ export class DataListItem extends React.Component<DataListItemProps> {
{...(isSelectable && isSelected && { 'aria-selected': true })}
{...props}
>
{selectableRow && (
{onSelectableRowChange && (
<input
className="pf-screen-reader"
type="radio"
checked={isSelected}
onChange={(event) => selectableRow.onChange(event, id)}
onChange={(event) => onSelectableRowChange(event, id)}
tabIndex={-1}
{...selectableInputAriaProps}
/>
Expand Down
12 changes: 6 additions & 6 deletions packages/react-core/src/components/DataList/__tests__/DataList.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ describe('DataList', () => {

test('List renders with a hidden input to improve a11y when selectableRow is passed', () => {
render(
<DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
<DataList aria-label="this is a simple list" onSelectableRowChange={ () => {} }>
<DataListItem>
<DataListItemRow aria-labelledby="test-id">
<p id="test-id">Test</p>
Expand Down Expand Up @@ -85,7 +85,7 @@ describe('DataList', () => {
const user = userEvent.setup();

render(
<DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
<DataList aria-label="this is a simple list" onSelectableRowChange={ mock } selectedDataListItemId=''>
<DataListItem id='item-test-id'>
<DataListItemRow aria-labelledby="test-id">
<p id="test-id">Test</p>
Expand All @@ -104,7 +104,7 @@ describe('DataList', () => {
const mock = jest.fn();

render(
<DataList aria-label="this is a simple list" selectableRow={{ onChange: mock }} selectedDataListItemId=''>
<DataList aria-label="this is a simple list" onSelectableRowChange={ mock } selectedDataListItemId=''>
<DataListItem id='item-test-id'>
<DataListItemRow aria-labelledby="test-id">
<p id="test-id">Test</p>
Expand All @@ -118,7 +118,7 @@ describe('DataList', () => {

test('Item applies selectableInputAriaLabel to the hidden input', () => {
render(
<DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
<DataList aria-label="this is a simple list" onSelectableRowChange={ () => {} }>
<DataListItem selectableInputAriaLabel="Data list item label test">
<DataListItemRow aria-labelledby="test-id">
<p id="test-id">Test</p>
Expand All @@ -134,7 +134,7 @@ describe('DataList', () => {

test('Item defaults to labelling its input using its aria-labelledby prop', () => {
render(
<DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
<DataList aria-label="this is a simple list" onSelectableRowChange={ () => {} }>
<DataListItem aria-labelledby="test-id">
<p id="test-id">Test cell content</p>
</DataListItem>
Expand All @@ -148,7 +148,7 @@ describe('DataList', () => {

test('Item prioritizes selectableInputAriaLabel over aria-labelledby prop', () => {
render(
<DataList aria-label="this is a simple list" selectableRow={{ onChange: () => {} }}>
<DataList aria-label="this is a simple list" onSelectableRowChange={ () => {} }>
<DataListItem aria-labelledby="test-id" selectableInputAriaLabel="Data list item label test">
<p id="test-id">Test cell content</p>
</DataListItem>
Expand Down
1 change: 0 additions & 1 deletion packages/react-core/src/components/DataList/examples/DataList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ cssPrefix: pf-c-data-list
propComponents:
[
'DataList',
'SelectableRowObject',
'DataListAction',
'DataListCell',
'DataListCheck',
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/DataList/examples/DataListSelectableRows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
aria-label="selectable data list example"
selectedDataListItemId={selectedDataListItemId}
onSelectDataListItem={onSelectDataListItem}
selectableRow={{ onChange: handleInputChange }}
onSelectableRowChange={handleInputChange}
>
<DataListItem aria-labelledby="selectable-action-item1" id="item1">
<DataListItemRow>
Expand Down