Merge pull request #2355 from Shopify/jt/choicelist-update-title-prop…

…-type

[ChoiceList] Add JSX support to the title prop

UNRELEASED.md

@@ -4,6 +4,8 @@
 
 ### Enhancements
 
+- Updated the type of the `title` prop in `ChoiceList` from `string` to `ReactNode` ([#2355](https://github.com/Shopify/polaris-react/pull/2355))
+
 ### Bug fixes
 
 ### Documentation

src/components/ChoiceList/ChoiceList.tsx

@@ -29,7 +29,7 @@ export type Choice = ChoiceDescriptor;
 
 export interface ChoiceListProps {
   /** Label for list of choices */
-  title: string;
+  title: React.ReactNode;
   /** Collection of choices */
   choices: Choice[];
   /** Collection of selected choices */

src/components/ChoiceList/tests/ChoiceList.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {ReactWrapper} from 'enzyme';
+import {mountWithApp} from 'test-utilities';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {RadioButton, Checkbox, InlineError, errorTextID} from 'components';
 import {ChoiceList, ChoiceDescriptor} from '../ChoiceList';
@@ -29,6 +30,23 @@ describe('<ChoiceList />', () => {
       );
       expect(element.find('legend').text()).toBe('My title');
     });
+
+    it('renders a legend containing JSX for the fieldset', () => {
+      const TitleComponent = () => (
+        <React.Fragment>
+          JSX <b>title</b>
+        </React.Fragment>
+      );
+
+      const element = mountWithApp(
+        <ChoiceList
+          title={<TitleComponent />}
+          selected={[]}
+          choices={choices}
+        />,
+      );
+      expect(element.find('legend')).toContainReactComponent(TitleComponent);
+    });
   });
 
   describe('choices', () => {