diff --git a/packages/react-core/src/components/Progress/Progress.tsx b/packages/react-core/src/components/Progress/Progress.tsx index 6f1b1c932e9..ab1ec5151d5 100644 --- a/packages/react-core/src/components/Progress/Progress.tsx +++ b/packages/react-core/src/components/Progress/Progress.tsx @@ -48,6 +48,8 @@ export interface ProgressProps extends Omit, '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 { @@ -94,6 +96,7 @@ class Progress extends Component { 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, helperText, + hideStatusIcon, ...props } = this.props; @@ -151,6 +154,7 @@ class Progress extends Component { isTitleTruncated={isTitleTruncated} tooltipPosition={tooltipPosition} helperText={helperText} + hideStatusIcon={hideStatusIcon} /> ); diff --git a/packages/react-core/src/components/Progress/ProgressContainer.tsx b/packages/react-core/src/components/Progress/ProgressContainer.tsx index 0bfb7b89a15..f3adede881e 100644 --- a/packages/react-core/src/components/Progress/ProgressContainer.tsx +++ b/packages/react-core/src/components/Progress/ProgressContainer.tsx @@ -58,6 +58,8 @@ export interface ProgressContainerProps extends Omit 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) => { diff --git a/packages/react-core/src/components/Progress/__tests__/Generated/ProgressContainer.test.tsx b/packages/react-core/src/components/Progress/__tests__/Generated/ProgressContainer.test.tsx index 30349f9f773..67817aff203 100644 --- a/packages/react-core/src/components/Progress/__tests__/Generated/ProgressContainer.test.tsx +++ b/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(); diff --git a/packages/react-core/src/components/Progress/__tests__/Progress.test.tsx b/packages/react-core/src/components/Progress/__tests__/Progress.test.tsx index 5aaa17af300..ffa02feb84a 100644 --- a/packages/react-core/src/components/Progress/__tests__/Progress.test.tsx +++ b/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(); + + expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument(); + }); + + test('hides status icon when hideStatusIcon flag is set with success variant', () => { + render(); + + expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument(); + }); + + test('hides status icon when hideStatusIcon flag is set with danger variant', () => { + render(); + + expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument(); + }); + + test('hides status icon when hideStatusIcon flag is set with warning variant', () => { + render(); + + expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument(); + }); + + test('shows status icon when hideStatusIcon is explicitly false', () => { + render(); + + expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument(); + }); +}); diff --git a/packages/react-core/src/components/Progress/examples/Progress.md b/packages/react-core/src/components/Progress/examples/Progress.md index 57437cb57eb..b9dbf79cbb2 100644 --- a/packages/react-core/src/components/Progress/examples/Progress.md +++ b/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" ``` diff --git a/packages/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx b/packages/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx deleted file mode 100644 index b6fe09370e4..00000000000 --- a/packages/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core'; - -export const ProgressFailureWithoutMeasure: React.FunctionComponent = () => ( - -); diff --git a/packages/react-core/src/components/Progress/examples/ProgressInsideSuccess.tsx b/packages/react-core/src/components/Progress/examples/ProgressInsideSuccess.tsx deleted file mode 100644 index e7c96f20bdd..00000000000 --- a/packages/react-core/src/components/Progress/examples/ProgressInsideSuccess.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core'; - -export const ProgressInsideSuccess: React.FunctionComponent = () => ( - -); diff --git a/packages/react-core/src/components/Progress/examples/ProgressInteractiveFailure.tsx b/packages/react-core/src/components/Progress/examples/ProgressInteractiveFailure.tsx new file mode 100644 index 00000000000..c07b82bb766 --- /dev/null +++ b/packages/react-core/src/components/Progress/examples/ProgressInteractiveFailure.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.inside); + const [hideStatusIcon, setHideStatusIcon] = useState(false); + + const measureLocationOptions = [ + { value: ProgressMeasureLocation.inside, label: 'Inside' }, + { value: ProgressMeasureLocation.outside, label: 'Outside' }, + { value: ProgressMeasureLocation.top, label: 'Top' }, + { value: ProgressMeasureLocation.none, label: 'None' } + ]; + + return ( +
+ + {measureLocationOptions.map((option) => ( + setMeasureLocation(option.value)} + /> + ))} + + + setHideStatusIcon(checked)} + /> + + + + ); +}; diff --git a/packages/react-core/src/components/Progress/examples/ProgressOutsideFailure.tsx b/packages/react-core/src/components/Progress/examples/ProgressOutsideFailure.tsx deleted file mode 100644 index 6f3762f0190..00000000000 --- a/packages/react-core/src/components/Progress/examples/ProgressOutsideFailure.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core'; - -export const ProgressOutsideFailure: React.FunctionComponent = () => ( - -);