@patternfly/react-core 6.0.0-alpha.4 → 6.0.0-alpha.41

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Icon } from '../Icon';
+import { kebabCase } from 'case-anything';
+import { Icon, IconSize } from '../Icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import styles from '@patternfly/react-styles/css/components/Icon/icon';
 
@@ -41,16 +42,60 @@ test('sets additional custom class successfully', () => {
   expect(iconContainer).toHaveClass('test');
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
+Object.values([
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  '2xl',
+  '3xl',
+  'headingSm',
+  'headingMd',
+  'headingLg',
+  'headingXl',
+  'heading_2xl',
+  'heading_3xl',
+  'bodySm',
+  'bodyDefault',
+  'bodyLg'
+]).forEach((size) => {
   test(`sets icon size modifier successfully - ${size}`, () => {
     render(
-      <Icon iconSize={size as 'sm' | 'md' | 'lg' | 'xl'} title={`content-${size}-icon`}>
+      <Icon iconSize={size as IconSize} title={`content-${size}-icon`}>
         <CheckIcon />
       </Icon>
     );
     const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector(`.${styles.iconContent}`);
 
-    expect(iconContainer).toHaveClass(`pf-m-${size}`);
+    const formattedSize = kebabCase(size).replace(/(\d)(-)/, '$1');
+
+    expect(iconContainer).toHaveClass(`pf-m-${formattedSize}`);
+  });
+
+  test(`sets progress icon size modifier successfully - ${size}`, () => {
+    render(
+      <Icon isInProgress progressIconSize={size as IconSize} title={`progress-content-${size}-icon`}>
+        <CheckIcon />
+      </Icon>
+    );
+    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`);
+
+    const formattedSize = kebabCase(size).replace(/(\d)(-)/, '$1');
+
+    expect(iconContainer).toHaveClass(`pf-m-${formattedSize}`);
+  });
+
+  test(`sets size modifier successfully - ${size}`, () => {
+    render(
+      <Icon size={size as IconSize} title={`${size}-icon`}>
+        <CheckIcon />
+      </Icon>
+    );
+    const iconContainer = screen.getByTitle(`${size}-icon`);
+
+    const formattedSize = kebabCase(size).replace(/(\d)(-)/, '$1');
+
+    expect(iconContainer).toHaveClass(`pf-m-${formattedSize}`);
   });
 });
 
@@ -64,19 +109,6 @@ test('check icon without iconSize', () => {
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
-  test(`sets progress icon size modifier successfully - ${size}`, () => {
-    render(
-      <Icon isInProgress progressIconSize={size as 'sm' | 'md' | 'lg' | 'xl'} title={`progress-content-${size}-icon`}>
-        <CheckIcon />
-      </Icon>
-    );
-    const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`);
-
-    expect(iconContainer).toHaveClass(`pf-m-${size}`);
-  });
-});
-
 test('check icon without progress icon size', () => {
   render(
     <Icon title="no-progress-icon-size">
@@ -87,19 +119,6 @@ test('check icon without progress icon size', () => {
   expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
-  test(`sets size modifier successfully - ${size}`, () => {
-    render(
-      <Icon size={size as 'sm' | 'md' | 'lg' | 'xl'} title={`${size}-icon`}>
-        <CheckIcon />
-      </Icon>
-    );
-    const iconContainer = screen.getByTitle(`${size}-icon`);
-
-    expect(iconContainer).toHaveClass(`pf-m-${size}`);
-  });
-});
-
 test('check icon without size', () => {
   render(
     <Icon title="no-size">
@@ -196,18 +215,18 @@ test('renders progress icon successfully', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Renders with class pf-v5-m-mirror-inline-rtl on icon passed as children when shouldMirrorRTL is true', () => {
+test('Renders with class pf-v6-m-mirror-inline-rtl on icon passed as children when shouldMirrorRTL is true', () => {
   render(<Icon shouldMirrorRTL>Icon content</Icon>);
 
-  expect(screen.getByText('Icon content')).toHaveClass('pf-v5-m-mirror-inline-rtl');
+  expect(screen.getByText('Icon content')).toHaveClass('pf-v6-m-mirror-inline-rtl');
 });
 
-test('Does not render with class pf-v5-m-mirror-inline-rtl on progressIcon when shouldMirrorRTL is true', () => {
+test('Does not render with class pf-v6-m-mirror-inline-rtl on progressIcon when shouldMirrorRTL is true', () => {
   render(
     <Icon shouldMirrorRTL isInProgress progressIcon="Progress icon">
       Icon content
     </Icon>
   );
 
-  expect(screen.getByText('Progress icon')).not.toHaveClass('pf-v5-m-mirror-inline-rtl');
+  expect(screen.getByText('Progress icon')).not.toHaveClass('pf-v6-m-mirror-inline-rtl');
 });

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

@@ -3,14 +3,14 @@
 exports[`renders basic icon successfully 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-icon"
+    class="pf-v6-c-icon"
   >
     <span
-      class="pf-v5-c-icon__content"
+      class="pf-v6-c-icon__content"
     >
       <svg
         aria-hidden="true"
-        class="pf-v5-svg"
+        class="pf-v6-svg"
         fill="currentColor"
         height="1em"
         role="img"
@@ -29,14 +29,14 @@ exports[`renders basic icon successfully 1`] = `
 exports[`renders progress icon successfully 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-icon pf-m-in-progress"
+    class="pf-v6-c-icon pf-m-in-progress"
   >
     <span
-      class="pf-v5-c-icon__content"
+      class="pf-v6-c-icon__content"
     >
       <svg
         aria-hidden="true"
-        class="pf-v5-svg"
+        class="pf-v6-svg"
         fill="currentColor"
         height="1em"
         role="img"
@@ -49,11 +49,11 @@ exports[`renders progress icon successfully 1`] = `
       </svg>
     </span>
     <span
-      class="pf-v5-c-icon__progress"
+      class="pf-v6-c-icon__progress"
     >
       <svg
         aria-hidden="true"
-        class="pf-v5-svg"
+        class="pf-v6-svg"
         fill="currentColor"
         height="1em"
         role="img"
@@ -72,10 +72,10 @@ exports[`renders progress icon successfully 1`] = `
 exports[`renders without children 1`] = `
 <DocumentFragment>
   <span
-    class="pf-v5-c-icon"
+    class="pf-v6-c-icon"
   >
     <span
-      class="pf-v5-c-icon__content"
+      class="pf-v6-c-icon__content"
     />
   </span>
 </DocumentFragment>

package/src/components/Icon/examples/BodyIconSizes.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const BodyIconSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Icon size="bodySm">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="bodyDefault">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="bodyLg">
+      <PlusCircleIcon />
+    </Icon>
+  </React.Fragment>
+);

package/src/components/Icon/examples/HeadingIconSizes.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const HeadingIconSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Icon size="headingSm">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="headingMd">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="headingLg">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="headingXl">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="heading_2xl">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="heading_3xl">
+      <PlusCircleIcon />
+    </Icon>
+  </React.Fragment>
+);

package/src/components/Icon/examples/Icon.md

@@ -23,9 +23,25 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 ```ts file="IconBasic.tsx"
 ```
 
-### Sizes
+### Standalone icon sizes
 
-```ts file="IconSizes.tsx"
+These are the standard options for sizing icons.
+
+```ts file="StandaloneIconSizes.tsx"
+```
+
+### Body sizes
+
+These size options are meant to make icons match the size of body text.
+
+```ts file="BodyIconSizes.tsx"
+```
+
+### Heading sizes
+
+These size options are meant to make icons match the size of heading text.
+
+```ts file="HeadingIconSizes.tsx"
 ```
 
 ### Status colors

package/src/components/Icon/examples/IconContentSizes.tsx

@@ -4,16 +4,16 @@ import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-i
 
 export const IconContentSizes: React.FunctionComponent = () => (
   <React.Fragment>
-    <Icon size="xl" iconSize="sm">
+    <Icon size="3xl" iconSize="lg">
       <PlusCircleIcon />
     </Icon>
-    <Icon size="xl" iconSize="md">
+    <Icon size="3xl" iconSize="xl">
       <PlusCircleIcon />
     </Icon>
-    <Icon size="xl" iconSize="lg">
+    <Icon size="3xl" iconSize="2xl">
       <PlusCircleIcon />
     </Icon>
-    <Icon size="xl">
+    <Icon size="3xl">
       <PlusCircleIcon />
     </Icon>
   </React.Fragment>

package/src/components/Icon/examples/{IconSizes.tsx → StandaloneIconSizes.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon } from '@patternfly/react-core';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
-export const IconSizes: React.FunctionComponent = () => (
+export const StandaloneIconSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="sm">
       <PlusCircleIcon />
@@ -16,5 +16,11 @@ export const IconSizes: React.FunctionComponent = () => (
     <Icon size="xl">
       <PlusCircleIcon />
     </Icon>
+    <Icon size="2xl">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="3xl">
+      <PlusCircleIcon />
+    </Icon>
   </React.Fragment>
 );

package/src/components/JumpLinks/JumpLinks.tsx

@@ -21,7 +21,9 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   alwaysShowLabel?: boolean;
   /** Adds an accessible label to the internal nav element. Defaults to the value of the label prop. */
   'aria-label'?: string;
-  /** Selector for the scrollable element to spy on. Not passing a selector disables spying. */
+  /** Reference to the scrollable element to spy on. Takes precedence over scrollableSelector. Not passing a scrollableRef or scrollableSelector disables spying. */
+  scrollableRef?: HTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement>;
+  /** Selector for the scrollable element to spy on. Not passing a scrollableSelector or scrollableRef disables spying. */
   scrollableSelector?: string;
   /** The index of the child Jump link to make active. */
   activeIndex?: number;
@@ -81,6 +83,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   children,
   label,
   'aria-label': ariaLabel = typeof label === 'string' ? label : null,
+  scrollableRef,
   scrollableSelector,
   activeIndex: activeIndexProp = 0,
   offset = 0,
@@ -91,18 +94,29 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   className,
   ...props
 }: JumpLinksProps) => {
-  const hasScrollSpy = Boolean(scrollableSelector);
+  const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
   const [scrollItems, setScrollItems] = React.useState(hasScrollSpy ? getScrollItems(children, []) : []);
   const [activeIndex, setActiveIndex] = React.useState(activeIndexProp);
   const [isExpanded, setIsExpanded] = React.useState(isExpandedProp);
   // Boolean to disable scroll listener from overriding active state of clicked jumplink
   const isLinkClicked = React.useRef(false);
-  // Allow expanding to be controlled for a niche use case
-  React.useEffect(() => setIsExpanded(isExpandedProp), [isExpandedProp]);
   const navRef = React.useRef<HTMLElement>();
 
   let scrollableElement: HTMLElement;
 
+  const getScrollableElement = () => {
+    if (scrollableRef) {
+      if (scrollableRef instanceof HTMLElement) {
+        return scrollableRef;
+      } else if (typeof scrollableRef === 'function') {
+        return scrollableRef();
+      }
+      return (scrollableRef as React.RefObject<HTMLElement>).current;
+    } else if (scrollableSelector) {
+      return document.querySelector(scrollableSelector) as HTMLElement;
+    }
+  };
+
   const scrollSpy = React.useCallback(() => {
     if (!canUseDOM || !hasScrollSpy || !(scrollableElement instanceof HTMLElement)) {
       return;
@@ -139,14 +153,14 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   }, [scrollItems, hasScrollSpy, scrollableElement, offset]);
 
   React.useEffect(() => {
-    scrollableElement = document.querySelector(scrollableSelector) as HTMLElement;
+    scrollableElement = getScrollableElement();
     if (!(scrollableElement instanceof HTMLElement)) {
       return;
     }
     scrollableElement.addEventListener('scroll', scrollSpy);
 
     return () => scrollableElement.removeEventListener('scroll', scrollSpy);
-  }, [scrollableSelector, scrollSpy]);
+  }, [scrollableElement, scrollSpy, getScrollableElement]);
 
   React.useEffect(() => {
     scrollSpy();
@@ -162,7 +176,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
             const itemIndex = jumpLinkIndex++;
             const scrollItem = scrollItems[itemIndex];
             return React.cloneElement(child as React.ReactElement<JumpLinksItemProps>, {
-              onClick(ev: React.MouseEvent<HTMLAnchorElement>) {
+              onClick(ev: React.MouseEvent) {
                 isLinkClicked.current = true;
                 // Items might have rendered after this component. Do a quick refresh.
                 let newScrollItems;
@@ -174,7 +188,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
 
                 if (newScrollItem) {
                   // we have to support scrolling to an offset due to sticky sidebar
-                  const scrollableElement = document.querySelector(scrollableSelector) as HTMLElement;
+                  const scrollableElement = getScrollableElement() as HTMLElement;
                   if (scrollableElement instanceof HTMLElement) {
                     if (isResponsive(navRef.current)) {
                       // Remove class immediately so we can get collapsed height
@@ -193,7 +207,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                     scrollableElement.scrollTo(0, newScrollItem.offsetTop - offset);
                   }
                   newScrollItem.focus();
-                  window.history.pushState('', '', ev.currentTarget.href);
+                  window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
                   ev.preventDefault();
                   setActiveIndex(itemIndex);
                 }

package/src/components/JumpLinks/JumpLinksItem.tsx

@@ -2,18 +2,19 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/JumpLinks/jump-links';
 import { JumpLinksList } from './JumpLinksList';
+import { Button, ButtonVariant } from '../Button';
 
 export interface JumpLinksItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick'> {
   /** Whether this item is active. Parent JumpLinks component sets this when passed a `scrollableSelector`. */
   isActive?: boolean;
   /** Href for this link */
-  href?: string;
+  href: string;
   /** Selector or HTMLElement to spy on */
   node?: string | HTMLElement;
   /** Text to be rendered inside span */
   children?: React.ReactNode;
   /** Click handler for anchor tag. Parent JumpLinks components tap into this. */
-  onClick?: (ev: React.MouseEvent<HTMLAnchorElement>) => void;
+  onClick?: (ev: React.MouseEvent) => void;
   /** Class to add to li */
   className?: string;
 }
@@ -38,9 +39,11 @@ export const JumpLinksItem: React.FunctionComponent<JumpLinksItemProps> = ({
       {...(isActive && { 'aria-current': 'location' })}
       {...props}
     >
-      <a className={styles.jumpLinksLink} href={href} onClick={onClick}>
-        <span className={styles.jumpLinksLinkText}>{children}</span>
-      </a>
+      <span className={styles.jumpLinksLink}>
+        <Button variant={ButtonVariant.link} component="a" href={href} onClick={onClick}>
+          <span className={styles.jumpLinksLinkText}>{children}</span>
+        </Button>
+      </span>
       {sublists}
     </li>
   );

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

@@ -7,9 +7,11 @@ import { JumpLinksList } from '../JumpLinksList';
 test('simple jumplinks', () => {
   const { asFragment } = render(
     <JumpLinks>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -18,9 +20,11 @@ test('simple jumplinks', () => {
 test('jumplinks centered', () => {
   const { asFragment } = render(
     <JumpLinks isCentered>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -29,9 +33,11 @@ test('jumplinks centered', () => {
 test('jumplinks with label', () => {
   const { asFragment } = render(
     <JumpLinks isCentered label="Jump to section">
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -40,9 +46,11 @@ test('jumplinks with label', () => {
 test('vertical with label', () => {
   const { asFragment } = render(
     <JumpLinks isVertical alwaysShowLabel label="Jump to section">
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -51,17 +59,19 @@ test('vertical with label', () => {
 test('expandable vertical with subsection', () => {
   const { asFragment } = render(
     <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">
         Section with active subsection
         <JumpLinksList>
-          <JumpLinksItem isActive>Active subsection</JumpLinksItem>
-          <JumpLinksItem>Inactive subsection</JumpLinksItem>
-          <JumpLinksItem>Inactive subsection</JumpLinksItem>
+          <JumpLinksItem href="#" isActive>
+            Active subsection
+          </JumpLinksItem>
+          <JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
+          <JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
         </JumpLinksList>
       </JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();