Repository: couds/react-bulma-components (js)

Issue:
`<Icon text>` enables both `icon` and `icon-text` classes causing layout issue.
**Describe the bug**
Refer to [this discussion](https://github.com/couds/react-bulma-components/discussions/334)

**To Reproduce**
Refer to [this discussion](https://github.com/couds/react-bulma-components/discussions/334). @Tstassin was able to reproduce this issue in the code sandbox they provided.

**Expected behavior**
`<Icon text` should only enable `icon-text` class.

**Screenshots**
N/A

**Versions**
- `react-bulma-components:`: v4
- `bulma`: N/A
- `react`: N/A
- Browser: N/A

**Additional context**
cc @Tstassin


Pull request description:
add only icon-text class when Icon text prop is enabled
Currently if `Icon` `text` prop is enabled, both `icon` and `icon-text` classes are added, causing layout issue. From Bulma's documentation, only the `icon-text` class is required. This PR addresses this issue.

Closes #335, cc @Tstassin

Patch:
diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js
index d1c8154..fe9f0f9 100644
--- a/src/components/icon/icon.js
+++ b/src/components/icon/icon.js
@@ -8,7 +8,8 @@ const Icon = ({ size, color, className, align, text, ...props }) => {
   return (
     <Element
       {...props}
-      className={classnames('icon', className, {
+      className={classnames(className, {
+        icon: !text,
         [`is-${size}`]: size,
         [`is-${align}`]: align,
         [`has-text-${color}`]: color,


Test patch:
diff --git a/src/components/icon/__test__/__snapshots__/icon.test.js.snap b/src/components/icon/__test__/__snapshots__/icon.test.js.snap
index a928d37..553c297 100644
--- a/src/components/icon/__test__/__snapshots__/icon.test.js.snap
+++ b/src/components/icon/__test__/__snapshots__/icon.test.js.snap
@@ -4,7 +4,7 @@ exports[`Icon component Should Exist 1`] = `[Function]`;
 
 exports[`Icon component Should concat Bulma class with classes in props 1`] = `
 <span
-  className="icon other-class"
+  className="other-class icon"
   icon="bars"
 />
 `;
@@ -15,3 +15,10 @@ exports[`Icon component Should have box classname 1`] = `
   icon="bars"
 />
 `;
+
+exports[`Icon component Should only enable icon-text class if text prop is enabled 1`] = `
+<span
+  className="icon-text"
+  icon="bars"
+/>
+`;
diff --git a/src/components/icon/__test__/icon.test.js b/src/components/icon/__test__/icon.test.js
index 2e7fa51..84a0dd8 100644
--- a/src/components/icon/__test__/icon.test.js
+++ b/src/components/icon/__test__/icon.test.js
@@ -16,4 +16,8 @@ describe('Icon component', () => {
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should only enable icon-text class if text prop is enabled', () => {
+    const component = renderer.create(<Icon text icon="bars" />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
 });