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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.268.2",
+  "version": "5.0.0-alpha.2",
   "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",
@@ -22,7 +22,7 @@
   ],
   "publishConfig": {
     "access": "public",
-    "tag": "prerelease"
+    "tag": "alpha"
   },
   "repository": {
     "type": "git",
@@ -45,16 +45,16 @@
     "subpaths": "node scripts/copySubpaths.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.93.3",
-    "@patternfly/react-styles": "^4.92.3",
-    "@patternfly/react-tokens": "^4.94.3",
+    "@patternfly/react-icons": "^5.0.0-alpha.1",
+    "@patternfly/react-styles": "^5.0.0-alpha.1",
+    "@patternfly/react-tokens": "^5.0.0-alpha.1",
     "focus-trap": "6.9.2",
-    "react-dropzone": "9.0.0",
+    "react-dropzone": "^14.2.3",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.222.4",
+    "@patternfly/patternfly": "5.0.0-alpha.3",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^3.0.0",
@@ -71,5 +71,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "a25b3ab583bd808d640a1c7ebb14d9296d701b2b"
+  "gitHead": "5c5e79f8ab23e8c173df7524ad2f1f59a9ba4300"
 }

package/src/components/Accordion/Accordion.tsx

@@ -17,7 +17,7 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   /** Flag to indicate the accordion had a border */
   isBordered?: boolean;
   /** Display size variant. */
-  displaySize?: 'default' | 'large';
+  displaySize?: 'default' | 'lg';
 }
 
 export const Accordion: React.FunctionComponent<AccordionProps> = ({
@@ -36,7 +36,7 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
       className={css(
         styles.accordion,
         isBordered && styles.modifiers.bordered,
-        displaySize === 'large' && styles.modifiers.displayLg,
+        displaySize === 'lg' && styles.modifiers.displayLg,
         className
       )}
       aria-label={ariaLabel}

package/src/components/Accordion/AccordionContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import { AccordionContext } from './AccordionContext';
-import { AccordionExpandedContentBody } from './AccordionExpandedContentBody';
+import { AccordionExpandableContentBody } from './AccordionExpandableContentBody';
 
 export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Accordion  */
@@ -41,7 +41,7 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
         <Container
           id={id}
           className={css(
-            styles.accordionExpandedContent,
+            styles.accordionExpandableContent,
             isFixed && styles.modifiers.fixed,
             !isHidden && styles.modifiers.expanded,
             className
@@ -50,7 +50,7 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
           aria-label={ariaLabel}
           {...props}
         >
-          {isCustomContent ? children : <AccordionExpandedContentBody>{children}</AccordionExpandedContentBody>}
+          {isCustomContent ? children : <AccordionExpandableContentBody>{children}</AccordionExpandableContentBody>}
         </Container>
       );
     }}

package/src/components/Accordion/AccordionExpandableContentBody.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+
+export interface AccordionExpandableContentBodyProps {
+  /** Content rendered inside the accordion content body  */
+  children?: React.ReactNode;
+}
+
+export const AccordionExpandableContentBody: React.FunctionComponent<AccordionExpandableContentBodyProps> = ({
+  children = null
+}: AccordionExpandableContentBodyProps) => <div className={css(styles.accordionExpandableContentBody)}>{children}</div>;
+AccordionExpandableContentBody.displayName = 'AccordionExpandableContentBody';

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

@@ -128,8 +128,8 @@ test('Renders without pf-m-display-lg by default', () => {
   expect(screen.getByText('Test')).not.toHaveClass('pf-m-display-lg');
 });
 
-test('Renders with pf-m-display-lg when displaySize=large', () => {
-  render(<Accordion displaySize="large">Test</Accordion>);
+test('Renders with pf-m-display-lg when displaySize="lg"', () => {
+  render(<Accordion displaySize="lg">Test</Accordion>);
 
   expect(screen.getByText('Test')).toHaveClass('pf-m-display-lg');
 });

package/src/components/Accordion/__tests__/AccordionContent.test.tsx

@@ -5,8 +5,8 @@ import { render, screen } from '@testing-library/react';
 import { AccordionContent } from '../AccordionContent';
 import { AccordionContext } from '../AccordionContext';
 
-jest.mock('../AccordionExpandedContentBody', () => ({
-  AccordionExpandedContentBody: ({ children }) => <div aria-label="Expanded content body mock">{children}</div>
+jest.mock('../AccordionExpandableContentBody', () => ({
+  AccordionExpandableContentBody: ({ children }) => <div aria-label="Expanded content body mock">{children}</div>
 }));
 
 test('Renders without children', () => {
@@ -29,7 +29,7 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with children wrapped in AccordionExpandedContentBody by default', () => {
+test('Renders with children wrapped in AccordionExpandableContentBody by default', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent>Test</AccordionContent>
@@ -39,7 +39,7 @@ test('Renders with children wrapped in AccordionExpandedContentBody by default',
   expect(screen.getByText('Test')).toHaveAccessibleName('Expanded content body mock');
 });
 
-test('Does not render children wrapped in AccordionExpandedContentBody when isCustomContent=true', () => {
+test('Does not render children wrapped in AccordionExpandableContentBody when isCustomContent=true', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent isCustomContent>Test</AccordionContent>
@@ -72,14 +72,14 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('heading')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class name pf-c-accordion__expanded-content', () => {
+test('Renders with class name pf-c-accordion__expandable-content', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
       <AccordionContent>Test</AccordionContent>
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByRole('heading')).toHaveClass('pf-c-accordion__expanded-content');
+  expect(screen.getByRole('heading')).toHaveClass('pf-c-accordion__expandable-content');
 });
 
 test('Renders with custom class names provided via prop', () => {

package/src/components/Accordion/__tests__/AccordionExpandedContentBody.test.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { render, screen } from '@testing-library/react';
 
-import { AccordionExpandedContentBody } from '../AccordionExpandedContentBody';
+import { AccordionExpandableContentBody } from '../AccordionExpandableContentBody';
 
 test('Renders without children', () => {
-    const { asFragment } = render(<AccordionExpandedContentBody />);
+    const { asFragment } = render(<AccordionExpandableContentBody />);
 
     /* a snapshot test is used here because this component isn't selectable via better screen queries without children 
     as it doesn't spread other props to its container
@@ -14,20 +14,20 @@ test('Renders without children', () => {
 });
 
 test('Renders children', () => {
-  render(<AccordionExpandedContentBody>Test</AccordionExpandedContentBody>);
+  render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
   expect(screen.getByText('Test')).toBeVisible();
 });
 
-test('Renders with class name pf-c-accordion__expanded-content-body', () => {
-  render(<AccordionExpandedContentBody>Test</AccordionExpandedContentBody>);
+test('Renders with class name pf-c-accordion__expandable-content-body', () => {
+  render(<AccordionExpandableContentBody>Test</AccordionExpandableContentBody>);
 
-  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion__expanded-content-body');
+  expect(screen.getByText('Test')).toHaveClass('pf-c-accordion__expandable-content-body');
 });
 
 test('Matches the snapshot', () => {
   const { asFragment } = render(
-    <AccordionExpandedContentBody>Test</AccordionExpandedContentBody>
+    <AccordionExpandableContentBody>Test</AccordionExpandableContentBody>
   );
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <h3
     aria-label="this is a simple accordion"
-    class="pf-c-accordion__expanded-content pf-m-expanded"
+    class="pf-c-accordion__expandable-content pf-m-expanded"
     id=""
   >
     <div

package/src/components/Accordion/__tests__/__snapshots__/AccordionExpandedContentBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-accordion__expanded-content-body"
+    class="pf-c-accordion__expandable-content-body"
   >
     Test
   </div>
@@ -13,7 +13,7 @@ exports[`Matches the snapshot 1`] = `
 exports[`Renders without children 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-accordion__expanded-content-body"
+    class="pf-c-accordion__expandable-content-body"
   />
 </DocumentFragment>
 `;

package/src/components/Accordion/examples/Accordion.md

@@ -2,7 +2,7 @@
 id: Accordion
 section: components
 cssPrefix: pf-c-accordion
-propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandedContentBody]
+propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';

package/src/components/Accordion/examples/AccordionBordered.tsx

@@ -4,7 +4,7 @@ import {
   AccordionItem,
   AccordionContent,
   AccordionToggle,
-  AccordionExpandedContentBody,
+  AccordionExpandableContentBody,
   Button,
   Checkbox
 } from '@patternfly/react-core';
@@ -14,7 +14,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
   const [expanded, setExpanded] = React.useState('bordered-toggle4');
   const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
 
-  const displaySize = isDisplayLarge ? 'large' : 'default';
+  const displaySize = isDisplayLarge ? 'lg' : 'default';
   const onToggle = (id: string) => {
     if (id === expanded) {
       setExpanded('');
@@ -88,7 +88,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
             Item four
           </AccordionToggle>
           <AccordionContent id="bordered-expand4" isHidden={expanded !== 'bordered-toggle4'} isCustomContent>
-            <AccordionExpandedContentBody>
+            <AccordionExpandableContentBody>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
               sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
               posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper
@@ -96,12 +96,12 @@ export const AccordionBordered: React.FunctionComponent = () => {
               parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,
               pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.
               Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
-            </AccordionExpandedContentBody>
-            <AccordionExpandedContentBody>
-              <Button variant="link" isLarge isInline>
+            </AccordionExpandableContentBody>
+            <AccordionExpandableContentBody>
+              <Button variant="link" size="lg" isInline>
                 Call to action <ArrowRightIcon />
               </Button>
-            </AccordionExpandedContentBody>
+            </AccordionExpandableContentBody>
           </AccordionContent>
         </AccordionItem>
         <AccordionItem>
@@ -124,7 +124,7 @@ export const AccordionBordered: React.FunctionComponent = () => {
           label="Display size large"
           isChecked={isDisplayLarge}
           onChange={setIsDisplayLarge}
-          aria-label="show displlay large variation checkbox"
+          aria-label="show display large variation checkbox"
           id="toggle-display-lg"
           name="toggle-display-lg"
         />

package/src/components/Accordion/index.ts

@@ -1,5 +1,5 @@
 export * from './Accordion';
 export * from './AccordionContent';
-export * from './AccordionExpandedContentBody';
+export * from './AccordionExpandableContentBody';
 export * from './AccordionItem';
 export * from './AccordionToggle';

package/src/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AppLauncher/app-launcher';
-import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import { DropdownDirection, DropdownPosition, DropdownToggle, DropdownContext } from '../Dropdown';
 import { DropdownWithContext } from '../Dropdown/DropdownWithContext';
@@ -9,12 +8,10 @@ import { ApplicationLauncherGroup } from './ApplicationLauncherGroup';
 import { ApplicationLauncherSeparator } from './ApplicationLauncherSeparator';
 import { ApplicationLauncherItem } from './ApplicationLauncherItem';
 import { ApplicationLauncherContext } from './ApplicationLauncherContext';
-import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites';
+import { SearchInput } from '../SearchInput';
 
-export interface ApplicationLauncherProps
-  extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>,
-    React.HTMLProps<HTMLDivElement> {
+export interface ApplicationLauncherProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional element css classes */
   className?: string;
   /** Display menu above or below dropdown toggle */
@@ -87,8 +84,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
     searchPlaceholderText: 'Filter by name...',
     searchNoResultsText: 'No results found',
     favoritesLabel: 'Favorites',
-    menuAppendTo: 'inline',
-    removeFindDomNode: false
+    menuAppendTo: 'inline'
   };
 
   createSearchBox = () => {
@@ -98,13 +94,7 @@ export class ApplicationLauncher extends React.Component<ApplicationLauncherProp
       <div key="search" className={css(styles.appLauncherMenuSearch)}>
         <ApplicationLauncherItem
           customChild={
-            <input
-              type="search"
-              className={css(formStyles.formControl)}
-              placeholder={searchPlaceholderText}
-              onChange={e => onSearch(e.target.value)}
-              {...searchProps}
-            ></input>
+            <SearchInput placeholder={searchPlaceholderText} onChange={value => onSearch(value)} {...searchProps} />
           }
         ></ApplicationLauncherItem>
       </div>

package/src/components/ApplicationLauncher/ApplicationLauncherItem.tsx

@@ -30,6 +30,7 @@ export interface ApplicationLauncherItemProps {
   ariaIsNotFavoriteLabel?: string;
   /** ID of the item. Required for tracking favorites. */
   id?: string;
+  /** Custom item rendering that receives the ApplicationLauncherContext */
   customChild?: React.ReactNode;
   /** Flag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items. */
   enterTriggersArrowDown?: boolean;

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

@@ -55,16 +55,18 @@ describe('ApplicationLauncher', () => {
 
   test('custom icon', () => {
     const { asFragment } = render(
-      <React.StrictMode>
-        <ApplicationLauncher items={dropdownItems} isOpen toggleIcon={<HelpIcon id="test-icon" />} />
-      </React.StrictMode>
+      <ApplicationLauncher items={dropdownItems} isOpen toggleIcon={<HelpIcon id="test-icon" />} />
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('Renders in strict mode', () => {
     const consoleError = jest.spyOn(console, 'error');
-    const { asFragment } = render(<ApplicationLauncher removeFindDomNode isOpen items={dropdownItems} />);
+    const { asFragment } = render(
+      <React.StrictMode>
+        <ApplicationLauncher isOpen items={dropdownItems} />{' '}
+      </React.StrictMode>
+    );
     expect(consoleError).not.toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });

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

@@ -16,7 +16,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownToggle-8"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
-      id="pf-dropdown-toggle-id-7"
+      id="pf-dropdown-toggle-id-6"
       type="button"
     >
       <span>
@@ -36,7 +36,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
       </span>
     </button>
     <ul
-      aria-labelledby="pf-dropdown-toggle-id-7"
+      aria-labelledby="pf-dropdown-toggle-id-6"
       class="pf-c-app-launcher__menu"
       role="menu"
     >
@@ -46,7 +46,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-19"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-14"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -61,7 +61,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
         <button
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-20"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-16"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -77,7 +77,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
         <a
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-21"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-18"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -92,7 +92,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
         <button
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-22"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-20"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -116,7 +116,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-23"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-22"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -143,6 +143,7 @@ exports[`ApplicationLauncher Renders in strict mode 1`] = `
       </li>
     </ul>
   </nav>
+   
 </DocumentFragment>
 `;
 
@@ -159,7 +160,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
       aria-haspopup="true"
       aria-label="Application launcher"
       class="pf-c-app-launcher__toggle"
-      data-ouia-component-id="OUIA-Generated-DropdownToggle-7"
+      data-ouia-component-id="OUIA-Generated-DropdownToggle-6"
       data-ouia-component-type="PF4/DropdownToggle"
       data-ouia-safe="true"
       id="pf-dropdown-toggle-id-5"
@@ -193,7 +194,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-8"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-7"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -208,7 +209,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <button
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-10"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-8"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -224,7 +225,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <a
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-12"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-9"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -239,7 +240,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <button
           aria-disabled="true"
           class="pf-m-disabled pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-14"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-10"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -263,7 +264,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <a
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-16"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-11"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"
@@ -278,7 +279,7 @@ exports[`ApplicationLauncher custom icon 1`] = `
         <button
           aria-disabled="false"
           class="pf-c-app-launcher__menu-item"
-          data-ouia-component-id="OUIA-Generated-DropdownItem-18"
+          data-ouia-component-id="OUIA-Generated-DropdownItem-12"
           data-ouia-component-type="PF4/DropdownItem"
           data-ouia-safe="true"
           role="menuitem"

package/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx

@@ -40,7 +40,10 @@ export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = ()
   const [favorites, setFavorites] = React.useState<string[]>([]);
   const [filteredItems, setFilteredItems] = React.useState<React.ReactNode[]>(null);
 
-  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onToggle = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+    setFilteredItems(null);
+  };
 
   const onFavorite = (itemId: string, isFavorite: boolean) => {
     let updatedFavorites: string[] = [...favorites, itemId];

package/src/components/Backdrop/examples/BackdropSpinner.tsx

@@ -4,7 +4,7 @@ import { Backdrop, Spinner, Bullseye } from '@patternfly/react-core';
 export const BackdropSpinner: React.FunctionComponent = () => (
   <Backdrop>
     <Bullseye>
-      <Spinner aria-label="Backdrop content" aria-valueText="Loading..." />
+      <Spinner aria-label="Backdrop content" aria-valuetext="Loading..." />
     </Bullseye>
   </Backdrop>
 );

package/src/components/Button/Button.tsx

@@ -22,6 +22,12 @@ export enum ButtonType {
   reset = 'reset'
 }
 
+export enum ButtonSize {
+  default = 'default',
+  sm = 'sm',
+  lg = 'lg'
+}
+
 export interface BadgeCountObject {
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
@@ -31,7 +37,7 @@ export interface BadgeCountObject {
   className?: string;
 }
 
-export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref'>, OUIAProps {
+export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref' | 'size'>, OUIAProps {
   /** Content rendered inside the button */
   children?: React.ReactNode;
   /** Additional classes added to the button */
@@ -58,6 +64,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   inoperableEvents?: string[];
   /** Adds inline styling to a link button */
   isInline?: boolean;
+  /** Adds styling which affects the size of the button */
+  size?: 'default' | 'sm' | 'lg';
   /** Sets button type */
   type?: 'button' | 'submit' | 'reset';
   /** Adds button variant styles */
@@ -70,10 +78,6 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   icon?: React.ReactNode | null;
   /** Sets the button tabindex. */
   tabIndex?: number;
-  /** Adds small styling to the button */
-  isSmall?: boolean;
-  /** Adds large styling to the button */
-  isLarge?: boolean;
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
   /** Forwarded ref */
@@ -99,8 +103,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
-  isSmall = false,
-  isLarge = false,
+  size = ButtonSize.default,
   inoperableEvents = ['onClick', 'onKeyPress'],
   isInline = false,
   type = ButtonType.button,
@@ -157,8 +160,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
         isLoading !== null && children !== null && styles.modifiers.progress,
         isLoading && styles.modifiers.inProgress,
-        isSmall && styles.modifiers.small,
-        isLarge && styles.modifiers.displayLg,
+        size === ButtonSize.sm && styles.modifiers.small,
+        size === ButtonSize.lg && styles.modifiers.displayLg,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

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

@@ -84,13 +84,13 @@ describe('Button', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('isSmall', () => {
-    const { asFragment } = render(<Button isSmall>Small Button</Button>);
+  test('size small', () => {
+    const { asFragment } = render(<Button size="sm">Small Button</Button>);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('isLarge', () => {
-    const { asFragment } = render(<Button isLarge>Large Button</Button>);
+  test('size large', () => {
+    const { asFragment } = render(<Button size="lg">Large Button</Button>);
     expect(asFragment()).toMatchSnapshot();
   });