feat(Search): noResultsMessage prop can be a node (#1683)

* feat(Search): noResultsMessage prop can be a node * style(Search) Change noResultsMessage prop type to node in .ts * feat(Search): noResultsDescription prop can be a node
Semantic-Org · May 22, 2017 · 47cb1e7 · 47cb1e7
1 parent bbe5e32
commit 47cb1e7
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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(<Search results={[]} minCharacters={0} noResultsMessage='Something custom' />)
 
       wrapper
         .find('.message.empty .header')
         .should.have.text('Something custom')
     })
+    it('uses custom component for noResultsMessage', () => {
+      wrapperMount(<Search results={[]} minCharacters={0} noResultsMessage={<span>Test</span>} />)
+
+      wrapper
+        .find('.message.empty .header')
+        .should.contain.descendants('span')
+    })
     it('uses custom noResultsDescription if present', () => {
       wrapperMount(<Search results={[]} minCharacters={0} noResultsDescription='Something custom' />)