diff --git a/src/components/icon/__test__/__snapshots__/icon.test.js.snap b/src/components/icon/__test__/__snapshots__/icon.test.js.snap
index 553c2979..7e923f03 100644
--- a/src/components/icon/__test__/__snapshots__/icon.test.js.snap
+++ b/src/components/icon/__test__/__snapshots__/icon.test.js.snap
@@ -16,9 +16,13 @@ exports[`Icon component Should have box classname 1`] = `
/>
`;
-exports[`Icon component Should only enable icon-text class if text prop is enabled 1`] = `
+exports[`Icon component Should render wrapped on icon-text class 1`] = `
+>
+
+
`;
diff --git a/src/components/icon/__test__/icon.test.js b/src/components/icon/__test__/icon.test.js
index 84a0dd81..f49ed331 100644
--- a/src/components/icon/__test__/icon.test.js
+++ b/src/components/icon/__test__/icon.test.js
@@ -16,8 +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();
+ it('Should render wrapped on icon-text class', () => {
+ const component = renderer.create();
expect(component.toJSON()).toMatchSnapshot();
});
});
diff --git a/src/components/icon/components/text/index.js b/src/components/icon/components/text/index.js
new file mode 100644
index 00000000..d907e300
--- /dev/null
+++ b/src/components/icon/components/text/index.js
@@ -0,0 +1,3 @@
+import Text from './text';
+
+export default Text;
diff --git a/src/components/icon/components/text/text.js b/src/components/icon/components/text/text.js
new file mode 100644
index 00000000..9cf095d4
--- /dev/null
+++ b/src/components/icon/components/text/text.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Element from '../../../element';
+
+const Text = ({ className, ...props }) => {
+ return ;
+};
+
+Text.propTypes = {
+ renderAs: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.string,
+ PropTypes.object,
+ ]),
+};
+
+Text.defaultProps = {
+ renderAs: 'span',
+};
+
+export default Text;
diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js
index fe9f0f95..559e2c3d 100644
--- a/src/components/icon/icon.js
+++ b/src/components/icon/icon.js
@@ -1,10 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
+import Text from './components/text';
import Element from '../element';
const Icon = ({ size, color, className, align, text, ...props }) => {
+ if (text !== undefined) {
+ console.warn(
+ '[Deprecation] Text prop for Icon Component its deprecated, please use Icon.Text Component instead',
+ );
+ }
return (
{
+export const Default = ({ size, useIconText, ...args }) => {
+ const Wrapper = useIconText ? Icon.Text : React.Fragment;
return (
-
-
-
+
+
+
+
+ Some text in a span
+
);
};
+Default.args = {
+ useIconText: false,
+};
+
Default.argTypes = {
color: {
control: {
diff --git a/src/components/icon/icon.story.mdx b/src/components/icon/icon.story.mdx
index 78fb67a1..163bddd2 100644
--- a/src/components/icon/icon.story.mdx
+++ b/src/components/icon/icon.story.mdx
@@ -11,8 +11,16 @@ This component reserve a square space for the icon
## Props
+
+
+### `Icon`
+
+### `Icon.Text`
+
+
+
## Example
diff --git a/src/components/icon/index.d.ts b/src/components/icon/index.d.ts
index 22319e6d..d45cc1f1 100644
--- a/src/components/icon/index.d.ts
+++ b/src/components/icon/index.d.ts
@@ -1,4 +1,4 @@
-import { BulmaComponentWithoutRenderAs } from '..';
+import { BulmaComponent } from '..';
import { Color, Size } from '..';
interface IconProps {
@@ -9,6 +9,8 @@ interface IconProps {
text?: Boolean;
}
-declare const Icon: BulmaComponentWithoutRenderAs;
+declare const Icon: BulmaComponent & {
+ Text: BulmaComponent<{}, 'span'>;
+};
export default Icon;
\ No newline at end of file