@patternfly/react-core 4.248.0 → 4.249.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.248.0",
+  "version": "4.249.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "3e99a769dc61cb0c1506c3f2e6a868541a62d0cc"
+  "gitHead": "af40c12e9dc55ed508ebc5e07415ec93d61bd639"
 }

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Icon/icon';
+import { css } from '@patternfly/react-styles';
+import { Spinner } from '../Spinner';
+
+export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'size'> {
+  /** Icon content */
+  children?: React.ReactNode;
+  /** Icon when isInProgress is set to true. Defaults to a 1em spinner.  */
+  progressIcon?: React.ReactNode;
+  /** Additional classes applied to the icon container */
+  className?: string;
+  /** Size of the icon component container and icon. */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Size of icon. Overrides the icon size set by the size property. */
+  iconSize?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Size of progress icon. Overrides the icon size set by the size property. */
+  progressIconSize?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Status color of the icon */
+  status?: 'default' | 'info' | 'success' | 'warning' | 'danger';
+  /** Indicates the icon is inline and should inherit the text font size and color. Overriden by size and iconSize properties. */
+  isInline?: boolean;
+  /** Indicates the icon is in progress. Setting this property to true will swap the icon with the progressIcon. */
+  isInProgress?: boolean;
+  /** Aria-label for the default progress icon */
+  defaultProgressArialabel?: string;
+}
+
+export const Icon: React.FunctionComponent<IconComponentProps> = ({
+  children,
+  className,
+  progressIcon,
+  size,
+  iconSize,
+  progressIconSize,
+  status,
+  isInline = false,
+  isInProgress = false,
+  defaultProgressArialabel = 'Loading...',
+  ...props
+}: IconComponentProps) => {
+  const _progressIcon = progressIcon ? (
+    progressIcon
+  ) : (
+    <Spinner diameter="1em" isSVG aria-label={defaultProgressArialabel} />
+  );
+
+  return (
+    <span
+      className={css(
+        styles.icon,
+        isInline && styles.modifiers.inline,
+        isInProgress && styles.modifiers.inProgress,
+        styles.modifiers[size],
+        className
+      )}
+      {...props}
+    >
+      <span className={css(styles.iconContent, styles.modifiers[iconSize], styles.modifiers[status])}>{children}</span>
+      {isInProgress && (
+        <span className={css(styles.iconProgress, styles.modifiers[progressIconSize], className)}>{_progressIcon}</span>
+      )}
+    </span>
+  );
+};
+Icon.displayName = 'Icon';

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

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Icon } from '../Icon';
+import { CheckIcon } from '@patternfly/react-icons';
+
+test('renders basic icon successfully', () => {
+  const { asFragment } = render(
+    <Icon>
+      <CheckIcon />
+    </Icon>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('checks basic icon structure', () => {
+  const { asFragment } = render(
+    <Icon title="icon">
+      <CheckIcon />
+    </Icon>
+  );
+  const iconContainer = screen.getByTitle('icon');
+  expect(iconContainer).toHaveClass('pf-c-icon');
+  const iconContent = iconContainer.querySelector('.pf-c-icon__content');
+  expect(iconContent).toHaveClass('pf-c-icon__content');
+});
+
+test('renders without children', () => {
+  const { asFragment } = render(<Icon></Icon>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('sets additional custom class successfully', () => {
+  render(
+    <Icon className="test" title="custom-icon">
+      <CheckIcon />
+    </Icon>
+  );
+  const iconContainer = screen.getByTitle('custom-icon');
+
+  expect(iconContainer).toHaveClass('test');
+});
+
+Object.values(['sm', 'md', 'lg', 'xl']).forEach(size => {
+  test(`sets icon size modifier successfully - ${size}`, () => {
+    render(
+      <Icon iconSize={size as 'sm' | 'md' | 'lg' | 'xl'} title={`content-${size}-icon`}>
+        <CheckIcon />
+      </Icon>
+    );
+    const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector('.pf-c-icon__content');
+
+    expect(iconContainer).toHaveClass(`pf-m-${size}`);
+  });
+});
+
+test('check icon without iconSize', () => {
+  render(
+    <Icon title="no-icon-size">
+      <CheckIcon />
+    </Icon>
+  );
+  const iconContainer = screen.getByTitle('no-icon-size').querySelector('.pf-c-icon__content');
+  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('.pf-c-icon__progress');
+
+    expect(iconContainer).toHaveClass(`pf-m-${size}`);
+  });
+});
+
+test('check icon without progress icon size', () => {
+  render(
+    <Icon title="no-progress-icon-size">
+      <CheckIcon />
+    </Icon>
+  );
+  const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector('.pf-c-icon__progress');
+  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">
+      <CheckIcon />
+    </Icon>
+  );
+  const iconContainer = screen.getByTitle('no-size');
+  expect(Array.from(iconContainer?.classList || []).some(c => /pf-m-*/.test(c))); // Check no modifier classes have been added
+});
+
+Object.values(['default', 'info', 'success', 'warning', 'danger']).forEach(status => {
+  test(`sets status modifier successfully - ${status}`, () => {
+    render(
+      <Icon status={status as 'default' | 'info' | 'success' | 'warning' | 'danger'} title={`${status}-icon`}>
+        <CheckIcon />
+      </Icon>
+    );
+    const iconContent = screen.getByTitle(`${status}-icon`).querySelector('.pf-c-icon__content');
+
+    expect(iconContent).toHaveClass(`pf-m-${status}`);
+  });
+});
+
+test('check icon without status', () => {
+  render(
+    <Icon title="no-status">
+      <CheckIcon />
+    </Icon>
+  );
+  const iconContent = screen.getByTitle('no-status').querySelector('.pf-c-icon__content');
+  expect(Array.from(iconContent?.classList || []).some(c => /pf-m-*/.test(c))); // Check no modifier classes have been added
+});
+
+test('sets isInline successfully', () => {
+  render(
+    <Icon isInline title="inline-icon">
+      <CheckIcon />
+    </Icon>
+  );
+  const iconContainer = screen.getByTitle('inline-icon');
+
+  expect(iconContainer).toHaveClass('pf-m-inline');
+});
+
+test('check icon without isInline', () => {
+  render(
+    <Icon title="no-inline">
+      <CheckIcon />
+    </Icon>
+  );
+  const iconContainer = screen.getByTitle('no-inline');
+  expect(Array.from(iconContainer?.classList || []).some(c => /pf-m-*/.test(c))); // Check no modifier classes have been added
+});
+
+test('sets isInProgress successfully', () => {
+  render(
+    <Icon isInProgress title="progress-icon">
+      <CheckIcon />
+    </Icon>
+  );
+  const iconContainer = screen.getByTitle('progress-icon');
+  expect(iconContainer).toHaveClass('pf-m-in-progress');
+
+  const iconContent = iconContainer.querySelector('.pf-c-icon__progress');
+  expect(iconContent).toHaveClass('pf-c-icon__progress');
+});
+
+test('check icon without isInProgress', () => {
+  render(
+    <Icon title="no-in-progress">
+      <CheckIcon />
+    </Icon>
+  );
+  const iconContainer = screen.getByTitle('no-in-progress');
+  expect(Array.from(iconContainer?.classList || []).some(c => /pf-m-*/.test(c))); // Check no modifier classes have been added
+});
+
+test('sets default progres aria-label successfully', () => {
+  render(
+    <Icon isInProgress defaultProgressArialabel="test" title="progress-icon">
+      <CheckIcon />
+    </Icon>
+  );
+
+  expect(screen.getByLabelText('test'));
+});
+
+test('renders progress icon successfully', () => {
+  const { asFragment } = render(
+    <Icon isInProgress progressIcon={<CheckIcon />}>
+      <CheckIcon />
+    </Icon>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders basic icon successfully 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-icon"
+  >
+    <span
+      class="pf-c-icon__content"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        />
+      </svg>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`renders progress icon successfully 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-icon pf-m-in-progress"
+  >
+    <span
+      class="pf-c-icon__content"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-c-icon__progress"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        />
+      </svg>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`renders without children 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-icon"
+  >
+    <span
+      class="pf-c-icon__content"
+    />
+  </span>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,61 @@
+---
+id: Icon
+section: components
+cssPrefix: pf-c-icon
+propComponents: ['Icon']
+beta: true
+---
+
+import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+## Examples
+
+### Basic
+
+```ts file="IconBasic.tsx"
+```
+
+### Sizes
+
+```ts file="IconSizes.tsx"
+```
+
+### Status colors
+
+The following example demonstrates the various status variants of an icon. Keep in mind that these icons are displayed out of a typical context, and that you should not rely on color alone to convey status to users.
+
+```ts file="IconStatus.tsx"
+```
+
+### Sizing an icon within the icon container
+
+Providing both size and iconSize properties allows the icon container to maintain a consistent size, even if the icon changes in size.
+
+```ts file="IconContentSizes.tsx"
+```
+
+### Inline
+
+```ts file="IconInline.tsx"
+```
+
+### In progress
+
+Passing the `isInProgress` property will swap the icon to a progress icon. By default this progress icon will be a `Spinner` but may be customized or overriden using the `progressIcon` property.
+
+```ts file="IconProgress.tsx"
+```
+
+### Custom in progress icon
+
+```ts file="IconCustomProgress.tsx"
+```

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+
+export const IconBasic: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Icon>
+      <LongArrowAltDownIcon />
+    </Icon>
+    <Icon>
+      <AngleRightIcon />
+    </Icon>
+    <Icon>
+      <AngleDownIcon />
+    </Icon>
+    <Icon>
+      <CogIcon />
+    </Icon>
+  </React.Fragment>
+);

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const IconContentSizes: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Icon size="xl" iconSize="sm">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="xl" iconSize="md">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="xl" iconSize="lg">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="xl">
+      <PlusCircleIcon />
+    </Icon>
+  </React.Fragment>
+);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Icon, Spinner, Checkbox } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+export const IconProgress: React.FunctionComponent = () => {
+  const [isInProgress, setIsInProgress] = React.useState<boolean>(false);
+  return (
+    <React.Fragment>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="Toggle in progress state"
+          isChecked={isInProgress}
+          onChange={checked => setIsInProgress(checked)}
+          aria-label="Set icon progress state"
+          id="toggle-icon-progress-custom"
+          name="toggle-icon-progress-custom"
+        />
+      </div>
+      <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" isSVG aria-label="Loading..." />}>
+        <CheckCircleIcon />
+      </Icon>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Icon, Text, TextContent } from '@patternfly/react-core';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const IconInline: React.FunctionComponent = () => (
+  <React.Fragment>
+    <TextContent>
+      <Text component="h1">
+        Heading
+        <Icon isInline>
+          <PlusCircleIcon />
+        </Icon>
+      </Text>
+      <Text component="p">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
+      </Text>
+      <Text component="h2">
+        Second level
+        <Icon isInline>
+          <PlusCircleIcon />
+        </Icon>
+      </Text>
+      <Text component="p">
+        <Icon isInline>
+          <PlusCircleIcon />
+        </Icon>
+        Curabitur accumsan turpis pharetra
+        <strong>
+          augue tincidunt
+          <Icon isInline>
+            <PlusCircleIcon />
+          </Icon>
+        </strong>
+        blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus
+        venenatis. Suspendisse potenti.
+      </Text>
+      <small>
+        Sometimes you need small text
+        <Icon isInline>
+          <PlusCircleIcon />
+        </Icon>
+      </small>
+      Inline with size specified:
+      <Icon size="sm" isInline>
+        <PlusCircleIcon />
+      </Icon>
+      small,
+      <Icon size="md" isInline>
+        <PlusCircleIcon />
+      </Icon>
+      medium,
+      <Icon size="lg" isInline>
+        <PlusCircleIcon />
+      </Icon>
+      large,
+      <Icon size="xl" isInline>
+        <PlusCircleIcon />
+      </Icon>
+      extra large
+    </TextContent>
+  </React.Fragment>
+);

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Icon, Checkbox } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+export const IconProgress: React.FunctionComponent = () => {
+  const [isInProgress, setIsInProgress] = React.useState<boolean>(false);
+  return (
+    <React.Fragment>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          label="Toggle in progress state"
+          isChecked={isInProgress}
+          onChange={checked => setIsInProgress(checked)}
+          aria-label="Set icon progress state"
+          id="toggle-icon-progress"
+          name="toggle-icon-progress"
+        />
+      </div>
+      <Icon isInProgress={isInProgress}>
+        <CheckCircleIcon />
+      </Icon>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,20 @@
+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 = () => (
+  <React.Fragment>
+    <Icon size="sm">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="md">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="lg">
+      <PlusCircleIcon />
+    </Icon>
+    <Icon size="xl">
+      <PlusCircleIcon />
+    </Icon>
+  </React.Fragment>
+);

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const IconStatus: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Icon status="danger">
+      <ExclamationCircleIcon />
+    </Icon>
+    <Icon status="warning">
+      <ExclamationTriangleIcon />
+    </Icon>
+    <Icon status="success">
+      <CheckCircleIcon />
+    </Icon>
+    <Icon status="info">
+      <InfoCircleIcon />
+    </Icon>
+    <Icon status="default">
+      <BellIcon />
+    </Icon>
+  </React.Fragment>
+);

package/src/components/Icon/index.ts

@@ -0,0 +1 @@
+export * from './Icon';

package/src/components/index.ts

@@ -36,6 +36,7 @@ export * from './Form';
 export * from './FormSelect';
 export * from './HelperText';
 export * from './Hint';
+export * from './Icon';
 export * from './InputGroup';
 export * from './JumpLinks';
 export * from './Label';