Retain className for EuiFormControlLayout.prepend nodes

CHANGELOG.md

@@ -16,6 +16,7 @@
 
 - Increased column width on `EuiTableHeaderCellCheckbox` to prevent `EuiCheckbox`'s focus ring from getting clipped in `EuiBasicTable` ([#2770](https://github.com/elastic/eui/pull/2770))
 - Fixed the display of `EuiButton` within `EuiControlBar` when `fill={true}` to be more consistent with other buttons ([#2781](https://github.com/elastic/eui/pull/2781))
+- Fixed `EuiFormControlLayout` from overwriting className for `prepend` nodes.  ([#2796](https://github.com/elastic/eui/pull/2796))
 
 **Deprecations**
 

src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap

@@ -276,6 +276,21 @@ exports[`EuiFormControlLayout props one prepend node is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiFormControlLayout props one prepend node is rendered with className 1`] = `
+<div
+  class="euiFormControlLayout euiFormControlLayout--group"
+>
+  <span
+    class="euiFormControlLayout__prepend myClass"
+  >
+    1
+  </span>
+  <div
+    class="euiFormControlLayout__childrenWrapper"
+  />
+</div>
+`;
+
 exports[`EuiFormControlLayout props one prepend string is rendered 1`] = `
 <div
   class="euiFormControlLayout euiFormControlLayout--group"

src/components/form/form_control_layout/form_control_layout.test.tsx

@@ -130,6 +130,14 @@ describe('EuiFormControlLayout', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('one prepend node is rendered with className', () => {
+      const component = render(
+        <EuiFormControlLayout prepend={<span className="myClass">1</span>} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('one prepend string is rendered', () => {
       const component = render(<EuiFormControlLayout prepend="1" />);
 

src/components/form/form_control_layout/form_control_layout.tsx

@@ -136,7 +136,10 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
     key: React.Key
   ) {
     return cloneElement(node, {
-      className: `euiFormControlLayout__${side}`,
+      className: classNames(
+        `euiFormControlLayout__${side}`,
+        node.props.className
+      ),
       key: key,
     });
   }