Skip to content

feat(DataList): pass button props to toggle #8222

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 3 commits into from
Oct 17, 2022
Merged

feat(DataList): pass button props to toggle #8222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
41767ea
feat(DataList): pass button props to toggle
kmcfaul Oct 13, 2022
9150233
fix duplicate id
kmcfaul Oct 13, 2022
90ab9c3
missed an id
kmcfaul Oct 14, 2022
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
6 changes: 5 additions & 1 deletion packages/react-core/src/components/DataList/DataListToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import { css } from '@patternfly/react-styles';
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
import styles from '@patternfly/react-styles/css/components/DataList/data-list';
import { Button, ButtonVariant } from '../Button';
import { Button, ButtonProps, ButtonVariant } from '../Button';

export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
/** Additional classes added to the DataList cell */
Expand All @@ -19,6 +19,8 @@ export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
'aria-label'?: string;
/** Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them. */
'aria-controls'?: string;
/** Additional properties spread to the toggle button */
buttonProps?: ButtonProps;
}

export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
Expand All @@ -28,6 +30,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
'aria-label': ariaLabel = 'Details',
rowid = '',
id,
buttonProps,
...props
}: DataListToggleProps) => (
<div className={css(styles.dataListItemControl, className)} {...props}>
Expand All @@ -39,6 +42,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
aria-label={ariaLabel}
aria-labelledby={ariaLabel !== 'Details' ? null : `${rowid} ${id}`}
aria-expanded={isExpanded}
{...buttonProps}
>
<div className={css(styles.dataListToggleIcon)}>
<AngleRightIcon />
Expand Down
5 changes: 5 additions & 0 deletions 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 @@ -51,6 +51,11 @@ import { css } from '@patternfly/react-styles';
```ts file="./DataListExpandable.tsx"
```

### Mixed expandable

```ts file="./DataListMixedExpandable.tsx"
```

### Width modifiers

```ts file="./DataListWidthModifiers.tsx"
Expand Down
234 changes: 234 additions & 0 deletions packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
import React from 'react';
import {
DataList,
DataListItem,
DataListItemRow,
DataListCell,
DataListAction,
DataListToggle,
DataListContent,
DataListItemCells,
Dropdown,
DropdownItem,
DropdownPosition,
KebabToggle
} from '@patternfly/react-core';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';

export const DataListMixedExpandable: React.FunctionComponent = () => {
const [isOpen1, setIsOpen1] = React.useState(false);
const [isOpen2, setIsOpen2] = React.useState(false);
const [isOpen3, setIsOpen3] = React.useState(false);
const [expanded, setExpanded] = React.useState(['m-ex-toggle1', 'm-ex-toggle3']);

const onToggle1 = isOpen1 => {
setIsOpen1(isOpen1);
};

const onSelect1 = () => {
setIsOpen1(!isOpen1);
};

const onToggle2 = isOpen2 => {
setIsOpen2(isOpen2);
};

const onSelect2 = () => {
setIsOpen2(!isOpen2);
};

const onToggle3 = isOpen3 => {
setIsOpen3(isOpen3);
};

const onSelect3 = () => {
setIsOpen3(!isOpen3);
};

const toggle = id => {
const index = expanded.indexOf(id);
const newExpanded =
index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
Copy link
Contributor

@thatblindgeye thatblindgeye Oct 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small nit that I wouldn't block over:

Suggested change
index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1)] : [...expanded, id];

Since slice will use expanded.length by default for the end parameter

setExpanded(newExpanded);
};

return (
<React.Fragment>
<DataList aria-label="Mixed expandable data list example">
<DataListItem aria-labelledby="m-ex-item1" isExpanded={expanded.includes('m-ex-toggle1')}>
<DataListItemRow>
<DataListToggle
onClick={() => toggle('m-ex-toggle1')}
isExpanded={expanded.includes('m-ex-toggle1')}
id="m-ex-toggle1"
aria-controls="m-ex-expand1"
/>
<DataListItemCells
dataListCells={[
<DataListCell isIcon key="icon">
<CodeBranchIcon />
</DataListCell>,
<DataListCell key="primary content">
<div id="m-ex-item1">Primary content</div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<a href="#">link</a>
</DataListCell>,
<DataListCell key="secondary content">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</DataListCell>,
<DataListCell key="secondary content 2">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="m-ex-item1 m-ex-action1"
id="m-ex-action1"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
isPlain
position={DropdownPosition.right}
isOpen={isOpen1}
onSelect={onSelect1}
toggle={<KebabToggle onToggle={onToggle1} />}
dropdownItems={[
<DropdownItem key="link">Link</DropdownItem>,
<DropdownItem key="action" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled link" isDisabled>
Disabled Link
</DropdownItem>
]}
/>
</DataListAction>
</DataListItemRow>
<DataListContent
aria-label="First expandable content details"
id="m-ex-expand1"
isHidden={!expanded.includes('m-ex-toggle1')}
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</p>
</DataListContent>
</DataListItem>
<DataListItem aria-labelledby="m-ex-item2">
<DataListItemRow>
<DataListToggle
id="m-ex-toggle2"
buttonProps={{
disabled: true,
'aria-hidden': 'true',
style: { visibility: 'hidden' }
}}
/>
<DataListItemCells
dataListCells={[
<DataListCell isIcon key="icon">
<CodeBranchIcon />
</DataListCell>,
<DataListCell key="secondary content">
<div id="m-ex-item2">Secondary content</div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</DataListCell>,
<DataListCell key="secondary content 2">
<span>Lorem ipsum dolor sit amet.</span>
</DataListCell>,
<DataListCell key="secondary content3">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="m-ex-item2 mex-action2"
id="m-ex-action2"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
isPlain
position={DropdownPosition.right}
isOpen={isOpen2}
onSelect={onSelect2}
toggle={<KebabToggle onToggle={onToggle2} />}
dropdownItems={[
<DropdownItem key="link">Link</DropdownItem>,
<DropdownItem key="action" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled link" isDisabled>
Disabled Link
</DropdownItem>
]}
/>
</DataListAction>
</DataListItemRow>
</DataListItem>
<DataListItem aria-labelledby="m-ex-item3" isExpanded={expanded.includes('m-ex-toggle3')}>
<DataListItemRow>
<DataListToggle
onClick={() => toggle('m-ex-toggle3')}
isExpanded={expanded.includes('m-ex-toggle3')}
id="m-ex-toggle3"
aria-controls="m-ex-expand3"
/>
<DataListItemCells
dataListCells={[
<DataListCell isIcon key="icon">
<CodeBranchIcon />
</DataListCell>,
<DataListCell key="tertiary content">
<div id="m-ex-item3">Tertiary content</div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</DataListCell>,
<DataListCell key="secondary content">
<span>Lorem ipsum dolor sit amet.</span>
</DataListCell>,
<DataListCell key="secondary content 2">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</DataListCell>
]}
/>
<DataListAction
aria-labelledby="m-ex-item3 m-ex-action3"
id="m-ex-action3"
aria-label="Actions"
isPlainButtonAction
>
<Dropdown
isPlain
position={DropdownPosition.right}
isOpen={isOpen3}
onSelect={onSelect3}
toggle={<KebabToggle onToggle={onToggle3} />}
dropdownItems={[
<DropdownItem key="link">Link</DropdownItem>,
<DropdownItem key="action" component="button">
Action
</DropdownItem>,
<DropdownItem key="disabled link" isDisabled>
Disabled Link
</DropdownItem>
]}
/>
</DataListAction>
</DataListItemRow>
<DataListContent
aria-label="Third expandable content details"
id="m-ex-expand3"
isHidden={!expanded.includes('m-ex-toggle3')}
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</p>
</DataListContent>
</DataListItem>
</DataList>
</React.Fragment>
);
};