@patternfly/react-core 4.268.2 → 5.0.0-alpha.2

package/src/components/Tooltip/Tooltip.tsx

@@ -8,7 +8,6 @@ import { KeyTypes } from '../../helpers/constants';
 import tooltipMaxWidth from '@patternfly/react-tokens/dist/esm/c_tooltip_MaxWidth';
 import { ReactElement } from 'react';
 import { Popper, getOpacityTransition } from '../../helpers/Popper/Popper';
-import { Props as TippyProps } from '../../helpers/Popper/DeprecatedTippyTypes';
 
 export enum TooltipPosition {
   auto = 'auto',
@@ -134,14 +133,6 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
   id?: string;
   /** CSS fade transition animation duration */
   animationDuration?: number;
-  /** @deprecated - no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead */
-  boundary?: 'scrollParent' | 'window' | 'viewport' | HTMLElement;
-  /** @deprecated - no longer used */
-  isAppLauncher?: boolean;
-  /** @deprecated - no longer used */
-  tippyProps?: Partial<TippyProps>;
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
 }
 
 // id for associating trigger with the content aria-describedby or aria-labelledby
@@ -169,22 +160,9 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   animationDuration = 300,
   reference,
   'aria-live': ariaLive = reference ? 'polite' : 'off',
-  boundary,
-  isAppLauncher,
-  tippyProps,
-  removeFindDomNode = false,
   onTooltipHidden = () => {},
   ...rest
 }: TooltipProps) => {
-  if (process.env.NODE_ENV !== 'production') {
-    boundary !== undefined &&
-      console.warn(
-        'The Tooltip boundary prop has been deprecated. If you want to constrain the popper to a specific element use the appendTo prop instead.'
-      );
-    isAppLauncher !== undefined &&
-      console.warn('The Tooltip isAppLauncher prop has been deprecated and is no longer used.');
-    tippyProps !== undefined && console.warn('The Tooltip tippyProps prop has been deprecated and is no longer used.');
-  }
   // could make this a prop in the future (true | false | 'toggle')
   const hideOnClick = true;
   const triggerOnMouseenter = trigger.includes('mouseenter');
@@ -357,7 +335,6 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       enableFlip={enableFlip}
       zIndex={zIndex}
       flipBehavior={flipBehavior}
-      removeFindDomNode={removeFindDomNode}
     />
   );
 };

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

@@ -2,8 +2,12 @@
 
 exports[`tooltip renders 1`] = `
 <DocumentFragment>
-  <div>
-    Toggle tooltip
+  <div
+    style="display: contents;"
+  >
+    <div>
+      Toggle tooltip
+    </div>
   </div>
 </DocumentFragment>
 `;

package/src/components/TreeView/TreeView.tsx

@@ -26,7 +26,7 @@ export interface TreeViewDataItem {
   /** Flag indicating if a tree view item has a badge. */
   hasBadge?: boolean;
   /** Flag indicating if a tree view item has a checkbox. */
-  hasCheck?: boolean;
+  hasCheckbox?: boolean;
   /** Default icon of a tree view item. */
   icon?: React.ReactNode;
   /** ID of a tree view item. */
@@ -59,7 +59,7 @@ export interface TreeViewProps {
   /** Flag indicating if all nodes in the tree view should have badges. */
   hasBadges?: boolean;
   /** Flag indicating if all nodes in the tree view should have checkboxes. */
-  hasChecks?: boolean;
+  hasCheckboxes?: boolean;
   /** Flag indicating if the tree view has guide lines. */
   hasGuides?: boolean;
   /** Flag indicating if the tree view is nested. */
@@ -92,7 +92,7 @@ export interface TreeViewProps {
 export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   data,
   isNested = false,
-  hasChecks = false,
+  hasCheckboxes = false,
   hasBadges = false,
   hasGuides = false,
   hasSelectableNodes = false,
@@ -124,7 +124,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
           defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
           onSelect={onSelect}
           onCheck={onCheck}
-          hasCheck={item.hasCheck !== undefined ? item.hasCheck : hasChecks}
+          hasCheckbox={item.hasCheckbox !== undefined ? item.hasCheckbox : hasCheckboxes}
           checkProps={item.checkProps}
           hasBadge={item.hasBadge !== undefined ? item.hasBadge : hasBadges}
           customBadgeContent={item.customBadgeContent}
@@ -144,7 +144,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
                 data={item.children}
                 isNested
                 parentItem={item}
-                hasChecks={hasChecks}
+                hasCheckboxes={hasCheckboxes}
                 hasBadges={hasBadges}
                 hasGuides={hasGuides}
                 hasSelectableNodes={hasSelectableNodes}
@@ -170,7 +170,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
       ) : (
         <TreeViewRoot
           hasSelectableNodes={hasSelectableNodes}
-          hasChecks={hasChecks}
+          hasCheckboxes={hasCheckboxes}
           hasGuides={hasGuides}
           variant={variant}
           className={className}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -32,7 +32,7 @@ export interface TreeViewListItemProps {
   /** Flag indicating if a tree view item has a badge. */
   hasBadge?: boolean;
   /** Flag indicating if a tree view item has a checkbox. */
-  hasCheck?: boolean;
+  hasCheckbox?: boolean;
   /** Default icon of a tree view item. */
   icon?: React.ReactNode;
   /** ID of a tree view item. */
@@ -75,7 +75,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   children = null,
   onSelect,
   onCheck,
-  hasCheck = false,
+  hasCheckbox = false,
   checkProps = {
     checked: false
   },
@@ -104,26 +104,26 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   }, [isExpanded, defaultExpanded]);
 
   let Component: 'label' | 'div' | 'button' = 'button';
-  if (hasCheck) {
+  if (hasCheckbox) {
     Component = 'label';
   } else if (isSelectable) {
     Component = 'div';
   }
 
-  const ToggleComponent = hasCheck || isSelectable ? 'button' : 'span';
+  const ToggleComponent = hasCheckbox || isSelectable ? 'button' : 'span';
 
   const renderToggle = (randomId: string) => (
     <ToggleComponent
       className={css(styles.treeViewNodeToggle)}
       onClick={(evt: React.MouseEvent) => {
-        if (isSelectable || hasCheck) {
+        if (isSelectable || hasCheckbox) {
           setIsExpanded(!internalIsExpanded);
         }
         if (isSelectable) {
           evt.stopPropagation();
         }
       }}
-      {...((hasCheck || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
+      {...((hasCheckbox || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
@@ -196,7 +196,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
             <Component
               className={css(
                 styles.treeViewNode,
-                children && (isSelectable || hasCheck) && styles.modifiers.selectable,
+                children && (isSelectable || hasCheckbox) && styles.modifiers.selectable,
                 (!children || isSelectable) &&
                   activeItems &&
                   activeItems.length > 0 &&
@@ -205,19 +205,19 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
                   : ''
               )}
               onClick={(evt: React.MouseEvent) => {
-                if (!hasCheck) {
+                if (!hasCheckbox) {
                   onSelect && onSelect(evt, itemData, parentItem);
                   if (!isSelectable && children && evt.isDefaultPrevented() !== true) {
                     setIsExpanded(!internalIsExpanded);
                   }
                 }
               }}
-              {...(hasCheck && { htmlFor: randomId })}
-              {...((hasCheck || (isSelectable && children)) && { id: `label-${randomId}` })}
+              {...(hasCheckbox && { htmlFor: randomId })}
+              {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
             >
               <span className={css(styles.treeViewNodeContainer)}>
                 {children && renderToggle(randomId)}
-                {hasCheck && renderCheck(randomId)}
+                {hasCheckbox && renderCheck(randomId)}
                 {icon && iconRendered}
                 {renderNodeContent()}
                 {badgeRendered}
@@ -262,7 +262,7 @@ export const TreeViewListItem = React.memo(TreeViewListItemBase, (prevProps, nex
     prevProps.defaultExpanded !== nextProps.defaultExpanded ||
     prevProps.onSelect !== nextProps.onSelect ||
     prevProps.onCheck !== nextProps.onCheck ||
-    prevProps.hasCheck !== nextProps.hasCheck ||
+    prevProps.hasCheckbox !== nextProps.hasCheckbox ||
     prevProps.checkProps !== nextProps.checkProps ||
     prevProps.hasBadge !== nextProps.hasBadge ||
     prevProps.customBadgeContent !== nextProps.customBadgeContent ||

package/src/components/TreeView/TreeViewRoot.tsx

@@ -9,7 +9,7 @@ export interface TreeViewRootProps {
   /** Child nodes of the tree view */
   children: React.ReactNode;
   /** Flag indicating if the tree view has checkboxes. */
-  hasChecks?: boolean;
+  hasCheckboxes?: boolean;
   /** Flag indicating if tree view has guide lines. */
   hasGuides?: boolean;
   /** Variant presentation styles for the tree view. */
@@ -28,15 +28,15 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
     if (canUseDOM) {
       window.addEventListener(
         'keydown',
-        this.props.hasChecks || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
+        this.props.hasCheckboxes || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
       );
     }
-    if (this.props.hasChecks || this.props.hasSelectableNodes) {
+    if (this.props.hasCheckboxes || this.props.hasSelectableNodes) {
       const firstToggle = this.treeRef.current.getElementsByClassName('pf-c-tree-view__node-toggle')[0] as HTMLElement;
       if (firstToggle) {
         firstToggle.tabIndex = 0;
       }
-      if (this.props.hasChecks) {
+      if (this.props.hasCheckboxes) {
         const firstInput = this.treeRef.current.getElementsByTagName('INPUT')[0] as HTMLElement;
         if (firstInput) {
           firstInput.tabIndex = 0;
@@ -59,7 +59,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
     if (canUseDOM) {
       window.removeEventListener(
         'keydown',
-        this.props.hasChecks || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
+        this.props.hasCheckboxes || this.props.hasSelectableNodes ? this.handleKeysCheckbox : this.handleKeys
       );
     }
   }
@@ -188,7 +188,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, hasChecks, hasGuides, variant, className, hasSelectableNodes, ...props } = this.props;
+    const { children, hasCheckboxes, hasGuides, variant, className, hasSelectableNodes, ...props } = this.props;
     return (
       <div
         className={css(

package/src/components/TreeView/__tests__/TreeView.test.tsx

@@ -67,7 +67,7 @@ const flagOptions = [
   {
     name: 'ApplicationLauncher',
     id: 'AppLaunch',
-    hasCheck: true,
+    hasCheckbox: true,
     icon: <FolderIcon />,
     expandedIcon: <FolderOpenIcon />,
     children: [
@@ -84,7 +84,7 @@ const flagOptions = [
         id: 'App2',
         hasBadge: true,
         children: [
-          { name: 'Settings', id: 'App2Settings', hasCheck: true },
+          { name: 'Settings', id: 'App2Settings', hasCheckbox: true },
           {
             name: 'Loader',
             id: 'App2Loader',
@@ -168,7 +168,7 @@ describe('tree view', () => {
   });
 
   test('renders checkboxes successfully', () => {
-    const { asFragment } = render(<TreeView data={options} activeItems={active} onSelect={jest.fn()} hasChecks />);
+    const { asFragment } = render(<TreeView data={options} activeItems={active} onSelect={jest.fn()} hasCheckboxes />);
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/TreeView/examples/TreeView.md

@@ -560,7 +560,7 @@ class CheckboxTreeView extends React.Component {
 
   render() {
     const mapped = this.options.map(item => this.mapTree(item));
-    return <TreeView data={mapped} onCheck={this.onCheck} hasChecks />;
+    return <TreeView data={mapped} onCheck={this.onCheck} hasCheckboxes />;
   }
 }
 ```

package/src/components/Truncate/Truncate.tsx

@@ -41,8 +41,6 @@ interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Opt-in for updated popper that does not use findDOMNode. */
-  removeFindDomNode?: boolean;
 }
 
 const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
@@ -53,10 +51,9 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   tooltipPosition = 'top',
   trailingNumChars = 7,
   content,
-  removeFindDomNode,
   ...props
 }: TruncateProps) => (
-  <Tooltip position={tooltipPosition} content={content} removeFindDomNode={removeFindDomNode}>
+  <Tooltip position={tooltipPosition} content={content}>
     <span className={css(styles.truncate, className)} {...props}>
       {(position === TruncatePosition.end || position === TruncatePosition.start) && (
         <span className={truncateStyles[position]}>

package/src/components/Wizard/WizardFooterInternal.tsx

@@ -28,14 +28,14 @@ export const WizardFooterInternal: React.FunctionComponent<WizardFooterInternalP
   cancelButtonText
 }: WizardFooterInternalProps) => (
   <footer className={css(styles.wizardFooter)}>
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={!isValid}>
-      {nextButtonText}
-    </Button>
     {!activeStep.hideBackButton && (
       <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={firstStep}>
         {backButtonText}
       </Button>
     )}
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={!isValid}>
+      {nextButtonText}
+    </Button>
     {!activeStep.hideCancelButton && (
       <div className={styles.wizardFooterCancel}>
         <Button variant={ButtonVariant.link} onClick={onClose}>

package/src/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap

@@ -6,25 +6,25 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
     class="pf-c-wizard__footer"
   >
     <button
-      aria-disabled="false"
-      class="pf-c-button pf-m-primary"
-      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+      aria-disabled="true"
+      class="pf-c-button pf-m-secondary pf-m-disabled"
+      data-ouia-component-id="OUIA-Generated-Button-secondary-1"
       data-ouia-component-type="PF4/Button"
       data-ouia-safe="true"
-      type="submit"
+      disabled=""
+      type="button"
     >
       <div>
         ReactNode
       </div>
     </button>
     <button
-      aria-disabled="true"
-      class="pf-c-button pf-m-secondary pf-m-disabled"
-      data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+      aria-disabled="false"
+      class="pf-c-button pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-Button-primary-1"
       data-ouia-component-type="PF4/Button"
       data-ouia-safe="true"
-      disabled=""
-      type="button"
+      type="submit"
     >
       <div>
         ReactNode

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

@@ -227,16 +227,6 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
       <footer
         class="pf-c-wizard__footer"
       >
-        <button
-          aria-disabled="false"
-          class="pf-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
-        >
-          Next
-        </button>
         <button
           aria-disabled="true"
           class="pf-c-button pf-m-secondary pf-m-disabled"
@@ -248,6 +238,16 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         >
           Back
         </button>
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-2"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          Next
+        </button>
         <div
           class="pf-c-wizard__footer-cancel"
         >
@@ -475,16 +475,6 @@ exports[`Wizard Wizard should match snapshot 1`] = `
       <footer
         class="pf-c-wizard__footer"
       >
-        <button
-          aria-disabled="false"
-          class="pf-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-1"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
-        >
-          Next
-        </button>
         <button
           aria-disabled="true"
           class="pf-c-button pf-m-secondary pf-m-disabled"
@@ -496,6 +486,16 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         >
           Back
         </button>
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-1"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          Next
+        </button>
         <div
           class="pf-c-wizard__footer-cancel"
         >
@@ -604,16 +604,6 @@ exports[`Wizard bare wiz 1`] = `
       <footer
         class="pf-c-wizard__footer"
       >
-        <button
-          aria-disabled="false"
-          class="pf-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-3"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="submit"
-        >
-          Next
-        </button>
         <button
           aria-disabled="true"
           class="pf-c-button pf-m-secondary pf-m-disabled"
@@ -625,6 +615,16 @@ exports[`Wizard bare wiz 1`] = `
         >
           Back
         </button>
+        <button
+          aria-disabled="false"
+          class="pf-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-3"
+          data-ouia-component-type="PF4/Button"
+          data-ouia-safe="true"
+          type="submit"
+        >
+          Next
+        </button>
         <div
           class="pf-c-wizard__footer-cancel"
         >

package/src/components/Wizard/examples/Wizard.md

@@ -325,16 +325,16 @@ class ProgressiveWizard extends React.Component {
           {({ activeStep, goToStepByName, goToStepById, onNext, onBack, onClose }) => {
             return (
               <>
-                <Button variant="primary" type="submit" onClick={() => this.getNextStep(activeStep, onNext)}>
-                  {activeStep.name === 'Review' ? 'Finish' : 'Next'}
-                </Button>
                 <Button
                   variant="secondary"
                   onClick={() => this.getPreviousStep(activeStep, onBack)}
-                  className={activeStep.name === 'Get Started' ? 'pf-m-disabled' : ''}
+                  className={activeStep.name === 'Get started' ? 'pf-m-disabled' : ''}
                 >
                   Back
                 </Button>
+                <Button variant="primary" type="submit" onClick={() => this.getNextStep(activeStep, onNext)}>
+                  {activeStep.name === 'Review' ? 'Finish' : 'Next'}
+                </Button>
                 <Button variant="link" onClick={onClose}>
                   Cancel
                 </Button>

package/src/demos/ComposableMenu/examples/ComposableMultipleTypeaheadSelect.tsx

@@ -149,7 +149,7 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
           onClick={toggleMenuOpen}
           onChange={onTextInputChange}
           onKeyDown={onInputKeyDown}
-          id="typeahead-select-input"
+          id="multi-typeahead-select-input"
           autoComplete="off"
           innerRef={textInputRef}
         >

package/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx

@@ -81,16 +81,16 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
     <Menu ref={menuRef} id="select-menu" onSelect={onSelect} selected={selectedItems}>
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck itemId={0} isSelected={selectedItems.includes(0)}>
+          <MenuItem hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}>
             Debug
           </MenuItem>
-          <MenuItem hasCheck itemId={1} isSelected={selectedItems.includes(1)}>
+          <MenuItem hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}>
             Info
           </MenuItem>
-          <MenuItem hasCheck itemId={2} isSelected={selectedItems.includes(2)}>
+          <MenuItem hasCheckbox itemId={2} isSelected={selectedItems.includes(2)}>
             Warn
           </MenuItem>
-          <MenuItem hasCheck isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
+          <MenuItem hasCheckbox isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
             Error
           </MenuItem>
         </MenuList>

package/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx

@@ -243,7 +243,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
             <TreeView
               data={statusMapped}
               hasBadges
-              hasChecks
+              hasCheckboxes
               onCheck={(event, item) => onCheck(event, item, 'status')}
             />
           </PanelMainBody>
@@ -255,7 +255,12 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
             </Title>
           </PanelMainBody>
           <PanelMainBody style={{ padding: 0 }}>
-            <TreeView data={roleMapped} hasBadges hasChecks onCheck={(event, item) => onCheck(event, item, 'role')} />
+            <TreeView
+              data={roleMapped}
+              hasBadges
+              hasCheckboxes
+              onCheck={(event, item) => onCheck(event, item, 'role')}
+            />
           </PanelMainBody>
         </section>
       </PanelMain>

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -438,19 +438,19 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     >
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Bangalore')} itemId="Bangalore">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Bangalore')} itemId="Bangalore">
             Bangalore
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Boston')} itemId="Boston">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Boston')} itemId="Boston">
             Boston
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Brno')} itemId="Brno">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Brno')} itemId="Brno">
             Brno
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Raleigh')} itemId="Raleigh">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Raleigh')} itemId="Raleigh">
             Raleigh
           </MenuItem>
-          <MenuItem hasCheck isSelected={locationSelections.includes('Westford')} itemId="Westford">
+          <MenuItem hasCheckbox isSelected={locationSelections.includes('Westford')} itemId="Westford">
             Westford
           </MenuItem>
         </MenuList>
@@ -560,8 +560,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   // Set up pagination and toolbar
   const toolbarPagination = (
     <Pagination
-      titles={{ paginationTitle: 'Attribute search pagination' }}
-      perPageComponent="button"
+      titles={{ paginationAriaLabel: 'Attribute search pagination' }}
       itemCount={repositories.length}
       perPage={10}
       page={1}

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -307,19 +307,19 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
     <Menu ref={menuRef} id="checkbox-select-menu" onSelect={onSelect} selected={selections}>
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck isSelected={selections.includes('Bangalore')} itemId="Bangalore">
+          <MenuItem hasCheckbox isSelected={selections.includes('Bangalore')} itemId="Bangalore">
             Bangalore
           </MenuItem>
-          <MenuItem hasCheck isSelected={selections.includes('Boston')} itemId="Boston">
+          <MenuItem hasCheckbox isSelected={selections.includes('Boston')} itemId="Boston">
             Boston
           </MenuItem>
-          <MenuItem hasCheck isSelected={selections.includes('Brno')} itemId="Brno">
+          <MenuItem hasCheckbox isSelected={selections.includes('Brno')} itemId="Brno">
             Brno
           </MenuItem>
-          <MenuItem hasCheck isSelected={selections.includes('Raleigh')} itemId="Raleigh">
+          <MenuItem hasCheckbox isSelected={selections.includes('Raleigh')} itemId="Raleigh">
             Raleigh
           </MenuItem>
-          <MenuItem hasCheck isSelected={selections.includes('Westford')} itemId="Westford">
+          <MenuItem hasCheckbox isSelected={selections.includes('Westford')} itemId="Westford">
             Westford
           </MenuItem>
         </MenuList>
@@ -336,8 +336,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   // Set up pagination
   const toolbarPagination = (
     <Pagination
-      titles={{ paginationTitle: 'Checkbox filter pagination' }}
-      perPageComponent="button"
+      titles={{ paginationAriaLabel: 'Checkbox filter pagination' }}
       itemCount={repositories.length}
       perPage={10}
       page={1}