feat(pf4): add description to select

Author: rvsia

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

@@ -0,0 +1,4 @@
+.ddorg__pf4-component-mapper__select-option-description {
+    font-size: 12px;
+    color: rgb(106, 110, 115);
+}

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import './option.css';
+
 import { CheckIcon } from '@patternfly/react-icons';
 
 const Option = ({ item, isActive, isSelected, ...props }) => (
@@ -19,6 +21,7 @@ const Option = ({ item, isActive, isSelected, ...props }) => (
           <CheckIcon />
         </span>
       )}
+      {item.description && <div className="ddorg__pf4-component-mapper__select-option-description">{item.description}</div>}
     </button>
   </li>
 );
@@ -27,7 +30,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('.ddorg__pf4-component-mapper__select-option-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');