From 56873d7d01a2aaee31b6c0e09b2e0ae1b0380e6a Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 12 Sep 2023 11:45:02 -0400
Subject: [PATCH] feat(Icon): added prop for mirroring in RTL

---
 packages/react-core/src/components/Icon/Icon.tsx | 16 +++++++++++++++-
 .../src/components/Icon/__tests__/Icon.test.tsx  | 16 ++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Icon/Icon.tsx b/packages/react-core/src/components/Icon/Icon.tsx
index 2fe2e127a9c..e1debb4406c 100644
--- a/packages/react-core/src/components/Icon/Icon.tsx
+++ b/packages/react-core/src/components/Icon/Icon.tsx
@@ -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> = ({
@@ -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} />;
@@ -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>
       )}
diff --git a/packages/react-core/src/components/Icon/__tests__/Icon.test.tsx b/packages/react-core/src/components/Icon/__tests__/Icon.test.tsx
index 595df963a1e..8c3373d3a39 100644
--- a/packages/react-core/src/components/Icon/__tests__/Icon.test.tsx
+++ b/packages/react-core/src/components/Icon/__tests__/Icon.test.tsx
@@ -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');
+});