@patternfly/react-core 6.0.0-prerelease.17 → 6.0.0-prerelease.18

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-prerelease.16","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-prerelease.17","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-prerelease.16","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-prerelease.17","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-prerelease.16","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-prerelease.17","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-prerelease.17",
+  "version": "6.0.0-prerelease.18",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-prerelease.5",
-    "@patternfly/react-styles": "^6.0.0-prerelease.4",
-    "@patternfly/react-tokens": "^6.0.0-prerelease.5",
+    "@patternfly/react-icons": "^6.0.0-prerelease.6",
+    "@patternfly/react-styles": "^6.0.0-prerelease.5",
+    "@patternfly/react-tokens": "^6.0.0-prerelease.6",
     "focus-trap": "7.6.0",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.7.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-prerelease.7",
+    "@patternfly/patternfly": "6.0.0-prerelease.13",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "40bed4fdf9e51bb6a22da6ddfb909b9381c2c02c"
+  "gitHead": "b9542be42e3708c0e48f4cd5336149cb334b553f"
 }

package/src/components/Card/CardHeader.tsx

@@ -54,6 +54,8 @@ export interface CardHeaderSelectableActionsObject {
    * the isSelected prop on the card component instead.
    */
   isChecked?: boolean;
+  /** Flag indicating the action is hidden */
+  isHidden?: boolean;
 }
 
 export interface CardHeaderProps extends React.HTMLProps<HTMLDivElement> {
@@ -133,7 +135,8 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
 
         const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
         const getSelectableProps = () => ({
-          className: 'pf-m-standalone',
+          className: css('pf-m-standalone'),
+          inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
           label: <></>,
           'aria-label': selectableActions.selectableActionAriaLabel,
           'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
@@ -150,7 +153,11 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
         const getClickableProps = () => {
           const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
           const baseProps = {
-            className: css('pf-v6-c-card__clickable-action', isDisabledLinkCard && styles.modifiers.disabled),
+            className: css(
+              'pf-v6-c-card__clickable-action',
+              isDisabledLinkCard && styles.modifiers.disabled,
+              selectableActions?.isHidden && 'pf-v6-screen-reader'
+            ),
             id: selectableActions.selectableActionId,
             'aria-label': selectableActions.selectableActionAriaLabel,
             'aria-labelledby': selectableActions.selectableActionAriaLabelledby,

package/src/components/Card/examples/Card.md

@@ -19,6 +19,7 @@ ouia: true
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 import pfLogoSmall from '../../assets/PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 ## Examples
 
@@ -178,3 +179,25 @@ Dividers can be placed between sections of the card.
 ```ts file='./CardWithDividers.tsx'
 
 ```
+
+## Cards as tiles
+
+Sets of selectable cards can be used as tiles, which are static options that users can select.
+
+They can be either single selectable or multi selectable, by passing the `variant` property to the `selectableActions` object. You can also toggle the visibility of the radio or checkbox by passing the `isHidden` property to the `selectableActions` object.
+
+### Single selectable tiles
+
+To prevent users from selecting more than 1 tile in a set, set `variant` to "single" within the `selectableActions` object of `<CardHeader>`.
+
+```ts file='./CardTile.tsx'
+
+```
+
+### Multi selectable tiles
+
+To allow users to select more than 1 tile in a set, do not set `variant` within the `selectableActions` object of `<CardHeader>`.
+
+```ts file='./CardTileMulti.tsx'
+
+```

package/src/components/Card/examples/CardTile.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const CardTile: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState('');
+  const id1 = 'tile-1';
+  const id2 = 'tile-2';
+  const id3 = 'tile-3';
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setIsChecked(event.currentTarget.id);
+  };
+
+  return (
+    <Gallery hasGutter>
+      <Card id="tile-example-1" isSelectable isSelected={isChecked === id1}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'tile-example-1',
+            name: id1,
+            variant: 'single',
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="tile-example-2" isSelectable isSelected={isChecked === id2}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'tile-example-2',
+            name: id2,
+            variant: 'single',
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="tile-example-3" isSelectable isDisabled isSelected={isChecked === id3}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'tile-example-3',
+            name: id3,
+            variant: 'single',
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header (disabled)</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+    </Gallery>
+  );
+};

package/src/components/Card/examples/CardTileMulti.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const CardTileMulti: React.FunctionComponent = () => {
+  const [isChecked1, setIsChecked1] = React.useState(false);
+  const [isChecked2, setIsChecked2] = React.useState(false);
+  const [isChecked3, setIsChecked3] = React.useState(false);
+  const id1 = 'multi-tile-1';
+  const id2 = 'multi-tile-2';
+  const id3 = 'multi-tile-3';
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    const name = event.currentTarget.name;
+
+    switch (name) {
+      case id1:
+        setIsChecked1(checked);
+        break;
+      case id2:
+        setIsChecked2(checked);
+        break;
+      case id3:
+        setIsChecked3(checked);
+        break;
+    }
+  };
+
+  return (
+    <Gallery hasGutter>
+      <Card id="multi-tile-example-1" isSelectable isSelected={isChecked1}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id1,
+            selectableActionAriaLabelledby: 'multi-tile-example-1',
+            name: id1,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="multi-tile-example-2" isSelectable isSelected={isChecked2}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id2,
+            selectableActionAriaLabelledby: 'multi-tile-example-2',
+            name: id2,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+      <Card id="multi-tile-example-3" isSelectable isDisabled isSelected={isChecked3}>
+        <CardHeader
+          selectableActions={{
+            selectableActionId: id3,
+            selectableActionAriaLabelledby: 'multi-tile-example-3',
+            name: id3,
+            onChange,
+            isHidden: true
+          }}
+        >
+          <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+            <PlusIcon />
+            <b>Tile header (disabled)</b>
+          </Flex>
+        </CardHeader>
+        <CardBody>Tile content and description</CardBody>
+      </Card>
+    </Gallery>
+  );
+};

package/src/components/DataList/DataListAction.tsx

@@ -23,8 +23,6 @@ export interface DataListActionProps extends Omit<React.HTMLProps<HTMLDivElement
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Flag to indicate that the action is a plain button (e.g. kebab dropdown toggle) so that styling is applied to align the button */
-  isPlainButtonAction?: boolean;
 }
 
 export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
@@ -35,12 +33,10 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
   id,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-
-  isPlainButtonAction,
   ...props
 }: DataListActionProps) => (
   <div className={css(styles.dataListItemAction, formatBreakpointMods(visibility, styles), className)} {...props}>
-    {isPlainButtonAction ? <div className={css(styles.dataListAction)}>{children}</div> : children}
+    {children}
   </div>
 );
 DataListAction.displayName = 'DataListAction';

package/src/components/DataList/__tests__/DataListAction.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { DataListAction } from '../DataListAction';
 
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
@@ -15,38 +17,35 @@ test('Renders to match snapshot', () => {
 
 test(`Renders with default class ${styles.dataListItemAction}`, () => {
   render(
-    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
+    <DataListAction aria-label="Actions" data-testid="actions" aria-labelledby="ex-action" id="ex-action">
       test
     </DataListAction>
   );
-  expect(screen.getByText('test')).toHaveClass(styles.dataListItemAction, { exact: true });
+  expect(screen.getByTestId('actions')).toHaveClass(styles.dataListItemAction, { exact: true });
 });
 
 test(`Renders with custom class when className is passed`, () => {
   render(
-    <DataListAction aria-label="Actions" aria-labelledby="ex-action" id="ex-action" className="test-class">
+    <DataListAction
+      aria-label="Actions"
+      data-testid="actions"
+      aria-labelledby="ex-action"
+      id="ex-action"
+      className="test-class"
+    >
       test
     </DataListAction>
   );
-  expect(screen.getByText('test')).toHaveClass('test-class');
+  expect(screen.getByTestId('actions')).toHaveClass('test-class');
 });
 
 test(`Renders with spread props`, () => {
   render(
-    <DataListAction dir="rtl" aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
-      test
-    </DataListAction>
-  );
-  expect(screen.getByText('test')).toHaveAttribute('dir', 'rtl');
-});
-
-test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = true`, () => {
-  render(
-    <DataListAction id="id" aria-label="Actions" aria-labelledby="ex-action" isPlainButtonAction>
+    <DataListAction dir="rtl" data-testid="actions" aria-label="Actions" aria-labelledby="ex-action" id="ex-action">
       test
     </DataListAction>
   );
-  expect(screen.getByText('test')).toHaveClass(styles.dataListAction);
+  expect(screen.getByTestId('actions')).toHaveAttribute('dir', 'rtl');
 });
 
 ['hidden', 'visible'].forEach((vis) => {
@@ -58,18 +57,19 @@ test(`Renders with class ${styles.dataListAction} when isPlainButtonAction = tru
         aria-labelledby="check-action-item2 check-action-action2"
         id="check-action-action2"
         aria-label="Actions"
+        data-testid="actions"
       >
         test
       </DataListAction>
     );
 
     if (visMod === 'hidden') {
-      expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}`]);
+      expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}`]);
     }
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnSm`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnMd`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnLg`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}OnXl`]);
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnSm`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnMd`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnLg`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}OnXl`]);
+    expect(screen.getByTestId('actions')).toHaveClass(styles.modifiers[`${visMod}On_2xl`]);
   });
 });

package/src/components/DataList/examples/DataListActions.tsx

@@ -75,7 +75,6 @@ export const DataListActions: React.FunctionComponent = () => {
               aria-labelledby="multi-actions-item1 multi-actions-action1"
               id="multi-actions-action1"
               aria-label="Actions"
-              isPlainButtonAction
             >
               <Dropdown
                 popperProps={{ position: 'right' }}

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -73,7 +73,6 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-labelledby="check-action-item1 check-action-action1"
             id="check-action-action1"
             aria-label="Actions"
-            isPlainButtonAction
           >
             <Dropdown
               popperProps={{ position: 'right' }}
@@ -129,7 +128,6 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-labelledby="check-action-item2 check-action-action2"
             id="check-action-action2"
             aria-label="Actions"
-            isPlainButtonAction
           >
             <Dropdown
               popperProps={{ position: 'right' }}
@@ -194,7 +192,6 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
             aria-labelledby="check-action-item3 check-action-action3"
             id="check-action-action3"
             aria-label="Actions"
-            isPlainButtonAction
           >
             <Dropdown
               popperProps={{ position: 'right' }}

package/src/components/DataList/examples/DataListClickableRows.tsx

@@ -65,7 +65,6 @@ export const DataListClickableRows: React.FunctionComponent = () => {
               aria-labelledby="clickable-action-item1 clickable-action-action1"
               id="clickable-action-action1"
               aria-label="Actions"
-              isPlainButtonAction
             >
               <Dropdown
                 popperProps={{ position: 'right' }}
@@ -116,7 +115,6 @@ export const DataListClickableRows: React.FunctionComponent = () => {
               aria-labelledby="clickable-actions-item2 clickable-actions-action2"
               id="clickable-actions-action2"
               aria-label="Actions"
-              isPlainButtonAction
             >
               <Dropdown
                 popperProps={{ position: 'right' }}

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -81,12 +81,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="ex-item1 ex-action1"
-              id="ex-action1"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="ex-item1 ex-action1" id="ex-action1" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect1}
@@ -157,12 +152,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="ex-item2 ex-action2"
-              id="ex-action2"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="ex-item2 ex-action2" id="ex-action2" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect2}
@@ -233,12 +223,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="ex-item3 ex-action3"
-              id="ex-action3"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="ex-item3 ex-action3" id="ex-action3" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect3}

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -83,12 +83,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="m-ex-item1 m-ex-action1"
-              id="m-ex-action1"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="m-ex-item1 m-ex-action1" id="m-ex-action1" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect1}
@@ -161,12 +156,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="m-ex-item2 m-ex-action2"
-              id="m-ex-action2"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="m-ex-item2 m-ex-action2" id="m-ex-action2" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect2}
@@ -227,12 +217,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                 </DataListCell>
               ]}
             />
-            <DataListAction
-              aria-labelledby="m-ex-item3 m-ex-action3"
-              id="m-ex-action3"
-              aria-label="Actions"
-              isPlainButtonAction
-            >
+            <DataListAction aria-labelledby="m-ex-item3 m-ex-action3" id="m-ex-action3" aria-label="Actions">
               <Dropdown
                 popperProps={{ position: 'right' }}
                 onSelect={onSelect3}

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -92,7 +92,6 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-labelledby="width-ex2-item1 width-ex2-action1"
                 id="width-ex2-action1"
                 aria-label="Actions"
-                isPlainButtonAction
               >
                 <Dropdown
                   popperProps={{ position: 'right' }}
@@ -167,7 +166,6 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                 aria-labelledby="width-ex3-item1 width-ex3-action1"
                 id="width-ex3-action1"
                 aria-label="Actions"
-                isPlainButtonAction
               >
                 <Dropdown
                   popperProps={{ position: 'right' }}

package/src/components/Dropdown/Dropdown.tsx

@@ -113,7 +113,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
           'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
         );
         firstElement && (firstElement as HTMLElement).focus();
-      }, 0);
+      }, 10);
     }
 
     prevIsOpen.current = isOpen;

package/src/components/Menu/MenuContainer.tsx

@@ -65,7 +65,7 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
           'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
         );
         firstElement && (firstElement as HTMLElement).focus();
-      }, 0);
+      }, 10);
     }
 
     prevIsOpen.current = isOpen;

package/src/components/Select/Select.tsx

@@ -117,7 +117,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       setTimeout(() => {
         const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
         firstElement && (firstElement as HTMLElement).focus();
-      }, 0);
+      }, 10);
     }
 
     prevIsOpen.current = isOpen;

package/src/components/index.ts

@@ -65,7 +65,6 @@ export * from './Switch';
 export * from './Tabs';
 export * from './TextArea';
 export * from './TextInput';
-export * from './Tile';
 export * from './TimePicker';
 export * from './Timestamp';
 export * from './Title';

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -169,12 +169,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                     </DataListCell>
                   ]}
                 />
-                <DataListAction
-                  aria-labelledby="ex-item1 ex-action1"
-                  id="ex-action1"
-                  aria-label="Actions"
-                  isPlainButtonAction
-                >
+                <DataListAction aria-labelledby="ex-item1 ex-action1" id="ex-action1" aria-label="Actions">
                   <Dropdown
                     isOpen={isOpen1}
                     onSelect={onSelect1}
@@ -251,12 +246,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                     </DataListCell>
                   ]}
                 />
-                <DataListAction
-                  aria-labelledby="ex-item2 ex-action2"
-                  id="ex-action2"
-                  aria-label="Actions"
-                  isPlainButtonAction
-                >
+                <DataListAction aria-labelledby="ex-item2 ex-action2" id="ex-action2" aria-label="Actions">
                   <Dropdown
                     isOpen={isOpen2}
                     onSelect={onSelect2}
@@ -333,12 +323,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                     </DataListCell>
                   ]}
                 />
-                <DataListAction
-                  aria-labelledby="ex-item3 ex-action3"
-                  id="ex-action3"
-                  aria-label="Actions"
-                  isPlainButtonAction
-                >
+                <DataListAction aria-labelledby="ex-item3 ex-action3" id="ex-action3" aria-label="Actions">
                   <Dropdown
                     isOpen={isOpen3}
                     onSelect={onSelect3}