@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.30

package/src/components/HelperText/HelperTextItem.tsx

@@ -6,6 +6,13 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
+export enum HelperTextItemVariant {
+  default = 'default',
+  warning = 'warning',
+  error = 'error',
+  success = 'success'
+}
+
 export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HTMLLIElement> {
   /** Content rendered inside the helper text item. */
   children?: React.ReactNode;
@@ -13,34 +20,28 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
   className?: string;
   /** Sets the component type of the helper text item. */
   component?: 'div' | 'li';
-  /** Variant styling of the helper text item. */
+  /** Variant styling of the helper text item. Will also render a default icon, which can be overridden
+   * with the icon prop.
+   */
   variant?: 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
-  /** Custom icon prefixing the helper text. This property will override the default icon paired with each helper text variant. */
+  /** Custom icon prefixing the helper text. This property will override the default icon when the variant property is passed in. */
   icon?: React.ReactNode;
-  /** Flag indicating the helper text item is dynamic. This prop should be used when the
-   * text content of the helper text item will never change, but the icon and styling will
-   * be dynamically updated via the `variant` prop.
-   */
-  isDynamic?: boolean;
-  /** Flag indicating the helper text should have an icon. Dynamic helper texts include icons by default while static helper texts do not. */
-  hasIcon?: boolean;
   /** ID for the helper text item. The value of this prop can be passed into a form component's
    * aria-describedby prop when you intend for only specific helper text items to be announced to
    * assistive technologies.
    */
   id?: string;
-  /** Text that is only accessible to screen readers in order to announce the status of a helper text item.
-   * This prop can only be used when the isDynamic prop is also passed in.
+  /** Text that is only accessible to screen readers in order to announce the variant of a helper text item.
+   * This prop can only be used when the variant prop has a value other than "default".
    */
   screenReaderText?: string;
 }
 
-const variantStyle = {
-  default: '',
-  indeterminate: styles.modifiers.indeterminate,
-  warning: styles.modifiers.warning,
-  success: styles.modifiers.success,
-  error: styles.modifiers.error
+const defaultVariantIcons = {
+  indeterminate: <MinusIcon />,
+  warning: <ExclamationTriangleIcon />,
+  success: <CheckCircleIcon />,
+  error: <ExclamationCircleIcon />
 };
 
 export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
@@ -49,36 +50,28 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
   component = 'div',
   variant = 'default',
   icon,
-  isDynamic = false,
-  hasIcon = isDynamic,
   id,
   screenReaderText = `${variant} status`,
   ...props
 }: HelperTextItemProps) => {
   const Component = component as any;
+  const isNotDefaultVariant = variant !== 'default';
+  const defaultIcon = isNotDefaultVariant && defaultVariantIcons[variant];
   return (
     <Component
-      className={css(styles.helperTextItem, variantStyle[variant], isDynamic && styles.modifiers.dynamic, className)}
+      className={css(styles.helperTextItem, isNotDefaultVariant && styles.modifiers[variant], className)}
       id={id}
       {...props}
     >
-      {icon && (
-        <span className={css(styles.helperTextItemIcon)} aria-hidden>
-          {icon}
-        </span>
-      )}
-      {hasIcon && !icon && (
+      {(defaultIcon || icon) && (
         <span className={css(styles.helperTextItemIcon)} aria-hidden>
-          {(variant === 'default' || variant === 'indeterminate') && <MinusIcon />}
-          {variant === 'warning' && <ExclamationTriangleIcon />}
-          {variant === 'success' && <CheckCircleIcon />}
-          {variant === 'error' && <ExclamationCircleIcon />}
+          {icon || defaultIcon}
         </span>
       )}
 
       <span className={css(styles.helperTextItemText)}>
         {children}
-        {isDynamic && <span className="pf-v5-screen-reader">: {screenReaderText};</span>}
+        {isNotDefaultVariant && <span className="pf-v5-screen-reader">: {screenReaderText};</span>}
       </span>
     </Component>
   );

package/src/components/HelperText/__tests__/HelperTextItem.test.tsx

@@ -30,6 +30,12 @@ test('Renders custom className', () => {
   expect(screen.getByText('help test text 1').parentElement).toHaveClass('custom');
 });
 
+test('Does not render screen reader text by default', () => {
+  render(<HelperTextItem>help test text 1</HelperTextItem>);
+
+  expect(screen.queryByText('status', { exact: false })).not.toBeInTheDocument();
+});
+
 Object.values(['indeterminate', 'warning', 'success', 'error']).forEach((variant) => {
   test(`Renders with class ${styles.modifiers[variant]} when variant = ${variant}`, () => {
     render(
@@ -39,6 +45,26 @@ Object.values(['indeterminate', 'warning', 'success', 'error']).forEach((variant
     );
     expect(screen.getByText('text').parentElement).toHaveClass(styles.modifiers[variant]);
   });
+
+  test(`Renders default screenreader text when variant = ${variant}`, () => {
+    render(
+      <HelperTextItem variant={variant as 'default' | 'indeterminate' | 'warning' | 'success' | 'error'}>
+        text
+      </HelperTextItem>
+    );
+    expect(screen.getByText(`: ${variant} status;`)).toBeInTheDocument();
+  });
+});
+
+test('Renders custom screen reader text', () => {
+  render(
+    <HelperTextItem variant="error" screenReaderText="danger">
+      help test text 1
+    </HelperTextItem>
+  );
+
+  expect(screen.queryByText(': error status;')).not.toBeInTheDocument();
+  expect(screen.getByText(': danger;')).toBeInTheDocument();
 });
 
 test('Renders id when id is passed', () => {
@@ -56,38 +82,26 @@ test('Renders with element passed to component prop', () => {
   expect(screen.getByText('help test text 1').parentElement?.tagName).toBe('LI');
 });
 
-test('Renders custom icon', () => {
-  render(<HelperTextItem icon={<div>test</div>}>help test text</HelperTextItem>);
-  expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
-});
-
-test('Renders default icon when hasIcon = true and icon is not passed', () => {
-  render(<HelperTextItem hasIcon>help test text</HelperTextItem>);
-  expect(screen.getByText('help test text').parentElement?.querySelector('span')).toHaveClass(
-    styles.helperTextItemIcon
-  );
+test('Does not render an icon by default', () => {
+  render(<HelperTextItem>help test text</HelperTextItem>);
+  expect(screen.queryByText('help test text')?.previousSibling).not.toBeInTheDocument();
 });
 
-test('Renders custom icon when icon is passed and hasIcon = true', () => {
-  render(
-    <HelperTextItem hasIcon icon={<div>test</div>}>
-      help test text
-    </HelperTextItem>
-  );
-  expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
+test('Renders a default icon when variant is passed and icon is not passed', () => {
+  render(<HelperTextItem variant="success">help test text</HelperTextItem>);
+  expect(screen.getByText('help test text').previousSibling).toHaveClass(styles.helperTextItemIcon);
 });
 
-test('Renders dynamic helper text', () => {
-  render(<HelperTextItem isDynamic>help test text</HelperTextItem>);
-  expect(screen.getByText('help test text').parentElement).toHaveClass(styles.modifiers.dynamic);
-  expect(screen.getByText('help test text').querySelector('span')).toHaveClass('pf-v5-screen-reader');
+test('Renders custom icon when icon prop is passed', () => {
+  render(<HelperTextItem icon={<div>icon content</div>}>help test text</HelperTextItem>);
+  expect(screen.getByText('icon content').parentElement).toHaveClass(styles.helperTextItemIcon);
 });
 
-test('Renders custom screenreader text when isDynamic = true and screenReaderText is passed', () => {
+test('Renders custom icon instead of variant icon when icon and variant are passed', () => {
   render(
-    <HelperTextItem isDynamic screenReaderText="sr test">
+    <HelperTextItem icon={<div>icon content</div>} variant="success">
       help test text
     </HelperTextItem>
   );
-  expect(screen.getByText('help test text').querySelector('span')).toHaveTextContent('sr test');
+  expect(screen.getByText('icon content').parentElement).toHaveClass(styles.helperTextItemIcon);
 });

package/src/components/HelperText/examples/HelperText.md

@@ -13,32 +13,22 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-
 
 ## Examples
 
-### Static
+### Basic
 
-```ts file="HelperTextStatic.tsx"
-```
-
-### Static with default icons
+```ts file="HelperTextBasic.tsx"
 
-```ts file="HelperTextStaticWithDefaultIcon.tsx"
 ```
 
-### Static with custom icons
+### With custom icons
 
-```ts file="HelperTextStaticWithCustomIcon.tsx"
-```
+```ts file="HelperTextWithCustomIcon.tsx"
 
-### Multiple static
-
-```ts file="HelperTextMultipleStatic.tsx"
 ```
 
-### Dynamic
+### Multiple items
 
-```ts file="HelperTextDynamic.tsx"
-```
+You can pass multiple `<HelperTextItem>` components inside a single `<Helpertext>` container.
 
-### Dynamic list
+```ts file="HelperTextMultipleItems.tsx"
 
-```ts file="HelperTextDynamicList.tsx"
 ```

package/src/components/HelperText/examples/{HelperTextStatic.tsx → HelperTextBasic.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
 
-export const HelperTextStatic: React.FunctionComponent = () => (
+export const HelperTextBasic: React.FunctionComponent = () => (
   <React.Fragment>
     <HelperText>
       <HelperTextItem>This is default helper text</HelperTextItem>

package/src/components/HelperText/examples/HelperTextMultipleItems.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextMultipleItems: React.FunctionComponent = () => (
+  <HelperText component="ul">
+    <HelperTextItem component="li">This is default helper text</HelperTextItem>
+    <HelperTextItem component="li">This is another default helper text in the same HelperText block</HelperTextItem>
+    <HelperTextItem component="li">And this is more default text in the same HelperText block</HelperTextItem>
+  </HelperText>
+);

package/src/components/HelperText/examples/{HelperTextStaticWithCustomIcon.tsx → HelperTextWithCustomIcon.tsx}

@@ -6,7 +6,7 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export const HelperTextStaticWithCustomIcon: React.FunctionComponent = () => (
+export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
   <React.Fragment>
     <HelperText>
       <HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>

package/src/components/Icon/Icon.tsx

@@ -3,6 +3,23 @@ import styles from '@patternfly/react-styles/css/components/Icon/icon';
 import { css } from '@patternfly/react-styles';
 import { Spinner } from '../Spinner';
 
+export type IconSize =
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | 'headingSm'
+  | 'headingMd'
+  | 'headingLg'
+  | 'headingXl'
+  | 'heading_2xl'
+  | 'heading_3xl'
+  | 'bodySm'
+  | 'bodyDefault'
+  | 'bodyLg';
+
 export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'size'> {
   /** Icon content */
   children?: React.ReactNode;
@@ -11,11 +28,11 @@ export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement
   /** Additional classes applied to the icon container */
   className?: string;
   /** Size of the icon component container and icon. */
-  size?: 'sm' | 'md' | 'lg' | 'xl';
+  size?: IconSize;
   /** Size of icon. Overrides the icon size set by the size property. */
-  iconSize?: 'sm' | 'md' | 'lg' | 'xl';
+  iconSize?: IconSize;
   /** Size of progress icon. Overrides the icon size set by the size property. */
-  progressIconSize?: 'sm' | 'md' | 'lg' | 'xl';
+  progressIconSize?: IconSize;
   /** Status color of the icon */
   status?: 'custom' | 'info' | 'success' | 'warning' | 'danger';
   /** Indicates the icon is inline and should inherit the text font size and color. Overriden by size and iconSize properties. */

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">

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

@@ -162,7 +162,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;
@@ -193,7 +193,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>
   );