Merge pull request #1114 from rvsia/addDescriptionToPFSelect

Add description to pf select

Author: rvsia

packages/pf4-component-mapper/src/select/select/option.js

@@ -19,6 +19,7 @@ const Option = ({ item, isActive, isSelected, ...props }) => (
           <CheckIcon />
         </span>
       )}
+      {item.description && <div className="pf-c-select__menu-item-description">{item.description}</div>}
     </button>
   </li>
 );
@@ -27,7 +28,8 @@ Option.propTypes = {
   item: PropTypes.shape({
     label: PropTypes.node,
     isDisabled: PropTypes.bool,
-    disabled: PropTypes.bool
+    disabled: PropTypes.bool,
+    description: PropTypes.node
   }).isRequired,
   isActive: PropTypes.bool,
   isSelected: PropTypes.bool,

packages/pf4-component-mapper/src/tests/select/select.test.js

@@ -8,6 +8,7 @@ import { act } from 'react-dom/test-utils';
 import ValueContainer from '../../select/select/value-container';
 import FormTemplate from '../../form-template';
 import componentMapper from '../../component-mapper';
+import Option from '../../select/select/option';
 
 describe('<Select />', () => {
   let initialProps;
@@ -75,6 +76,42 @@ describe('<Select />', () => {
     ).toEqual('Translated');
   });
 
+  it('should render description', async () => {
+    const wrapper = mount(
+      <FormRenderer
+        onSubmit={jest.fn}
+        FormTemplate={FormTemplate}
+        componentMapper={componentMapper}
+        schema={{
+          fields: [
+            {
+              component: componentTypes.SELECT,
+              name: 'select',
+              options: [
+                {
+                  label: <h1>Translated</h1>,
+                  value: 'translated',
+                  description: 'some description'
+                }
+              ]
+            }
+          ]
+        }}
+      />
+    );
+
+    expect(wrapper.find(ValueContainer).find('h1')).toHaveLength(0);
+
+    wrapper.find('.pf-c-select__toggle').simulate('click');
+
+    expect(
+      wrapper
+        .find(Option)
+        .find('.pf-c-select__menu-item-description')
+        .text()
+    ).toEqual('some description');
+  });
+
   it('should return single simple value', async () => {
     const wrapper = mount(<Select {...initialProps} />);
     wrapper.find('.pf-c-select__toggle').simulate('click');

packages/react-renderer-demo/src/doc-components/examples-texts/pf4/select.md

@@ -31,6 +31,16 @@ const asyncLoadOptions = (searchValue) => new Promise(resolve => setTimeout(() =
 }, 2000));
 ```
 
+## Description
+
+PF4 select can render a description for each option. Just add a `description` attribute to its object (can be `React.node`):
+
+```jsx
+options: [
+  { value: 'value', label: 'Some label', description: 'Some description' }
+]
+```
+
 import SelectCommon from '../select.md';
 
 <SelectCommon/>