feat(Progress): add hideStatusIcon flag (#12038)

* feat(Progress): add hideStatusIcon flag

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>

* avoid using test-id

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>

* interactive example for measureLocation and hideStatusIcon

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>

* Update packages/react-core/src/components/Progress/ProgressContainer.tsx

Co-authored-by: Rebecca Alpert <ralpert@redhat.com>

* Update packages/react-core/src/components/Progress/Progress.tsx

Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

---------

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>
Co-authored-by: Rebecca Alpert <ralpert@redhat.com>
Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

Author: 3 people

packages/react-core/src/components/Progress/Progress.tsx

@@ -48,6 +48,8 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;
+  /** Flag indicating whether the status icon should be hidden, helpful when space is limited (such as within table cells). When set to true, you must ensure the context of the status is provided in another way, such as via the progress measure. */
+  hideStatusIcon?: boolean;
 }
 
 class Progress extends Component<ProgressProps> {
@@ -94,6 +96,7 @@ class Progress extends Component<ProgressProps> {
       'aria-labelledby': ariaLabelledBy,
       'aria-describedby': ariaDescribedBy,
       helperText,
+      hideStatusIcon,
       ...props
     } = this.props;
 
@@ -151,6 +154,7 @@ class Progress extends Component<ProgressProps> {
           isTitleTruncated={isTitleTruncated}
           tooltipPosition={tooltipPosition}
           helperText={helperText}
+          hideStatusIcon={hideStatusIcon}
         />
       </div>
     );

packages/react-core/src/components/Progress/ProgressContainer.tsx

@@ -58,6 +58,8 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;
+  /** Hide the status icon, helpful when space is limited (such as within table cells) */
+  hideStatusIcon?: boolean;
 }
 
 const variantToIcon = {
@@ -76,9 +78,10 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
   measureLocation = ProgressMeasureLocation.top,
   isTitleTruncated = false,
   tooltipPosition,
-  helperText
+  helperText,
+  hideStatusIcon = false
 }: ProgressContainerProps) => {
-  const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
+  const StatusIcon = !hideStatusIcon && variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = useState('');
   const titleRef = useRef(null);
   const updateTooltip = (event: any) => {

packages/react-core/src/components/Progress/__tests__/Generated/ProgressContainer.test.tsx

@@ -15,6 +15,7 @@ it('ProgressContainer should match snapshot (auto-generated)', () => {
       variant={'danger'}
       measureLocation={'outside'}
       value={42}
+      hideStatusIcon={false}
     />
   );
   expect(asFragment()).toMatchSnapshot();

packages/react-core/src/components/Progress/__tests__/Progress.test.tsx

@@ -108,3 +108,35 @@ test('Renders passed helper text', () => {
 
   expect(screen.getByText('Test helper text')).toBeVisible();
 });
+
+describe('hideStatusIcon prop behavior', () => {
+  test('shows status icon by default when hideStatusIcon is not set', () => {
+    render(<Progress id="default-status-icon-test" value={100} variant="success" />);
+
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with success variant', () => {
+    render(<Progress id="hide-icon-success" value={100} variant="success" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with danger variant', () => {
+    render(<Progress id="hide-icon-danger" value={50} variant="danger" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with warning variant', () => {
+    render(<Progress id="hide-icon-warning" value={75} variant="warning" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('shows status icon when hideStatusIcon is explicitly false', () => {
+    render(<Progress id="show-icon-success" value={100} variant="success" hideStatusIcon={false} />);
+
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+});

packages/react-core/src/components/Progress/examples/Progress.md

@@ -107,20 +107,8 @@ When conveying status, you should ensure:
 
 ```
 
-### Inside success
+### Interactive status icon and measure location
 
-```ts file="./ProgressInsideSuccess.tsx"
-
-```
-
-### Outside failure
-
-```ts file="./ProgressOutsideFailure.tsx"
-
-```
-
-### Failure without measure
-
-```ts file="./ProgressFailureWithoutMeasure.tsx"
+```ts file="./ProgressInteractiveFailure.tsx"
 
 ```

packages/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import {
+  Progress,
+  ProgressMeasureLocation,
+  ProgressVariant,
+  Radio,
+  Checkbox,
+  Form,
+  FormGroup
+} from '@patternfly/react-core';
+
+export const ProgressInteractiveFailure: React.FunctionComponent = () => {
+  const [measureLocation, setMeasureLocation] = useState<ProgressMeasureLocation>(ProgressMeasureLocation.inside);
+  const [hideStatusIcon, setHideStatusIcon] = useState<boolean>(false);
+
+  const measureLocationOptions = [
+    { value: ProgressMeasureLocation.inside, label: 'Inside' },
+    { value: ProgressMeasureLocation.outside, label: 'Outside' },
+    { value: ProgressMeasureLocation.top, label: 'Top' },
+    { value: ProgressMeasureLocation.none, label: 'None' }
+  ];
+
+  return (
+    <Form>
+      <FormGroup fieldId="measure-location" label="Measure location">
+        {measureLocationOptions.map((option) => (
+          <Radio
+            key={option.value}
+            id={`measure-location-${option.value}`}
+            name="measure-location"
+            label={option.label}
+            value={option.value}
+            isChecked={measureLocation === option.value}
+            onChange={() => setMeasureLocation(option.value)}
+          />
+        ))}
+      </FormGroup>
+      <FormGroup fieldId="hide-status-icon">
+        <Checkbox
+          id="hide-status-icon"
+          label="Hide status icon"
+          isChecked={hideStatusIcon}
+          onChange={(_, checked) => setHideStatusIcon(checked)}
+        />
+      </FormGroup>
+      <Progress
+        value={33}
+        title="Title"
+        measureLocation={measureLocation}
+        variant={ProgressVariant.danger}
+        hideStatusIcon={hideStatusIcon}
+      />
+    </Form>
+  );
+};