Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/react-core/src/components/Progress/Progress.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) */
Comment thread
gitdallas marked this conversation as resolved.
Outdated
hideStatusIcon?: boolean;
}

class Progress extends Component<ProgressProps> {
Expand Down Expand Up @@ -94,6 +96,7 @@ class Progress extends Component<ProgressProps> {
'aria-labelledby': ariaLabelledBy,
'aria-describedby': ariaDescribedBy,
helperText,
hideStatusIcon,
...props
} = this.props;

Expand Down Expand Up @@ -151,6 +154,7 @@ class Progress extends Component<ProgressProps> {
isTitleTruncated={isTitleTruncated}
tooltipPosition={tooltipPosition}
helperText={helperText}
hideStatusIcon={hideStatusIcon}
/>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Comment thread
gitdallas marked this conversation as resolved.
}

const variantToIcon = {
Expand All @@ -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) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ it('ProgressContainer should match snapshot (auto-generated)', () => {
variant={'danger'}
measureLocation={'outside'}
value={42}
hideStatusIcon={false}
/>
);
expect(asFragment()).toMatchSnapshot();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});