chore: Rebase Post v5 and merge into main (patternfly#9419)

* fix(Toolbar): resolved typeerror on full page demo (patternfly#9355) * chore(TreeView): converted examples to TS (patternfly#9286) * fix(ExpandableSection): added ARIA attributes (patternfly#9303) * fix(ExpandableSection): added ARIA attributes * Updated failing snapshots due to mismatching generated ID * chore(Tooltip): updated unit tests (patternfly#9295) * chore(Tooltip): updated unit tests * Updated mock and tests * Updated based on Austin feedback * Updated integration tests * Removed unused imports * Updated remaining tests using Popper mock * Removed extraenous snapshot test * Removed test * Split out onTooltipHidden test * chore(Card): added tests for new clickable/selectable (patternfly#9262) * chore(Card): added tests for new clickable/selectable * Added tests for clickable cards * Updated card with actions test * fix(Slider): reverted taborder (patternfly#9293) * fix(chore): Fix deprecated wizard integration tests (patternfly#9312) * fix(chore): Fix deprecated wizard integration tests * updated non deprecated test as well --------- Co-authored-by: Titani <tlabaj@redaht.com> * Rebase postv5 (patternfly#9393) * chore(deps): bump docs framework (patternfly#9370) * chore(docs): Updated screenshots (patternfly#9337) * chore(docs): Updated screenshots * updated screenshots after logo update --------- Co-authored-by: Titani <tlabaj@redaht.com> * chore(release): releasing packages [ci skip] - @patternfly/react-docs@6.0.0-prerelease.26 * chore(deps): bump to latest chore version (patternfly#9389) * chore(deps): bump to latest chore version * bump to 16 * chore(release): releasing packages [ci skip] - @patternfly/react-charts@7.0.0-prerelease.12 - @patternfly/react-code-editor@5.0.0-prerelease.24 - @patternfly/react-core@5.0.0-prerelease.24 - @patternfly/react-docs@6.0.0-prerelease.27 - @patternfly/react-icons@5.0.0-prerelease.9 - demo-app-ts@5.0.0-prerelease.22 - @patternfly/react-styles@5.0.0-prerelease.7 - @patternfly/react-table@5.0.0-prerelease.24 - @patternfly/react-tokens@5.0.0-prerelease.9 * fix(fileupload): use default readonly text input instead of plain (patternfly#9387) * fix(fileupload): use default readonly text input instead of plain * chore(build): snaps * fix(CodeEditor): prevent clicks in textarea from opening fileupload (patternfly#9385) * fix(toolbar): added chip container class to toolbar content (patternfly#9379) * feat(Menu): added support for tooltips to menu (patternfly#9382) * fix(whitespace): Update readme to trigger release * chore(release): releasing packages [ci skip] - @patternfly/react-code-editor@5.0.0-prerelease.25 - @patternfly/react-core@5.0.0-prerelease.25 - @patternfly/react-docs@6.0.0-prerelease.28 - demo-app-ts@5.0.0-prerelease.23 - @patternfly/react-table@5.0.0-prerelease.25 * fix(Toolbar): resolved typeerror on full page demo (patternfly#9355) * chore(TreeView): converted examples to TS (patternfly#9286) * fix(ExpandableSection): added ARIA attributes (patternfly#9303) * fix(ExpandableSection): added ARIA attributes * Updated failing snapshots due to mismatching generated ID * chore(Tooltip): updated unit tests (patternfly#9295) * chore(Tooltip): updated unit tests * Updated mock and tests * Updated based on Austin feedback * Updated integration tests * Removed unused imports * Updated remaining tests using Popper mock * Removed extraenous snapshot test * Removed test * Split out onTooltipHidden test * chore(Card): added tests for new clickable/selectable (patternfly#9262) * chore(Card): added tests for new clickable/selectable * Added tests for clickable cards * Updated card with actions test * fix(Slider): reverted taborder (patternfly#9293) * fix(chore): Fix deprecated wizard integration tests (patternfly#9312) * fix(chore): Fix deprecated wizard integration tests * updated non deprecated test as well --------- Co-authored-by: Titani <tlabaj@redaht.com> --------- Co-authored-by: Titani <tlabaj@redaht.com> Co-authored-by: patternfly-build <patternfly-build@redhat.com> Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Dallas <dallas.nicol@gmail.com> Co-authored-by: Dana Gutride <dgutride@gmail.com> Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> * feat(MenuItem): allow target and rel on links (patternfly#9294) * feat(MenuItem): allow target and rel on links * update desc * move desc to right prop * chore(deps): update dependency lint-staged to v13.2.3 (patternfly#9335) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(JumpLinks) href does not work properly (patternfly#9307) * chore(deps): update dependency eslint to v8.42.0 (patternfly#9236) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(SelectToggle): corrected removeEventListener on unmount for v5 (patternfly#9380) * fix(Page) allow change of main tag (patternfly#9296) * fix(Page) allow change of main tag * rename prop and add it to render method * change prop name and description * update description * Reverted prop name --------- Co-authored-by: Eric Olkowski <thatblindgeye@gmail.com> * fix(AlertActionLink) support ReactNode as child (patternfly#9278) * fix(AlertActionLink) support ReactNode as child * add test * update prop type and description * update test * fix: changed the button lable from Upload to Browse (patternfly#9275) * fix: changed the button lable from Upload to Browse * change button label from hardcoded text to props element * passes label as Browse * Update MultipleFileUploadMain.tsx * made changes as per your requirements * follow-up * follow-up * follow-up * fix snaphots --------- Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> Co-authored-by: Titani <tlabaj@redaht.com> Co-authored-by: patternfly-build <patternfly-build@redhat.com> Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Dallas <dallas.nicol@gmail.com> Co-authored-by: Dana Gutride <dgutride@gmail.com> Co-authored-by: kmcfaul <45077788+kmcfaul@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Dominik Petřík <77832970+Dominik-Petrik@users.noreply.github.com> Co-authored-by: Eric Olkowski <thatblindgeye@gmail.com> Co-authored-by: Tarun Samanta <tarunsamanta77@gmail.com>
kmcfaul · Jul 31, 2023 · 8f7da4f · 8f7da4f
1 parent 00b8d60
commit 8f7da4f
Show file tree

Hide file tree

Showing 58 changed files with 2,497 additions and 1,603 deletions.
diff --git a/packages/react-core/src/components/Alert/AlertActionLink.tsx b/packages/react-core/src/components/Alert/AlertActionLink.tsx
@@ -6,8 +6,8 @@ import { Button, ButtonVariant, ButtonProps } from '../Button';
  */
 
 export interface AlertActionLinkProps extends ButtonProps {
-  /** Content rendered inside the alert action link.  */
-  children?: string;
+  /** Content rendered inside the alert action link. Interactive content such as anchor elements should not be passed in. */
+  children?: React.ReactNode;
   /** Additional classes added to the alert action link.  */
   className?: string;
 }

diff --git a/packages/react-core/src/components/Alert/__tests__/AlertActionLink.test.tsx b/packages/react-core/src/components/Alert/__tests__/AlertActionLink.test.tsx
@@ -20,6 +20,18 @@ test('Renders children', () => {
   expect(screen.getByRole('button')).toBeVisible();
 });
 
+test('Renders ReactNode as children', () => {
+  render(
+    <AlertActionLink>
+      <div>
+        <span>Learn More</span>
+      </div>
+    </AlertActionLink>
+  );
+
+  expect(screen.getByText('Learn More')).toBeVisible();
+});
+
 test('Renders with custom class names provided via prop', () => {
   render(<AlertActionLink className="custom-class">Test</AlertActionLink>);
 

diff --git a/packages/react-core/src/components/Card/__tests__/CardSelectableActions.test.tsx b/packages/react-core/src/components/Card/__tests__/CardSelectableActions.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CardSelectableActions } from '../CardSelectableActions';
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<CardSelectableActions>Test</CardSelectableActions>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without children', () => {
+  render(<CardSelectableActions data-testid="card-selectable-actions" />);
+
+  expect(screen.getByTestId('card-selectable-actions')).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<CardSelectableActions>Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-v5-c-card__selectable-actions', () => {
+  render(<CardSelectableActions>Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-v5-c-card__selectable-actions');
+});
+
+test('Renders with custom class names provided via prop', () => {
+  render(<CardSelectableActions className="test-class">Test</CardSelectableActions>);
+
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
diff --git a/...eact-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap b/...eact-core/src/components/Card/__tests__/__snapshots__/CardSelectableActions.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-card__selectable-actions"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
@@ -22,7 +22,11 @@ test('renders dropdown', () => {
 });
 
 test('passes children', () => {
-  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(
+    <Dropdown isOpen toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
 
   expect(screen.getByText('Dropdown children')).toBeVisible();
 });
@@ -112,7 +116,7 @@ test('passes zIndex to popper', () => {
 test('does not pass isOpen to popper by default', () => {
   render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
-  expect(screen.getByText('isOpen: undefined')).toBeVisible();
+  expect(screen.getByText('isVisible: undefined')).toBeVisible();
 });
 
 test('passes isOpen to popper', () => {
@@ -122,7 +126,7 @@ test('passes isOpen to popper', () => {
     </Dropdown>
   );
 
-  expect(screen.getByText('isOpen: true')).toBeVisible();
+  expect(screen.getByText('isVisible: true')).toBeVisible();
 });
 
 /* no default tests for callback props
@@ -134,7 +138,7 @@ test('passes onSelect callback', async () => {
 
   const onSelect = jest.fn();
   render(
-    <Dropdown onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
+    <Dropdown isOpen onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );

diff --git a/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/react-core/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -2,40 +2,62 @@
 
 exports[`match snapshot 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    data-testid="mock-wrapper"
+  >
     <div
-      class="customClass"
-      data-ouia-component-id="dropdown"
-      data-ouia-component-type="PF5/Dropdown"
-      data-ouia-safe="true"
-      data-testid="menu-mock"
+      data-testid="popper"
     >
-      <div>
+      <div
+        class="customClass"
+        data-ouia-component-id="dropdown"
+        data-ouia-component-type="PF5/Dropdown"
+        data-ouia-safe="true"
+        data-testid="menu-mock"
+      >
         <div>
-          Dropdown children
+          <div>
+            Dropdown children
+          </div>
         </div>
       </div>
+      <div>
+        Mock item
+      </div>
+      <p>
+        isPlain: true
+      </p>
+      <p>
+        isScrollable: true
+      </p>
+      <p>
+        minWidth: undefined
+      </p>
     </div>
-    <div>
-      Mock item
-    </div>
     <p>
-      isPlain: true
+      zIndex: 9999
+    </p>
+    <p>
+      isVisible: true
+    </p>
+    <p>
+      enableFlip: undefined
     </p>
     <p>
-      isScrollable: true
+      placement: undefined
+    </p>
+    <p>
+      appendTo: undefined
+    </p>
+    <p>
+      distance: undefined
+    </p>
+    <p>
+      flipBehavior: undefined
     </p>
     <p>
       minWidth: undefined
     </p>
-  </div>
-  <p>
-    zIndex: 9999
-  </p>
-  <p>
-    isOpen: true
-  </p>
-  <div>
     <button>
       Dropdown
     </button>

diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/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. */
@@ -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>

diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx b/packages/react-core/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