diff --git a/src/modules/Search/Search.d.ts b/src/modules/Search/Search.d.ts
index 2cf8448885..30383c65ad 100644
--- a/src/modules/Search/Search.d.ts
+++ b/src/modules/Search/Search.d.ts
@@ -27,10 +27,10 @@ export interface SearchProps {
minCharacters?: number;
/** Additional text for "No Results" message with less emphasis. */
- noResultsDescription?: string;
+ noResultsDescription?: React.ReactNode;
/** Message to display when there are no results. */
- noResultsMessage?: string;
+ noResultsMessage?: React.ReactNode;
/** Controls whether or not the results menu is displayed. */
open?: boolean;
diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
index c93008d30f..7be1300e70 100644
--- a/src/modules/Search/Search.js
+++ b/src/modules/Search/Search.js
@@ -54,10 +54,10 @@ export default class Search extends Component {
minCharacters: PropTypes.number,
/** Additional text for "No Results" message with less emphasis. */
- noResultsDescription: PropTypes.string,
+ noResultsDescription: PropTypes.node,
/** Message to display when there are no results. */
- noResultsMessage: PropTypes.string,
+ noResultsMessage: PropTypes.node,
/** Controls whether or not the results menu is displayed. */
open: PropTypes.bool,
diff --git a/test/specs/modules/Search/Search-test.js b/test/specs/modules/Search/Search-test.js
index da94f019ae..d3b66a6ae9 100644
--- a/test/specs/modules/Search/Search-test.js
+++ b/test/specs/modules/Search/Search-test.js
@@ -696,13 +696,20 @@ describe('Search', () => {
.find('.message.empty .header')
.should.have.text('No results found.')
})
- it('uses custom noResultsMessage', () => {
+ it('uses custom string for noResultsMessage', () => {
wrapperMount()
wrapper
.find('.message.empty .header')
.should.have.text('Something custom')
})
+ it('uses custom component for noResultsMessage', () => {
+ wrapperMount(Test} />)
+
+ wrapper
+ .find('.message.empty .header')
+ .should.contain.descendants('span')
+ })
it('uses custom noResultsDescription if present', () => {
wrapperMount()