@patternfly/react-core 5.1.0 → 5.1.1-prerelease.10

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -94,7 +94,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
           onClick={
             isDisabled
               ? undefined
-              : evt => {
+              : (evt) => {
                   onOptionCheck && onOptionCheck(evt, !isChecked, itemData);
                   setFocusedOption(id);
                 }
@@ -104,7 +104,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
             {children && (
               <div
                 className={css(styles.dualListSelectorItemToggle)}
-                onClick={e => {
+                onClick={(e) => {
                   if (children) {
                     setIsExpanded(!isExpanded);
                   }
@@ -138,7 +138,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                     e.preventDefault();
                   }
                 }}
-                ref={elem => elem && (elem.indeterminate = isChecked === null)}
+                ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
                 checked={isChecked || false}
                 tabIndex={-1}
                 {...checkProps}

package/src/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx

@@ -53,11 +53,11 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
 
   const moveAll = (fromAvailable: boolean) => {
     if (fromAvailable) {
-      setChosenOptions([...availableOptions.filter(option => option.isVisible), ...chosenOptions]);
-      setAvailableOptions([...availableOptions.filter(option => !option.isVisible)]);
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
     } else {
-      setAvailableOptions([...chosenOptions.filter(option => option.isVisible), ...availableOptions]);
-      setChosenOptions([...chosenOptions.filter(option => !option.isVisible)]);
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
     }
   };
 
@@ -96,8 +96,8 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
     <DualListSelector>
       <DualListSelectorPane
         title="Available"
-        status={`${availableOptions.filter(option => option.selected && option.isVisible).length} of ${
-          availableOptions.filter(option => option.isVisible).length
+        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          availableOptions.filter((option) => option.isVisible).length
         } options selected`}
       >
         <DualListSelectorList>
@@ -107,7 +107,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
                 key={index}
                 isSelected={option.selected}
                 id={`composable-drag-drop-available-option-${index}`}
-                onOptionSelect={e => onOptionSelect(e, index, false)}
+                onOptionSelect={(e) => onOptionSelect(e, index, false)}
               >
                 {option.text}
               </DualListSelectorListItem>
@@ -117,7 +117,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
       </DualListSelectorPane>
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl
-          isDisabled={!availableOptions.some(option => option.selected)}
+          isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
         >
@@ -139,7 +139,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
         </DualListSelectorControl>
         <DualListSelectorControl
           onClick={() => moveSelected(false)}
-          isDisabled={!chosenOptions.some(option => option.selected)}
+          isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
         >
           <AngleLeftIcon />
@@ -154,8 +154,8 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
       >
         <DualListSelectorPane
           title="Chosen"
-          status={`${chosenOptions.filter(option => option.selected && option.isVisible).length} of ${
-            chosenOptions.filter(option => option.isVisible).length
+          status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+            chosenOptions.filter((option) => option.isVisible).length
           } options selected`}
           isChosen
         >
@@ -167,7 +167,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
                     <DualListSelectorListItem
                       isSelected={option.selected}
                       id={`composable-drag-drop-chosen-option-${index}`}
-                      onOptionSelect={e => onOptionSelect(e, index, true)}
+                      onOptionSelect={(e) => onOptionSelect(e, index, true)}
                       isDraggable
                     >
                       {option.text}

package/src/components/DualListSelector/treeUtils.ts

@@ -2,7 +2,7 @@ import { DualListSelectorTreeItemData } from './DualListSelectorTree';
 
 export function flattenTree(tree: DualListSelectorTreeItemData[]): string[] {
   let result = [] as string[];
-  tree.forEach(item => {
+  tree.forEach((item) => {
     if (item.children) {
       result = result.concat(flattenTree(item.children));
     } else {
@@ -14,7 +14,7 @@ export function flattenTree(tree: DualListSelectorTreeItemData[]): string[] {
 
 export function flattenTreeWithFolders(tree: DualListSelectorTreeItemData[]): string[] {
   let result = [] as string[];
-  tree.forEach(item => {
+  tree.forEach((item) => {
     result.push(item.id);
     if (item.children) {
       result = result.concat(flattenTreeWithFolders(item.children));
@@ -25,7 +25,7 @@ export function flattenTreeWithFolders(tree: DualListSelectorTreeItemData[]): st
 
 export function filterFolders(tree: DualListSelectorTreeItemData[], inputList: string[]): string[] {
   let result = [] as string[];
-  tree.forEach(item => {
+  tree.forEach((item) => {
     if (item.children) {
       result = result.concat(filterFolders(item.children, inputList));
     } else {
@@ -44,8 +44,8 @@ export function filterTreeItems(item: DualListSelectorTreeItemData, inputList: s
   if (item.children) {
     return (
       (item.children = item.children
-        .map(opt => Object.assign({}, opt))
-        .filter(child => filterTreeItems(child, inputList))).length > 0
+        .map((opt) => Object.assign({}, opt))
+        .filter((child) => filterTreeItems(child, inputList))).length > 0
     );
   }
 }
@@ -54,8 +54,8 @@ export function filterTreeItemsWithoutFolders(item: DualListSelectorTreeItemData
   if (item.children) {
     return (
       (item.children = item.children
-        .map(opt => Object.assign({}, opt))
-        .filter(child =>
+        .map((opt) => Object.assign({}, opt))
+        .filter((child) =>
           child.children ? filterTreeItemsWithoutFolders(child, inputList) : filterTreeItems(child, inputList)
         )).length > 0
     );
@@ -70,8 +70,8 @@ export function filterRestTreeItems(item: DualListSelectorTreeItemData, inputLis
   if (item.children) {
     const child =
       (item.children = item.children
-        .map(opt => Object.assign({}, opt))
-        .filter(child => filterRestTreeItems(child, inputList))).length > 0;
+        .map((opt) => Object.assign({}, opt))
+        .filter((child) => filterRestTreeItems(child, inputList))).length > 0;
     return child;
   }
 

package/src/components/EmptyState/EmptyStateActions.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from "@patternfly/react-styles/css/components/EmptyState/empty-state";
+import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 
 export interface EmptyStateActionsProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the empty state actions */

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { PickOptional } from '../../helpers/typeUtils';
-import { debounce } from '../../helpers/util';
+import { debounce, getUniqueId } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum ExpandableSectionVariant {
@@ -23,6 +23,12 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
    * property's value should match the contenId property of the expandable section toggle sub-component.
    */
   contentId?: string;
+  /** Id of the toggle of the expandable section, which provides an accessible name to the
+   * expandable section content via the aria-labelledby attribute. When the isDetached property
+   * is also passed in, the value of this property must match the toggleId property of the
+   * expandable section toggle sub-component.
+   */
+  toggleId?: string;
   /** Display size variant. Set to "lg" for disclosure styling. */
   displaySize?: 'default' | 'lg';
   /** Forces active state. */
@@ -75,7 +81,7 @@ const setLineClamp = (lines: number, element: HTMLDivElement) => {
   element.style.setProperty(lineClamp.name, lines.toString());
 };
 
-export class ExpandableSection extends React.Component<ExpandableSectionProps, ExpandableSectionState> {
+class ExpandableSection extends React.Component<ExpandableSectionProps, ExpandableSectionState> {
   static displayName = 'ExpandableSection';
   constructor(props: ExpandableSectionProps) {
     super(props);
@@ -102,7 +108,6 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     displaySize: 'default',
     isWidthLimited: false,
     isIndented: false,
-    contentId: '',
     variant: 'default'
   };
 
@@ -191,13 +196,24 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
       isWidthLimited,
       isIndented,
       contentId,
+      toggleId,
       variant,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       truncateMaxLines,
       ...props
     } = this.props;
+
+    if (isDetached && !toggleId) {
+      /* eslint-disable no-console */
+      console.warn(
+        'ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.'
+      );
+    }
+
     let onToggle = onToggleProp;
     let propOrStateIsExpanded = isExpanded;
+    const uniqueContentId = contentId || getUniqueId('expandable-section-content');
+    const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
 
     // uncontrolled
     if (isExpanded === undefined) {
@@ -219,6 +235,8 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
         className={css(styles.expandableSectionToggle)}
         type="button"
         aria-expanded={propOrStateIsExpanded}
+        aria-controls={uniqueContentId}
+        id={uniqueToggleId}
         onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
       >
         {variant !== ExpandableSectionVariant.truncate && (
@@ -250,7 +268,9 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
           ref={this.expandableContentRef}
           className={css(styles.expandableSectionContent)}
           hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
-          id={contentId}
+          id={uniqueContentId}
+          aria-labelledby={uniqueToggleId}
+          role="region"
         >
           {children}
         </div>
@@ -259,3 +279,5 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     );
   }
 }
+
+export { ExpandableSection };

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -16,6 +16,10 @@ export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivEle
    * property should match the contentId property of the main expandable section component.
    */
   contentId?: string;
+  /** Id of the toggle. The value passed into this property should match the aria-labelledby
+   * property of the main expandable section component.
+   */
+  toggleId?: string;
   /** Direction the toggle arrow should point when the expandable section is expanded. */
   direction?: 'up' | 'down';
   /** @beta Flag to determine toggle styling when the expandable content is truncated. */
@@ -32,6 +36,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   isExpanded = false,
   onToggle,
   contentId,
+  toggleId,
   direction = 'down',
   hasTruncatedContent = false,
   ...props
@@ -52,6 +57,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
       aria-expanded={isExpanded}
       aria-controls={contentId}
       onClick={() => onToggle(!isExpanded)}
+      id={toggleId}
     >
       {!hasTruncatedContent && (
         <span

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

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { ExpandableSection, ExpandableSectionVariant } from '../ExpandableSection';
 import { ExpandableSectionToggle } from '../ExpandableSectionToggle';
 
-const props = {};
+const props = { contentId: 'content-id', toggleId: 'toggle-id' };
 
 test('ExpandableSection', () => {
   const { asFragment } = render(<ExpandableSection {...props}>test </ExpandableSection>);
@@ -14,7 +14,12 @@ test('ExpandableSection', () => {
 });
 
 test('Renders ExpandableSection expanded', () => {
-  const { asFragment } = render(<ExpandableSection isExpanded> test </ExpandableSection>);
+  const { asFragment } = render(
+    <ExpandableSection {...props} isExpanded>
+      {' '}
+      test{' '}
+    </ExpandableSection>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -29,17 +34,22 @@ test('ExpandableSection onToggle called', async () => {
 });
 
 test('Renders Uncontrolled ExpandableSection', () => {
-  const { asFragment } = render(<ExpandableSection toggleText="Show More"> test </ExpandableSection>);
+  const { asFragment } = render(
+    <ExpandableSection {...props} toggleText="Show More">
+      {' '}
+      test{' '}
+    </ExpandableSection>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('Detached ExpandableSection renders successfully', () => {
   const { asFragment } = render(
     <React.Fragment>
-      <ExpandableSection {...props} isExpanded isDetached contentId="test">
+      <ExpandableSection isExpanded isDetached {...props}>
         test
       </ExpandableSection>
-      <ExpandableSectionToggle isExpanded contentId="test" direction="up">
+      <ExpandableSectionToggle isExpanded direction="up" {...props}>
         Toggle text
       </ExpandableSectionToggle>
     </React.Fragment>
@@ -58,7 +68,7 @@ test('Disclosure ExpandableSection', () => {
 
 test('Renders ExpandableSection indented', () => {
   const { asFragment } = render(
-    <ExpandableSection isExpanded isIndented>
+    <ExpandableSection {...props} isExpanded isIndented>
       {' '}
       test{' '}
     </ExpandableSection>
@@ -67,27 +77,56 @@ test('Renders ExpandableSection indented', () => {
 });
 
 test('Does not render with pf-m-truncate class when variant is not passed', () => {
-  render(<ExpandableSection {...props}>test</ExpandableSection>);
+  render(<ExpandableSection>test</ExpandableSection>);
 
   expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
 });
 
 test('Does not render with pf-m-truncate class when variant is not truncate', () => {
+  render(<ExpandableSection variant={ExpandableSectionVariant.default}>test</ExpandableSection>);
+
+  expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
+});
+
+test('Renders with pf-m-truncate class when variant is truncate', () => {
+  render(<ExpandableSection variant={ExpandableSectionVariant.truncate}>test</ExpandableSection>);
+
+  expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate');
+});
+
+test('Renders with value passed to contentId', () => {
   render(
-    <ExpandableSection variant={ExpandableSectionVariant.default} {...props}>
-      test
+    <ExpandableSection data-testid="test-id" contentId="custom-id">
+      Test
     </ExpandableSection>
   );
 
-  expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
+  const wrapper = screen.getByTestId('test-id');
+  const content = wrapper.querySelector('#custom-id');
+  expect(content).toBeInTheDocument();
 });
 
-test('Renders with pf-m-truncate class when variant is truncate', () => {
+test('Renders with value passed to toggleId', () => {
   render(
-    <ExpandableSection variant={ExpandableSectionVariant.truncate} {...props}>
-      test
+    <ExpandableSection data-testid="test-id" toggleId="custom-id">
+      Test
     </ExpandableSection>
   );
 
-  expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate');
+  const wrapper = screen.getByTestId('test-id');
+  const toggle = wrapper.querySelector('#custom-id');
+  expect(toggle).toBeVisible();
+});
+
+test('Renders with ARIA attributes when contentId and toggleId are passed', () => {
+  render(
+    <ExpandableSection data-testid="test-id" {...props}>
+      Test
+    </ExpandableSection>
+  );
+
+  const wrapper = screen.getByTestId('test-id');
+
+  expect(wrapper).toContainHTML('aria-labelledby="toggle-id"');
+  expect(wrapper).toContainHTML('aria-controls="content-id"');
 });

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

@@ -6,8 +6,10 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
   >
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
-      id="test"
+      id="content-id"
+      role="region"
     >
       test
     </div>
@@ -16,9 +18,10 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
   >
     <button
-      aria-controls="test"
+      aria-controls="content-id"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -54,7 +57,9 @@ exports[`Disclosure ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section pf-m-display-lg pf-m-limit-width"
   >
     <button
+      aria-controls="content-id"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -79,9 +84,11 @@ exports[`Disclosure ExpandableSection 1`] = `
       />
     </button>
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id=""
+      id="content-id"
+      role="region"
     >
       test 
     </div>
@@ -95,7 +102,9 @@ exports[`ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section"
   >
     <button
+      aria-controls="content-id"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -120,9 +129,11 @@ exports[`ExpandableSection 1`] = `
       />
     </button>
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id=""
+      id="content-id"
+      role="region"
     >
       test 
     </div>
@@ -136,8 +147,10 @@ exports[`Renders ExpandableSection expanded 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded"
   >
     <button
+      aria-controls="content-id"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -162,8 +175,10 @@ exports[`Renders ExpandableSection expanded 1`] = `
       />
     </button>
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
-      id=""
+      id="content-id"
+      role="region"
     >
        test 
     </div>
@@ -177,8 +192,10 @@ exports[`Renders ExpandableSection indented 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded pf-m-indented"
   >
     <button
+      aria-controls="content-id"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -203,8 +220,10 @@ exports[`Renders ExpandableSection indented 1`] = `
       />
     </button>
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
-      id=""
+      id="content-id"
+      role="region"
     >
        test 
     </div>
@@ -218,7 +237,9 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section"
   >
     <button
+      aria-controls="content-id"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -245,9 +266,11 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       </span>
     </button>
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id=""
+      id="content-id"
+      role="region"
     >
        test 
     </div>

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -12,31 +12,39 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 ### Basic
 
 ```ts file="ExpandableSectionBasic.tsx"
+
 ```
 
 ### Uncontrolled
 
 ```ts file="ExpandableSectionUncontrolled.tsx"
+
 ```
 
 ### Uncontrolled with dynamic toggle text
 
 ```ts file="ExpandableSectionUncontrolledDynamicToggleText.tsx"
+
 ```
 
 ### Detached
 
+When passing the `isDetached` property into `<ExpandableSection>`, you must also manually pass in the same `toggleId` and `contentId` properties to both `<ExpandableSection>` and `<ExpandableSectionToggle>`. This will link the content to the toggle via ARIA attributes.
+
 ```ts file="ExpandableSectionDetached.tsx"
+
 ```
 
 ### Disclosure variation
 
 ```ts file="ExpandableSectionDisclosure.tsx"
+
 ```
 
 ### Indented
 
 ```ts file="ExpandableSectionIndented.tsx"
+
 ```
 
 ### With custom toggle content
@@ -44,6 +52,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.
 
 ```ts file="ExpandableSectionCustomToggle.tsx"
+
 ```
 
 ### Truncate expansion
@@ -51,4 +60,5 @@ By using the `toggleContent` prop, you can pass in content other than a simple s
 By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.
 
 ```ts file="ExpandableSectionTruncateExpansion.tsx" isBeta
+
 ```

package/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx

@@ -8,16 +8,23 @@ export const ExpandableSectionDetached: React.FunctionComponent = () => {
     setIsExpanded(isExpanded);
   };
 
-  const contentId = 'detached-toggle-content';
+  const contentId = 'detached-expandable-section-content';
+  const toggleId = 'detached-expandable-section-toggle';
   return (
     <Stack hasGutter>
       <StackItem>
-        <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
+        <ExpandableSection isExpanded={isExpanded} isDetached toggleId={toggleId} contentId={contentId}>
           This content is visible only when the component is expanded.
         </ExpandableSection>
       </StackItem>
       <StackItem>
-        <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId={contentId} direction="up">
+        <ExpandableSectionToggle
+          isExpanded={isExpanded}
+          onToggle={onToggle}
+          toggleId={toggleId}
+          contentId={contentId}
+          direction="up"
+        >
           {isExpanded ? 'Show less' : 'Show more'}
         </ExpandableSectionToggle>
       </StackItem>

package/src/components/FileUpload/FileUpload.tsx

@@ -91,7 +91,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   onReadFinished = () => {},
   onReadFailed = () => {},
   onClearClick,
-  onClick = event => event.preventDefault(),
+  onClick = (event) => event.preventDefault(),
   onTextChange,
   onDataChange,
   dropzoneProps = {},
@@ -105,7 +105,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
       if (type === fileReaderType.text || type === fileReaderType.dataURL) {
         onReadStarted(event, fileHandle);
         readFile(fileHandle, type as fileReaderType)
-          .then(data => {
+          .then((data) => {
             onReadFinished(event, fileHandle);
             onDataChange?.(event, data as string);
           })

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, DropEvent } from '@patternfly/react-core';
+import {
+  FileUpload,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  DropEvent
+} from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

package/src/components/Form/FormContext.tsx

@@ -125,5 +125,6 @@ export const FormContextProvider: React.FC<FormContextProviderProps> = ({ initia
     </FormContext.Provider>
   );
 };
+FormContextProvider.displayName = 'FormContextProvider';
 
 export const useFormContext = () => React.useContext(FormContext);