Skip to content
Merged
Show file tree
Hide file tree
Changes from all 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
16 changes: 15 additions & 1 deletion packages/react-core/src/components/Icon/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement
isInProgress?: boolean;
/** Aria-label for the default progress icon */
defaultProgressArialabel?: string;
/** @beta Flag indicating whether the icon passed as children should be mirrored for
* right to left (RTL) languages. This will not mirror the icon passed to progressIcon.
*/
shouldMirrorRTL?: boolean;
}

export const Icon: React.FunctionComponent<IconComponentProps> = ({
Expand All @@ -37,6 +41,7 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
isInline = false,
isInProgress = false,
defaultProgressArialabel = 'Loading...',
shouldMirrorRTL = false,
...props
}: IconComponentProps) => {
const _progressIcon = progressIcon ?? <Spinner diameter="1em" aria-label={defaultProgressArialabel} />;
Expand All @@ -52,7 +57,16 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
)}
{...props}
>
<span className={css(styles.iconContent, styles.modifiers[iconSize], styles.modifiers[status])}>{children}</span>
<span
className={css(
styles.iconContent,
styles.modifiers[iconSize],
styles.modifiers[status],
shouldMirrorRTL && 'pf-v5-m-mirror-inline-rtl'
)}
>
{children}
</span>
{isInProgress && (
<span className={css(styles.iconProgress, styles.modifiers[progressIconSize], className)}>{_progressIcon}</span>
)}
Expand Down
16 changes: 16 additions & 0 deletions packages/react-core/src/components/Icon/__tests__/Icon.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -194,3 +194,19 @@ test('renders progress icon successfully', () => {
);
expect(asFragment()).toMatchSnapshot();
});

test('Renders with class pf-v5-m-mirror-inline-rtl on icon passed as children when shouldMirrorRTL is true', () => {
render(<Icon shouldMirrorRTL>Icon content</Icon>);

expect(screen.getByText('Icon content')).toHaveClass('pf-v5-m-mirror-inline-rtl');
});

test('Does not render with class pf-v5-m-mirror-inline-rtl on progressIcon when shouldMirrorRTL is true', () => {
render(
<Icon shouldMirrorRTL isInProgress progressIcon="Progress icon">
Icon content
</Icon>
);

expect(screen.getByText('Progress icon')).not.toHaveClass('pf-v5-m-mirror-inline-rtl');
});