@patternfly/react-core 4.198.12 → 4.198.15

package/src/components/Tile/Tile.tsx

@@ -33,6 +33,9 @@ export const Tile: React.FunctionComponent<TileProps> = ({
   ...props
 }: TileProps) => (
   <div
+    role="option"
+    aria-selected={isSelected}
+    {...(isDisabled && { 'aria-disabled': isDisabled })}
     className={css(
       styles.tile,
       isSelected && styles.modifiers.selected,

package/src/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Tile basic 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div
@@ -22,7 +23,9 @@ exports[`Tile basic 1`] = `
 exports[`Tile renders disabled 1`] = `
 <div>
   <div
+    aria-disabled="true"
     class="pf-c-tile pf-m-disabled"
+    role="option"
     tabindex="0"
   >
     <div
@@ -41,7 +44,9 @@ exports[`Tile renders disabled 1`] = `
 exports[`Tile renders selected 1`] = `
 <div>
   <div
+    aria-selected="true"
     class="pf-c-tile pf-m-selected"
+    role="option"
     tabindex="0"
   >
     <div
@@ -61,6 +66,7 @@ exports[`Tile renders with icon 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div
@@ -97,6 +103,7 @@ exports[`Tile renders with stacked icon 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div
@@ -133,6 +140,7 @@ exports[`Tile renders with stacked large icon 1`] = `
 <div>
   <div
     class="pf-c-tile pf-m-display-lg"
+    role="option"
     tabindex="0"
   >
     <div
@@ -169,6 +177,7 @@ exports[`Tile renders with subtext 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div

package/src/components/Tile/examples/Tile.md

@@ -9,7 +9,6 @@ beta: true
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-
 ## Examples
 
 Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/documentation/react/demos/tiledemo).
@@ -20,29 +19,30 @@ Keyboard interaction patterns and a11y is implemented in the Tile demos, located
 import React from 'react';
 import { Tile } from '@patternfly/react-core';
 
-<React.Fragment>
-  <Tile title="Default" />
+<div role="listbox" aria-label="Basic tiles">
+  <Tile title="Default" isSelected={false} />
   <Tile title="Selected" isSelected />
-  <Tile title="Disabled" isDisabled />
-</React.Fragment>
+  <Tile title="Disabled" isDisabled isSelected={false} />
+</div>;
 ```
 
-
 ### With subtext
 
 ```js
 import React from 'react';
 import { Tile } from '@patternfly/react-core';
 
-<React.Fragment>
-  <Tile title="Default">Subtext goes here</Tile>{' '}
+<div role="listbox" aria-label="Tiles with subtext">
+  <Tile title="Default" isSelected={false}>
+    Subtext goes here
+  </Tile>{' '}
   <Tile title="Selected" isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" isDisabled>
+  <Tile title="Disabled" isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### With icon
@@ -52,17 +52,17 @@ import React from 'react';
 import { Tile } from '@patternfly/react-core';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
-<React.Fragment>
-  <Tile title="Default" icon={<PlusIcon />}>
+<div role="listbox" aria-label="Tiles with icon">
+  <Tile title="Default" icon={<PlusIcon />} isSelected={false}>
     Subtext goes here
   </Tile>{' '}
   <Tile title="Selected" icon={<PlusIcon />} isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" icon={<PlusIcon />} isDisabled>
+  <Tile title="Disabled" icon={<PlusIcon />} isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### Stacked
@@ -72,17 +72,17 @@ import React from 'react';
 import { Tile } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-<React.Fragment>
-  <Tile title="Default" icon={<BellIcon />} isStacked>
+<div role="listbox" aria-label="Stacked tiles">
+  <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
     Subtext goes here
   </Tile>{' '}
   <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled>
+  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### Stacked with large icons
@@ -92,17 +92,17 @@ import React from 'react';
 import { Tile } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-<React.Fragment>
-  <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge>
+<div role="listbox" aria-label="Stacked tiles with large icons">
+  <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge isSelected={false}>
     Subtext goes here
   </Tile>{' '}
   <Tile title="Selected" icon={<BellIcon />} isStacked isDisplayLarge isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled>
+  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### With extra content
@@ -112,22 +112,24 @@ import React from 'react';
 import { Tile, Flex } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-<Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <Tile title="Default" icon={<BellIcon />} isStacked>
-      This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really
-      really long subtext that goes on for so long that it has to wrap to the next line.
-    </Tile>
-  </Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <Tile title="Selected" icon={<BellIcon />} isStacked>
-      This is really really long subtext that goes on for so long that it has to wrap to the next line.
-    </Tile>
-  </Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <Tile title="Disabled" icon={<BellIcon />} isStacked>
-      Subtext goes here
-    </Tile>
+<div role="listbox" aria-label="Tiles with extra content">
+  <Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
+        This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really
+        really long subtext that goes on for so long that it has to wrap to the next line.
+      </Tile>
+    </Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
+        This is really really long subtext that goes on for so long that it has to wrap to the next line.
+      </Tile>
+    </Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
+        Subtext goes here
+      </Tile>
+    </Flex>
   </Flex>
-</Flex>
+</div>;
 ```

package/src/components/Toolbar/Toolbar.tsx

@@ -13,7 +13,9 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   clearAllFilters?: () => void;
   /** Text to display in the clear all filters button */
   clearFiltersButtonText?: string;
-  /** The breakpoint at which the listed fitlers in chip groups are collapsed down to a summary */
+  /** Custom content appended to the filter generated chip group. To maintain spacing and styling, each node should be wrapped in a ToolbarItem or ToolbarGroup. This property will remove the default "Clear all filters" button. */
+  customChipGroupContent?: React.ReactNode;
+  /** The breakpoint at which the listed filters in chip groups are collapsed down to a summary */
   collapseListedFiltersBreakpoint?: 'all' | 'md' | 'lg' | 'xl' | '2xl';
   /** Flag indicating if a data toolbar toggle group's expandable content is expanded */
   isExpanded?: boolean;
@@ -129,6 +131,7 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
       isSticky,
       ouiaId,
       numberOfFiltersText,
+      customChipGroupContent,
       ...props
     } = this.props;
 
@@ -166,7 +169,8 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
                 clearAllFilters,
                 clearFiltersButtonText,
                 showClearFiltersButton,
-                toolbarId: randomId
+                toolbarId: randomId,
+                customChipGroupContent
               }}
             >
               {children}
@@ -179,6 +183,7 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
                 numberOfFilters={numberOfFilters}
                 numberOfFiltersText={numberOfFiltersText}
                 collapseListedFiltersBreakpoint={collapseListedFiltersBreakpoint}
+                customChipGroupContent={customChipGroupContent}
               />
             </ToolbarContext.Provider>
           </div>

package/src/components/Toolbar/ToolbarChipGroupContent.tsx

@@ -29,6 +29,8 @@ export interface ToolbarChipGroupContentProps extends React.HTMLProps<HTMLDivEle
   numberOfFiltersText?: (numberOfFilters: number) => string;
   /** The breakpoint at which the listed filters in chip groups are collapsed down to a summary */
   collapseListedFiltersBreakpoint?: 'all' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Custom additional content appended to the generated chips. To maintain spacing and styling, each node should be a ToolbarItem or ToolbarGroup. This property will remove the built in "Clear all filters" button. */
+  customChipGroupContent?: React.ReactNode;
 }
 
 export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentProps> {
@@ -50,6 +52,7 @@ export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupCon
       collapseListedFiltersBreakpoint,
       numberOfFilters,
       numberOfFiltersText,
+      customChipGroupContent,
       ...props
     } = this.props;
 
@@ -86,13 +89,14 @@ export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupCon
             <ToolbarItem>{numberOfFiltersText(numberOfFilters)}</ToolbarItem>
           </ToolbarGroup>
         )}
-        {showClearFiltersButton && !isExpanded && (
+        {showClearFiltersButton && !isExpanded && !customChipGroupContent && (
           <ToolbarItem>
             <Button variant="link" onClick={clearChipGroups} isInline>
               {clearFiltersButtonText}
             </Button>
           </ToolbarItem>
         )}
+        {customChipGroupContent && customChipGroupContent}
       </div>
     );
   }

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -46,7 +46,7 @@ export class ToolbarExpandableContent extends React.Component<ToolbarExpandableC
       showClearFiltersButton,
       ...props
     } = this.props;
-    const { numberOfFilters } = this.context;
+    const { numberOfFilters, customChipGroupContent } = this.context;
 
     const clearChipGroups = () => {
       clearAllFilters();
@@ -58,13 +58,14 @@ export class ToolbarExpandableContent extends React.Component<ToolbarExpandableC
         {numberOfFilters > 0 && (
           <ToolbarGroup className={styles.modifiers.chipContainer}>
             <ToolbarGroup ref={chipContainerRef} />
-            {showClearFiltersButton && (
+            {showClearFiltersButton && !customChipGroupContent && (
               <ToolbarItem>
                 <Button variant="link" onClick={clearChipGroups} isInline>
                   {clearFiltersButtonText}
                 </Button>
               </ToolbarItem>
             )}
+            {customChipGroupContent && customChipGroupContent}
           </ToolbarGroup>
         )}
       </div>

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -15,6 +15,7 @@ interface ToolbarContextProps {
   clearFiltersButtonText?: string;
   showClearFiltersButton?: boolean;
   toolbarId?: string;
+  customChipGroupContent?: React.ReactNode;
 }
 
 export const ToolbarContext = React.createContext<ToolbarContextProps>({

package/src/components/Toolbar/__tests__/ToolbarToggleGroup.test.tsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { shallow } from 'enzyme';
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
 import { Toolbar } from '../Toolbar';
 import { ToolbarItem } from '../ToolbarItem';
 import { ToolbarContent } from '../ToolbarContent';
+import { ToolbarFilter } from '../ToolbarFilter';
+import { ToolbarGroup } from '../ToolbarGroup';
+import { Select, SelectVariant, SelectOption } from '../../Select';
+import { Button } from '../../Button';
 
 describe('ToolbarToggleGroup', () => {
   it('should warn on bad props', () => {
@@ -59,6 +63,72 @@ describe('Toolbar', () => {
     );
     expect(view.container).toMatchSnapshot();
   });
+
+  it('should render with custom chip content', () => {
+    const statusMenuItems = [
+      <SelectOption key="statusNew" value="New" />,
+      <SelectOption key="statusPending" value="Pending" />,
+      <SelectOption key="statusRunning" value="Running" />,
+      <SelectOption key="statusCancelled" value="Cancelled" />
+    ];
+
+    const items = (
+      <React.Fragment>
+        <ToolbarToggleGroup toggleIcon={<React.Fragment />} breakpoint="xl">
+          <ToolbarGroup variant="filter-group">
+            <ToolbarFilter
+              chips={['New', 'Pending']}
+              deleteChip={(category, chip) => {}}
+              deleteChipGroup={category => {}}
+              categoryName="Status"
+            >
+              <Select
+                variant={SelectVariant.checkbox}
+                aria-label="Status"
+                onToggle={(isExpanded: boolean) => {}}
+                onSelect={(event, selection) => {}}
+                selections={['New', 'Pending']}
+                isOpen={true}
+                placeholderText="Status"
+              >
+                {statusMenuItems}
+              </Select>
+            </ToolbarFilter>
+          </ToolbarGroup>
+        </ToolbarToggleGroup>
+      </React.Fragment>
+    );
+
+    const customChipGroupContent = (
+      <React.Fragment>
+        <ToolbarItem>
+          <Button variant="link" onClick={() => {}} isInline>
+            Save filters
+          </Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="link" onClick={() => {}} isInline>
+            Clear all filters
+          </Button>
+        </ToolbarItem>
+      </React.Fragment>
+    );
+
+    const view = render(
+      <Toolbar
+        id="toolbar-with-filter"
+        className="pf-m-toggle-group-container"
+        collapseListedFiltersBreakpoint="xl"
+        customChipGroupContent={customChipGroupContent}
+      >
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+    // Expecting 2 matches for text because the buttons also exist in hidden expandable content for mobile view
+    expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(2);
+    expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(2);
+    expect(view.container).toMatchSnapshot();
+  });
 });
 
 describe('ToolbarItem', () => {