Skip to content

Commit c4ee05b

Browse files
committed
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.
1 parent 3ebf12a commit c4ee05b

File tree

3 files changed

+88
-4
lines changed

3 files changed

+88
-4
lines changed

packages/icon/src/TextIconSpacing.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,14 @@ export interface TextIconSpacingProps {
7676
* flex` and `flex-direction: column` for this to work.
7777
*/
7878
stacked?: boolean;
79+
80+
/**
81+
* Boolean if the icon and content are in a `column-reverse` or `row-reverse`
82+
* `flex-direction`. This will swap the different classnames as needed.
83+
*
84+
* @since 2.5.0
85+
*/
86+
flexReverse?: boolean;
7987
}
8088

8189
export function TextIconSpacing({
@@ -84,6 +92,7 @@ export function TextIconSpacing({
8492
children = null,
8593
stacked = false,
8694
iconAfter = false,
95+
flexReverse = false,
8796
forceIconWrap = false,
8897
beforeClassName = "rmd-icon--before",
8998
afterClassName = "rmd-icon--after",
@@ -94,12 +103,13 @@ export function TextIconSpacing({
94103
return <>{children}</>;
95104
}
96105

106+
const isAfter = flexReverse ? !iconAfter : iconAfter;
97107
const baseClassName = cn(
98108
{
99-
[beforeClassName]: !stacked && !iconAfter,
100-
[afterClassName]: !stacked && iconAfter,
101-
[aboveClassName]: stacked && !iconAfter,
102-
[belowClassName]: stacked && iconAfter,
109+
[beforeClassName]: !stacked && !isAfter,
110+
[afterClassName]: !stacked && isAfter,
111+
[aboveClassName]: stacked && !isAfter,
112+
[belowClassName]: stacked && isAfter,
103113
},
104114
className
105115
);

packages/icon/src/__tests__/TextIconSpacing.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,30 @@ describe("TextIconSpacing", () => {
8181
);
8282
expect(container).toMatchSnapshot();
8383
});
84+
85+
it("should swap the classnames correctly when flexReverse is enabled", () => {
86+
const props = {
87+
icon: <i data-testid="icon" />,
88+
children: <span>children</span>,
89+
flexReverse: true,
90+
};
91+
const { container, getByTestId, rerender } = render(
92+
<TextIconSpacing {...props} />
93+
);
94+
expect(container).toMatchSnapshot();
95+
96+
expect(getByTestId("icon").className).toContain("rmd-icon--after");
97+
98+
rerender(<TextIconSpacing {...props} iconAfter />);
99+
expect(container).toMatchSnapshot();
100+
expect(getByTestId("icon").className).toContain("rmd-icon--before");
101+
102+
rerender(<TextIconSpacing {...props} stacked />);
103+
expect(container).toMatchSnapshot();
104+
expect(getByTestId("icon").className).toContain("rmd-icon--below");
105+
106+
rerender(<TextIconSpacing {...props} stacked iconAfter />);
107+
expect(container).toMatchSnapshot();
108+
expect(getByTestId("icon").className).toContain("rmd-icon--above");
109+
});
84110
});

packages/icon/src/__tests__/__snapshots__/TextIconSpacing.tsx.snap

+48
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,54 @@ exports[`TextIconSpacing should return the children if no icon prop is provided
3030
</div>
3131
`;
3232

33+
exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 1`] = `
34+
<div>
35+
<i
36+
class="rmd-icon--after"
37+
data-testid="icon"
38+
/>
39+
<span>
40+
children
41+
</span>
42+
</div>
43+
`;
44+
45+
exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 2`] = `
46+
<div>
47+
<span>
48+
children
49+
</span>
50+
<i
51+
class="rmd-icon--before"
52+
data-testid="icon"
53+
/>
54+
</div>
55+
`;
56+
57+
exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 3`] = `
58+
<div>
59+
<i
60+
class="rmd-icon--below"
61+
data-testid="icon"
62+
/>
63+
<span>
64+
children
65+
</span>
66+
</div>
67+
`;
68+
69+
exports[`TextIconSpacing should swap the classnames correctly when flexReverse is enabled 4`] = `
70+
<div>
71+
<span>
72+
children
73+
</span>
74+
<i
75+
class="rmd-icon--above"
76+
data-testid="icon"
77+
/>
78+
</div>
79+
`;
80+
3381
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`] = `
3482
<div>
3583
<span

0 commit comments

Comments
 (0)