Merge branch 'main' into feat/filterable-multi-select

carbon-design-system · Dec 7, 2021 · aaf6ffc · aaf6ffc
2 parents 726e9d6 + 1d3e95f
commit aaf6ffc
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2645,6 +2645,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "renderSelectedItem": Object {
+        "type": "func",
+      },
       "selectedItem": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -17,6 +17,11 @@ import {
 import Dropdown from '../Dropdown';
 import DropdownSkeleton from './Dropdown.Skeleton';
 import mdx from './Dropdown.mdx';
+import {
+  ChartBubble16,
+  ChartColumnFloating16,
+  ChartVennDiagram16,
+} from '@carbon/icons-react';
 
 const items = [
   {
@@ -122,6 +127,51 @@ export const Default = () => (
     />
   </div>
 );
+export const RenderSelectedItem = () => (
+  <div style={{ width: 400 }}>
+    <Dropdown
+      id="default"
+      titleText="Dropdown label"
+      helperText="This is some helper text"
+      label="Dropdown menu options"
+      items={[
+        {
+          id: 'option-0',
+          icon: ChartColumnFloating16,
+          text: 'Column Chart',
+        },
+        {
+          id: 'option-1',
+          icon: ChartBubble16,
+          text: 'Bubble Chart',
+        },
+        {
+          id: 'option-2',
+          icon: ChartVennDiagram16,
+          text: 'Venn Diagram',
+        },
+      ]}
+      itemToString={(item) => (item ? item.text : '')}
+      itemToElement={(item) => (
+        <>
+          {React.createElement(item.icon)}
+          <span style={{ paddingLeft: '1rem', paddingBottom: '1rem' }}>
+            {item.text}
+          </span>
+        </>
+      )}
+      renderSelectedItem={(item) => (
+        <>
+          {React.createElement(item.icon)}
+          <span style={{ paddingLeft: '1rem', paddingBottom: '1rem' }}>
+            {item.text}
+          </span>
+        </>
+      )}
+      onChange={action('onChange')}
+    />
+  </div>
+);
 
 export const Inline = () => (
   <div style={{ width: 600 }}>

diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js
@@ -65,6 +65,31 @@ describe('Dropdown', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('should render selectedItem as an element', () => {
+    const wrapper = mount(
+      <Dropdown
+        {...mockProps}
+        selectedItem={{
+          id: `id-1`,
+          label: `Item 1`,
+          value: 1,
+        }}
+        renderSelectedItem={(selectedItem) => (
+          <div id="a-custom-element-for-selected-item">
+            {selectedItem.label}
+          </div>
+        )}
+      />
+    );
+    // custom element should be rendered for the selected item
+    expect(wrapper.find('#a-custom-element-for-selected-item')).toHaveLength(1);
+    // the title should use the normal itemToString method
+    expect(wrapper.find('button').instance()).toHaveAttribute(
+      'title',
+      'Item 1'
+    );
+  });
+
   describe('title', () => {
     let wrapper;
     let renderedLabel;

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -39,6 +39,7 @@ const Dropdown = React.forwardRef(function Dropdown(
     ariaLabel,
     itemToString,
     itemToElement,
+    renderSelectedItem,
     type,
     size,
     onChange,
@@ -174,7 +175,11 @@ const Dropdown = React.forwardRef(function Dropdown(
           {...toggleButtonProps}
           ref={mergeRefs(toggleButtonProps.ref, ref)}>
           <span className={`${prefix}--list-box__label`}>
-            {selectedItem ? itemToString(selectedItem) : label}
+            {selectedItem
+              ? renderSelectedItem
+                ? renderSelectedItem(selectedItem)
+                : itemToString(selectedItem)
+              : label}
           </span>
           <ListBox.MenuIcon isOpen={isOpen} translateWithId={translateWithId} />
         </button>
@@ -329,6 +334,12 @@ Dropdown.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * An optional callback to render the currently selected item as a react element instead of only
+   * as a string.
+   */
+  renderSelectedItem: PropTypes.func,
+
   /**
    * In the case you want to control the dropdown selection entirely.
    */