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

* fix(Toolbar): resolved typeerror on full page demo (#9355) * chore(TreeView): converted examples to TS (#9286) * fix(ExpandableSection): added ARIA attributes (#9303) * fix(ExpandableSection): added ARIA attributes * Updated failing snapshots due to mismatching generated ID * chore(Tooltip): updated unit tests (#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 (#9262) * chore(Card): added tests for new clickable/selectable * Added tests for clickable cards * Updated card with actions test * fix(Slider): reverted taborder (#9293) * fix(chore): Fix deprecated wizard integration tests (#9312) * fix(chore): Fix deprecated wizard integration tests * updated non deprecated test as well --------- Co-authored-by: Titani <tlabaj@redaht.com> * Rebase postv5 (#9393) * chore(deps): bump docs framework (#9370) * chore(docs): Updated screenshots (#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 (#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 (#9387) * fix(fileupload): use default readonly text input instead of plain * chore(build): snaps * fix(CodeEditor): prevent clicks in textarea from opening fileupload (#9385) * fix(toolbar): added chip container class to toolbar content (#9379) * feat(Menu): added support for tooltips to menu (#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 (#9355) * chore(TreeView): converted examples to TS (#9286) * fix(ExpandableSection): added ARIA attributes (#9303) * fix(ExpandableSection): added ARIA attributes * Updated failing snapshots due to mismatching generated ID * chore(Tooltip): updated unit tests (#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 (#9262) * chore(Card): added tests for new clickable/selectable * Added tests for clickable cards * Updated card with actions test * fix(Slider): reverted taborder (#9293) * fix(chore): Fix deprecated wizard integration tests (#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 (#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 (#9335) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(JumpLinks) href does not work properly (#9307) * chore(deps): update dependency eslint to v8.42.0 (#9236) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(SelectToggle): corrected removeEventListener on unmount for v5 (#9380) * fix(Page) allow change of main tag (#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 (#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 (#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>
patternfly · 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