Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
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
Original file line number Diff line number Diff line change
Expand Up @@ -537,6 +537,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
</span>
<span
class="pf-v6-c-progress__status-icon"
data-testid="progress-status-icon"
>
<svg
aria-hidden="true"
Expand Down
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 Expand Up @@ -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">
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really want to hard code this test id into the component? I'm not sure what a better way to do it would be, but I don't love this, and the fact that there isn't a better way is probably signaling a lack of a11y on this. Would love @thatblindgeye's thoughts on this.

<StatusIcon />
</span>
)}
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 @@ -20,6 +20,7 @@ exports[`ProgressContainer should match snapshot (auto-generated) 1`] = `
</span>
<span
class="pf-v6-c-progress__status-icon"
data-testid="progress-status-icon"
>
<svg
aria-hidden="true"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@ exports[`Progress variant danger 1`] = `
</span>
<span
class="pf-v6-c-progress__status-icon"
data-testid="progress-status-icon"
>
<svg
aria-hidden="true"
Expand Down Expand Up @@ -340,6 +341,7 @@ exports[`Progress variant success 1`] = `
</span>
<span
class="pf-v6-c-progress__status-icon"
data-testid="progress-status-icon"
>
<svg
aria-hidden="true"
Expand Down Expand Up @@ -393,6 +395,7 @@ exports[`Progress variant warning 1`] = `
</span>
<span
class="pf-v6-c-progress__status-icon"
data-testid="progress-status-icon"
>
<svg
aria-hidden="true"
Expand Down
Loading