feat(Progress): add hideStatusIcon flag

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

Author: gitdallas

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;
+  /** Hide the status icon, helpful when space is limited (such as within table cells) */
+  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,7 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;
+  hideStatusIcon?: boolean;
 }
 
 const variantToIcon = {
@@ -76,9 +77,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) => {
@@ -124,7 +126,7 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
             <span className={css(progressStyle.progressMeasure)}>{label || `${value}%`}</span>
           )}
           {StatusIcon && (
-            <span className={css(progressStyle.progressStatusIcon)}>
+            <span className={css(progressStyle.progressStatusIcon)} data-testid="progress-status-icon">
               <StatusIcon />
             </span>
           )}

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,36 @@ 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" />);
+
+    // Should have status icon by default
+    expect(screen.getByTestId('progress-status-icon')).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.queryByTestId('progress-status-icon')).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.queryByTestId('progress-status-icon')).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.queryByTestId('progress-status-icon')).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.getByTestId('progress-status-icon')).toBeInTheDocument();
+  });
+});