@patternfly/react-core 4.259.0 → 4.260.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.259.0",
+  "version": "4.260.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": "7db13002a4532f26aa6982731a25c208224ae8da"
+  "gitHead": "8d5d8dc62afaae1e70567b802bf617bf73df36a4"
 }

package/src/components/HelperText/__mocks__/HelperText.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HelperTextProps } from '../';
+
+export const HelperText = ({ children, isLiveRegion }: HelperTextProps) => (
+  <>
+    <div data-testid="helper-text-children-container">{children}</div>
+    <p>{`isLiveRegion: ${isLiveRegion}`}</p>
+  </>
+);

package/src/components/HelperText/__mocks__/HelperTextItem.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HelperTextItemProps } from '../';
+
+export const HelperTextItem = ({ children, variant }: HelperTextItemProps) => (
+  <>
+    <div data-testid="helper-text-item-children-container">{children}</div>
+    <p>{`variant: ${variant}`}</p>
+  </>
+);

package/src/components/HelperText/__mocks__/index.ts

@@ -0,0 +1,2 @@
+export * from './HelperText';
+export * from './HelperTextItem';

package/src/components/Progress/Progress.tsx

@@ -42,6 +42,10 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   'aria-label'?: string;
   /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
   'aria-labelledby'?: string;
+  /** @beta Content which can be used to convey additional information about the progress component.
+   * We recommend the helper text component as it was designed for this purpose.
+   */
+  helperText?: React.ReactNode;
 }
 
 export class Progress extends React.Component<ProgressProps> {
@@ -85,6 +89,7 @@ export class Progress extends React.Component<ProgressProps> {
       tooltipPosition,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      helperText,
       ...props
     } = this.props;
 
@@ -137,6 +142,7 @@ export class Progress extends React.Component<ProgressProps> {
           progressBarAriaProps={progressBarAriaProps}
           isTitleTruncated={isTitleTruncated}
           tooltipPosition={tooltipPosition}
+          helperText={helperText}
         />
       </div>
     );

package/src/components/Progress/ProgressContainer.tsx

@@ -6,6 +6,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import { AriaProps, ProgressBar } from './ProgressBar';
+import { ProgressHelperText } from './ProgressHelperText';
 
 export enum ProgressMeasureLocation {
   outside = 'outside',
@@ -53,6 +54,10 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** @beta Content which can be used to convey additional information about the progress component.
+   * We recommend the helper text component as it was designed for this purpose.
+   */
+  helperText?: React.ReactNode;
 }
 
 const variantToIcon = {
@@ -70,7 +75,8 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
   variant = null,
   measureLocation = ProgressMeasureLocation.top,
   isTitleTruncated = false,
-  tooltipPosition
+  tooltipPosition,
+  helperText
 }: ProgressContainerProps) => {
   const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = React.useState('');
@@ -117,6 +123,7 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
       <ProgressBar role="progressbar" progressBarAriaProps={progressBarAriaProps} value={value}>
         {measureLocation === ProgressMeasureLocation.inside && `${value}%`}
       </ProgressBar>
+      {helperText && <ProgressHelperText>{helperText}</ProgressHelperText>}
     </React.Fragment>
   );
 };

package/src/components/Progress/ProgressHelperText.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import progressStyle from '@patternfly/react-styles/css/components/Progress/progress';
+
+export interface ProgressHelperTextProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content which can be used to convey additional information about the progress component.
+   * We recommend the helper text component as it was designed for this purpose.
+   */
+  children?: React.ReactNode;
+}
+
+export const ProgressHelperText: React.FunctionComponent<ProgressHelperTextProps> = ({
+  children,
+  ...props
+}: ProgressHelperTextProps) => (
+  <div className={progressStyle.progressHelperText} {...props}>
+    {children}
+  </div>
+);
+
+ProgressHelperText.displayName = 'ProgressHelperText';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Progress, ProgressSize } from '../Progress';
 import { ProgressVariant, ProgressMeasureLocation } from '../ProgressContainer';
 
@@ -97,3 +97,15 @@ test('progress component generates console warning when no accessible name is pr
   render(<Progress value={33} />);
   expect(consoleWarnMock).toHaveBeenCalled();
 });
+
+test('Does not render helper text by default', () => {
+  render(<Progress/>);
+
+  expect(screen.queryByText('Test helper text')).not.toBeInTheDocument();
+})
+
+test('Renders passed helper text', () => {
+  render(<Progress helperText="Test helper text" />);
+
+  expect(screen.getByText('Test helper text')).toBeVisible();
+});

package/src/components/Progress/__tests__/ProgressHelperText.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ProgressHelperText } from '../ProgressHelperText';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <ProgressHelperText />
+    </div>
+  );
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<ProgressHelperText>Test</ProgressHelperText>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class pf-c-progress__helper-text on the div containing the helper text component', () => {
+  render(<ProgressHelperText>Test</ProgressHelperText>);
+
+  expect(screen.getByText('Test')).toHaveClass('pf-c-progress__helper-text');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<ProgressHelperText aria-label="Test label">Test</ProgressHelperText>);
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<ProgressHelperText>test</ProgressHelperText>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Progress/__tests__/__snapshots__/ProgressHelperText.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-progress__helper-text"
+  >
+    test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Progress/examples/Progress.md

@@ -74,3 +74,7 @@ propComponents: ['Progress']
 ### Title outside of progress bar
 ```ts file="./ProgressTitleOutsideOfProgressBar.tsx"
 ```
+
+### Helper text
+```ts file="./ProgressHelperText.tsx" isBeta
+```

package/src/components/Progress/examples/ProgressHelperText.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Progress, ProgressProps, HelperText, HelperTextItem, Radio } from '@patternfly/react-core';
+
+export const ProgressHelperText: React.FunctionComponent = () => {
+  type ProgressVariant = ProgressProps['variant'];
+
+  const [selectedVariant, setSelectedVariant] = React.useState<ProgressVariant>(undefined);
+
+  const progressVariants: ProgressVariant[] = [undefined, 'success', 'warning', 'danger'];
+
+  const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);
+  const formatVariantName = (variant: ProgressVariant) => (variant ? capitalize(variant) : 'Default');
+
+  const variantOptions = progressVariants.map(variant => (
+    <Radio
+      id={`progress-helper-text-${variant}-selector`}
+      label={`${formatVariantName(variant)} variant`}
+      isChecked={variant === selectedVariant}
+      onChange={() => setSelectedVariant(variant)}
+      key={formatVariantName(variant)}
+      name="Progress variant options"
+    />
+  ));
+
+  const helperTextVariant = selectedVariant === 'danger' ? 'error' : selectedVariant;
+
+  const helperText = (
+    <HelperText>
+      <HelperTextItem variant={helperTextVariant}>
+        {`${formatVariantName(selectedVariant)} variant is being displayed`}
+      </HelperTextItem>
+    </HelperText>
+  );
+
+  return (
+    <>
+      {variantOptions}
+      <br />
+      <Progress value={33} title="Title" helperText={helperText} variant={selectedVariant} />
+    </>
+  );
+};