feat(icon): added flexReverse prop to TextIconSpacing

This allows for the class names to be swapped when using a column-reverse or row-reverse flex-direction container.
mlaursen · Dec 15, 2020 · c4ee05b · c4ee05b
1 parent 3ebf12a
commit c4ee05b
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 4 deletions.
diff --git a/packages/icon/src/TextIconSpacing.tsx b/packages/icon/src/TextIconSpacing.tsx
@@ -76,6 +76,14 @@ export interface TextIconSpacingProps {
    * flex` and `flex-direction: column` for this to work.
    */
   stacked?: boolean;
+
+  /**
+   * Boolean if the icon and content are in a `column-reverse` or `row-reverse`
+   * `flex-direction`. This will swap the different classnames as needed.
+   *
+   * @since 2.5.0
+   */
+  flexReverse?: boolean;
 }
 
 export function TextIconSpacing({
@@ -84,6 +92,7 @@ export function TextIconSpacing({
   children = null,
   stacked = false,
   iconAfter = false,
+  flexReverse = false,
   forceIconWrap = false,
   beforeClassName = "rmd-icon--before",
   afterClassName = "rmd-icon--after",
@@ -94,12 +103,13 @@ export function TextIconSpacing({
     return <>{children}</>;
   }
 
+  const isAfter = flexReverse ? !iconAfter : iconAfter;
   const baseClassName = cn(
     {
-      [beforeClassName]: !stacked && !iconAfter,
-      [afterClassName]: !stacked && iconAfter,
-      [aboveClassName]: stacked && !iconAfter,
-      [belowClassName]: stacked && iconAfter,
+      [beforeClassName]: !stacked && !isAfter,
+      [afterClassName]: !stacked && isAfter,
+      [aboveClassName]: stacked && !isAfter,
+      [belowClassName]: stacked && isAfter,
     },
     className
   );

diff --git a/packages/icon/src/__tests__/TextIconSpacing.tsx b/packages/icon/src/__tests__/TextIconSpacing.tsx
@@ -81,4 +81,30 @@ describe("TextIconSpacing", () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it("should swap the classnames correctly when flexReverse is enabled", () => {
+    const props = {
+      icon: <i data-testid="icon" />,
+      children: <span>children</span>,
+      flexReverse: true,
+    };
+    const { container, getByTestId, rerender } = render(
+      <TextIconSpacing {...props} />
+    );
+    expect(container).toMatchSnapshot();
+
+    expect(getByTestId("icon").className).toContain("rmd-icon--after");
+
+    rerender(<TextIconSpacing {...props} iconAfter />);
+    expect(container).toMatchSnapshot();
+    expect(getByTestId("icon").className).toContain("rmd-icon--before");
+
+    rerender(<TextIconSpacing {...props} stacked />);
+    expect(container).toMatchSnapshot();
+    expect(getByTestId("icon").className).toContain("rmd-icon--below");
+
+    rerender(<TextIconSpacing {...props} stacked iconAfter />);
+    expect(container).toMatchSnapshot();
+    expect(getByTestId("icon").className).toContain("rmd-icon--above");
+  });
 });
diff --git a/packages/icon/src/__tests__/__snapshots__/TextIconSpacing.tsx.snap b/packages/icon/src/__tests__/__snapshots__/TextIconSpacing.tsx.snap
@@ -30,6 +30,54 @@ exports[`TextIconSpacing should return the children if no icon prop is provided
 </div>
 `;
 
+exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 1`] = `
+<div>
+  <i
+    class="rmd-icon--after"
+    data-testid="icon"
+  />
+  <span>
+    children
+  </span>
+</div>
+`;
+
+exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 2`] = `
+<div>
+  <span>
+    children
+  </span>
+  <i
+    class="rmd-icon--before"
+    data-testid="icon"
+  />
+</div>
+`;
+
+exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 3`] = `
+<div>
+  <i
+    class="rmd-icon--below"
+    data-testid="icon"
+  />
+  <span>
+    children
+  </span>
+</div>
+`;
+
+exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 4`] = `
+<div>
+  <span>
+    children
+  </span>
+  <i
+    class="rmd-icon--above"
+    data-testid="icon"
+  />
+</div>
+`;
+
 exports[`TextIconSpacing should wrap the icon in a span with the required classNames if the icon is not a valid react element or the forceIconWrap prop is enabled 1`] = `
 <div>
   <span